Jump to content


Photo

Alignment with CSS


  • Please log in to reply
17 replies to this topic

#1 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 15 April 2006 - 07:05 PM

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
#nav
{
    width:130px;
    display:block;
    float:left;
    vertical-align:top;    
}

and this is the content CSS
#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;
}

Any ideas?


You can learn alot from reading the manual

#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 15 April 2006 - 09:24 PM

Yes. You're aligning the text within the box, not the box itself.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 16 April 2006 - 01:54 AM

How do i align the box? Sorry CSS aint my strong point :S


You can learn alot from reading the manual

#4 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 16 April 2006 - 02:05 PM

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:
margin: 0px auto 0px auto;

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!

#5 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 16 April 2006 - 03:40 PM

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.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#6 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 16 April 2006 - 04:12 PM

I dont like to code in short, like margin: 0px auto 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?

#7 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 16 April 2006 - 04:16 PM

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


You can learn alot from reading the manual

#8 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 16 April 2006 - 05:16 PM

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.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#9 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 16 April 2006 - 05:57 PM

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:
  • 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
If you do not have either of the above IE won't center your page. Try it out with this 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>
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

#10 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 16 April 2006 - 08:17 PM

Really? That's weird. Whenever I look at a site centered like that in IE it never works. Probably the DOCTYPE thing.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#11 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 16 April 2006 - 10:56 PM

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.


You can learn alot from reading the manual

#12 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 16 April 2006 - 11:12 PM

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.

#13 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 17 April 2006 - 02:19 AM

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.


You can learn alot from reading the manual

#14 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 17 April 2006 - 03:58 PM

Works perfectly with a table but not with a list item.


You can learn alot from reading the manual

#15 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 17 April 2006 - 09:48 PM

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::


You can learn alot from reading the manual

#16 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 25 April 2006 - 09:57 AM

*sigh* ::UNRESOLVED::

IE doesn't center still. It works fine in EVERY 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


You can learn alot from reading the manual

#17 onepixel

onepixel
  • Members
  • PipPip
  • Member
  • 18 posts

Posted 25 April 2006 - 04:41 PM

[!--quoteo(post=365428:date=Apr 16 2006, 09:19 PM:name=coldkill)--][div class=\'quotetop\']QUOTE(coldkill @ Apr 16 2006, 09:19 PM) View Post[/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

text-align:center

and let's see what happens;

Of course the other boxes should have position:relative;

Let me know!
<a href="http://www.saheltech.com">PHP Programming - WordPress Blog Customization</a>

#18 coldkill

coldkill
  • Members
  • PipPipPip
  • Advanced Member
  • 159 posts
  • LocationUnited Kingdom

Posted 27 April 2006 - 12:36 PM

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.


You can learn alot from reading the manual




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users