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
how did they do that?
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
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
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;
...
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
.
thanks! that has cleared up some of it...