Hi, I just started a little css layout and I have a probleme with it.
The web site is there: ph.mongeau.googlepages.com/index.html
my probleme is that when I add a h1 title, it adds paddind on top and bottom eaven if i say padding: 0; in my css code.
here's my css:
@import url();
body {
font-family: Helvetica, Verdana, sans-serif;
font-size: 90%;
line-height: 1.6em;
text-align: left;
margin: 0;
margin-left: auto;
margin-right: auto;
padding: 0px;
background: #656565 url(background.jpg);
color: rgb(0, 0, 0);
}
#header{
background: #FF9900;
margin: 0 auto;
width: 100%;
height: 100px;
}
#division{
height:10px;
width:100%;
}
#wrapper{
width: 95%;
margin: 0 auto;
text-align: left;
}
#index{
background: #0058D6;
}
#page1{
background: #996633;
}
#page2{
background: #FF0000;
}
#page3{
background: #309600;
}
a, a:link, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
border: 0;
}
h1 {
font-size: 150%;
font-weight: bold;
text-align: center;
}
and here's my html:
Piles
Praesent luctus nonummy diam. Pellentesque est. Sed porta, pede at ullamcorper semper, lacus velit auctor est, nec consectetuer tellus turpis vitae justo. Aliquam et sapien eu odio porta varius. Fusce magna. Vestibulum gravida purus sed ligula. Ut mollis euismod massa. Quisque lobortis hendrerit felis. Praesent facilisis. Ut ante. Nam mauris. Vivamus sem. Fusce quis mi vel turpis vehicula hendrerit. Nullam sed libero. Aenean risus. Integer tincidunt mi ac odio. Etiam mauris.
Nulla enim mi, posuere nec, eleifend eget, semper ac, leo. Integer dignissim lorem at purus. Nullam sem est, dignissim ut, eleifend ac, eleifend a, massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean iaculis pretium neque. Nullam vel sapien. Quisque augue lectus, malesuada non, rhoncus a, facilisis eu, nisl. Sed massa justo, fermentum convallis, luctus sed, sodales a, dolor. Vivamus lobortis. Nunc elit. Nulla facilisi. Fusce semper.
Aenean sit amet neque in nisl pretium viverra. Integer eget pede id diam nonummy scelerisque. Suspendisse libero libero, tempor in, convallis vitae, hendrerit ut, libero. Curabitur mattis, quam eu tempor pretium, nulla erat tincidunt odio, molestie sollicitudin nibh arcu ut erat. Etiam vitae eros. Nullam convallis lectus nec lorem. Aliquam suscipit mauris eu justo. Integer neque. Aliquam at odio nec nisl eleifend egestas. Proin ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean ac purus. Aliquam erat volutpat. Praesent eget pede vitae ligula mattis cursus. Sed ultricies libero vitae odio.
You header is made up of
Your header is made up of three parts. View the attached image.
Part one is the actual font face. In the image, the gray area is what the font occupies. Notice that the descenders drop below the nominal face area, and the ascenders don't quite reach the top. This is dependent on design. The nominal font size is the measure from the top of the ascender to the bottom of the descender. My demo is a nominal 100px font-size. Actual measurement is 95px for this font.
You specified a line-height of 1.6em. On this 100px font, that means it's 160px, with half above and half below the font's middle. That leaves 30px above and below the font itself. I've colored it pink.
The <h1> has a default margin of .67em, top and bottom. That's the 67px at top and bottom that I colored yellow.
There is no default padding on <h1>. Reset the margin( or adjust the line-height (the usual default is 1.2).
cheers,
gary
Attachment | Size |
---|---|
font-test.gif | 6.59 KB |
Ok, thanks.
Ok, thanks.