illiminating spaces in between divs

[Coxylaad]

Hi,
i am trying to construct a web page but I am having a few issues when trying build up a nice shape using divs.

eg if I have the following:

<div class = "banner"> Hello </div>
<div class = "sidebar"> test </div>

now if I set the background colours in these 2 divs to be say blue for instance, you can see that it seperates the 2 divs with thin white border, and I have set the margins and padding to 0px in all cases.

Help?

Thanks

Ian

 

[guitardave78]

A <div> is a block element, so it is like putting text in <p></p> tags, you get a line break

Can i see your css associated with banner and sidebar? I ask as
<div class = "banner" style="background-color: #FF0000;"> Hello </div>
<div class = "sidebar" style="background-color: #FF00FF;"> test </div>

gives no border!

 

[cLFlaVA]

Coxylaad

You'll want to set the margin-bottom and padding-bottom both to 0.

<div style="margin-bottom: 0; padding-bottom: 0;">Blah</div>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[Vragabond]

I have the same problem as guitardave. The supplied code gives no gap between the two divs.

 

[Coxylaad]

ok then here is the code:

<div id=wrapper>
<img class="banner", src="_image/banner.gif", alt="">

<div class="topmenu">
<div class="TopMenuItem" > Contact Us </div>
<div class="TopMenuItem"> About Us </div>
<div class="TopMenuItem"> Services </div>
<div class="TopMenuItem"> Profile </div>
<div class="TopMenuItem"> Home </div>
</div>

<span class="spacer"> _ </span>
<img src="_image/corner.gif" alt="">

<div class="SideMenu">
<div class="SidemenuItem"> 1 </div>
<div class="SidemenuItem"> 2 </div>
<div class="SidemenuItem"> 3 </div>
<div class="SidemenuItem"> 4 </div>
<div class="SidemenuItem"> 5 </div>
<div class="SidemenuItem"> 6 </div>
<div class="SidemenuItem"> 7 </div>
</div>

I had to use that span bit to get rid of another dividing space. so when I find out how to get rid of this problem then I will probablies be able to replace that too.

Here is my css:

div#wrapper
{
width: 774;
}

Div.TopMenu
{
width: 772;
background-color: #BCF767;
}



div.SideMenu
{
width: 120px;
font-size: 8pt;
vertical-align: top;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
float: left;
}

div.SideMenuItem
{
font-family:Arial;
font-size:small;
font-weight:bold;
text-align: center;
line-height: 30px;
background-color:#BCF767;
color: White;
}

div.MenuItem a:hover
{
color:#EEEEEE;
background-color:#2A7BC6;
}

div.SideMenuItem a:link, div.SideMenuItem a:visited, div.SideMenuItem a:active
{
color:#FFFFFF;
background-color:#D8FAA8;
text-decoration:none;
width: 100%;
display: block;
}

img.banner
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
display:block;
}


div.TopMenuItem
{
font-family: Arial;
font-size:small;
text-align: center;
color:White;
font-weight:bold;
width: 100px;
float:right;
border-left: solid 2px white;
}

span.spacer
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color:#BCF767;
width:120px;
line-height: 30px;
vertical-align:top;
color:#BCF767;
}

The little bugger is really beginning to annoy me now.
Its just there mocking me!

Thanks

Ian



</div>
</body>

 

[guitardave78]

Ok. The corner Gif is buggering it up for me!!
What are the dimensions of the corner gif and the banner gif?

 

[cLFlaVA]

There are many things wrong with this code. For one, you shouldn't have a capital D in Div in your CSS.

For another, why do you have commas in between the properties of your image tag: <img class="banner", src="_image/banner.gif", alt="">

Should be:

<img class="banner" src="_image/banner.gif" alt="">

And for yet another: CSS is case sensitive. make sure you remember that.

Also, you need units for your widths. You should hop on over to

http://validator.w3.org/

and check out what they tell you.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[guitardave78]

ok that aside try these
div.SideMenu
{
width: 120px;
font-size: 8pt;
vertical-align: top;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
float: left;
clear:both;
background-color:#FF0000;

}

and

div.TopMenuItem
{
font-family: Arial;
font-size:small;
text-align: center;
color:White;
font-weight:bold;
width: 100px;
float:left;
border-left: solid 2px white;
background-color: #BCF767;
}

 

[cLFlaVA]

why "that aside"? You don't want valid code?

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[guitardave78]

Oh dont start
Just trying to be helpful you already told him what was wrong with his code i felt no need to push that further

 

[cLFlaVA]

yeah, my bad, i thought you were the author.
my apologies.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[cLFlaVA]

and what exactly was I 'starting'?

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[guitardave78]

No Probs Sorry i get a bit defensive as have been flamed a number of times on these forums while trying to help

 

[cLFlaVA]

yeah, a lot of things can be taken out of context, since the forum is text-based. let's hope the author's problem is solved, since that's what matters

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[Coxylaad]

ok thank you very much chaps i will have a crack at it now.

Please dont argue on my account

I am just a novice

 

[guitardave78]

Try playing with this idea as well

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>

div.SideMenu{
width: 120px;
font-size: 8pt;
vertical-align: top;
background-color:#BCF767;
}


div.TopMenuItem{
font-family: Arial;
font-size:small;
text-align: center;
color:White;
font-weight:bold;
width: 100px;
border-left: solid 2px white;
background-color: #BCF767;

}
div.TopMenu{
width: 772;
background-color: #BCF767;
}
#nav li {

font-family:Arial;
font-size:small;
font-weight:bold;
text-align: center;
line-height: 30px;
background-color:#BCF767;
color: White;
margin: 0;
padding: 0;
list-style-type: none;
}
#nav ul {
margin: 0;
}
</style>
<body>
<div class="TopMenu">
<span class="TopMenuItem" > Contact Us </span>
<span class="TopMenuItem"> About Us </span>
<span class="TopMenuItem"> Services </span>
<span class="TopMenuItem"> Profile </span>
<span class="TopMenuItem"> Home </span>
</div>

<div class="SideMenu">
<ul id="nav">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
<li> 6 </li>
<li> 7 </li>
</ul>
</div>


</body>
</html>

 

[guitardave78]

swap div.TopMenuItem for

span.TopMenuItem{
font-family: Arial;
font-size:small;
text-align: center;
color:White;
font-weight:bold;
background-color: #BCF767;
padding-left:60px;
}

 

[Coxylaad]

OK thanks for your help chaps, I have isolated the problem - its teh bloody little corner gif!!!

I am going to sort it now thanks

regards

Ian (trainee html ninja)