...

View Full Version : Don't understand Heading spacing



cable2001
08-20-2010, 09:06 PM
Would someone please explain to me how the margins/padding around headings work and what to do about them when they interfere with DIV elements?

I was having an issue yesterday while trying to code a site with a main content element that was supposed to butt up against the element above it. I kept having an issue where there was a bar with the background color showing between the two elements. After much hair pulling, I finally figured out that it was because the first line of text was coded as <H1> and that was causing the problem. I put a <br /> ahead of it and the space closed up, but that isn't really the way I want it because now there is a lot of blank space.

Quick and dirty example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.content {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
}
#box1 {
background-color: #FFC;
width:100%;
}

#box2 {
background-color:#FCC;
width:100%;
}

#box3 {
background-color: #FFC;
width:100%;
}

#box4 {
background-color:#FCC;
width:100%;
}

</style></head>

<body class="content" style="font-size: 14px">

<div id="box1">some text</div>
<div id="box2">some text</div>
<div id="box3">
<h1>some text</h1>
</div>
<div id="box4">some text</div>

</body>
</html>


"Fixed" code that shows the top elements together but the bottom one is still off:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.content {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
}
#box1 {
background-color: #FFC;
width:100%;
}

#box2 {
background-color:#FCC;
width:100%;
}

#box3 {
background-color: #FFC;
width:100%;
}

#box4 {
background-color:#FCC;
width:100%;
}

</style></head>

<body class="content" style="font-size: 14px">

<div id="box1">some text</div>
<div id="box2">some text</div>
<div id="box3">
<br /><h1>some text</h1>
</div>
<div id="box4">some text</div>

</body>
</html>


I also noticed that if I try to float two elements next to each other that the padding interferes with them and causes them to not line up. For example, if I make one 80% and another 20% and contain them within another element they are fine. But if I try to add an internal margin to the elements themselves, they are "too big" to fit. However, if I instead create a new class and apply it to the text that has the same padding, it works just fine.

How can I account for this and still keep elements where I want them?

I'm still trying to wrap my head around the differences while switching from table design to CSS and am finding coding taking far longer than it used to just because I don't understand. :(

jolly_nikki
08-20-2010, 11:32 PM
If possible remove the tag <h1> and add style using css

cable2001
08-21-2010, 02:51 AM
I could, but I was trying to use the headings for SEO.

abduraooft
08-21-2010, 08:12 AM
Add
*{
margin:0;
padding:0;
} into your CSS to remove all browser specific values of margins and paddings from all elements.

cable2001
08-21-2010, 03:24 PM
Hmm. That looks promising. Add it where? Is that a standalone at the top or does it go into the main element or each element as needed?

Because I just checked and I have it in the main wrapper element already.

abduraooft
08-22-2010, 10:41 AM
Add it where? Is that a standalone at the top or does it go into the main element or each element as needed? Add into your CSS file. * is the universal selector to refer all the elements.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum