corrupshun Posted November 11, 2009 Share Posted November 11, 2009 Don't hate because I didn't use javascript... (which would be the solution, but I would like to know how to do this in css) CSS: body { background-color: royalblue; font-family: verdana, arial; background-image: url(img/bg.gif); } #page { min-width: 800px; width: 100%; height: auto; background-color: blue; float: left; } #preload { display: none; } #banner { min-width: 800px; width: 100%; height: 100px; background-color: #491519; background-image: url(img/banner.gif); background-position: center center; background-repeat: no-repeat; float: left; } #nav { min-width: 800px; width: 100%; height: 30px; background-color: black; text-align: center; border-top: 1px solid white; border-bottom: 1px solid white; float: left; } .button { width: 100px; height: 30px; background-color: #491519; color: white; float: left; border-right: 1px solid white; } .button:hover { background-color: #3d090d; } #body { min-width: 800px; width: 100%; min-height: 250px; height: auto; background-color: black; float: left; } .h { font-size: 40px; color: #0078ff; } .p { text-indent: 20px; color: white; margin: 10px; line-height: 1.3em; } #images { min-width: 800px; width: 100%; height: 179px; background-color: black; text-align: center; border-top: 1px solid white; border-bottom: 1px solid white; float: left; } #images .step1 { height: 159px; width: 178px; margin: 10px 9px 10px 9px; background-image: url(img/step1.gif); background-color: white; float: left; } #images .step1:hover { background-image: url(img/step2.gif); } #images .step2 { height: 159px; width: 178px; margin: 10px 9px 10px 9px; background-image: url(img/step3.gif); background-color: white; float: left; } #images .step2:hover { background-image: url(img/step4.gif); } #images .step3 { height: 159px; width: 178px; margin: 10px 9px 10px 9px; background-image: url(img/step5.gif); background-color: white; float: left; } #images .step3:hover { background-image: url(img/step6.gif); } #images .step4 { height: 159px; width: 178px; margin: 10px 9px 10px 9px; background-image: url(img/step7.gif); background-color: white; float: left; } #images .step4:hover { background-image: url(img/step8.gif); } #copy { min-width: 800px; width: 100%; height: 25px; background-color: black; color: white; text-align: center; float: left; } HTML: <!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" /> <link href="css.css" rel="stylesheet" type="text/css" /> <title>Title of Index Page</title> </head> <body> <div id="preload"> <img src="img/step2.gif" /> <img src="img/step4.gif" /> <img src="img/step6.gif" /> <img src="img/step8.gif" /> </div> <div id="page"> <div id="banner"></div> <div id="nav"> <div class="button">Home</div> <div class="button">Signup</div> <div class="button">Proof</div> <div class="button">Prizes</div> <div class="button">FAQ</div> </div> <div id="body"> <div class="h">Header</div> <div class="p"> This is the general place I type however I feel. </div> </div> <div id="images"> <div class="step4"></div> <div class="step3"></div> <div class="step2"></div> <div class="step1"></div> </div><!--images--> <div id="copy"> © 2009 </div> </div> </body> </html> If you make the page you will see that step1 2 and 3 are floated to the left.. I can't seem to center them.. How can I while still keeping them floated? (if they're not floated it don't work) Quote Link to comment Share on other sites More sharing options...
haku Posted November 11, 2009 Share Posted November 11, 2009 The only way to do it is to give their container a fixed width, and center that. Floated elements can't be centered by themselves. Quote Link to comment Share on other sites More sharing options...
corrupshun Posted November 11, 2009 Author Share Posted November 11, 2009 so, your saying because I have 100% width I can't center it? I've heard some people telling me to put text-align: center; on all parent divs or adding margin: 0 auto 0 auto; to the children There has to be a way Quote Link to comment Share on other sites More sharing options...
haku Posted November 11, 2009 Share Posted November 11, 2009 text-align center doesn't work because you have taken the elements out of the document flow by floating them, and text-align center only works on elements that are still in the document flow. Auto margins will not work on floated elements. Again, floated elements cannot be centered by themselves. You can only center their containing element. Quote Link to comment Share on other sites More sharing options...
corrupshun Posted November 11, 2009 Author Share Posted November 11, 2009 do you see another method i could use by any chance? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.