Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
SUCH CODE:
----------
body {
width: 600px;
padding-left: 50%;
}
------------
they said the code can center the layout.
But what 50% refer to? half of the window? i barely understand what the padding value's meaning -
body { is the equivalent to HTML's <body> tag. This is where you specify things like background color and page margins. If the main content area of your web page is 600px wide, you should create a seperate div for it.
.main {
width: 600px;
}
If you're trying to center the main content area, you will need to add something like this:
body {
text-align: center'
}
.main {
width: 600px;
margin: auto;
margin-left: auto;
margin-right: auto;
}
You won't use padding for centering. Padding is the equivalent to HTML's cellpadding property, which puts a gap in between the border of the container and its content. -
ThanQ a lot!~
But another question is about percentage value
if we have a DIV in a container(width 500px,margin 0,padding 0),and we set padding-left:50%,did it equals to "padding-left:250px"? -
The percentage uses the parent values yeah, dont know if there are any "if" to that rule . . . so dar i know that's how the percentage work. Actually you can make a simple test I think, change the padding to 250px, it should still look the same.
-
are you trying to center the design horizontal or vertical??
-
sorry didnt really read :
3 ways:
1st way: auto margins works in modern browers (IE5 and 6 in quirks doensst honor auto margins
html;
<body>
<div id="wrapper"></div>
</body>
css
#wrapper{
width:720px;
margin:0 auto;
}
2nd way
body{
text-align:center;
}
#wrapper{
width:720px:
margin: 0 auto;
text-align:left;
}
3rd way
#wrapper{
position:relative;
width:720px;
left:50%;
margin-left:-360px;
} -
I think the second way is the "best" . . atleast most logical if I read the code.
-
they all work the same, just different ways of doing things
1 to 8 of 8