5 replies [Last post]
Jeffrey Bridgman
Offline
newbie
Last seen: 14 years 28 weeks ago
Timezone: GMT-6
Joined: 2003-05-09
Posts: 6
Points: 0

Hi, I've been looking at a site and it's stylesheet...
www.alistapart.com
You may know it, it's kind of an e-zine about web/css etc...
anyway...

I was looking at the css and I can't figure out how they got the center part to remain a certain width at all times and how they got it to center. I would normally use {width: 400px; margin-left: center; margin-right: center;} to achieve this but I don't see it (Their css is at the point of becoming cryptic)
Does anyone know how this was done. I've done my research so either I'm unenlightened or blind...
thanx!
jeffBE

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 10 years 3 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

how did they do that?

Quote:
ALA 3.0 kicks off with three articles by three of our best writers. Details on our front- and backend redesign will be posted in an upcoming issue.

Thats the first few lines on their page... patience Laughing out loud

http//melbourne.ug.php.net

Jeffrey Bridgman
Offline
newbie
Last seen: 14 years 28 weeks ago
Timezone: GMT-6
Joined: 2003-05-09
Posts: 6
Points: 0

yeah i know

I saw that...sigh...I guess I'll have to wait..

:walking away speaking to self: "Patience is a viture...patience is a virtue"
I need to work on patience...

so sorry everyone, false alarm...but if you do feel figure it out, could you tell me? thanks
Jeff

migs_mhdy
Offline
newbie
PA, USA
Last seen: 19 years 46 weeks ago
PA, USA
Timezone: GMT-4
Joined: 2003-07-21
Posts: 6
Points: 0

Margin Auto

Unless I'm mistaken,
It takes 2 entries to center the content. Text-Align works for IE browsers, and Margin: 0 auto; works for Mozilla/NN browsers.

body{
background: #9aaaaa;
color: #333;
margin: 0;
padding: 0;
border: 0;
border-top: 5px solid #526968;
text-align: center;
...

#wrapper{
background: #fff url(/i/pgbg4.gif) repeat;
color: #333;
margin: 25px auto;
...

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 12 years 2 days ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

how did they do that?

Yes that's right.

That's the way you would normally centre a site, there's nothing special about it.

margin-left:auto
margin-right:auto

This will centre elements that have a defined width (px, %, em etc.). (If there is no defined width then obviously it will not know how to centre.)

Unfortunately IE5 & 5.5 & ie6 in quirks mode don't understand it and you have to use the text-align center hack as pointed out in the previous post. This (incorrectly) centres the nested element and also centres the text.

Compliant browsers just get centred text, which is why you will see another declaration further down the style sheet that will set text-align:left to bring things back to normal.

Hope that clears it up a bit.

Paul

Jeffrey Bridgman
Offline
newbie
Last seen: 14 years 28 weeks ago
Timezone: GMT-6
Joined: 2003-05-09
Posts: 6
Points: 0

.

thanks! that has cleared up some of it...