I have a container tag that will not float along with the images in my photo gallery. <div id= "wrapper"> <di id ="navigaton> Navigation </div> <div id="banner"> banner </div> <div class = "figure"> image </div> <div id = "figure"> image </div> </div> Ok. I have created width of my wrapper tag to be 740 px wide and each image is 200by200. I have created a class to float each image to the left with padding on the left and bottom margin. I place the image in one row until there's not enough room, and the follwing image will drop down to the next row, but the wrapper will not move down with the image. I know this has something to do with floating but I'm not sure what I need to do to fix this issue.
Without the live data I can't make a full evaluation, but: You don't seem to be CLEARING your floats for the footer. also, floats are removed from flow, which is why your wrapper isn't expanding. If you were to make the wrapper float, or add overflow:auto one of those MAY take care of your problem. I would also suggest a few other changes: You're footer's got too many containers - unless that's being used for extra styling elements, I would simplify that footer to just: <ul id="footer"> <li><a href="../index.html" >Home</a></li> <li><a href="bio.html" >Bio</a></li> <li><a href="resume.html" >Resume</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="contact.html" >Contact</a></li> </ul> Code (markup): You are adding onclick to a non-anchor, meaning non javascript browsers can't use your page. I'd suggest changing those to: <div class="figures"> <a href="absolut.html" onclick="window.open('absolut.html','','width=620,height=740'); return false;"> <img src="../images/hunk.jpg" width="200" height="200" alt="absolut" /> </a> <a href="wet_ones.html" onclick="window.open('wet_ones.html','','width=585,height=740'); return false;"> <img src="../images/wet_one.jpg" width="200" height="200" alt="wet one" /> </a> <a href="extreme_rubby.jpg" onclick="window.open('../images/extreme_rugby.jpg','','width=640,height=800')" > <img src="../images/rugby_thumb.jpg" width="200" height="200" alt="rugby" /> </a> <a href="face_maks" onclick="window.open('face_maks.html','','width=640,height=810'); return false;"> <img src="../images/face_mask_thumb.jpg" width="200" height="200" alt="face mask" /> </a> <a href="hockey.html" onclick="window.open('hockey.html','','width=600,height=820'); return false;"> <img src="../images/hocky_thumb.jpg" width="200" height="200" alt="hockey" /> </a> <a href="jabre.html" onclick="window.open('jabre.html','','width=640,height=810'); return false;"> <img src="../images/Jabre_thumb.jpg" width="200" height="200" alt="Jabre" /> </a> </div> Code (markup): Notice I grouped them inside a classed div and removed the classes on them too - if you have a bunch of elements that are styled the same in a row, group them and put the class on the group, save yourself some bytes... Just be sure that your openwindow method returns false or you'll get a double-open. There was no reason for the DIV's around them I could fathom, but an anchor means people with javascript off aren't left out in the cold. In general you've got a bit of a train wreck code-wise... I'd suggest indenting the code in a sensible manner, and VALIDATING. I'd also be tempted to axe most of that javascript because THIS: function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } is a /FAIL/ hard.
THanks you ver much. I have added my link for your full evaluation. I'm having other problems now since I've added the overflow:auto tag. (1) My header navigation is off on all my subpages. (2) On my Gallery page, I don't see my flash header I definately think the overflow tag is what I need, but not sure if it caused other problems. I was'nt able to add my weblink here because I'm a newbie to this forum. I have sent it to your email address.
Not only that, but you're using the same unique ID value more than once in the same page. I suggest you change id="figure" to class="figure" then change #figure in your stylesheet to .figure instead (dot figure, no space). Bear in mind I didn't look at your attachments, just what you provided in the post.
Thanks. I think I have my images aligned the way I want them on my gallery page. However, my navigation bar at the top of all of my pages is not aligned correctly. The CSS buttons are supposed to be next to eachother without all the space between them. I had them correct once but I'm having a hard time figuring out what I did to change them. I created the buttons in Dreamweaver 8 and about a few weeks ago I download Adobe CS3 and when I viewed the local file, they navigation was not the same anymore. PLEASE HELP! I'm on a deadline and have to have this site up and running by Wednesday. Any help anyone could give me, I would be greatly appreciative. My website is stanbrowndesigns.com