2 replies [Last post]
ph.mongeau
Offline
newbie
Last seen: 15 years 12 weeks ago
Joined: 2008-03-07
Posts: 6
Points: 0

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi. Phasellus ornare erat sit amet risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc a ligula eu orci scelerisque mollis. Curabitur eget nisi vel lacus auctor fermentum. Donec bibendum dolor vel arcu. Ut urna velit, mattis eu, rutrum pretium, tincidunt at, odio. Mauris accumsan dignissim neque. Etiam consectetuer sapien at eros. Quisque sed tellus eu dui lobortis tincidunt. In at pede. Donec ut mi. Suspendisse aliquam turpis. Nulla facilisis, arcu at scelerisque pulvinar, dolor nulla ornare tortor, eu cursus magna dui in diam. Aliquam erat volutpat. Proin sed lorem.

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.


Page 1

Page 2

Page 3

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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(Drunk or adjust the line-height (the usual default is 1.2).

cheers,

gary

AttachmentSize
font-test.gif 6.59 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ph.mongeau
Offline
newbie
Last seen: 15 years 12 weeks ago
Joined: 2008-03-07
Posts: 6
Points: 0

Ok, thanks.

Ok, thanks.