coldkill Posted April 15, 2006 Share Posted April 15, 2006 Currently i am using CSS to align a page in the middle and to allign the menu and content areas. The site aligns ok but the content and the menu don't properly. This is the CSS i'm using to align the menu [code]#nav{ width:130px; display:block; float:left; vertical-align:top; }[/code]and this is the content CSS[code]#content{ display:block; width:770px; background-image:url(images/backgrounds/conbg.jpg); background-repeat:repeat-y; text-align:left; float:right; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 70px;}[/code]Any ideas? Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/ Share on other sites More sharing options...
moberemk Posted April 15, 2006 Share Posted April 15, 2006 Yes. You're aligning the text within the box, not the box itself. Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27330 Share on other sites More sharing options...
coldkill Posted April 16, 2006 Author Share Posted April 16, 2006 How do i align the box? Sorry CSS aint my strong point :S Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27374 Share on other sites More sharing options...
wildteen88 Posted April 16, 2006 Share Posted April 16, 2006 DOnt really understsnd your problem but. Is the content (#content) box the main box that all your content is in and you want that to aline in the center of the page? If so add the following code to your #content style:[code]margin: 0px auto 0px auto;[/code]This will then center your page like [a href=\"http://homepage.ntlworld.com/cshepwood/BranchingOutDesigns/\" target=\"_blank\"]this[/a].In order for that code to work properly you will need to state a width for the #content style (which you have) and to have a valid DOCTYPE at the very top of your HTML file. It should work in most browsers including IE! Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27463 Share on other sites More sharing options...
moberemk Posted April 16, 2006 Share Posted April 16, 2006 Couldn't you shorten that to 0px auto; only one time? Also, if I were you, I'd go to the library and pick up a good CSS book. Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27476 Share on other sites More sharing options...
wildteen88 Posted April 16, 2006 Share Posted April 16, 2006 I dont like to code in short, like [i]margin: 0px auto[/i] I prefer to do my CSS in full.[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]Also, if I were you, I'd go to the library and pick up a good CSS book[/quote]Was that directed at me? Why do I need a good CSS book for? Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27487 Share on other sites More sharing options...
coldkill Posted April 16, 2006 Author Share Posted April 16, 2006 No it wasn't it was directed at me. I didn't say i couldn't program CSS. I can i've done it quite a bit. I haven't done alignment with CSS too much though. The main #wrap aligns the whole thing in the middle the #content alligns the actual content area to the right of the #wrap which i got working by using the margin-left/right attribute. For some reason IE doesn't allign it to the center (even with your examble wildteen) and it shows the link headers in grey instead of black Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27490 Share on other sites More sharing options...
moberemk Posted April 16, 2006 Share Posted April 16, 2006 IE doesn't support auto as a margin property, unfortunately. While this may be fixed in IE7, don't count on everyone upgrading to see that. You'll just have to deal with the fact that in IE your site will be to the left.Also, as for coding in shorthand, I suppose everyone has their own tastes. Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27502 Share on other sites More sharing options...
wildteen88 Posted April 16, 2006 Share Posted April 16, 2006 Actaully it does. Use IE on the example site I posted in my last post.In order for IE to automaitcally center an element on the page it needs to meet the following terms:[list][*]Valid DOCTYPE - without this IE goes in quirks mode, meaning doesn't render page corectly (every HTML page should have DOCTYPE)[*]the tag you are centering must have a width set, eg: width: 700px[/list]If you do not have either of the above IE won't center your page. Try it out with this code:[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>IE test with auto margin</title><style type="text/css">#container { width: 600px; border: 1px solid #FF0000; margin: 0px auto; padding: 50px;}</style></head><body><div id="container">This div is centered in IE!</div></body></html>[/code]If you have a look the div is conainter is centerd in IE. Now if you take out the DOCTYPE and refresh the page IE will no longer center your page, IE is now in "quirks mode". As long as you have a DOCTYPE and a width defined IE will use the auto margin.EDIT: By the way I am not using IE7, I am using IE6 Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27510 Share on other sites More sharing options...
moberemk Posted April 16, 2006 Share Posted April 16, 2006 Really? That's weird. Whenever I look at a site centered like that in IE it never works. Probably the DOCTYPE thing. Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27550 Share on other sites More sharing options...
coldkill Posted April 16, 2006 Author Share Posted April 16, 2006 The DOCTYPE for my site is xHTML 1.1 Transitional. It conforms to W3C xHTML 1.1 Trans Spec. So i don't think it's a doctype thing. Although i am still having problem aligning the menu which is ul and li tags in both FF and IE. When i try using the margin attrubute it doesn't affect the alignment it makes the content move out of the content container to the right. I tried using auto and a literal value. Any ideas?Also i'm not overly concerned that the site isn't centered but i am concerned that the site objects are in the wrong place. Currently the majority of my users use FF to access my website. Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27574 Share on other sites More sharing options...
wildteen88 Posted April 16, 2006 Share Posted April 16, 2006 Could you provide a link to the problem so I can see what your page looks like at the moment. Also about the DOCTYPE thing I was talking to moberemk then. Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27575 Share on other sites More sharing options...
coldkill Posted April 17, 2006 Author Share Posted April 17, 2006 OK.[a href=\"http://www.assault-airlift.com/beta/\" target=\"_blank\"]here[/a] is a link to the page. It is in beta so nothing really works at the moment just getting the layout in order. Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27591 Share on other sites More sharing options...
coldkill Posted April 17, 2006 Author Share Posted April 17, 2006 Works perfectly with a table but not with a list item. Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27733 Share on other sites More sharing options...
coldkill Posted April 17, 2006 Author Share Posted April 17, 2006 The content Area is displayed underneith the menu instead of next to it in IE but in FF and others it works fine. Any ideas?Increased the total wrap size of the site which fixed it for IE.::SOLVED:: Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-27866 Share on other sites More sharing options...
coldkill Posted April 25, 2006 Author Share Posted April 25, 2006 *sigh* ::UNRESOLVED::IE doesn't center still. It works fine in [b]EVERY[/b] other browser except IE. I've resorted to giving IE it's own stylesheet to correct errors it, and nothing else, has.Any ideas on how to make IE center the site?Many thanks,Cold Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-30465 Share on other sites More sharing options...
onepixel Posted April 25, 2006 Share Posted April 25, 2006 [!--quoteo(post=365428:date=Apr 16 2006, 09:19 PM:name=coldkill)--][div class=\'quotetop\']QUOTE(coldkill @ Apr 16 2006, 09:19 PM) [snapback]365428[/snapback][/div][div class=\'quotemain\'][!--quotec--]OK.[a href=\"http://www.assault-airlift.com/beta/\" target=\"_blank\"]here[/a] is a link to the page. It is in beta so nothing really works at the moment just getting the layout in order.[/quote]Allow me to add my littel input, maybe that will help.To align your page on the screen, first start with the bigger box which is the body tag.Apply to it the [i]text-align:center [/i]and let's see what happens;Of course the other boxes should have position:relative;Let me know! Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-30623 Share on other sites More sharing options...
coldkill Posted April 27, 2006 Author Share Posted April 27, 2006 As i mentioned in the PM. It centers it to the wrapper which acts like a table. The actual wrap needs to be moved across then it should work as it is supposed to. Quote Link to comment https://forums.phpfreaks.com/topic/7501-alignment-with-css/#findComment-31301 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.