A weird problem with the <div> tag

Balidani

02-15-2011, 10:11 PM

Hi there!

This is my first post here. I registered because I'm in need of help, and I'm totally clueless. I hope some people could help.

I'm building a website and I decided to add a gradient background to the top of each column. This is the code I used:

<!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" />
<style type="text/css">
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #ECDBA6;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}

h1 {
margin: 0;
padding-top: 20px;
}

.teststyle #gradient {
width: 100%;
height: 100px;
background-image: url(gradient.png);
}
</style>
</head>

<body class="teststyle">
<div id="gradient"/>
<h1>Hello World!</h1>
<p>
Lorem ipsum dolor sit amet
</p>
</body>
</html>

The first interesting thing is that if I use "<div></div>" instead of "<div/>" the whole thing goes wrong. The gradient.png image doesn't go behind the text - it's just simply standing above the text. Why is this?

The real problem is when I have two collumns, one of which floats on the left and the other on the right side of the page. Adding the "<div/>" part makes everything collapse. This is a sample code:

<!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" />
<style type="text/css">
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}

.teststyle2 #gradient_left {
float: left;
width: 100%;
height: 100px;
background-image: url(images/gradient.png);
}

.teststyle2 #container {
width: 900px;
margin: 0 auto;
text-align: left;
}

.teststyle2 #sidebar1 {
float: left;
width: 11em;
padding: 0;
background: #ECDBA6;
}

.teststyle2 #sidebar2 {
float: right;
width: 11em;
padding: 0;
background: #ECDBA6;
}

.teststyle2 #sidebar1 h3, .thrColHybHdr #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
}

</style>
</head>

<body class="teststyle2">
<div id="container">
<div id="sidebar1">



<div id="gradient_left"/>



<h3>sidebar 1</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="sidebar2">
<h3>sidebar 2</h3>
<p>Donec eu mi sed turpis feugiat feugiat.</p>
</div>
</div>
</body>
</html>

I have no idea why this is happening. Could somebody give me a hint?
Thanks, in advance!

Excavator

02-15-2011, 10:22 PM

Hello Balidani,
Where did you come up with "<div/>" ?

Check out the links in my signature line about validating. They will really help you a lot.

Balidani

02-15-2011, 10:31 PM

Thanks for your reply!

I'm not really experienced with HTML, so I just thought it would work like in XML. And it worked for some reason.

Now I'll read everything you have in your sig. about validation. I'm quite experienced with programming languages like C, C++, Java, ... It seems trying to teach myself HTML thinking "hey it's just HTML" wasn't such a great idea.

If I can't do it this way, could you tell me how should I go about achieving the same effect?
I'd really appreciate it!

Excavator

02-15-2011, 10:37 PM

In that second example you post, you have #sidebar2 nested inside #sidebar1. You probably just missed the closing tag for #sidebar1.

Balidani

02-15-2011, 10:42 PM

Thanks, but the problem is that I don't want that image for the whole sidebar. It's just a 100pixel high image, and below that I'd like a single color.

And separating the sidebar would make the text appear either only in front of the gradient image or the normal background color.

Is this something hard to achieve? Maybe I should change my plans.

Kristofa

02-15-2011, 10:46 PM

Put this for the sidebar1 css:

background:#ECDBA6 url('mages/gradient.png') no-repeat center top;}

And get rid of <div id="gradientleft"/>

Balidani

02-15-2011, 10:56 PM

Thank you so much!
You solved my problem :)

Now I'm off to read about validation.
Thank you guys!