- This topic is empty.
-
AuthorPosts
-
September 1, 2011 at 10:33 am #34175djpicParticipant
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.Thanks.
September 1, 2011 at 7:24 pm #86146joshuanhibbertMemberJust 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.
September 2, 2011 at 12:49 am #86164djpicParticipantI 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?
September 2, 2011 at 1:00 am #86165joshuanhibbertMemberThe 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.
September 2, 2011 at 1:05 am #86166djpicParticipantAlso, 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
September 2, 2011 at 1:09 am #86167djpicParticipantI 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!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.