PDA

View Full Version : html help ?



Jebbo
04-08-2008, 09:40 AM
Whats wrong with my code ??
Why is there a gap between the header and middle ?

What it looks like:

http://img34.picoodle.com/img/img34/3/8/4/f_hghm_6f1936f.png

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>
<title>Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
text-align: center;
background-color: #ffffff;
}
#container {
width: 437px;
}
#top {
background: url(images/box/top3.png);
height: 30px;
}
#mid {
background: url(images/box/mid2.png);
}
#bot {
background: url(images/box/bot2.png);
height: 9px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top"><b>Hello</b></div><BR>
<div id="mid"><BR><BR><BR><BR><BR></div>
<div id="bot"></div>
</div>
</body>
</center>
</html>

Calon
04-08-2008, 09:45 AM
Whats wrong with my code ??
Why is there a gap between the header and middle ?

What it looks like:

http://img34.picoodle.com/img/img34/3/8/4/f_hghm_6f1936f.png

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>
<title>Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
text-align: center;
background-color: #ffffff;
}
#container {
width: 437px;
}
#top {
background: url(images/box/top3.png);
height: 30px;
}
#mid {
background: url(images/box/mid2.png);
}
#bot {
background: url(images/box/bot2.png);
height: 9px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top"><b>Hello</b></div><BR>
<div id="mid"><BR><BR><BR><BR><BR></div>
<div id="bot"></div>
</div>
</body>
</center>
</html>
<div id="top"><b>Hello</b></div><BR>
<div id="mid"><BR><BR><BR><BR><BR></div>
<div id="bot"></div>

I bolded it.

Jahova
04-08-2008, 09:47 AM
Indeed, he is correct.

Jebbo
04-08-2008, 09:49 AM
Thanks +Rep

craigg.
04-08-2008, 12:46 PM
<!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>
<title>Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
text-align: center;
background-color: #ffffff;
}
#container {
width: 437px;
}
#top {
background: url(images/box/top3.png);
height: 30px;
}
#mid {
background: url(images/box/mid2.png);
margin-bottom: 20px;
}
#bot {
background: url(images/box/bot2.png);
height: 9px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top"><b>Hello</b></div>
<div id="mid"></div>
<div id="bot"></div>
</div>
</body>
</center>
</html>

This is a good attempt, stay away from HTML tags when using xHTML. In CSS there is a tag called margin, it creates a gap instead of using <br />.

Keep working/posting your xhtml code and I'll be happy to keep pushing you in the right direction.

Excellent
04-08-2008, 12:51 PM
Looks good. Try staying away from using <br /> as craigg said, it's not as effective as margin-top: or just a standard margin! Try exploring with margins, it makes life much easier.

Want to hide these adverts? Register an account for free!