madmax3
17 Aug 2009, 10:51 AM
I'm a bit of a newb to CSS so I'm still learning. I'm trying to design this site here:
http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php
I have a problem, in the divs with the gradient background on the side bar (saying calibrated sapphires, single stones, free size gems etc) when I put padding-top on them to position the text the whole div seems to expand and leave and an empty space of the background colour. I've tried using negative marings on the divs under the gradient box (the lists) and that seems to position it but I think there should be another way to fix this.
The div with the problem starts under this one:
<div id="navbar2">
HTML and CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color:#0c234f;
background-repeat:repeat-x;
margin:0;
padding:0;
}
#container {
height:253px;
margin-left:auto;
margin-right:auto;
background-image:url('images/topgradient.gif');
border-bottom-style:solid;
border-color:#335cb6;
}
#navbar {
margin-left: auto;
margin-right: auto;
width: 877px;
padding: 0;
}
#navbar ul {
display: block;
margin: 0;
padding: 0;
vertical-align: bottom;
}
#navbar ul li {
float: left;
display: inline;
}
#navbar ul li img {
display: block;
}
#cont2{
height:900px;
width:877px;
margin-left:auto;
margin-right:auto
}
#cont3 {
height:686px;
width:226px;
border-style:solid;
border-color: red
}
#navbar2 {
width: 226px;
float: left;
padding: 0;
}
</style>
<title>Wijaya gems search</title>
</head>
<body>
<div id="container"></div>
<div id="cont2">
<div id="navbar">
<ul>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/home.gif"alt="Home" width="56" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/about us.gif" alt="About us" width="81" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/calibrated sapphires.gif" alt="Calibrated Sapphires" width="166" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/single stones.gif" alt="Single stones" width="117" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/free size gems.gif" alt="Free size gems" width="119" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/wholesale.gif" alt="Wholesale" width="95" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/inquire.gif" alt="Inquire" width="71" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/exhibitions.gif" alt="Exhibitions" width="95" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/contact.gif" alt="Contact" width="77" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
</ul>
</div>
<div id="navbar2">
<div style="height: 41px; width: 226px; background-image: url('images/gradbox.gif'); font-family: Tahoma;color:#fff;text-transform:uppercase;
text-align: center; background-repeat:repeat-x; font-weight:bold; font-size:12px; padding-top:10px">calibrated sapphires</div>
<div>
<ul style="list-style-type:circle; height:180px; width:226px; background-color: #0b2b68;list-style-position:inside; font-family: Arial;color: #55a2ea; font-size: 12px; padding-top:10px">
<li style="list-style-image:url('images/gems/blue.gif'); padding-left:5px;">Blue Sapphires</li>
<li style="list-style-image:url('images/gems/pink.gif'); padding-left:5px; ">Pink Sapphires</li>
<li style="list-style-image:url('images/gems/white.gif'); padding-left:5px; ">White Sapphires</li>
<li style="list-style-image:url('images/gems/yellow.gif'); padding-left:5px; ">Yellow Sapphires</li>
<li style="list-style-image:url('images/gems/purple.gif'); padding-left:5px; ">Purple Sapphires</li>
<li style="list-style-image:url('images/gems/green.gif'); padding-left:5px; ">Green Sapphires</li>
</ul>
</div>
<div style="height: 41px; width: 226px; background-image: url('images/gradbox.gif'); font-family: Tahoma;color:#fff;text-transform:uppercase;
text-align: center; background-repeat:repeat-x; font-weight:bold; font-size:12px;
padding-top:10px">single stones</div>
<div>
<ul style="list-style-type:circle; height:180px; width:226px; background-color: #0b2b68;list-style-position:inside; font-family: Arial;color: #55a2ea; font-size: 12px; padding-top:10px">
<li style="list-style-image:url('images/gems/blue.gif'); padding-left:5px;">Blue Sapphires</li>
<li style="list-style-image:url('images/gems/pink.gif'); padding-left:5px; ">Pink Sapphires</li>
<li style="list-style-image:url('images/gems/white.gif'); padding-left:5px; ">White Sapphires</li>
<li style="list-style-image:url('images/gems/yellow.gif'); padding-left:5px; ">Yellow Sapphires</li>
<li style="list-style-image:url('images/gems/purple.gif'); padding-left:5px; ">Purple Sapphires</li>
<li style="list-style-image:url('images/gems/green.gif'); padding-left:5px; ">Green Sapphires</li>
</ul>
</div>
<div style="height: 41px; width: 226px; background-image: url('images/gradbox.gif'); font-family: Tahoma;color:#fff;text-transform:uppercase;
text-align: center; background-repeat:repeat-x; font-weight:bold; font-size:12px;
padding-top:10px;">free size gems</div>
<div style="height: 41px; width: 226px; background-image: url('images/gradbox.gif'); font-family: Tahoma;color:#fff;text-transform:uppercase;
text-align: center; background-repeat:repeat-x; font-weight:bold; font-size:12px;
padding-top:10px; ">want to visit our showroom?</div>
<div style="font-family: Arial; color: #fff; font-size:13px; padding-left: 5px; padding-right: 5px">
If you are around Colombo and would
like to visit out showroom
to witness the truly glittering gems and jewelry,
simply contact over this number,<br>
011 2506393 and we will provide you free transportation from
your hotel up & down. Tell us where you are.
</div>
</div>
</div>
</body>
</html>
http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php
I have a problem, in the divs with the gradient background on the side bar (saying calibrated sapphires, single stones, free size gems etc) when I put padding-top on them to position the text the whole div seems to expand and leave and an empty space of the background colour. I've tried using negative marings on the divs under the gradient box (the lists) and that seems to position it but I think there should be another way to fix this.
The div with the problem starts under this one:
<div id="navbar2">
HTML and CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color:#0c234f;
background-repeat:repeat-x;
margin:0;
padding:0;
}
#container {
height:253px;
margin-left:auto;
margin-right:auto;
background-image:url('images/topgradient.gif');
border-bottom-style:solid;
border-color:#335cb6;
}
#navbar {
margin-left: auto;
margin-right: auto;
width: 877px;
padding: 0;
}
#navbar ul {
display: block;
margin: 0;
padding: 0;
vertical-align: bottom;
}
#navbar ul li {
float: left;
display: inline;
}
#navbar ul li img {
display: block;
}
#cont2{
height:900px;
width:877px;
margin-left:auto;
margin-right:auto
}
#cont3 {
height:686px;
width:226px;
border-style:solid;
border-color: red
}
#navbar2 {
width: 226px;
float: left;
padding: 0;
}
</style>
<title>Wijaya gems search</title>
</head>
<body>
<div id="container"></div>
<div id="cont2">
<div id="navbar">
<ul>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/home.gif"alt="Home" width="56" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/about us.gif" alt="About us" width="81" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/calibrated sapphires.gif" alt="Calibrated Sapphires" width="166" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/single stones.gif" alt="Single stones" width="117" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/free size gems.gif" alt="Free size gems" width="119" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/wholesale.gif" alt="Wholesale" width="95" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/inquire.gif" alt="Inquire" width="71" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/exhibitions.gif" alt="Exhibitions" width="95" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
<li><a href="http://lolgfx.cookingwithcandles.uni.cc/wijaya/htdocs/wijayasearch.php"><img src="images/navbar/contact.gif" alt="Contact" width="77" height="42" style="padding: 0px; margin: 0px; border: none"></a></li>
</ul>
</div>
<div id="navbar2">
<div style="height: 41px; width: 226px; background-image: url('images/gradbox.gif'); font-family: Tahoma;color:#fff;text-transform:uppercase;
text-align: center; background-repeat:repeat-x; font-weight:bold; font-size:12px; padding-top:10px">calibrated sapphires</div>
<div>
<ul style="list-style-type:circle; height:180px; width:226px; background-color: #0b2b68;list-style-position:inside; font-family: Arial;color: #55a2ea; font-size: 12px; padding-top:10px">
<li style="list-style-image:url('images/gems/blue.gif'); padding-left:5px;">Blue Sapphires</li>
<li style="list-style-image:url('images/gems/pink.gif'); padding-left:5px; ">Pink Sapphires</li>
<li style="list-style-image:url('images/gems/white.gif'); padding-left:5px; ">White Sapphires</li>
<li style="list-style-image:url('images/gems/yellow.gif'); padding-left:5px; ">Yellow Sapphires</li>
<li style="list-style-image:url('images/gems/purple.gif'); padding-left:5px; ">Purple Sapphires</li>
<li style="list-style-image:url('images/gems/green.gif'); padding-left:5px; ">Green Sapphires</li>
</ul>
</div>
<div style="height: 41px; width: 226px; background-image: url('images/gradbox.gif'); font-family: Tahoma;color:#fff;text-transform:uppercase;
text-align: center; background-repeat:repeat-x; font-weight:bold; font-size:12px;
padding-top:10px">single stones</div>
<div>
<ul style="list-style-type:circle; height:180px; width:226px; background-color: #0b2b68;list-style-position:inside; font-family: Arial;color: #55a2ea; font-size: 12px; padding-top:10px">
<li style="list-style-image:url('images/gems/blue.gif'); padding-left:5px;">Blue Sapphires</li>
<li style="list-style-image:url('images/gems/pink.gif'); padding-left:5px; ">Pink Sapphires</li>
<li style="list-style-image:url('images/gems/white.gif'); padding-left:5px; ">White Sapphires</li>
<li style="list-style-image:url('images/gems/yellow.gif'); padding-left:5px; ">Yellow Sapphires</li>
<li style="list-style-image:url('images/gems/purple.gif'); padding-left:5px; ">Purple Sapphires</li>
<li style="list-style-image:url('images/gems/green.gif'); padding-left:5px; ">Green Sapphires</li>
</ul>
</div>
<div style="height: 41px; width: 226px; background-image: url('images/gradbox.gif'); font-family: Tahoma;color:#fff;text-transform:uppercase;
text-align: center; background-repeat:repeat-x; font-weight:bold; font-size:12px;
padding-top:10px;">free size gems</div>
<div style="height: 41px; width: 226px; background-image: url('images/gradbox.gif'); font-family: Tahoma;color:#fff;text-transform:uppercase;
text-align: center; background-repeat:repeat-x; font-weight:bold; font-size:12px;
padding-top:10px; ">want to visit our showroom?</div>
<div style="font-family: Arial; color: #fff; font-size:13px; padding-left: 5px; padding-right: 5px">
If you are around Colombo and would
like to visit out showroom
to witness the truly glittering gems and jewelry,
simply contact over this number,<br>
011 2506393 and we will provide you free transportation from
your hotel up & down. Tell us where you are.
</div>
</div>
</div>
</body>
</html>