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:

Code:

HTML 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

Originally Posted by Jebbo

Whats wrong with my code ??
Why is there a gap between the header and middle ?

What it looks like:

Code:

HTML 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

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);
  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.

Thread: html help ?

Thread Tools

html help ?

Posting Permissions