Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS newbie needs help

    Hello,

    I'm trying to teach myself CSS in a hurry because I need to set up a website for my photography portfolio. I have a book called "CSS: The Missing Manual" which is helpful. However, I'm having trouble with positioning and layout. Specifically, I don't understand when to use floats and when to use relative & absolute positioning.

    I've attached a PNG of the layout I'm going for. It's very simple: an 800x600 div with a border that will contain both the images (Flash) and text (project statements and "about me" content). Above that div, I'd like the name of my site (CDK Arts) on the left, and the navigation menu on the right.

    One more thing: I'd like to set it up so that any text added inside of the div (using the <p> tag?) is justified and centered both horizontally and vertically in the box.

    If someone could help me with the CSS for this layout I'd be very grateful. I imagine it's quite simple, but I cannot get my head around it.

    Thanks in advance,
    Chris


  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Specifically, I don't understand when to use floats and when to use relative & absolute positioning.
    Stay away from absolute positioning and floats unless you fully understand what they do and how they affect the rest of the content

    One more thing: I'd like to set it up so that any text added inside of the div (using the <p> tag?) is justified and centered both horizontally and vertically in the box.

    If someone could help me with the CSS for this layout I'd be very grateful. I imagine it's quite simple, but I cannot get my head around it.
    Ok...so do you have a link? Do you have any coding done yet? How do you want us to help you? Surely you dont expect someone to code the website via the picture for free?

    You need to show us something that we can work with and help you with.

    Regards,

    Drew

  • #3
    Regular Coder
    Join Date
    May 2008
    Location
    Michigan
    Posts
    216
    Thanks
    10
    Thanked 1 Time in 1 Post
    I'm glad you show enough interest to buy a book, however, text can only get you so far. A lot to do with coding and CSS comes from experience. I have 6 years and I'm still learning new techniques. Experiment by maybe finding a site that provides free layouts coded using DIVs and maybe take a look at it. Also, like FWDrew stated, surely you don't expect someone to code your layout free. I would search for a company that could do it for cheap. I know a few if you would like to know.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    The three url's in my signature containa wealth of info. Especially Sources.

    Sources - Floats - IEBugs & Oddities,

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks to everyone for your replies. No, I don't expect anyone to code the site for free. I'm just hoping for some direction on how to do this cleanly and efficiently.

    Actually, the graphic I sent was a screenshot of a local HTML file. I've been able to get it looking the way I want using CSS, but it's kind of "hotwired". I don't really know what I'm doing, but somehow I've been able to get it looking right. The problem is that I don't fully understand how I've done it, so any code I need to add in the future may be resting on shaky foundations.

    Here's the HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Home</title>
    <link rel = "stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="http://cdkarts.com/js/swfobject.js""></script>

    </head>

    <body>

    <div id="wrapper">
    <ul id="banner">
    <li><a href="index.html">CDK Arts</a></li>
    </ul>
    <ul id="imagenav">
    <li><span class="projectname">Project: "Choice"</span></li>
    <li><a href="choice.html">Statement </a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="about.html">About</a></li>
    </ul>


    <div id="flashcontent">
    <embed style="width:800px; height:640px;" class="viewbook_presentation" type="application/x-shockwave-flash" src="http://embed.viewbook.com/28139/3a558c50d389c2" flashvars=""></embed></div>

    </body>
    </html>


    And here's the relevant CSS:

    body {
    background:#ffffff;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    font-family: verdanda;
    }

    a:link, a:visited {
    padding-bottom: 1px;
    color: #31363e;
    text-decoration: none;
    }

    a:hover {
    padding-bottom: 0;
    color: #dddddd;
    }

    #wrapper {
    margin: 0 auto;
    top: 60px;
    width: 800px;
    position: relative;
    }

    #banner {
    font-size: .75em;
    font-weight: bold;
    font-family: Arial, Helvetica;
    text-transform: uppercase;
    list-style-type: none;
    position: relative;
    left: -39px;
    top: 27px;
    }

    #imagenav {

    top:-18px;
    list-style: none;
    font-size: .7em;
    position: relative;
    float:right;
    font-family: Arial, Helvetica;
    font-weight: 700;
    }

    #imagenav li {
    display: inline;
    color: #70757e;
    letter-spacing: .06em;
    padding-left: 8px;
    text-transform: uppercase;

    }

    #imagenav li a {
    border-left: 1px dotted #858c97;
    padding: 0 6px 0 8px;
    }

    p {
    position:relative;
    width: 400px;
    line-height: 130%;
    font-family: Arial, Helvetica;
    font-size: .72em;
    color: #858c97;
    }

    #flashcontent {
    clear: both;
    position: relative;
    border: solid thin #666666;
    width: 800px;
    height: 640px;
    top:-19px
    }

    #flashcontent p {
    text-align: justify;
    padding-left: 200px;
    padding-right: 200px;
    top: 180px;
    position: relative;
    line-height: 140%;

    }


    So, to be more specific about my questions:

    1) Am I using the correct method to position the banner (CDK Arts), navigation bar and flashcontent div as they currently appear?

    2) How can I position a text box inside of the flashcontent div so that it is centered both horizontally and vertically?

    Thanks again for your help!

  • #6
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    One more question

    I forgot to ask this question:

    I'm building a text-based menu of projects inside of the flashcontent div. Ideally, I'd like to set it up so that when the viewer hovers/rolls-over a link, the picture displayed to the right changes.

    I'm guessing this is something I would set up with Flash, but I wanted to see if there's a way I can do it with CSS first. I know even less about Flash than I do about CSS .

    Here's a picture to give you an idea what I mean. (Right now, the graphic is positioned correctly but doesn't change upon rollover).

    Last edited by switters; 05-10-2008 at 05:24 PM.

  • #7
    New to the CF scene
    Join Date
    May 2008
    Location
    Des Moines, IA
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up CSS Image Rollovers

    Hi Switter,

    Regarding your last question (about image rollovers), it's entirely doable with CSS. I won't go into details here (because the venerable Eric Meyers has already done all of the busywork), but you can find a demo and explanation of the technique here:

    http://meyerweb.com/eric/css/edge/popups/demo2.html

    Roll over the links on the left to see it in action, then read through his explanation to see how it's done.

    -Rob

  • #8
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the tips everyone!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •