Results 1 to 2 of 2

Thread: Positioning problem

  1. #1
    Join Date
    Aug 2009
    Posts
    1

    Positioning problem

    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...jayasearch.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:
    Code:
    <div id="navbar2">
    HTML and CSS:
    Code:
    	<!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>

  2. #2
    Dorian Guest
    Even I'm a newbie in designing websites and in hosing. Designing a website in a proper way is a most to position others. Try looking for an alternative options.

Similar Threads

  1. CSS positioning problem - and IE problem
    By electrickeye in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 24 Mar 2008, 05:16 PM
  2. CSS layer positioning problem
    By derdeb in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 08 Jul 2005, 11:26 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •