need help understanding div order, placement

[redhare]

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]

[redhare]

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

[redhare]

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?

[AshtonSanders]

"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.

[TLaude]

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".

[soap]

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

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

[redhare]

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?

[dsbente]

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?

[redhare]

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

[TLaude]

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.

[redhare]

Code:

log in

logo goes here

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;
}

[redhare]

thats corrected but i still don’t see the footer

[TLaude]

Two things I noticed.

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

[redhare]

float left on which parts?

[redhare]

Code:

log in

logo goes here

[Author]

Posts