Layout with aligned three bars background

[djpic]

Ok, I want to know if this is the most accepted / best way to complete this layout? I have three “background” sections I guess you can call it that are to be aligned with the “main” sections. The two background sections are located in a

tag (top & mid). The third is just the master body background which will cover anything over the height of the first two. Within the top & mid there are (or should probably be

). Those will contain the main information. Tell me what you think as I would like it to work on all browsers of course.

View current HTML & CSS

Thanks.

[joshuanhibbert]

Just use a 1px wide horizontally repeating image on the body (that lines up with the header, nav and content colors) and get rid of those extra elements. You shouldn’t be using divs or spans for the styling of your site.

[djpic]

I guess you would make the background not repeat on the “y” axis and are you pretty much guaranteed that it will look the same in most browsers (Firefox, Safari, IE 7+)?

BTW…did update the site, now the elements are centered. I used the following CSS to center the

elements:

margin: 0px auto;

Any thoughts on that?

[joshuanhibbert]

The easiest way to center your webpage would be to give the body element the width of your elements and then center it using the code you mentioned: margin: 0 auto;

That way you don’t have to declare width’s for the header, footer or content divs, they will naturally take up the full width of the body.

You would then set your repeating background image on the html element.

[djpic]

Also, I would like to say, I think it pretty impressive that the layout currently uses NO IMAGES. I really wanted to see if I could pull it off and it fairly close to the AI design. The final product will include images of course for the menu items (different non-browswer friendly font), logo, and borders (shadow effect). With that one little piece of info “1px wide image,” I could do the same with the body exempt vertically to show the glow / shadow.

I am slowing moving from a table layouts to CSS layouts. Takes a bit of getting used to. Feel like I am back in the day when not all browsers supported all HTML tags correctly. From when first came out!

[djpic]

I never really thought of applying a width to the body element before. I cleaned up the elements and CSS. I will work on adding the images to the layout tomorrow.

Thank you for the help!

[Author]

Posts