Jump to content

Alignment with CSS


coldkill

Recommended Posts

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?
Link to comment
Share on other sites

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!
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

*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
Link to comment
Share on other sites

[!--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!
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.