Help with CSS+Div's

shanes

New Member
Messages
35
Reaction score
0
Points
0
Well i'm coding a layout for someone and I've encounterd a little problem...
http://shanes.pcriot.com/swinkid/index.html is the url

I wanted to centre the layout without using tables so I made a container div , the problem with this is for some reason the contain div closes off without me wanting it to .
Here's the soruce:
HTML:
<!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>--ss--</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="Habbo,Layout" />
<meta name="Description" content="This layout is coded by --ss-- off Habboxforum.com for Swinkid." />
<style type="text/css">
<!--
body {
  padding: 0px;
  background-image: url(images/bg1.gif);
}
#container {
  width: 798px;
  background-color: #4B6D78;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  font-family: verdana;
  font-size: 12px;
}
#banner {
  width: 798px;
  height: 118px;
  background-image: url(images/banner.PNG);
}
#top {
  width: 798px;
  height: 20px;
  background-image: url(images/m_bg.PNG);
  padding-top: 4px;
}
#box {
  width: 169px;
  background-image: url(images/box_bg.PNG);
  background-color: #4B6D78;
  float: left;
  margin-left: 4px;
  margin-top: 14px;
  text-align: left;
}
-->
</style>
</head>
<body>
<center>
<div id="container">
  <div id="banner"> </div
   <div id="top">123</div>
    <div id="box"><img src="images/box_top.PNG" /> »Test<br /> »Test<br /><img src="images/box_bot.PNG" /> </div>
</div>
</center>
</body>
</html>
I want the background colour I have for my container to go behind the 'box' div
 

iamcrux

New Member
Messages
25
Reaction score
0
Points
0
try this one:
#container #banner {
width: 798px;
height: 118px;
background-image: url(images/banner.PNG);
}
and so on

banner is child of container... so is top and box. Hope u got it...
 
Last edited:

shanes

New Member
Messages
35
Reaction score
0
Points
0
try this one:

and so on

banner is child of container... so is top and box. Hope u got it...
Tried putting '#container' infront of the others but ti still doesn't work.
I think i'm not explaining it well enough , my 'container' div seems to end after the '#top' div , I want my 'box' to be inside itso the background around the box is the blue colour not the background i've put in for the body
 

shanes

New Member
Messages
35
Reaction score
0
Points
0
It might be because you didnt close you banner div...
Lol just noticed that , +rep for pointing that out , I've closed the div yet it's still the same :s
If I do <br />'s the blue background show's underneath the 'top' div so i'm guessing for some weird reason the 'Box' isn't placed inside the container div :dunno:
 

sourfacedcyclop

New Member
Messages
221
Reaction score
0
Points
0
Not sure if this would work but you could try to give your container a height value.
 

iamcrux

New Member
Messages
25
Reaction score
0
Points
0
Lol just noticed that , +rep for pointing that out , I've closed the div yet it's still the same :s
If I do <br />'s the blue background show's underneath the 'top' div so i'm guessing for some weird reason the 'Box' isn't placed inside the container div :dunno:


wel then...
try to replace
float: left;

property with
float: none;
this will make #box to go inside #container... try that
 
Last edited:

shanes

New Member
Messages
35
Reaction score
0
Points
0
wel then...
try to replace


property with

this will make #box to go inside #container... try that
Thank's that worked but how do I know poisition the boxes to the left of the container without using the float tags :S
 

Jober68

Member
Messages
63
Reaction score
0
Points
6
maybe use a div.class instead of an id? I'm not really sure what difference it makes but it's worth a shot.
 

jensen

Active Member
Messages
1,167
Reaction score
22
Points
38
Maybe you can use paint to sketch what you would like the page to look like so that we can give some suggestions as to what to plan to achieve. Thanks. You could also use the firebug extension on Firefox2 or the webdev tool bar in IE6 to find out what's happening on your page.
 

shanes

New Member
Messages
35
Reaction score
0
Points
0
maybe use a div.class instead of an id? I'm not really sure what difference it makes but it's worth a shot.
There are no differences except you use 'class' when you want to use the same css segmant more than once , You need to use id to make it XHTML valid ;)
Maybe you can use paint to sketch what you would like the page to look like so that we can give some suggestions as to what to plan to achieve. Thanks. You could also use the firebug extension on Firefox2 or the webdev tool bar in IE6 to find out what's happening on your page.
http://www.shanes.pcriot.com/swinkid/images/uncoded.png Is the image the guy gave to me , I've got firebug but I don't see how it can help :s
 

jensen

Active Member
Messages
1,167
Reaction score
22
Points
38
click on "inspect" then you could mouse over the section with problem.
You can also edit the css or html and see the effects there and then without having to save and reload. Then once you've got the site looking the way you want it to be, go change the actual image.

Looks like mooseman has got it done already.
 
Top