SitePoint Sponsor

User Tag List

Results 1 to 18 of 18

Thread: [CSS] Submenu

  1. #1
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [CSS] Submenu

    Hi
    My english sux a bit but I will try to explain whats my problem.
    I made 3lvl vertical menu with css/php and everything is working fine but the list of elements that showing in 1st submenu is much to long.
    I wish to make menu like this :

    1mainmenu
    2mainmenu 2.1submenu 2.6submenu
    3mainmenu 2.2submenu 2.7submenu
    __________ 2.3submenu ....
    __________ 2.4submenu ....
    __________ 2.5submenu ....

    Can I change it using css ?
    Any other solution for this problem will be great

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    971
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't understand your question. Can you post a link to an example?

  3. #3
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn I need 5 post to add link
    This is my old site w/o update //elzlaczne.prv.pl/szukajcd.php?kat=1

    Now when 1st submenu apeearing its much to long.

    I wish to make columns in it for 5 or 6 elemens in each.

  4. #4
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    971
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Are you trying to make the sub links show up in multiple columns?

    That's a neat idea. I don't think I've ever seen anyone do that.
    There are a couple of problems to an ideal solution for this.

    The first is that you are going to need the same width and height for each cell or else its going to mess up your grid. This is limiting to what you can use as navigation and is prone to breaking if the font-rendering on the users computer is enlarged. You would need pretty uniform text with at least 150% extra room.

    I don't think it would be possible to go:

    1...4
    2...5
    3...6

    Because css does not flow in this way.
    It would be possible to go:
    1...2
    3...4
    5...6
    By floating the list item left and setting a width to the UL

    E

  5. #5
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok it will fine if the list will go like
    1...2...3
    4...5...6

    But Im newbie with css
    Could u be more specific how can I do it ?
    I know it will take some time but Its my master project for graduating high school.

  6. #6
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it will be helpfull here is css kode. I need to say that its not mine. I just made some small changes

    #navigation {width:150px; font-size:12px;}
    #navigation ul {margin:0px; padding:0px; background-color:#666;}

    #navigation ul li {

    height:25px;
    line-height:25px;
    list-style:none;
    padding-left:10px;
    color:#FFF;
    border-top:#fff solid;
    border-bottom:#fff solid;
    border-width:1px;
    cursorointer;
    }
    #navigation ul li:hover {background-color:#F90; position:relative;}
    #navigation ul ul {
    display:none;
    position:absolute;
    left:75px;
    top:0px;
    border:#fff solid;
    border-width:1px;
    background-color:#999;

    }
    #navigation ul li:hover ul {display:block;}
    #navigation ul ul li {border:none; width:100px; float:left; display:inline;}
    #navigation ul ul li:hover {text-decoration:underline; border:none; }
    #navigation li:hover ul li ul {display:none;}
    #navigation ul ul li ul {left:110px; background-color:#0099CC;}
    #navigation ul ul li:hover ul {display:block;}
    #navigation ul ul ul li {width:320px;}
    #navigation ul ul ul li :hover {background-color:#FFFFFF;}

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, for one thing this is your starting code
    Code:
    
    <script language="javascript">
    	var cName = 'ng4adnetcook';
    	var nSrc = 'http://adnet.nuggad.net/rc?nuggn=413847152'
    	var na_prof = '';function rC(){if(document.cookie){tV = document.cookie; if(tV.indexOf(cName+"=")!=-1){ p1 = tV.indexOf(cName+"=");p2 = tV.indexOf(",cookEnd");na_prof = tV.slice(p1+cName.length+1,p2);}}}  
    	rC();
    
      function setNuggCookie(N,V,L){now=new Date();tout=new Date(now.getTime()+L*86400000);document.cookie=N+"="+V+",cookEnd;expires="+tout.toGMTString()+";";}; function inNugg() { 
    	if (arguments.callee.done) return; arguments.callee.done = true;if (_timer) {clearInterval(_timer);_timer = null;};if( document.createElement && document.childNodes ) {var nSc = document.createElement('script');nSc.setAttribute('src',nSrc);nSc.setAttribute('type','text/javascript');document.getElementsByTagName('head')[0].appendChild(nSc); }};if (document.addEventListener) {document.addEventListener("DOMContentLoaded", inNugg, false);};if (/WebKit/i.test(navigator.userAgent)) {var _timer = setInterval(function() {if (/loaded|complete/.test(document.readyState)) {inNugg();}}, 10);}
    	/*@cc_on @*/
    	/*@if (@_win32)
    		document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
    		var script = document.getElementById("__ie_onload");
    		script.onreadystatechange = function() {
    			if (this.readyState == "complete") {
    				inNugg(); // 
    			}
    		};
    	/*@end @*/
    	window.onload = inNugg;
    </script><head>
    Where's the doctype? HTML element? Starting head? Meta content-type? Title?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its my school project and I cant use JS.
    I made everything only with css/php and I have to stick to it.

    I dont know what can be usefull but this is whole plik php

    <?php
    $j = $_GET['wd'];
    $g = $_GET['kat'];
    $polaczenie=mysql_connect('localhost','admin','qwerty')
    or die("Could not connect");
    mysql_select_db('baza1')
    or die("Could not select database");
    mysql_query("SET NAMES 'UTF8'");

    ?>

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <title>Elementy złączne</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    </head>
    <body>

    <div id="wrapper">

    <div id="header">
    <div id="logo">
    <h1><a href="#">Elementy Złączne</a></h1>

    </div>

    <div id="menu">
    <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="firma.php">O firmie</a></li>
    <li><a href="#">Kontakt</a></li>
    </ul>
    </div>
    <!-- end #menu -->
    </div>
    <!-- end #header -->
    <div id="page">
    <div id="header-pic"></div>
    <div id="content">
    <div class="post">
    <h1 class="title">Wymiary dodatkowe <?php echo $g,':','&nbsp&nbsp&nbsp',$j; ?> </h1>




    <div id="navigation">
    <ul>

    <?php

    $q = "SELECT * FROM średnice WHERE Kategoria = '$g' GROUP BY wartosc ORDER BY CAST(SUBSTR(wartosc,1) AS DECIMAL) ASC";
    $arr = mysql_query($q) ;
    while ( $row = mysql_fetch_array($arr) )

    {
    $i=$row['id_sr'];
    $k=$row['wartosc'];
    echo "<li>M$k";

    $w = "SELECT * FROM średnice WHERE Kategoria = '$g' AND wartosc = '$k'GROUP BY id_sr";
    $wrr = mysql_query($w) ;
    while ( $row = mysql_fetch_array($wrr) )

    {
    $a=$row['id_sr'];
    $tab[$k][]=$a;
    }

    $z = "SELECT * FROM długości WHERE id_sr IN (".implode(',', $tab[$k]).") GROUP BY Wartosc ORDER BY CAST(SUBSTR(Wartosc,1) AS DECIMAL )";
    $zrr = mysql_query($z) ;
    echo "<ul>";
    while ($row = mysql_fetch_array($zrr))

    {
    $s=$row['Wartosc'];
    echo "<li>$s";
    $d=$row['Idwyr'];
    $tab1[$s][]=$d;

    $o = "SELECT * FROM katalog WHERE Idwyr IN (".implode(',', $tab1[$s]).") ";
    $orr = mysql_query($o) ;
    echo "<ul>";
    while ( $row = mysql_fetch_array($orr) )

    {
    $pp=$row['Idwyr'];
    $p=$row['Nazwa'];
    $katp=$row['Kategoria'];
    echo "<li>";
    echo '<a href="podglad.php?id='.$pp.'&katp='.$katp.'">';
    echo $p;
    echo "</a></li>";
    }
    echo "</ul>";
    }
    echo "</ul></li>";
    }

    ?>




    </div>

    </div>
    <div class="post">



    </div>
    </div>
    <!-- end #content -->
    <div id="sidebar">
    <div id="sidebar-bgtop"></div>
    <div id="sidebar-content">
    <div id="sidebar-bgbtm">
    <ul>

    <li>
    <h2>Oferta</h2>
    <ul>
    <li><a href="produkty.php?rdz=Śruby">Śruby</a></li>
    <li><a href="produkty.php?rdz=Wkręty">Wkręty</a></li>
    <li><a href="produkty.php?rdz=Nakrętki">Nakrętki</a></li>
    <li><a href="produkty.php?rdz=Podkładki">Podkładki</a></li>
    <li><a href="produkty.php?rdz=Nity">Nity</a></li>

    </ul>
    </li>
    <li>


    </li>
    <li id="search">
    <h2>Nowości</h2>


    <ul>
    <li><a href="podglad.php?id=11&katp=Śruby">Śruba oczkowa Forma B</a></li>
    <li><a href="podglad.php?id=21&katp=Podkładki">Podkładka talerzowa</a></li>
    <li><a href="podglad.php?id=1&katp=Wkręty">Wkręt z łbem walcowym nacięcie płaskie</a></li>
    <li><a href="podglad.php?id=24&katp=Podkładki">Podkładka szeroka 3D</a></li>
    </ul>
    <form action="szukaj.php" method="post" name="search">
    <h2><input type='submit' name='przycisk' value='Wyszukaj przedmiot'></td></h2>
    </form>


    </form>


    </li>
    </ul>
    </div>
    </div>
    </div>
    <!-- end #sidebar -->
    <div style="clear:both; margin:0;"></div>
    </div>
    <!-- end #page -->

    </div>

    <div id="footer">
    <p>&copy; 2009. All Rights Reserved</a>.</p>
    </div>
    <!-- end #footer -->
    </body>
    </html>

    Everything else is working and If I change it my project will be finished.
    I spended few days on it but Im not smart enough to figure it out.

    This is updated site
    //elzlaczne.prv.pl/www4/szukajcd.php?kat=Śruby&wd=Średnica oraz długość

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Your missing my point. Your missing so much code.

    Go run that code in a validator and watch it yell at you.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok its small chance that I understood u know ...
    its whole code after validation its w/o errors


    body {
    margin : 0;
    padding : 0;
    background : #242323;
    text-align : justify;
    font : 13px Arial, Helvetica, sans-serif;
    color : #444444;
    }
    h1, h2, h3 {
    margin-top : 0;
    font-weight : normal;
    color : #ff7f50;
    }
    h1 {
    font-size : 2.4em;
    }
    h2 {
    font-size : 1.8em;
    }
    h3 {
    font-size : 1.5em;
    color : #800000;
    }
    p, ol, ul {
    margin-bottom : 1.8em;
    line-height : 160&#37;;
    }
    a {
    color : #000000;
    }
    a:hover {
    text-decoration : none;
    color : #ff0000;
    }
    a img {
    border : none;
    }
    #wrapper {
    width : 1050px;
    margin : 0 auto;
    border : 10px solid #ffffff;
    }
    #header {
    width : 1050px;
    height : 100px;
    margin : 0 auto;
    }
    #header a {
    text-decoration : none;
    color : #ffffff;
    }
    #logo {
    float : left;
    padding-left : 20px;
    }
    #logo h1, #logo p {
    margin : 0;
    line-height : normal;
    font-weight : normal;
    color : #ffffff;
    }
    #logo h1 {
    padding : 25px 0 0 0;
    }
    #menu {
    float : right;
    }
    #menu ul {
    margin : 0;
    padding : 49px 0 0 0;
    list-style : none;
    line-height : normal;
    }
    #menu li {
    float : left;
    margin : 0;
    }
    #menu a {
    display : block;
    width : auto;
    padding : 6px 20px;
    }
    #menu a:hover {
    text-decoration : underline;
    }
    #menu .active {
    background : #404040;
    }
    #menu .active a {
    background : url(images/img02.gif) no-repeat 100% -40px;
    }
    #page {
    width : 1050px;
    margin : 0 auto;
    padding : 10px 0 0 0;
    background : #ffffff;
    }
    #header-pic {
    background : url(images/img05.jpg) no-repeat left top;
    width : 1100px;
    height : 210px;
    }
    #content {
    float : right;
    width : 730px;
    }
    .post {
    margin : 0 0 30px 0;
    }
    .post .title {
    margin : 0;
    background : #444444 url(images/img02.jpg) no-repeat left 50%;
    padding : 7px 25px;
    font-size : 1.4em;
    }
    .post .entry {
    padding : 0;
    }
    .post .meta {
    font-weight : bold;
    padding-left : 20px;
    }
    .post .byline {
    margin : 0;
    padding-left : 20px;
    }
    #sidebar {
    float : left;
    width : 300px;
    }
    #sidebar-bgbtm {
    background : url(images/img03.jpg) no-repeat left bottom;
    }
    #sidebar-content {
    background : url(images/img01.jpg) repeat-y left top;
    }
    #sidebar ul {
    padding : 0 0 5px 0;
    margin : 0;
    list-style : none;
    }
    #sidebar li li {
    margin-left : 20px;
    margin-right : 20px;
    line-height : 30px;
    padding-left : 15px;
    border-bottom : 1px dashed #bdbdbd;
    background : url(images/img04.jpg) no-repeat left 50%;
    }
    #sidebar li ul {
    margin-bottom : 1.8em;
    list-style : none;
    }
    #sidebar h2 {
    background : #444444 url(images/img02.jpg) no-repeat left 50%;
    padding : 7px 25px;
    font-size : 1.4em;
    }
    #sidebar a {
    text-decoration : none;
    }
    #sidebar a:hover {
    text-decoration : underline;
    }
    #search form {
    margin-bottom : 1.8em;
    padding : 0;
    }
    #search fieldset {
    margin-left : 20px;
    padding : 0;
    border : none;
    }
    #search #s {
    width : 160px;
    }
    #footer {
    clear : both;
    width : 900px;
    height : 50px;
    margin : 0 auto 30px auto;
    color : #ffffff;
    }
    #footer p {
    margin : 0;
    padding : 19px 0 0 0;
    text-align : center;
    line-height : normal;
    font-size : smaller;
    }
    #footer a {
    color : #ffffff;
    }
    .mainDiv {
    width : 185px;
    }
    .topItem {
    font : bold 12px tahoma, verdana, sans-serif;
    letter-spacing : 0;
    background : url("arrow-up-title.jpg") no-repeat 0 0;
    background-position : center center;
    background-repeat : no-repeat;
    border : none;
    width : 185px;
    height : 25px;
    color : #215dc6;
    cursor : pointer;
    text-indent : 10px;
    }
    .topItemOver {
    text-indent : 10px;
    font : bold 12px tahoma, verdana, sans-serif;
    letter-spacing : 0;
    background : url("arrow-up-title-on.jpg") no-repeat 0 0;
    background-position : center center;
    background-repeat : no-repeat;
    height : 25px;
    width : 185px;
    color : #428eff;
    cursor : pointer;
    }
    .topItemClose {
    text-indent : 10px;
    font : bold 12px tahoma, verdana, sans-serif;
    letter-spacing : 0;
    background : url("arrow-down-title.jpg") no-repeat 0 0;
    background-position : center center;
    background-repeat : no-repeat;
    height : 25px;
    width : 185px;
    color : #215dc6;
    cursor : pointer;
    }
    .topItemCloseOver {
    text-indent : 10px;
    font : bold 12px tahoma, verdana, sans-serif;
    letter-spacing : 0;
    background : url("arrow-down-title-on.jpg") no-repeat 0 0;
    background-position : center center;
    background-repeat : no-repeat;
    height : 25px;
    width : 185px;
    color : #428eff;
    cursor : pointer;
    }
    .dropMenu {
    font : bold 11px tahoma, verdana, sans-serif;
    background-color : #d6dff7;
    color : #000;
    border : 1px solid #ffffff;
    border-width : 0 1px 1px 1px;
    padding-top : 5px;
    padding-bottom : 5px;
    }
    .subMenu {
    display : block;
    }
    .subItem {
    margin-left : 10px;
    margin-top : 2px;
    height : 18px;
    font : 11px tahoma, verdana, sans-serif;
    text-decoration : none;
    color : #215dc6;
    }
    .subItem a {
    margin-left : 23px;
    font : 11px tahoma, verdana, sans-serif;
    text-decoration : none;
    color : #215dc6;
    }
    .subItemOver {
    margin-left : 10px;
    margin-top : 2px;
    font : 11px tahoma, verdana, sans-serif;
    height : 18px;
    color : #428eff;
    }
    .subItemOver a {
    margin-left : 23px;
    font : 11px tahoma, verdana, sans-serif;
    cursor : pointer;
    color : #428eff;
    text-decoration : underline;
    cursor : pointer;
    }
    .drop {
    border-left : 1px solid black;
    border-right : 1px solid black;
    }
    #navigation {
    width : 150px;
    font-size : 12px;
    }
    #navigation ul {
    margin : 0;
    padding : 0;
    background-color : #666;
    }
    #navigation ul li {
    height : 25px;
    line-height : 25px;
    list-style : none;
    padding-left : 10px;
    color : #fff;
    border-top : solid #fff;
    border-bottom : solid #fff;
    border-width : 1px;
    cursor : pointer;
    }
    #navigation ul li:hover {
    background-color : #f90;
    position : relative;
    }
    #navigation ul ul {
    display : none;
    position : absolute;
    left : 75px;
    top : 0;
    border : solid #fff;
    border-width : 1px;
    background-color : #999;
    }
    #navigation ul li:hover ul {
    display : block;
    }
    #navigation ul ul li {
    border : none;
    width : 100px;
    float : left;
    display : inline;
    }
    #navigation ul ul li:hover {
    text-decoration : underline;
    border : none;
    }
    #navigation li:hover ul li ul {
    display : none;
    }
    #navigation ul ul li ul {
    left : 110px;
    background-color : #0099cc;
    }
    #navigation ul ul li:hover ul {
    display : block;
    }
    #navigation ul ul ul li {
    width : 320px;
    }
    #navigation ul ul ul li :hover {
    background-color : #ffffff;
    }


    http://elzlaczne.prv.pl/www4/szukaj.php
    Check 'Śruby' for example

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, first of all, you need this
    Code:
    
    
    <script language="javascript">
    	var cName = 'ng4adnetcook';
    	var nSrc = 'http://adnet.nuggad.net/rc?nuggn=413847152'
    	var na_prof = '';function rC(){if(document.cookie){tV = document.cookie; if(tV.indexOf(cName+"=")!=-1){ p1 = tV.indexOf(cName+"=");p2 = tV.indexOf(",cookEnd");na_prof = tV.slice(p1+cName.length+1,p2);}}}  
    	rC();
    
      function setNuggCookie(N,V,L){now=new Date();tout=new Date(now.getTime()+L*86400000);document.cookie=N+"="+V+",cookEnd;expires="+tout.toGMTString()+";";}; function inNugg() { 
    	if (arguments.callee.done) return; arguments.callee.done = true;if (_timer) {clearInterval(_timer);_timer = null;};if( document.createElement && document.childNodes ) {var nSc = document.createElement('script');nSc.setAttribute('src',nSrc);nSc.setAttribute('type','text/javascript');document.getElementsByTagName('head')[0].appendChild(nSc); }};if (document.addEventListener) {document.addEventListener("DOMContentLoaded", inNugg, false);};if (/WebKit/i.test(navigator.userAgent)) {var _timer = setInterval(function() {if (/loaded|complete/.test(document.readyState)) {inNugg();}}, 10);}
    	/*@cc_on @*/
    	/*@if (@_win32)
    		document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
    		var script = document.getElementById("__ie_onload");
    		script.onreadystatechange = function() {
    			if (this.readyState == "complete") {
    				inNugg(); // 
    			}
    		};
    	/*@end @*/
    	window.onload = inNugg;
    </script><head>
    well that's what you have. Put <head> before the script tags.
    And before <head> put this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    =
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For now I have it like this ...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <script language="javascript">
    ...
    ...
    </script>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <title>Elementy złączne</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />

    </head>
    <body>

    But its not changing anything
    Did I put in in wrong place ?

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    In the link yo ugave it doesn't have that...update the page.a
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry here is working one
    http://elzlaczne.prv.pl/www4/szukaj.php

  15. #15
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thx everyone for help I figure it out somehow.
    It was so simple
    I just needed to add 1 line in css code

    Thx again

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Decay View Post
    Ok thx everyone for help I figure it out somehow.
    It was so simple
    I just needed to add 1 line in css code

    Thx again
    Could you tell us for other users browsing this topic that may have the same problem?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of corse maybe It will bu usefull

    This is CSS code that showing elements in submenu like this :

    1
    2
    3
    4
    5
    6

    body {
    margin : 0;
    padding : 0;
    background : #242323;
    text-align : justify;
    font : 13px Arial, Helvetica, sans-serif;
    color : #444444;
    }
    h1, h2, h3 {
    margin-top : 0;
    font-weight : normal;
    color : #ff7f50;
    }
    h1 {
    font-size : 2.4em;
    }
    h2 {
    font-size : 1.8em;
    }
    h3 {
    font-size : 1.5em;
    color : #800000;
    }
    p, ol, ul {
    margin-bottom : 1.8em;
    line-height : 160%;
    }
    a {
    color : #000000;
    }
    a:hover {
    text-decoration : none;
    color : #ff0000;
    }
    a img {
    border : none;
    }
    #wrapper {
    width : 1050px;
    margin : 0 auto;
    border : 10px solid #ffffff;
    }
    #header {
    width : 1050px;
    height : 100px;
    margin : 0 auto;
    }
    #header a {
    text-decoration : none;
    color : #ffffff;
    }
    #logo {
    float : left;
    padding-left : 20px;
    }
    #logo h1, #logo p {
    margin : 0;
    line-height : normal;
    font-weight : normal;
    color : #ffffff;
    }
    #logo h1 {
    padding : 25px 0 0 0;
    }
    #menu {
    float : right;
    }
    #menu ul {
    margin : 0;
    padding : 49px 0 0 0;
    list-style : none;
    line-height : normal;
    }
    #menu li {
    float : left;
    margin : 0;
    }
    #menu a {
    display : block;
    width : auto;
    padding : 6px 20px;
    }
    #menu a:hover {
    text-decoration : underline;
    }
    #menu .active {
    background : #404040;
    }
    #menu .active a {
    background : url(images/img02.gif) no-repeat 100% -40px;
    }
    #page {
    width : 1050px;
    margin : 0 auto;
    padding : 10px 0 0 0;
    background : #ffffff;
    }
    #header-pic {
    background : url(images/img05.jpg) no-repeat left top;
    width : 1100px;
    height : 210px;
    }
    #content {
    float : right;
    width : 730px;
    }
    .post {
    margin : 0 0 30px 0;
    }
    .post .title {
    margin : 0;
    background : #444444 url(images/img02.jpg) no-repeat left 50%;
    padding : 7px 25px;
    font-size : 1.4em;
    }
    .post .entry {
    padding : 0;
    }
    .post .meta {
    font-weight : bold;
    padding-left : 20px;
    }
    .post .byline {
    margin : 0;
    padding-left : 20px;
    }
    #sidebar {
    float : left;
    width : 300px;
    }
    #sidebar-bgbtm {
    background : url(images/img03.jpg) no-repeat left bottom;
    }
    #sidebar-content {
    background : url(images/img01.jpg) repeat-y left top;
    }
    #sidebar ul {
    padding : 0 0 5px 0;
    margin : 0;
    list-style : none;
    }
    #sidebar li li {
    margin-left : 20px;
    margin-right : 20px;
    line-height : 30px;
    padding-left : 15px;
    border-bottom : 1px dashed #bdbdbd;
    background : url(images/img04.jpg) no-repeat left 50%;
    }
    #sidebar li ul {
    margin-bottom : 1.8em;
    list-style : none;
    }
    #sidebar h2 {
    background : #444444 url(images/img02.jpg) no-repeat left 50%;
    padding : 7px 25px;
    font-size : 1.4em;
    }
    #sidebar a {
    text-decoration : none;
    }
    #sidebar a:hover {
    text-decoration : underline;
    }
    #search form {
    margin-bottom : 1.8em;
    padding : 0;
    }
    #search fieldset {
    margin-left : 20px;
    padding : 0;
    border : none;
    }
    #search #s {
    width : 160px;
    }
    #footer {
    clear : both;
    width : 900px;
    height : 50px;
    margin : 0 auto 30px auto;
    color : #ffffff;
    }
    #footer p {
    margin : 0;
    padding : 19px 0 0 0;
    text-align : center;
    line-height : normal;
    font-size : smaller;
    }
    #footer a {
    color : #ffffff;
    }
    .mainDiv {
    width : 185px;
    }
    .topItem {
    font : bold 12px tahoma, verdana, sans-serif;
    letter-spacing : 0;
    background : url("arrow-up-title.jpg") no-repeat 0 0;
    background-position : center center;
    background-repeat : no-repeat;
    border : none;
    width : 185px;
    height : 25px;
    color : #215dc6;
    cursor : pointer;
    text-indent : 10px;
    }
    .topItemOver {
    text-indent : 10px;
    font : bold 12px tahoma, verdana, sans-serif;
    letter-spacing : 0;
    background : url("arrow-up-title-on.jpg") no-repeat 0 0;
    background-position : center center;
    background-repeat : no-repeat;
    height : 25px;
    width : 185px;
    color : #428eff;
    cursor : pointer;
    }
    .topItemClose {
    text-indent : 10px;
    font : bold 12px tahoma, verdana, sans-serif;
    letter-spacing : 0;
    background : url("arrow-down-title.jpg") no-repeat 0 0;
    background-position : center center;
    background-repeat : no-repeat;
    height : 25px;
    width : 185px;
    color : #215dc6;
    cursor : pointer;
    }
    .topItemCloseOver {
    text-indent : 10px;
    font : bold 12px tahoma, verdana, sans-serif;
    letter-spacing : 0;
    background : url("arrow-down-title-on.jpg") no-repeat 0 0;
    background-position : center center;
    background-repeat : no-repeat;
    height : 25px;
    width : 185px;
    color : #428eff;
    cursor : pointer;
    }
    .dropMenu {
    font : bold 11px tahoma, verdana, sans-serif;
    background-color : #d6dff7;
    color : #000;
    border : 1px solid #ffffff;
    border-width : 0 1px 1px 1px;
    padding-top : 5px;
    padding-bottom : 5px;
    }
    .subMenu {
    display : block;
    }
    .subItem {
    margin-left : 10px;
    margin-top : 2px;
    height : 18px;
    font : 11px tahoma, verdana, sans-serif;
    text-decoration : none;
    color : #215dc6;
    }
    .subItem a {
    margin-left : 23px;
    font : 11px tahoma, verdana, sans-serif;
    text-decoration : none;
    color : #215dc6;
    }
    .subItemOver {
    margin-left : 10px;
    margin-top : 2px;
    font : 11px tahoma, verdana, sans-serif;
    height : 18px;
    color : #428eff;
    }
    .subItemOver a {
    margin-left : 23px;
    font : 11px tahoma, verdana, sans-serif;
    cursor : pointer;
    color : #428eff;
    text-decoration : underline;
    cursor : pointer;
    }
    .drop {
    border-left : 1px solid black;
    border-right : 1px solid black;
    }
    #navigation {
    width : 150px;
    font-size : 12px;
    }
    #navigation ul {
    margin : 0;
    padding : 0;
    background-color : #666;
    }
    #navigation ul li {
    height : 25px;
    line-height : 25px;
    list-style : none;
    padding-left : 10px;
    color : #fff;
    border-top : solid #fff;
    border-bottom : solid #fff;
    border-width : 1px;
    cursor : pointer;
    }
    #navigation ul li:hover {
    background-color : #f90;
    position : relative;
    }
    #navigation ul ul {
    display : none;
    position : absolute;
    left : 75px;
    top : 0;
    border : solid #fff;
    border-width : 1px;
    background-color : #999;
    }
    #navigation ul li:hover ul {
    display : block;
    }
    #navigation ul ul li {
    border : none;
    width : 50px;
    float : left;
    display : inline;
    }
    #navigation ul ul li:hover {
    text-decoration : underline;
    border : none;
    }
    #navigation li:hover ul li ul {
    display : none;
    }
    #navigation ul ul li ul {
    left : 35px;
    top : 18;
    background-color : #0099cc;
    }
    #navigation ul ul li:hover ul {
    display : block;
    }
    #navigation ul ul ul li {
    width : 320px;
    }
    #navigation ul ul ul li :hover {
    background-color : #ffffff;
    width : 350px;
    }

    At the bottom I add this line
    #navigation ul li ul { width:330px;}

    And now its like

    1 ... 2 ... 3 ... 4
    5 ... 6 ...

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It goes to seperate lines because it is floated and when the parent gives enoguh room to go on up and snag on a float it will.
    If you also add clear:left; to the list items it will start a new line each time.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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