need a bit of css help

Discussion in 'CSS' started by demons-halo, Apr 25, 2011.

  1. #1
    ok guys so ive got this so far, my html page and the css that lays it out, i need someone to put three columns in under the nav bar, all three columns must be the same width all together as the nav bar, can anyone help me

    #container{
    width: 75%;
    display: absolute;
    margin: 0 auto;
    border: 1px solid #FFF;
    }
    
    p#logo{
    width: 387px;
    height: 69px;
    background: url(media/logo.png);
    margin: 10px 0 20px 45px;
    }
    
    p#side{
    float: left;
    width: 200px;
    height: 500px;
    border: 5px solid #678b3f;
    margin: 10px 0 0 0;
    }
    
    p#rfl{
    float: left;
    width: 350px;
    height: 170px;
    background: url(media/rfl.png);
    margin: 10px 0 0 20px;
    }
    
    #testbox{
    display: left;
    width: 173px;
    height: 66px;
    background: url(media/testbox.png);
    margin: 0 0 0 0px;
    }
    
    .sidefont{
    font: normal 11px Arial, Verdana, sans-serif;
    }
    
    .ddcolortabs{
    padding: 0;
    width: 90%;
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
    }
    
    .ddcolortabs ul{
    font: normal 11px Arial, Verdana, sans-serif;
    margin:0;
    padding:0;
    list-style:none;
    }
    
    .ddcolortabs li{
    display:inline;
    margin:0 2px 0 0;
    padding:0;
    text-transform:uppercase;
    }
    
    
    .ddcolortabs a{
    float: left;
    color: white;
    background: #678b3f url(media/color_tabs_left.gif) no-repeat left top;
    margin:0 2px 0 0;
    padding:0 0 1px 3px;
    text-decoration:none;
    letter-spacing: 1px;
    }
    
    .ddcolortabs a span{
    float: left;
    display:block;
    background: transparent url(media/color_tabs_right.gif) no-repeat right top;
    padding: 6px 8px 3px 7px;
    }
    
    .ddcolortabs a span{
    float: left;
    }
    
    .ddcolortabs a:hover{
    background-color: #8cb85c;
    }
    
    .ddcolortabs a:hover span{
    background-color: #8cb85c;
    }
    
    
    .ddcolortabs a.current, #ddcolortabs a.current span{ /*currently selected tab*/
    background-color: #8cb85c;
    }
    
    .ddcolortabsline{
    clear: both;
    padding: 10px 0 0 0;
    width: 90%;
    height: 8px;
    line-height: 8px;
    background: #678b3f;
    border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
    }
    
    .tabcontainer{
    clear: left;
    padding: 6px 0 0 0;
    width: 100%;
    height: 15px;
    line-height: 8px;
    background: #678b3f;
    border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
    }
    
    .tabcontent{
    display:none;
    float: left;
    padding: 0 0 0 55px;
    }
    
    Code (markup):

    <!-- CSS for Tab Menu #4 -->
    <link rel="stylesheet" type="text/css" href="ddtabmenufiles/ddcolortabs.css" />
    
    
    
    <script type="text/javascript">
    //SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
    ddtabmenu.definemenu("ddtabs4", 0) //initialize Tab Menu #4 with 3rd tab selected
    
    
    </script>
    
    <body>
    
    <div id="container">
    
    	<p id="logo"><a href="index.html"></a></p>
    <center>
    <div id="ddtabs4" class="ddcolortabs">
    <ul>
    <li><a href="http://www.link.com" rel="ct1"><span>Home</span></a></li>
    <li><a href="http://www.link.com/new.htm" rel="ct2"><span>HTML</span></a></li>
    <li><a href="http://www.link.com/style/" rel="ct3"><span>CSS</span></a></li>
    <li><a href="http://www.link.com/forums/"><span>Forums</span></a></li>
    <li><a href="http://www.link.com"><span>random link</span></a></li>
    </ul>
    </div>
    
    
    <DIV class="tabcontainer">
    
    <div id="ct1" class="tabcontent">
    Bacon, sausage and egg
    </div>
    
    <div id="ct2" class="tabcontent">
    Bacon cheese and egg
    </div>
    
    <div id="ct3" class="tabcontent">
    Bacon hash brown and egg
    </div>
    </DIV>
    </div>
    
    </body>
    
    </html>
    Code (markup):

    the food words are just my own "lorem ipsum" lol
     
    Solved! View solution.
    demons-halo, Apr 25, 2011 IP
  2. #2
    CSS

    div#tabcontent { width: 33%; float: left; margin; 0 0 0 -1px; }
     
    IberoMedia, Apr 25, 2011 IP
  3. demons-halo

    demons-halo Active Member

    Messages:
    243
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #3
    you my friend are a god!! thank you so much! so simple, thats great!
     
    demons-halo, Apr 25, 2011 IP