bmroyer Posted May 1, 2011 Share Posted May 1, 2011 I am making a simple layout, a header, a content area, and a footer, and a small links area that will be under the content. I want to get everything centered, but its not working. So I think there are a total of 4 divs and "float:center;" doesn't seem to work for everything. The only think I managed to center was the header. html{ margin: 0px; height: 100%;}body{ background: #000; height: 100%;text-align:center;}#wrapper {margin:0px auto;width:80%;height:100%;background:#3A3A3A;}#header {background:#3A3A3A;width:100%;text-align:center;height:30%;margin:0;}#content {background:green;width:60%;height:50%;float: center;margin-right:0;}#links {background:blue;width:30%;float:left;height:5%;margin:0;}#footer {background:pink;width:100%;height:5%;clear:both;float:center;margin:0;} Link to comment Share on other sites More sharing options...
jeffman Posted May 1, 2011 Share Posted May 1, 2011 There is no float:center. text-align: center is a kludge for anything but text and maybe images.It looks like you are centering #wrapper correctly. If all the other elements are in that, the page should look centered.What's the HTML? Link to comment Share on other sites More sharing options...
bmroyer Posted May 1, 2011 Author Share Posted May 1, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Screen Story Tellers | Video Productions</title><link rel="stylesheet" href="stylesheet.css" type="text/css"></head><body><div id="wrapper"><div id="header"><img style="width: 508px; height: 173px;" src="images/logo.png" alt="Screen Story Tellers" title="Screen Story Tellers"></div><div id="content"></div><div id="links"></div><div id="footer">Copyright 2011 Screen Story Writers</div></div></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted May 1, 2011 Share Posted May 1, 2011 Anything with width set to 100% will be centered because it fills the entire container. text-align:center will center its text content. That's why the header looks right.When a div has width defined at less than 100%, the normal centering technique is the same you used for the wrapper. But this can fail when the elements before or after it are floated, or if it is floated.I don't have an image in my head of the way this thing is supposed to look. I want to get everything centeredBut the links div floats left. So I'm a little confused. Link to comment Share on other sites More sharing options...
bmroyer Posted May 1, 2011 Author Share Posted May 1, 2011 New code, I decide to use images because you can "text-align" them with no problem. Now my only problem is the 1px gap below the footer, and the links isn't centering because I guess the content is getting in the way?HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Screen Story Tellers | Video Productions</title><link rel="stylesheet" href="stylesheet.css" type="text/css"></head><body><div id="wrapper"><div id="header"><img style="width: 508px; height: 173px;" src="images/logo.png" alt="Screen Story Tellers" title="Screen Story Tellers"></div><div id="content"><img style="width:60%; height:50%;" src="images/content.png"></div><div id="links"><img style="width:100px; height:25px;" src="images/footer.png"></div><div id="footer"><img style="width:100%; height:5%;" src="images/footer.png"></div></div></body></html> CSS html{ margin: 0px; height:100%;}body{ background: #000;text-align:center;}#wrapper {margin:0px auto;width:80%;background:#3A3A3A;}#header {background:#3A3A3A;width:100%;text-align:center;height:30%;margin:0;}#content {background:3A3A3A;text-align:center;margin:0;}#links {width:30%;height:5%;margin:0;text-align:center;}#footer {clear:both;margin:0;} Link to comment Share on other sites More sharing options...
jeffman Posted May 1, 2011 Share Posted May 1, 2011 The gap is because they display inline. If you set them to display as block the gaps will disappear. Then you'll need to center them using margin:0 auto; The gaps should also disappear if the images float.There was nothing really wrong with your original plan, you know. Just a little tweaking. Link to comment Share on other sites More sharing options...
mgason Posted May 2, 2011 Share Posted May 2, 2011 try thisCSS html{ margin: 0px; height: 100%;}body{ background: #000; height: 100%;}#wrapper {margin:auto;width:80%;height:100%;background:#fff;}#header {background:#3A3A3A;width:100%;height:30%;}#content {background:green;width:69%;height:50%;float: right;}#links {background:blue;width:29%;float:left;height:50%;}#footer {background:pink;width:100%;height:20%;clear:both;} with this 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" /><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="junk.css" /></head><body><div id ="wrapper"> <div id ="header"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div> <div id ="links"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the </p></div> <div id ="content""><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div> <div id ="footer"><p>Lbut also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div></div></body></html> Link to comment Share on other sites More sharing options...
mgason Posted May 2, 2011 Share Posted May 2, 2011 oh I missed a little piece of my CSS, not important though.I had p {padding:10px; } Link to comment Share on other sites More sharing options...
bmroyer Posted May 2, 2011 Author Share Posted May 2, 2011 Before I saw your post I did this. It is was great in Chrome, but not in IE or FF so I did tweaking and now the content background image doesn't show up.HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Screen Story Tellers | Video Productions</title><link rel="stylesheet" href="stylesheet.css" type="text/css"></head><body><div id="wrapper"><div id="networks"><a href="http://www.facebook.com/pages/ScreenStoryTellers/114016498637962" target="_blank"><img style="width:25px; height:25px;" src="images/facebook.png"></a><a href="http://www.youtube.com/user/ScreenStorytellers" target="_blank"><img style="width:25px; height:25px;" src="images/youtube.png"></a><a href="http://www.natural-environment.com/blog/2008/11/07/what-is-the-worlds-largest-rabbit/" target="_blank"><img style="width:25px; height:25px;" src="images/imdb.png"></a></div><div id="header"><img style="width: 508px; height: 173px;" src="images/logo.png" alt="Screen Story Tellers" title="Screen Story Tellers"></div><div id="content"><div style="width:80%; height:50%; background:url(images/content.png) no-repeat center center;"></div><div id="links"><ul><li><a href="index.html"><i><b>Storytellers</i></b></a></li><li><a href="index.html"><i><b>OnScreen</i></b></a></li><li><a href="contact.html"><i><b>Contact</i></b></a></li></ul></div><div id="footer"><div style="width:100%; height:2%; background:url(images/footer.png) no-repeat center center;"> <small>©2011 ScreenStoryTellers <b>|</b> 1738 EDGEWOORD HILL CIR. 4 HAGERSTOWN MD 21740 <b>|</b> phone: 240.217.2977</small></div></div></body></html> CSS: html{ margin: 0px auto;color:#fff;}body{background: #000;text-align:center;}#wrapper {margin:0px auto;width:80%;background:#3A3A3A;}#header {background:#3A3A3A;width:100%;text-align:center;height:30%;margin:0;}#content {background:3A3A3A;text-align:center;margin:0;}#links {width:30%;height:5%;margin:0 autotext-align:center;}#links {padding-left:50px;}#links ul li {list-style-type:none;display:inline;}#links ul li a {text-decoration:none;padding: 5px 10px;display:block inline;border-right:1px #fff solid;}#links a:hover {background-color:#66A1CC;}#footer {clear:both;margin:0 auto;background:#304C60;}a:link {color: #fff;}a:visited {color: #fff;}a:hover {color: #225663;}#networks {text-align:right;} Link to comment Share on other sites More sharing options...
mgason Posted May 2, 2011 Share Posted May 2, 2011 Hi,do you need all the images? <div id="content"><div style="width:80%; height:50%; background:url(images/content.png) no-repeat center center;"></div>SHOULD BE LIKE BELOW I THINK<div id="content" style="width:80%; height:50%; background:url(images/content.png) no-repeat center center;"> much better though would be PUT THE STYLES IN THE CSS#content {background:3A3A3A;text-align:center;margin:0;width:80%;height:50%;background:url(images/content.png) no-repeat center center;}IN THE HTML JUST<div id="content"></div> You measurements do not seem to add up, content width 80% link width 30%.How wide is networks does it sit above header?Heights are networks 75 pixels of content? header 173 pixels, content 50% and footer 2%, not sure what to make of that.Why not just make it all fixed pixel sizes, centered by using margin auto on wrapper Link to comment Share on other sites More sharing options...
mgason Posted May 2, 2011 Share Posted May 2, 2011 Well I mocked up some images to the right sizes and made your page.Sure I can make it work BUT I am not quite sure what it should look like.Can you mock up a diagram in photoshop or something, post it somewhere and put a link here? Link to comment Share on other sites More sharing options...
bmroyer Posted May 2, 2011 Author Share Posted May 2, 2011 here is a link I uploaded on my website. THe only thing missing is the content area which I want centered below the header and above footer, and I want the links section below the content area. This is the code I last posted.http://brandonroyer.com/ScreenStoryTellers/ Link to comment Share on other sites More sharing options...
jeffman Posted May 2, 2011 Share Posted May 2, 2011 Did you add margin: 0 auto; to #content? With the floats gone now, I don't see a reason why that would not work. Link to comment Share on other sites More sharing options...
bmroyer Posted May 2, 2011 Author Share Posted May 2, 2011 nope, might be something else effecting it Link to comment Share on other sites More sharing options...
jeffman Posted May 2, 2011 Share Posted May 2, 2011 Have you put any content in #content? When I adjust only the margin rule and add some text to #content it looks fine. Not high, but centered. I checked in FF and Chrome.FWIW, there are a couple CSS errors that show up in your FF console. Check them out. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 2, 2011 Share Posted May 2, 2011 Theres no way the height: 70%; is going to work unless you set html, body and wrapper to 100% height, but! doing this is going to cause more problems than fixes, that is why you can't see the #content, it is still set as 0, because there is no content, and the centreing using margin:0 auto; is working, but you can't see it. Link to comment Share on other sites More sharing options...
bmroyer Posted May 2, 2011 Author Share Posted May 2, 2011 It does work when you add content. How do I set it up so that its a fixed width regardless of the content? The reason I did everything by percentage versus a fixed pixel is because of different screen sizes and browsers. I wanted the page to stay the same and not look distorted on different computers. Link to comment Share on other sites More sharing options...
bmroyer Posted May 2, 2011 Author Share Posted May 2, 2011 i made the height 300px just to test it and it looks good in FF, but chrome and IE it has a space from the footer to the bottom of page. Link to comment Share on other sites More sharing options...
rubykitten Posted May 4, 2011 Share Posted May 4, 2011 This is part of a 'cheat-sheet' I made for myself,To center a website:#wrapper {position:relative;width:***px; <----- add in sites total widthmargin: 0px auto;}==================To center the whole thing:#wrapper {position:absolute;width:***px; <--------- site widthleft:50%;margin-left: -***px; <------ half the site widthtop:50%;margin-top: -***px; <------ half the site hight}Just make sure <div id="wrapper"> is the first thing in your <body> and the last thing to close! Link to comment Share on other sites More sharing options...
thescientist Posted May 4, 2011 Share Posted May 4, 2011 why do you even need position? all you need is a width and margin: 0px auto Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.