I need help with this layout coding.

Meti · 31-05-2008, 09:03 PM

Hi,

I'm currently coding a Habbo Layout for one of MetiDesigns.com's customers.
But I've got one problem which I haven't got before.
I've added the banner, navigations and the content box. And the banner is on it's place, where I want it to be.

But the Navigations and content box aren't right.
It's like this:
BANNER
CONTENT BOX
NAVIGATIONS

I want the content box to be in the middle.

Here's the CSS 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>HabSafety V1 :: </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
  text-align: center;
  background-color: #ffffff;
  width: 800px;
  margin: auto;
}
#content {
  width: 390px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  margin: 0 auto;
}
#ctop {
  background: url(images/content_top.gif);
  height: 11px;
}
#cmid {
  background: url(images/content_mid.gif);
}
#cbot {
  background: url(images/content_bot.gif);
  height: 10px;
}
#nav1 {
  width: 390px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  float:left;
}
#top {
  background: url(images/top3.gif);
  height: 11px;
}
#mid {
  background: url(images/top3_mid.gif);
}
#bot {
  background: url(images/top2_bot.gif);
  height: 10px;
}
#nav2 {
  width: 390px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  float:left;
}
#top1 {
  background: url(images/top3.gif);
  height: 11px;
}
#mid1 {
  background: url(images/top3_mid.gif);
}
#bot1 {
  background: url(images/top2_bot.gif);
  height: 10px;
}
#nav3 {
  width: 390px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  float:left;
}
#top2 {
  background: url(images/top3.gif);
  height: 11px;
}
#mid2 {
  background: url(images/top3_mid.gif);
}
#bot2 {
  background: url(images/top2_bot.gif);
  height: 10px;
}
-->
</style>
</head>

Here's the BODY:

HTML Code:

<body>
<!-- Content Box --!>
<div id="content" style="width: 584px; height: 53px">
  <div id="ctop" style="width: 584px; height: 26px"><br>
    <b>Add the content title here</b></div>
  <div id="cmid">And here you can add how much things you want</div>
  <div id="cbot" style="width: 588px; height: 13px"></div>
<!-- End of Content Box --!>
<!--- First Navigation ---!>
<div id="nav1" style="width: 212px; height: 47px">
  <div id="top" style="width: 211px; height: 22px">&nbsp;</div>
  <div id="mid">This box is expandable</div>
  <div id="bot" style="width: 212px; height: 12px"></div>
<!--- End of First Navigation ---!>
<!--- Second Navigation ---!>
<div id="nav2" style="width: 212px; height: 47px">
  <div id="top1" style="width: 211px; height: 22px">&nbsp;</div>
  <div id="mid1">This box is expandable</div>
  <div id="bot1" style="width: 212px; height: 12px"></div>
<!--- End of Second Navigation ---!>
<!--- Third Navigation ---!>
<div id="nav3" style="width: 212px; height: 47px">
  <div id="top2" style="width: 211px; height: 22px">&nbsp;</div>
  <div id="mid2">This box is expandable</div>
  <div id="bot2" style="width: 212px; height: 12px"></div>
<!--- End of Third Navigation ---!>

</div>

</body>
</html>

Can you see any errors?
If yes, please tell me.
Everyone who helps will recieve a +REP!

Thanks,
Meti

Lulz · 01-06-2008, 11:36 PM

I can't be botherd to go though it, but as your using CSS, would be easier to have the width/height in the CSS as well. I dunno if that's a error your having becuase I havn't checked, just a suggestion.

Meti · 02-06-2008, 12:53 PM

Okay, but if there's anyone else who knows, please tell me!

kreechin · 02-06-2008, 01:48 PM

Code:

</style>
</head>

<body>

<div id="content" style="width: 584px; height: 53px">
  <div id="ctop" style="width: 584px; height: 26px"><br>
    <b>Add the content title here</b></div></div>
  <div id="cmid">And here you can add how much things you want</div>
  <div id="cbot" style="width: 588px; height: 13px"></div>

<div id="nav1" style="width: 212px; height: 47px">
  <div id="top" style="width: 211px; height: 22px">&nbsp;</div>
  <div id="mid">This box is expandable</div>
  <div id="bot" style="width: 212px; height: 12px"></div>

<div id="nav2" style="width: 212px; height: 47px">
  <div id="top1" style="width: 211px; height: 22px">&nbsp;</div>
  <div id="mid1">This box is expandable</div>
  <div id="bot1" style="width: 212px; height: 12px"></div>

<div id="nav3" style="width: 212px; height: 47px">
  <div id="top2" style="width: 211px; height: 22px">&nbsp;</div>
  <div id="mid2">This box is expandable</div>
  <div id="bot2" style="width: 212px; height: 12px"></div>




</body>
</html>

Is that what your trying to do?

Meti · 02-06-2008, 01:50 PM

Same thing.. You just removed the <!--- THOSE DON'T BOTHER ---!>

Thread: I need help with this layout coding.

Thread Tools

I need help with this layout coding.

Posting Permissions