Jump to content

Archived

This topic is now archived and is closed to further replies.

coldkill

Alignment with CSS

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?

Share this post


Link to post
Share on other sites
How do i align the box? Sorry CSS aint my strong point :S

Share this post


Link to post
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!

Share this post


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

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
Really? That's weird. Whenever I look at a site centered like that in IE it never works. Probably the DOCTYPE thing.

Share this post


Link to post
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.

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites
Works perfectly with a table but not with a list item.

Share this post


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

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


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

Share this post


Link to post
Share on other sites

×

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.