November 2, 200917 yr I have a div with 3 images horizontally in a row. The columns beneath this div are fluid and so when I resize the page they resize nicely, although now the images move about stacking on top of each other when i make the page smaller which looks messy. How can I resolve this..? I don't think it's just a case of position:fixed as I've attempted this already :S
November 2, 200917 yr You might need to add a minnimum height/width the css which will stop the containing div shrinking at the point when the images start stacking. Or you could add a % height/width for the images so that they expand and contract with the rest of the site? depends on the layout. post a link if you've got one then we can see whats going down!
November 2, 200917 yr Author Brilliant, love you! I'll stick with the min-width, hope that works on IE too? Other thing I'm having major issues with is my navigation bar... Using the CSS Sprites method, don't quite know what's going wrong but my navigation bar (within the header) won't align with the bottom of the header, and for some reason there is now a giant space between this div and the next (div id="image")! Code: <div id="header"><h1></h1> <ul id="nav"> <li id="list1"><a href="#"><span>Home</span></a></li> <li id="list2"><a href="#"><span>About Us</span></a></li> <li id="list3"><a href="#"><span>Curriculum</span></a></li> <li id="list4"><a href="#"><span>Therapies</span></a></li> <li id="list5"><a href="#"><span>Term Dates</span></a></li> <li id="list6"><a href="#"><span>Gallery</span></a></li> <li id="list7"><a href="#"><span>Articles</span></a></li> <li id="list8"><a href="#"><span>Contact Us</span></a></li> <li id="list9"><a href="#"><span>Forum</span></a></li> </ul> </div> </div> <div id="image"> </div> CSS: #header { height:174px; background-image: url("headercontinue.png"); background-repeat:repeat-x; border-bottom:#FFC solid 6px; padding-top:15px; padding-left:15px; overflow:auto; } #nav { margin:0px; padding:0px; height:37px; width:806px; background-image: url("nav.png"); background-repeat:no-repeat; } #nav span { display:none; } #nav li { list-style-type: none; float:left; } #nav a { height:37px; display:block; } #list1 { width:77px; } #list2 { width:86px; } #list3 { width:105px; } #list4 { width:96px; } #list5 { width:104px; } #list6 { width:83px; } #list7 { width:83px; } #list8 { width:101px; } #list9 { width:71px; } #list1 a:hover { background: url(nav.png) 0px -37px no-repeat; } #list2 a:hover { background: url(nav.png) -77px -37px no-repeat; } #list3 a:hover { background: url(nav.png) -163px -37px no-repeat; } #list4 a:hover { background: url(nav.png) -268px -37px no-repeat; } #list5 a:hover { background: url(nav.png) -364px -37px no-repeat; } #list6 a:hover { background: url(nav.png) -468px -37px no-repeat; } #list7 a:hover { background: url(nav.png) -551px -37px no-repeat; } #list8 a:hover { background: url(nav.png) -634px -37px no-repeat; } #list9 a:hover { background: url(nav.png) -735px -37px no-repeat; } #image { height:160px; min-width:1002px; background-image:url(boysgradient.png); background-repeat:repeat-x; text-align:center; margin-bottom:10px; padding:0px; }
November 2, 200917 yr Its difficult to tell just from the code (be good if you have a working page or a screenshot of the layout) But I from what your saying I'm guessing you want the link at the bottom of the header div and the image at the top? If thats right then all you have to do is move the img tag to above the <ul id=nav> tag. I've probably miss understood what you meant!
November 2, 200917 yr Author Its difficult to tell just from the code (be good if you have a working page or a screenshot of the layout) But I from what your saying I'm guessing you want the link at the bottom of the header div and the image at the top? If thats right then all you have to do is move the img tag to above the <ul id=nav> tag. I've probably miss understood what you meant! kinda misunderstood me but my fault entirely! as you can see the navigation bar in my header is meant to sit slightly lower down.. and now there is a huge gaping space between this header div and my other div, called 'image' which has some pictures in it and you cannot see on screen as its so far below! Snapshot 2009-11-02 21-02-17.tiff
November 3, 200917 yr Aha! so I think you need to get rid of the default margins you get on a ul tag so just add this to your CSS. ul { margin:0; padding:0; } If this then causes more problems you might have to mess around with the margin and padding amounts. Should get you there though
November 3, 200917 yr Hi Alexandra, let's try and sort this out... Have you given the entire code here by the way? <div id="header"><h1></h1> hmmm, what's with the empty h1? Pop your title in it and give it position: absolute; to get it out the flow for now. It might be that which is affecting your nav position. If all you have in the header is h1 and your nav, then after doing the above remove the padding from your header and give your #nav a top margin equal to the height of the #header minus the height of the #nav. That should position the #nav at the bottom of the #header. In your #nav you've got display:none for the links - this isn't good practice as the links won't be accessible to anyone with a screen reader or no images. Either get rid of your <spans> and add text-indent: -9999px to the links, or for even better accessibility check out the empty <span> tag solution here. As for the big gap between the nav and your image div - there seems to be a closing </div> that has no opening <div> just before your #image div. Maybe that's causing it as I can't see any other reason from the code you've given. Hope that helps.
November 3, 200917 yr Author Tobo, thank you so much for your help - the UL thing didn't work though but I've somehow managed to align my navbar Hi Mr P! Thanks for the helpful suggestions, I will take on board your advice for making the links more accessible. I did not post the entire code earlier just the necessary bits (though now I have!). I've used the H1 tags possibly a bit cheekily for my header image in the CSS which is why it is empty. I managed to get rid of all that space too and somehow positioned my navbar but not in the way you suggested, very curious. Though now I have gotten myself into a few more problems whwen I resize, that require tweeking! I have attached some images blanking out the sensitive information. The first is how my layout looks normally. The second shows how when I resize the page, I get scroll bars in my header, and secondly the navigation box gets cut off rather than shrinking even though the width is in percentages... The third shows how my columns run into my footer, I want a slight gap of maybe 10px or so.. my margin-top:50px; above the footer doesn't seem to stop this happening. Anyone who has the patience for this is a saviour! Full Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style type="text/css"> @import url(css.css); </style> </head> <body> <div id="container"> <div id="header"><h1></h1> <ul id="nav"> <li id="list1"><a href="#"><span>Home</span></a></li> <li id="list2"><a href="#"><span>About Us</span></a></li> <li id="list3"><a href="#"><span>Curriculum</span></a></li> <li id="list4"><a href="#"><span>Therapies</span></a></li> <li id="list5"><a href="#"><span>Term Dates</span></a></li> <li id="list6"><a href="#"><span>Gallery</span></a></li> <li id="list7"><a href="#"><span>Articles</span></a></li> <li id="list8"><a href="#"><span>Contact Us</span></a></li> <li id="list9"><a href="#"><span>Forum</span></a></li> </ul> </div> <div id="image"></div> <div id="leftcol"> </div> <div id="midcol"><h3>Middle Column</H3><p>text...</p> </div> <div id="rightcol"><h3>Right Column</h3><p>text...</p> </div> </div> <div id="footer"><img src="footer.png" height="44" width="623" /> </div> </body> </html> Full CSS: body { font:100% Verdana, Arial, Helvetica, sans-serif; background:#4f75e0; text-align:center; color:#121212; margin:0px; padding:0px; } #container { width:100%; height:810px; margin:0px; padding:0px; } h1 { color:#f69; height:129px; font-weight:bold; text-align:center; margin:4px; padding:0px; background-image: url(headerimage.png); background-repeat: no-repeat; } h3 { color:#f69; font-weight:bold; text-align:center; padding:0px; margin:0px; } p { color:#fff; margin:0px; padding:0px; } #header { height:174px; background-image: url("headercontinue.png"); background-repeat:repeat-x; border-bottom:#FFC solid 6px; padding-top:15px; padding-left:15px; overflow:auto; } #nav { margin:0px; padding:0px; height:37px; width:806px; background-image: url("nav.png"); background-repeat:no-repeat; } #nav span { display:none; } #nav li { list-style-type: none; float:left; } #nav a { height:37px; display:block; } #list1 { width:77px; } #list2 { width:86px; } #list3 { width:105px; } #list4 { width:96px; } #list5 { width:104px; } #list6 { width:83px; } #list7 { width:83px; } #list8 { width:101px; } #list9 { width:71px; } #list1 a:hover { background: url(nav.png) 0px -37px no-repeat; } #list2 a:hover { background: url(nav.png) -77px -37px no-repeat; } #list3 a:hover { background: url(nav.png) -163px -37px no-repeat; } #list4 a:hover { background: url(nav.png) -268px -37px no-repeat; } #list5 a:hover { background: url(nav.png) -364px -37px no-repeat; } #list6 a:hover { background: url(nav.png) -468px -37px no-repeat; } #list7 a:hover { background: url(nav.png) -551px -37px no-repeat; } #list8 a:hover { background: url(nav.png) -634px -37px no-repeat; } #list9 a:hover { background: url(nav.png) -735px -37px no-repeat; } #image { height:160px; min-width:1002px; text-align:center; margin-bottom:10px; padding:0px; } #leftcol { width:23.75%; height:413px; background-image:url(navigation.png); background-repeat:no-repeat; float:left; padding:0px; margin-right:1.25%; } #midcol { width:50%; background:#FFFFCC; float:left; padding:0px; } #rightcol { width:23.75%; background:#FFFFCC; float:right; padding:0px; margin-left:1.25%; } #footer { width:100%; height:44px; background:#191919; margin-top:50px; padding:0px; position-bottom:0px; clear:both; }
November 3, 200917 yr No worries Alexandra, I think this should solve your footer margin problem... Floated divs kind of exist in another dimension so your footer can't work out how far away it is from those columns above - only that it has cleared them. So you need to give its margin a non-floated reference point from which to start. There's a little hack with the <br /> tag you can use: </div> <br class="clearMe" /> <div id="footer"><img src="footer.png" height="44" width="623" /> br.clearMe { clear:both; display:block; height:1px; margin:-1px 0 0 0 } Navigation: the navigation box gets cut off rather than shrinking even though the width is in percentages... This has a set width of 806px, so it's not in %. Add 15px left padding from the #header to that and you have a total width of 821px in your header - so as soon as you reduce the screen width to less than that you'll get a horizontal scroll bar. Do you have any text in your h1 or is it empty as you've written here? The vertical scroll bar might be due to that text running onto another line. Because you've declared a height for the header, the scroll bar will appear when the content exceeds that height. Also, do you need to declare a height on the container? If you're going for a liquid layout then the content of those columns will exceed it at some point. Let us know how you get on.
November 3, 200917 yr Author Ok so the footer hack worked perfectly. Fantastic. When I was talking about the 'navigation box' getting cut off rather than shrinking I meant the box in my left column (you can see the top right rounded corner gets cut off). Bit confused about what to do still about the header scrollbars... there is no text in H1 just an image, how can I get rid of the scrollbar? I don't mind if the scroll bar is on the bottom of the page but I definitely don't want it on my header!! Thanks for your patience!
November 3, 200917 yr Hi again, if the minimum width you want the site to be is 1002px (the width of your image div) then just put that as a min-width on the #container then change overflow: auto; to overflow: hidden; in your #header. Are you hiding your h1 image from us? If it is in your html (not in your css as a background image) then you'll get the scrollbars as soon as the width of that image exceeds the width of the header. As for the corner getting cut off, you can't use a fixed width background image and expect it to change size with a percentage width column. You need to use the sliding doors technique for that.
November 3, 200917 yr Author that worked, just used the width of my header image which was 806px. I covered over the header image which is just the name of the school i'm doing the site for, it's just in my css so haven't removed it from the html.. will have a read of that article! think that's it for now =)
Create an account or sign in to comment