qcom Posted March 9, 2010 Share Posted March 9, 2010 Hello everyone, I have the following source code, and I would like to center the entire document so that it appears centered on most of the current browsers:Here is my HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link href="finalboss.css" rel="stylesheet" type="text/css"><style type="text/css"><!--.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}.style2 {color: #FF0000}.style7 {font-size: 12px}--></style></head><body><div id="header"><img src="logo.png" width="830" height="201" alt="logo"></div><div id="leftcol"> <p><strong>Shop:</strong></p> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/14">By Category</a></p> <p><a href="http://www.marioplanet.com//ez-catalog/X382366/15">By Character</a></p> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/23">By Power-Up</a></p></div><div id="content"> <h1 class="style2">Welcome!</h1> <p class="style1">Welcome to Mario Planet! We here at Mario Planet strive to serve you better, constantly providing <em>you</em> with better cutomer service, quality Mario toys, and a simple yet intuitive user interface that you can count on. Here at Mario Planet expect to find all of the Super Mario Brothers toys and accessories including action figurines, plush toys, board games and more!</p> <h1 class="style1"><span class="style2">Featured Products</span></h1> <p class="style1"></p></div><div id="rightcol"> <p><strong>Contact Us:</strong></p> <p>877-264-6343</p> <p><a href="mailto:"info@marioplanet.com">info@marioplanet.com</a></p></div><div id="footer"> <p class="style7"><a href="index.html">Home Page</a> | <a href="about_us.html">About Us</a> | <a href="http://www.marioplanet.com/ez-catalog/X382366/">Catalog</a> | <a href="contact_us.html">Contact Us</a> | <a href="http://abc.eznettools.net/marioplanet/mario_planet_mailing_list.html">Mailing List</a> | <a href="privacy_policy.html">Privacy Policy</a></p> <p class="style7">© Copyright 2010 MarioPlanet.com. All Rights Reserved</p></div></body></html>And here is my CSS page which is linked to this HTML page:@charset "UTF-8";/* CSS Document */body { margin: 0px; padding: 0px; background-color:#666666; font-family:Verdana, Arial, Helvetica, sans-serif;}#header { width:850px; height:201px; text-align:center; background-color:#DDDDDD;}#leftcol { float: left; width: 135px; height: 500px; font-size:14px; background-color:#EBEBEB;}#rightcol { float: left; width: 165px; height: 500px; background-color:#EBEBEB; font-size:14px;}#content { float: left; width: 550px; height: 500px; background-color:#FFFFFF; font-size:12px}#footer { clear: both; width: 850px; height:80px; text-align:center; font-size:14px; background-color:#DDDDDD;}a:link { color:#FF0000;}a:visited { color:#FF0000;}a:hover { color:#FF0000; text-decoration: none;}a:active { color:#FF0000;}Thanks a lot! Link to comment Share on other sites More sharing options...
jeffman Posted March 9, 2010 Share Posted March 9, 2010 Your content is everything currently between the body tags. Wrap the content inside a new div. Define the div to be as wide as your content (850px I believe, unless you add padding or border). Give the "wrapper" div the following margin definition:margin: 0 auto;That will center your new div. Link to comment Share on other sites More sharing options...
qcom Posted March 9, 2010 Author Share Posted March 9, 2010 Your content is everything currently between the body tags. Wrap the content inside a new div. Define the div to be as wide as your content (850px I believe, unless you add padding or border). Give the "wrapper" div the following margin definition:margin: 0 auto;That will center your new div.'Deirdre's Dad' thank you very much, that worked perfectly!Just a nit-picky question, is this what most people do to center this thing, and what is the 'wrapper' div usually called, I just named it 'body' but maybe 'wrapper' will be clearer for the future.Also, I have another question about inserting images and positioning them using CSS.Here is my HTML source again (as it has been updated since the last post):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Mario Toys at Mario Planet</title><link href="index.css" rel="stylesheet" type="text/css"><style type="text/css"><!--.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}.style2 {color: #FF0000}.style7 {font-size: 12px}--></style></head><body><div id="body"><div id="header"><img src="logo.png" width="830" height="201" alt="logo"></div><div id="leftcol"> <p><strong>Shop:</strong></p> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/14">By Category</a></p> <p><a href="http://www.marioplanet.com//ez-catalog/X382366/15">By Character</a></p> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/23">By Power-Up</a></p> <p><img src="images/layout/characters/mario/mario_1.png" alt="Mario" width="120" height="204"></p> <p> </p> <p> </p> <p> </p></div><div id="content"> <h1 class="style2">Welcome!</h1> <p class="style1">Welcome to Mario Planet! We here at Mario Planet strive to serve you better, constantly providing <em>you</em> with better cutomer service, quality Mario toys, and a simple yet intuitive user interface that you can count on. Here at Mario Planet expect to find all of the Super Mario Brothers toys and accessories including action figurines, plush toys, board games and more!</p> <h1 class="style1"><span class="style2">Featured Products</span></h1> <p class="style1"><a href="/home/images/layout/characters"><img src="images/catalog/mario_action_figures/Mario_luigi_star_set.jpg" alt="Mario, Lugi and Star - Figure Set" width="183" height="159"></a></p> <p class="style1"><a href="http://www.marioplanet.com/ez-catalog/X382366/0/6">Mario, Luigi and Star - Figure Set</a></p> <p class="style1"></p></div><div id="rightcol"> <p><strong>Contact Us:</strong></p> <p>877-264-6343</p> <p><a href="mailto:info@marioplanet.com"info@marioplanet.com">info@marioplanet.com</a></p> <p> </p> <p><strong>Feedback:</strong></p> <p>Questions, comments or concerns? <em>Please</em> let us know so we can serve you better!</p> <p class="style7"><a href="mailto:feedback@marioplanet.com">feedback@marioplanet.com</a></p></div><div id="footer"> <p class="style7"><a href="index.html">Home Page</a> | <a href="about_us.html">About Us</a> | <a href="http://www.marioplanet.com/ez-catalog/X382366/">Catalog</a> | <a href="contact_us.html">Contact Us</a> | <a href="http://abc.eznettools.net/marioplanet/mario_planet_mailing_list.html">Mailing List</a> | <a href="privacy_policy.html">Privacy Policy</a></p> <p class="style7">© Copyright 2010 MarioPlanet.com. All Rights Reserved</p></div></div></body></html>And here is the updated CSS linked file as well:@charset "UTF-8";/* CSS Document */body { margin: 0px; padding: 0px; background-color:#666666; font-family:Verdana, Arial, Helvetica, sans-serif;}#body { width:850px; margin: 0 auto;}#header { width:850px; height:201px; text-align:center; background-color:#DDDDDD;}#leftcol { float: left; width: 130px; height: 500px; font-size:14px; background-color:#EBEBEB;}#rightcol { float: left; width: 170px; height: 500px; background-color:#EBEBEB; font-size:14px;}#content { float: left; width: 550px; height: 500px; background-color:#FFFFFF; font-size:12px}#footer { clear: both; width: 850px; height:80px; text-align:center; font-size:14px; background-color:#DDDDDD;}a:link { color:#FF0000;}a:visited { color:#FF0000;}a:hover { color:#FF0000; text-decoration: none;}a:active { color:#FF0000;}Ok, so if I wanted to attach another image to the right of the 'Mario, Luigi and Star - Figure Set' and them some text underneath just like the text underneath the 'Mario, Luigi and Star - Figure Set' how would I do that?Thanks again! Link to comment Share on other sites More sharing options...
jeffman Posted March 9, 2010 Share Posted March 9, 2010 This simplifies things, but it shows the technique. The trick is to contain the image and caption in a floating block-level container. The image and the caption need to be in the same container to keep them physically together. You have two of those units. Turning on float allows them to be side by side. Since float would also cause the next block-level item to float side by side, we need to turn off the float. Adding a clear property to the next element (whatever it is) will do that. <div class="left"> <img> <p>caption></p></div><div class="left"> <img> <p>caption></p></div><something class="clear">---.left { width: 400px / *adjust to suit */ height: 400px / *adjust to suit */ float:left}.clear { clear: both} Link to comment Share on other sites More sharing options...
qcom Posted March 10, 2010 Author Share Posted March 10, 2010 This simplifies things, but it shows the technique. The trick is to contain the image and caption in a floating block-level container. The image and the caption need to be in the same container to keep them physically together. You have two of those units. Turning on float allows them to be side by side. Since float would also cause the next block-level item to float side by side, we need to turn off the float. Adding a clear property to the next element (whatever it is) will do that.<div class="left"> <img> <p>caption></p></div>[b][u]<div class="left">[/u][/b] <img> <p>caption></p></div><something class="clear">---.left { width: 400px / *adjust to suit */ height: 400px / *adjust to suit */ float:left}.clear { clear: both} Thanks again for the response, now I was a little confused in two places.One is the code after the triple hash line (---) is that my CSS code?If so, that can be pasted into my linked CSS file right? Additionally, what is that CSS code specifying? Is it the width of the containers themselves?Secondly, I'm not sure but is the second div tag (the one that I bolded and underlined in my quote of your post) supposed to say <div class="clear">???Finally, just to make sure I actually understand what you meant, this is basically just two divs that are nested within my content div which is also nested in the new div that I created for the centering.Thanks! Link to comment Share on other sites More sharing options...
jeffman Posted March 10, 2010 Share Posted March 10, 2010 Yes, the stuff below the dashes is CSS. Whether you cut and paste is up to you. I personally suggest integrating the concepts rather than blindly copying and pasting.My intent was to illustrate (1) how you float and clear things, and (2) the fact that floated items generally need a defined width. Link to comment Share on other sites More sharing options...
qcom Posted March 10, 2010 Author Share Posted March 10, 2010 Yes, the stuff below the dashes is CSS. Whether you cut and paste is up to you. I personally suggest integrating the concepts rather than blindly copying and pasting.My intent was to illustrate (1) how you float and clear things, and (2) the fact that floated items generally need a defined width.Ok, I'm still a little unclear, as when I tried to implement it myself, the second div (the one with a class of 'clear') just sits underneath the 'left' div.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Mario Toys at Mario Planet</title><link href="global.css" rel="stylesheet" type="text/css"></head><body><div id="body"><div id="header"><img src="logo.png" width="954" height="224" alt="logo"></div><div id="leftcol"> <p><strong>Shop:</strong></p> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/14">By Category</a></p> <p><a href="http://www.marioplanet.com//ez-catalog/X382366/15">By Character</a></p> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/23">By Power-Up</a></p> <p><img src="images/layout/characters/mario/mario_1.png" alt="Mario" width="120" height="204"></p> <p> </p> <p> </p> <p> </p></div><div id="content"> <h1 class="headers">Welcome!</h1> <p>Welcome to Mario Planet! We here at Mario Planet strive to serve you better, constantly providing <em>you</em> with better cutomer service, quality Mario toys, and a simple yet intuitive user interface that you can count on. Here at Mario Planet expect to find all of the Super Mario Brothers toys and accessories including action figurines, plush toys, board games and more!</p> <h1><span class="headers">Featured Products</span></h1> <div class="left"> <a href="http://www.marioplanet.com/ez-catalog/X382366/0/6"><img src="images/catalog/mario_action_figures/Mario_luigi_star_set.jpg" width="183" height="159"></a> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/0/6">Mario, Luigi and Star - Figure Set</a></p></div><div class="clear"> <a href="http://www.marioplanet.com/ez-catalog/X382366/13/2"><img src="www.marioplanet.com/images/catalog/mario_board_games/monopoly.jpg" width="255" height="159"></a> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/13/2">Nintendo Monopoly</a></p></div></div>---@charset "UTF-8";/* CSS Document */body { margin: 0px; padding: 0px; background-color:#666666; font-family:Verdana, Arial, Helvetica, sans-serif;}#body { width:960px; margin: 0 auto;}#header { width:960px; height:224px; text-align:center; background-color:#DDDDDD;}#leftcol { float: left; width: 130px; height: 500px; font-size:14px; background-color:#EBEBEB;}#rightcol { float: left; width: 170px; height: 500px; background-color:#EBEBEB; font-size:14px;}#content { float: left; width: 660px; height: 500px; background-color:#FFFFFF; font-size:12px}#footer { clear: both; width: 960px; height:80px; text-align:center; font-size:12px; background-color:#DDDDDD;}#feedbacktextlink { font-size:12px;}.left { width: 400px / *adjust to suit */ height: 400px / *adjust to suit */ float:left}.clear { clear: both}h1 { color: #FF0000;}h2 { color:#FF0000;}a:link { color:#FF0000;}a:visited { color:#FF0000;}a:hover { color:#FF0000; text-decoration: none;}a:active { color:#FF0000;}<div id="rightcol"> <p><strong>Contact Us:</strong></p> <p>877-264-6343</p> <p><a href="mailto:info@marioplanet.com"info@marioplanet.com">info@marioplanet.com</a></p> <p> </p> <p><strong>Feedback:</strong></p> <p>Questions, comments or concerns? <em>Please</em> let us know so we can serve you better!</p> <p id="feedbacktextlink"><a href="mailto:feedback@marioplanet.com">feedback@marioplanet.com</a></p></div><div id="footer"> <p class="style7"><a href="index.html">Home Page</a> | <a href="about_us.html">About Us</a> | <a href="http://www.marioplanet.com/ez-catalog/X382366/">Catalog</a> | <a href="contact_us.html">Contact Us</a> | <a href="http://abc.eznettools.net/marioplanet/mario_planet_mailing_list.html">Mailing List</a> | <a href="privacy_policy.html">Privacy Policy</a></p> <p class="style7">© Copyright 2010 MarioPlanet.com. All Rights Reserved</p></div></div></body></html> Did I implement it incorrectly? Link to comment Share on other sites More sharing options...
thescientist Posted March 10, 2010 Share Posted March 10, 2010 that's what clear will do Turning on float allows them to be side by side. Since float would also cause the next block-level item to float side by side, we need to turn off the float. Adding a clear property to the next element (whatever it is) will do that.this code:<div class="left"> <img> <p>caption></p></div><div class="left"> <img> <p>caption></p></div> is what keeps things "together". The float: left will push them to the left, and with the containing div holding the img and the caption, they will stay together when floated left. This is done twice. Then the "cleared" div starts on a new line. Link to comment Share on other sites More sharing options...
qcom Posted March 10, 2010 Author Share Posted March 10, 2010 that's what clear will dothis code:<div class="left"> <img> <p>caption></p></div><div class="left"> <img> <p>caption></p></div> is what keeps things "together". The float: left will push them to the left, and with the containing div holding the img and the caption, they will stay together when floated left. This is done twice. Then the "cleared" div starts on a new line. Ok, sorry, but I'm still a little confused, mainly about the purpose of the 'clear' class and where to place it in the code.This is the way I implemented it into my code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Mario Toys at Mario Planet</title><link href="global.css" rel="stylesheet" type="text/css"></head><body><div id="body"><div id="header"><img src="logo.png" width="954" height="224" alt="logo"></div><div id="leftcol"> <p><strong>Shop:</strong></p> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/14">By Category</a></p> <p><a href="http://www.marioplanet.com//ez-catalog/X382366/15">By Character</a></p> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/23">By Power-Up</a></p> <p><img src="images/layout/characters/mario/mario_1.png" alt="Mario" width="120" height="204"></p> <p> </p> <p> </p> <p> </p></div><div id="content"> <h1 class="headers">Welcome!</h1> <p>Welcome to Mario Planet! We here at Mario Planet strive to serve you better, constantly providing <em>you</em> with better cutomer service, quality Mario toys, and a simple yet intuitive user interface that you can count on. Here at Mario Planet expect to find all of the Super Mario Brothers toys and accessories including action figurines, plush toys, board games and more!</p> <h1><span class="headers">Featured Products</span></h1> <div class="left"> <a href="http://www.marioplanet.com/ez-catalog/X382366/0/6"><img src="images/catalog/mario_action_figures/Mario_luigi_star_set.jpg" width="183" height="159"></a> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/0/6">Mario, Luigi and Star - Figure Set</a></p></div><div class="left"> <a href="http://www.marioplanet.com/ez-catalog/X382366/13/2"><img src="www.marioplanet.com/images/catalog/mario_board_games/monopoly.jpg" width="255" height="159"></a> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/13/2">Nintendo Monopoly</a></p></div></div><div id="rightcol"> <p><strong>Contact Us:</strong></p> <p>877-264-6343</p> <p><a href="mailto:info@marioplanet.com"info@marioplanet.com">info@marioplanet.com</a></p> <p> </p> <p><strong>Feedback:</strong></p> <p>Questions, comments or concerns? <em>Please</em> let us know so we can serve you better!</p> <p id="feedbacktextlink"><a href="mailto:feedback@marioplanet.com">feedback@marioplanet.com</a></p></div><div id="footer"> <p class="style7"><a href="index.html">Home Page</a> | <a href="about_us.html">About Us</a> | <a href="http://www.marioplanet.com/ez-catalog/X382366/">Catalog</a> | <a href="contact_us.html">Contact Us</a> | <a href="http://abc.eznettools.net/marioplanet/mario_planet_mailing_list.html">Mailing List</a> | <a href="privacy_policy.html">Privacy Policy</a></p> <p class="style7">© Copyright 2010 MarioPlanet.com. All Rights Reserved</p></div></div></body></html>----------@charset "UTF-8";/* CSS Document */body { margin: 0px; padding: 0px; background-color:#666666; font-family:Verdana, Arial, Helvetica, sans-serif;}#body { width:960px; margin: 0 auto;}#header { width:960px; height:224px; text-align:center; background-color:#DDDDDD;}#leftcol { float: left; width: 130px; height: 500px; font-size:14px; background-color:#EBEBEB;}#rightcol { float: left; width: 170px; height: 500px; background-color:#EBEBEB; font-size:14px;}#content { float: left; width: 660px; height: 500px; background-color:#FFFFFF; font-size:12px}#footer { clear: both; width: 960px; height:80px; text-align:center; font-size:12px; background-color:#DDDDDD;}#feedbacktextlink { font-size:12px;}.left { width: 400px / *adjust to suit */ height: 400px / *adjust to suit */ float:left}.clear { clear: both}h1 { color: #FF0000;}h2 { color:#FF0000;}a:link { color:#FF0000;}a:visited { color:#FF0000;}a:hover { color:#FF0000; text-decoration: none;}a:active { color:#FF0000;}Now, I don't exactly know what the purpose of the 'clear' div tag is and where it would go... Link to comment Share on other sites More sharing options...
ShadowMage Posted March 10, 2010 Share Posted March 10, 2010 Now, I don't exactly know what the purpose of the 'clear' div tag is and where it would go...That's exactly what DD showed you... <div class="left"> <img> <p>caption></p></div><div class="left"> <img> <p>caption></p></div><something class="clear">---.left { width: 400px / *adjust to suit */ height: 400px / *adjust to suit */ float:left}.clear { clear: both} ...right after the elements that are floating. Link to comment Share on other sites More sharing options...
qcom Posted March 11, 2010 Author Share Posted March 11, 2010 That's exactly what DD showed you......right after the elements that are floating.OK! I'm sorry for my tardness everyone, I just didn't understand it at first, I guess...But I tried to implement it like you guys said to and I'm inserting the RELEVANT (sorry for the long posts last time) code for both the HTML and CSS portions of my page:<div id="content"> <h1 class="headers">Welcome!</h1> <p>Welcome to Mario Planet! We here at Mario Planet strive to serve you better, constantly providing <em>you</em> with better cutomer service, quality Mario toys, and a simple yet intuitive user interface that you can count on. Here at Mario Planet expect to find all of the Super Mario Brothers toys and accessories including action figurines, plush toys, board games and more!</p> <h1><span class="headers">Featured Products</span></h1> <div class="left"> <a href="http://www.marioplanet.com/ez-catalog/X382366/0/6"><img src="images/catalog/mario_action_figures/Mario_luigi_star_set.jpg" width="183" height="159"></a> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/0/6">Mario, Luigi and Star - Figure Set</a></p></div><div class="left"> <a href="http://www.marioplanet.com/ez-catalog/X382366/13/2"><img src="www.marioplanet.com/images/catalog/mario_board_games/monopoly.jpg" width="255" height="159"></a> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/13/2">Nintendo Monopoly</a></p></div><img src="Images/question_block1.jpg" width="176" height="153" class="clear"></div>-------.left { width: 200px height: 400px float:left}.clear { clear: both}I would like to know if I implemented this correctly, because as far as I can tell, this isn't working.It may have to do with the width and height of my .left but even after I adjust them, nothing appears to change... Link to comment Share on other sites More sharing options...
thescientist Posted March 11, 2010 Share Posted March 11, 2010 what shows? Link to comment Share on other sites More sharing options...
qcom Posted March 11, 2010 Author Share Posted March 11, 2010 I apologize for my impatience, and I appreciate your guys' help and still responding to my questions.I finally figured it out, if I HAD JUST READ MORE CAREFULLY, I would have been fine... But if you go to www.marioplanet.com you can see the changes live! YAY!!Although I need to space out the Nintendo Monopoly picture from the figure set picture.So, yeah, thanks!P.S. I appear to be having trouble, adding another row of two images! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.