- This topic is empty.
-
AuthorPosts
-
July 12, 2009 at 4:42 pm #25437
blackburd
MemberPage without the middle section:
http://arholemasters.com/damnit/brownstencil.htmlWorking example of the problem:
http://arholemasters.com/test9/brownstencil.htmlI think it’s fairly obvious what I’m trying to do here. The grassy background goes behind the middle box. The logo and the top of the nav bar is transparent and it all works until I add the middle section with a background.
I want the middle section to have a background image that is repeated along the y axis, expanding itself out to the size of the browser (or more if there is more text). When I add the middle section and give it a background the image grows UP! instead of down, outside of the div box that I made for it. I don’t even see how that is possible since it is obviously outside the box. What the heck am I doing wrong? Also, why is there a space between the main body and the footer?
Is the image that I want to repeat. If I take it out of the background image tag and have no background image then the header and footer are great.
My wrapper:
Code:div.maincontentwrapper {
background-image:url(images/mainback.png);
margin: 0 auto;
height:inherit;
width: 920px;}
I have this wrapper for the background image and then I have another wrapper inside of it to control the text.
Thanks for looking,
– CEJuly 12, 2009 at 4:54 pm #60556blackburd
MemberAdding this after my header wrapper seems to solve the problem:
Code:I’m not sure what it does but meh ok.
Now I just need to get the spaces fixed.
July 12, 2009 at 5:07 pm #60558apostrophe
ParticipantYou have a couple of mismatched div tags in there http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Farholemasters.com%2Ftest9%2Fbrownstencil.html
As for the gap, it’s always best to start with a reset, now you are getting the browsers default 10px top and bottom margins on paragraphs.
Add this for now:Code:p {
margin: 0;
}Also it’s always a good idea to tell the browser exactly what you want to repeat and where:
Code:div.maincontentwrapper {
background-image:url(images/mainback.png) repeat-y 0 0;
margin: 0 auto;
height:inherit;
width: 920px;}
July 12, 2009 at 5:16 pm #60560blackburd
MemberThank you very much, everything is working now and it validates. I’ve been banging my head on this one for a bit now. I’ve learned alot in the last few days. I used to code everything in tables and this actually makes things so much better.
-ce.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.