Grow your CSS skills. Land your dream job.

need help understanding div order, placement

  • # October 11, 2009 at 5:22 pm

    here is my test site.. test.reef-solutions.com/index.html

    this is what i’m trying to achieve

    generic mock up of the layout
    [img]http://i729.photobucket.com/albums/ww291/bluenassarius2/sitedesign.jpg[/img]

    # October 11, 2009 at 5:23 pm

    http://i729.photobucket.com/albums/ww29 … design.jpg

    # October 11, 2009 at 5:28 pm

    do i attack this by

    making a div for the very top section register, login?
    make a div for the site logo/advertisement?
    make a div for navigation menu?

    make a div that will contain with 2 div’s.. 1 to store slider, ebay, and the other to store featured give away and local events?

    that is what i’m thinking. can someone help me find the light to make this happen?

    # October 12, 2009 at 2:08 am
    "redhare" wrote:
    do i attack this by

    making a div for the very top section register, login?
    make a div for the site logo/advertisement?
    make a div for navigation menu?

    Lucky for you, that’s kind of like asking what section of a car to start washing; front or back? There’s millions of ways to create this layout, and the only "that’s wrong" you’ll hear is if it doesn’t work in all browsers.

    That being said, here’s my basic thoughts:

    Create and style divs for all of the biggest rectangles on the page. (header, leftcontent, rightcontent)
    Inside those main divs, create the smaller sections…. repeat until everything is in it’s place.

    # October 12, 2009 at 3:45 pm

    Here is how I would do the markup of the div’s.

    Code:


    As you can see, it’s very simple. There are many, many ways you could go about doing this. Just look at your picture, and put it into div’s. Remember, use the HTML for the markup, and rely on your CSS to give your page the "looks".

    # October 13, 2009 at 2:41 am

    Typically you want to build from top to bottom, left to right.

    Unless you’re doing weird positioning things, which you aren’t.

    # October 13, 2009 at 2:47 am

    thanks for all the support guys. i worked on the code and it looks normal now.. i haven’t upped it to my site yet. i’ll do it after it starts to take shape.

    i’m thinking of combining all the stuff on the left side in one and the right as a side bar? what do you guys think?

    # October 13, 2009 at 4:16 am

    thanks for that…
    those pointers are highly appreciated…

    as a beginner, got something to ask related to this…

    how can i work on a particular design where it will fit on both 1024×786 and the size of a laptop screen that the position won’t be affected?

    # October 13, 2009 at 12:47 pm

    i made the 4 boxes under the header float left, now the footer won’t show. i’m not sure how to remedy this. can someone take a look? test.reef-solutions.com

    # October 13, 2009 at 12:54 pm

    I don’t think you will want to make the right boxes float: left.

    Post the current CSS & HTML Markup you have so we can point you in the right direction.

    # October 13, 2009 at 1:00 pm
    Code:
    log in

    Code:
    /*
    Reef-Solutions CSS Document
    by Sam Tran

    http://www.reef-solutions.com

    */

    /*—– global styles —–*/

    body {
    margin: 0;
    padding: 0;

    }

    p, h1, h2, h3, h4, h5, h6, li {
    margin: 1ex 1em;
    }

    div#outerDiv {
    position: relative;
    width: 1024px;
    margin: 0 auto;
    background-color:#dfdfdf;
    }

    div#regbar {
    height: 15px;
    background-color:black;

    }

    div#header {
    height: 150px;
    background-color:#164a4d;
    }

    div#leaderAD {
    height: 75px;
    width: 468px;
    background-color:brown;
    margin: 20px 15px 0 0;
    }

    div#glider {
    height: 400px;
    width: 600px;
    background-color:black;
    float: left;
    }

    div#forumpromo {
    height: 400px;
    width: 424px;
    background-color:blue;
    float: left;
    }

    div#ebay {
    height: 400px;
    width: 600px;
    background-color:pink;
    float: left;
    }

    div#caption {
    height: 400px;
    width: 424px;
    background-color:grey;
    float: left;
    }

    div#footer {
    height: 250px;
    width: 1024px;
    background-color:black;
    }

    # October 13, 2009 at 2:27 pm

    You have messed up the div closing comment on leaderAD which is causing a chain reaction on the rest of the closing divs.

    Code:
    # October 13, 2009 at 5:30 pm

    thats corrected but i still don’t see the footer

    # October 13, 2009 at 5:41 pm

    Two things I noticed.

    1. Your not closing your outerDiv div section.
    2. If you ‘float: left’ your footer it will work.

    # October 13, 2009 at 6:15 pm

    float left on which parts?

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".