cable2001
08-20-2010, 08: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. :(
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. :(