SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot LORDGreg's Avatar
    Join Date
    May 2001
    Location
    Ptuj, Slovenia
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tabs with submenus problem

    hi, recently i started doing updates to my page; the thing is, i have some difficulties creating a tabbed menu with sub-menus. check it here. try to mouse-over the tabs shown on the top right part of the page. "forum" and "o strani" tabs are the ones that will have the sub-menus.

    problem #1:
    now, the main problem i'm having is, whatever width i set for menus, if the width is too small it won't wrap the text, but if i set it to to much (~300px), two <li> tags will be shown in one line of submenu.

    problem #2:

    when mouse-over sub-menu items, you will notice approx 4px gap on the right side to the dotted border. i tried to padding, margin: 0, but that doesn't help, neither did helped anything i set.

    please help me out with that. i checked a lot of tabs/submenus tutorials, but none showed the right result i wanted.

    ps: by the way, setting "left: Xpx" option is the right way to go, when wanting to move sub-menus under appropriate tab, isn't it?

    thank you for any help!
    lordgreg, sloreactor.com
    http://www.sloreactor.com/

  2. #2
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How I would go about this is putting a wrapper layer around all navigation items

    Code:
    <div class="nav_item">
    <a href="">Nav Link</a>
    <div class="submenu">Submenu items here</div>
    </div>
    And have the .nav_item position:relative, so you can position the .submenu
    directly below it's top-left position

    Code:
    .nav_item{
        position: relative;
    }
    
    .submenu{
        position: absolute;
        top: 25px;
    }

  3. #3
    SitePoint Zealot LORDGreg's Avatar
    Join Date
    May 2001
    Location
    Ptuj, Slovenia
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for that info.

    what about every <li> being in its own row? check/mouseover "O strani" tab. currently, submenu looks like:

    subitem 1 subitem 2
    subitem 2

    it should be like:

    subitem 1
    subitem 2
    subitem 3

    any ideas?
    lordgreg, sloreactor.com
    http://www.sloreactor.com/

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Something like this should do what you want.

    Code:
    
    #Tabs {
        float: right; 
        line-height: normal; 
        margin: 50px 0 0 0; 
        width: 500px; 
        padding: 10px 10px 0 50px; 
        list-style: none;
        text-align:left;
    }
    #Tabs li { 
        float:left;
        position:relative;
    }
    #Tabs a { 
        display:block;
        background: url("http://beta.sloreactor.com/content/templates/reaktor/images/tableft.gif") no-repeat left top; 
        padding: 0 0 0 4px; 
        text-decoration: none;
        white-space:nowrap
    }
    #Tabs a span { 
        display:block; 
        background: url("http://beta.sloreactor.com/content/templates/reaktor/images/tabright.gif") no-repeat right top; 
        padding: 5px 15px 4px 6px; 
        color: #FFF;
    }
    #Tabs a:hover span { color: #000; }
    #Tabs a:hover { background-position: 0&#37; -42px; }
    #Tabs a:hover span { background-position: 100% -42px; }
    #Tabs ul { 
        border: 1px dotted #30353b; 
        background: #FDD30B; 
        position: absolute; 
        left:-999em; 
        padding: 1px 1px 0 1px;
        min-height:0
    }
    #Tabs ul li { 
        display: block; 
        float: none; 
        font-size: 0.9em;
    }
    #Tabs ul li a {
        float:none; 
        background: transparent; 
        color: #000; 
        padding: 4px 8px 4px 8px; 
        border-bottom: 2px solid #FDD30B;
        display: block;
    }
    
    #Tabs ul li a:hover { 
        background: #fcde58; 
        color: #000; 
        border-bottom: 2px solid #30353b;
    }
    #Tabs li:hover ul,#Tabs li.over ul{left:0;top:27px; }
    
    /* ie6 fixes */
    * html #Tabs a,* html #Tabs a span {float:left} 
    * html #Full #Header .Navigation{overflow:hidden}
    /*  */
    Here's the full page in case I missed anything (I added the js routine for ie6 also):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
    <title>slor- new tpl</title>
    <!--[if lte IE 6 ]>
    <script type="text/javascript">
    sfHover = function() {
        var sfEls = document.getElementById("Tabs").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    <![endif]-->
    <style type="text/css" media="all">
    * { margin: 0; padding: 0; }
    html{ overflow-x: auto; }
    body { background: #a0a0a0; color: #000; font-family: Trebuchet MS, Tahoma, Georgia, Verdana, Arial; font-size: 0.8em; line-height: 135%; text-align: center; }
    
    
    #Full { background: #cdcdcd; width: 970px; margin: 0 auto; padding: 0 10px; }
    
    #Full #Topbar { background: #30353b; height: 30px; color: #fff; text-align: left; }
    #Full #Topbar #Member { float: left; width: 500px; padding: 5px 0 0 10px; }
    #Full #Topbar #Search { float: right; width: 200px; padding-right: 5px; }
    #Full #Topbar #MemberMore { float: right; width: 450px; text-align: right; padding: 5px 5px 0 0; }
    #Full #Topbar #MemberMore input {  font-size: 1.0em; }
    #Full #Topbar #MemberMore input[type="text"],
    #Full #Topbar #MemberMore input[type="password"] { border: 0; width: 80px; }
    #Full #Topbar img { border: 0; }
    #Full #Topbar a { color: #fff; text-decoration: none; border-bottom: 1px dotted #fff; }
    #Full #Topbar a:hover { border-bottom: 1px solid #fff; }
    
    
    #Full #Topbar #Search #SearchBox { margin-top: 2px; width: 201px; height: 25px; background: url(http://beta.sloreactor.com/content/templates/reaktor/images/bg_search_box.gif); }
    #Full #Topbar #Search #SearchBox .s { float: left; padding: 0; margin: 4px 0 0 6px; border: 0; width: 159px; background: none; font-size: 1.0em; }
    #Full #Topbar #Search #SearchBox .go { float: right; margin: 3px 4px 0 0; }
    
    #Full #Header { background: #ff9900; height: 80px; }
    #Full #Header .Logo { float: left; width: 250px; }
    #Full #Header .Logo img { border: 0; }
    #Full #Header .Navigation { height: 80px; float: right; width: 710px; }
    
    #Full #Banner { border: 1px solid #a0a0a0; width: 730px; height: 92px; padding: 3px; margin: 0 auto 10px; }
    
    
    
    #Tabs {
        float: right; 
        line-height: normal; 
        margin: 50px 0 0 0; 
        width: 500px; 
        padding: 10px 10px 0 50px; 
        list-style: none;
        text-align:left;
    }
    #Tabs li { 
        float:left;
        position:relative;
    }
    #Tabs a { 
        display:block;
        background: url("http://beta.sloreactor.com/content/templates/reaktor/images/tableft.gif") no-repeat left top; 
        padding: 0 0 0 4px; 
        text-decoration: none;
        white-space:nowrap
    }
    #Tabs a span { 
        display:block; 
        background: url("http://beta.sloreactor.com/content/templates/reaktor/images/tabright.gif") no-repeat right top; 
        padding: 5px 15px 4px 6px; 
        color: #FFF;
    }
    #Tabs a:hover span { color: #000; }
    #Tabs a:hover { background-position: 0% -42px; }
    #Tabs a:hover span { background-position: 100% -42px; }
    #Tabs ul { 
        border: 1px dotted #30353b; 
        background: #FDD30B; 
        position: absolute; 
        left:-999em; 
        padding: 1px 1px 0 1px;
        min-height:0
    }
    #Tabs ul li { 
        display: block; 
        float: none; 
        font-size: 0.9em;
    }
    #Tabs ul li a {
        float:none; 
        background: transparent; 
        color: #000; 
        padding: 4px 8px 4px 8px; 
        border-bottom: 2px solid #FDD30B;
        display: block;
    }
    
    #Tabs ul li a:hover { 
        background: #fcde58; 
        color: #000; 
        border-bottom: 2px solid #30353b;
    }
    #Tabs li:hover ul,#Tabs li.over ul{left:0;top:27px; }
    
    /* ie6 fixes */
    * html #Tabs a,* html #Tabs a span {float:left} 
    * html #Full #Header .Navigation{overflow:hidden}
    /*  */
    
    
    
    
    #Full #Content {}
    #Full #Content #Breaking { background: #30353b; color: #fff; height: 20px; }
    #Full #Content #Breaking p { padding-left: 10px; float: left; width: 572px; }
    #Full #Content #Breaking p.Settings { padding: 3px 10px 0 0; float: right; width: 60px; text-align: right; }
    #Full #Content #Breaking p.Settings img { border: 0; }
    #Full #Content #BreakingMore { background: #30353b; color: #fff; padding: 0 10px 0 10px; width: 680px; }
    
    #Full #Content #Main { text-align: left; float: left; overflow: hidden; width: 700px; }
    #Full #Content #Main #General { padding: 5px 10px 5px 10px; background: #fff; }
    #Full #Content #Sidebar { float: right; width: 250px; margin-left: -10px; /* Fixes IE6 bug. */ }
    
    
    #Full #Footer { background: #fff; margin-top: 20px; color: #a0a0a0; }
    
    #Full .Menu { text-align: left; padding: 5px 10px 5px 10px; background: #30353b; color: #fff; }
    
    /***** round boxes (white) *****/
    .rbroundbox { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/nt.gif) repeat; }
    .rbtop div { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/tl.gif) no-repeat top left; }
    .rbtop { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/tr.gif) no-repeat top right; }
    .rbbot div { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/bl.gif) no-repeat bottom left; }
    .rbbot { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/br.gif) no-repeat bottom right; }
    
    
    /***** round boxes (dark) *****/
    .rbroundbox_d { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/nt_d.gif) repeat; }
    .rbtop_d div { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/tl_d.gif) no-repeat top left; }
    .rbtop_d { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/tr_d.gif) no-repeat top right; }
    .rbbot_d div { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/bl_d.gif) no-repeat bottom left; }
    .rbbot_d { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/br_d.gif) no-repeat bottom right; margin-bottom: 10px; }
    
    /***** round boxes (orange) *****/
    .rbroundbox_h { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/nt_h.gif) repeat; }
    .rbtop_h div { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/tl_h.gif) no-repeat top left; }
    .rbtop_h { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/tr_h.gif) no-repeat top right; }
    .rbbot_h div { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/bl_h.gif) no-repeat bottom left; }
    .rbbot_h { background: url(http://beta.sloreactor.com/content/templates/reaktor/images/br_h.gif) no-repeat bottom right; margin-bottom: 10px; }
    
    .rbtop div, .rbtop, .rbbot div, .rbbot,
    .rbtop_d div, .rbtop_d, .rbbot_d div, .rbbot_d,
    .rbtop_h div, .rbtop_h, .rbbot_h div, .rbbot_h { height: 7px; font-size: 1px; }
    
    
    
    </style>
    <script src="http://beta.sloreactor.com/content/templates/reaktor/js/prototype.js" type="text/javascript"></script>
    <script src="http://beta.sloreactor.com/content/templates/reaktor/js/scriptaculous.js" type="text/javascript"></script>
    <script src="http://beta.sloreactor.com/content/templates/reaktor/js/@reaktor.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="Full">
        <div id="Topbar">
            <div id="Member"> Pozdravljeni <b>Gost</b>! <a href="" onclick="mbr_expand(); return false;" title="Prikaži več">Prijava</a> ali <a href="">Registracija</a>? </div>
            <div id="MemberMore" style="display: none;"> Up. ime:
                <input type="text" />
                Geslo:
                <input type="password" />
                <input type="checkbox" />
                Neviden
                <input type="submit" name="Submit" value="Prijava" />
            </div>
            <div id="Search">
                <div id="SearchBox">
                    <form id="search_form" method="post" action="/">
                        <input type="text"  value="Iskanje" class="s swap_value" />
                        <input type="image" src="http://beta.sloreactor.com/content/templates/reaktor/images/search_icon.gif" class="go" alt="Search" title="Search" />
                    </form>
                </div>
                <!--//SearchBox-->
            </div>
            <!--//Search-->
        </div>
        <div id="Header">
            <div class="Logo">
                <!--
          <a href=""><img src="http://beta.sloreactor.com/content/templates/reaktor/images/reaktor.gif" alt="SLO Reactor" /></a>
        -->
            </div>
            <div class="Navigation">
                <ul id="Tabs">
                    <li> <a href=""><span>Home
                        <!--<em class="TabsMore" onclick="tab_expand('TabHome'); return false;"><img src="http://beta.sloreactor.com/content/templates/reaktor/images/icon_more.gif" /></em>
              -->
                        </span></a> </li>
                    <li> <a href="#"><span>Forum</span></a>
                        <ul class="TabsForum">
                            <li><a href="#">Aktivne teme </a></li>
                            <li><a href="#">Današnji najaktivnejši </a></li>
                            <!-- must have gap between text and each closing anchor to Kill IE whitespace bug-->
                        </ul>
                    </li>
                    <li><a href=""><span>iNFO</span></a></li>
                    <li><a href=""><span>Članki</span></a></li>
                    <li><a href=""><span>Blog</span></a></li>
                    <li><a href=""><span>O strani</span></a>
                        <ul class="TabsAbout">
                            <li><a href="#">Kontakt </a></li>
                            <li><a href="#">Pravila </a></li>
                            <li><a href="#">Izjava o zasebnosti </a></li>
                        </ul>
                    </li>
                </ul>
                <!--//Tabs-->
                <!--
                <div id="TabNewsExtended" class="TabNewsExtended" style="display:none;width:210px;position: absolute;" onmouseout="hideLayer('TabNewsExtended');">
            asdfasdf      
          </div>-->
            </div>
            <!--//Navigation-->
        </div>
        <!--//Header-->
        <div class="rbroundbox_h">
            <div class="rbbot_h">
                <div></div>
            </div>
        </div>
        <!--//rbroundbox -->
        <div id="Banner"> This is going to be banner place </div>
        <div id="Content">
            <div id="Main">
                <div class="rbroundbox_d">
                    <div class="rbtop_d">
                        <div></div>
                    </div>
                </div>
                <!--//rbroundbox -->
                <div id="Breaking">
                    <p id="BreakingText">One or more lines for latest discussions/nfos/blogs</p>
                    <p class="Settings"> <a href="" onclick="brk_roll(0); return false;" title="Nazaj"><img src="http://beta.sloreactor.com/content/templates/reaktor/images/icon_prev.gif" alt="" /></a> <a href="" onclick="brk_roll(1); return false;" title="Naprej"><img alt="" src="http://beta.sloreactor.com/content/templates/reaktor/images/icon_next.gif" /></a> <a href="" onclick="brk_refresh(); return false;" title="Osveži"><img src="http://beta.sloreactor.com/content/templates/reaktor/images/icon_refresh.gif" alt="" /></a> <a href="" onclick="brk_expand(); return false" title="Prikaži več"><img alt="" src="http://beta.sloreactor.com/content/templates/reaktor/images/icon_more.gif" /></a> </p>
                </div>
                <!--//Breaking-->
                <div id="BreakingMore" style="display: none;"> type: 1 - bil malce<br />
                    type: 1 - bil malce<br />
                    type: 1 - stavek<br />
                    type: 1 - stavek<br />
                    type: 1 - bil malce<br />
                </div>
                <!--//BreakingMore-->
                <div class="rbroundbox_d">
                    <div class="rbbot_d">
                        <div></div>
                    </div>
                </div>
                <!--//rbroundbox -->
                <div class="rbroundbox">
                    <div class="rbtop">
                        <div></div>
                    </div>
                </div>
                <!--//rbroundbox -->
                <div id="General">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et velit eget felis consectetuer lobortis. Suspendisse odio nisi, mollis eget, posuere vitae, tincidunt quis, eros. Vestibulum sollicitudin felis eget dolor. Donec dui enim, ullamcorper non, suscipit ac, fringilla a, elit. Quisque tincidunt lectus nec ligula. Maecenas mollis. Morbi condimentum urna non est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi neque. Donec sed augue. Nullam fringilla. Donec dui est, dignissim a, pharetra eget, fringilla vel, ligula. Sed felis nulla, tempus in, accumsan id, facilisis quis, urna. Sed sagittis rutrum diam. Curabitur adipiscing hendrerit ligula. Ut nisi sem, lobortis eget, dictum in, suscipit mollis, metus. Etiam non magna non quam sagittis vestibulum. In eu nunc. Nam venenatis.</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et velit eget felis consectetuer lobortis. Suspendisse odio nisi, mollis eget, posuere vitae, tincidunt quis, eros. Vestibulum sollicitudin felis eget dolor. Donec dui enim, ullamcorper non, suscipit ac, fringilla a, elit. Quisque tincidunt lectus nec ligula. Maecenas mollis. Morbi condimentum urna non est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi neque. Donec sed augue. Nullam fringilla. Donec dui est, dignissim a, pharetra eget, fringilla vel, ligula. Sed felis nulla, tempus in, accumsan id, facilisis quis, urna. Sed sagittis rutrum diam. Curabitur adipiscing hendrerit ligula. Ut nisi sem, lobortis eget, dictum in, suscipit mollis, metus. Etiam non magna non quam sagittis vestibulum. In eu nunc. Nam venenatis.</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et velit eget felis consectetuer lobortis. Suspendisse odio nisi, mollis eget, posuere vitae, tincidunt quis, eros. Vestibulum sollicitudin felis eget dolor. Donec dui enim, ullamcorper non, suscipit ac, fringilla a, elit. Quisque tincidunt lectus nec ligula. Maecenas mollis. Morbi condimentum urna non est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi neque. Donec sed augue. Nullam fringilla. Donec dui est, dignissim a, pharetra eget, fringilla vel, ligula. Sed felis nulla, tempus in, accumsan id, facilisis quis, urna. Sed sagittis rutrum diam. Curabitur adipiscing hendrerit ligula. Ut nisi sem, lobortis eget, dictum in, suscipit mollis, metus. Etiam non magna non quam sagittis vestibulum. In eu nunc. Nam venenatis.</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et velit eget felis consectetuer lobortis. Suspendisse odio nisi, mollis eget, posuere vitae, tincidunt quis, eros. Vestibulum sollicitudin felis eget dolor. Donec dui enim, ullamcorper non, suscipit ac, fringilla a, elit. Quisque tincidunt lectus nec ligula. Maecenas mollis. Morbi condimentum urna non est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi neque. Donec sed augue. Nullam fringilla. Donec dui est, dignissim a, pharetra eget, fringilla vel, ligula. Sed felis nulla, tempus in, accumsan id, facilisis quis, urna. Sed sagittis rutrum diam. Curabitur adipiscing hendrerit ligula. Ut nisi sem, lobortis eget, dictum in, suscipit mollis, metus. Etiam non magna non quam sagittis vestibulum. In eu nunc. Nam venenatis.</p>
                </div>
                <div class="rbroundbox">
                    <div class="rbbot">
                        <div></div>
                    </div>
                </div>
                <!--//rbroundbox -->
            </div>
            <!--//Main-->
            <div id="Sidebar">
                <div class="rbroundbox_d">
                    <div class="rbtop_d">
                        <div></div>
                    </div>
                </div>
                <!--//rbroundbox -->
                <div class="Menu">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et velit eget felis consectetuer lobortis. Suspendisse odio nisi, mollis eget, posuere vitae, tincidunt quis, eros. Vestibulum sollicitudin felis eget dolor. Donec dui enim, ullamcorper non, suscipit ac, fringilla a, elit. Quisque tincidunt lectus nec ligula. Maecenas mollis. Morbi condimentum urna non est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi neque. Donec sed augue. Nullam fringilla. Donec dui est, dignissim a, pharetra eget, fringilla vel, ligula. Sed felis nulla, tempus in, accumsan id, facilisis quis, urna. Sed sagittis rutrum diam. Curabitur adipiscing hendrerit ligula. Ut nisi sem, lobortis eget, dictum in, suscipit mollis, metus. Etiam non magna non quam sagittis vestibulum. In eu nunc. Nam venenatis.</p>
                </div>
                <div class="rbroundbox_d">
                    <div class="rbbot_d">
                        <div></div>
                    </div>
                </div>
                <!--//rbroundbox -->
                <div class="rbroundbox_d">
                    <div class="rbtop_d">
                        <div></div>
                    </div>
                </div>
                <!--//rbroundbox -->
                <div class="Menu">menus menus, more menus!</div>
                <div class="rbroundbox_d">
                    <div class="rbbot_d">
                        <div></div>
                    </div>
                </div>
                <!--//rbroundbox -->
            </div>
        </div>
        <!--//Content-->
        <div style="clear: both;"></div>
        <div id="Footer">
            <div class="rbroundbox">
                <div class="rbtop">
                    <div></div>
                </div>
            </div>
            <!--//rbroundbox -->
            <p> Vse pravice pridržane (c) Sloreactor 2002 - 2007<br />
                Powered By IP.Board  2.3.1 &#169; 2007  IPS, Inc.<br />
                Licensed to: SLO Reactor </p>
        </div>
    </div>
    <!--//Full-->
    </body>
    </html>
    These menus are difficult to get right cross browser and dimensions and methods are critical . Change one thing and you risk upsetting another browser so test with care.

    You shouldn't add a border on hover as that makes the page reflow and jump and is a bad effect. If you want to add a border on hover then makes sure there is already a border on the element in the background colour and then just change the color on hover.

    If you float an element and you want it on the next line then set it to clear:left and the next one will be underneath.

    I removed the widths and let the longest text dictate the width of the dropdown (this is difficult to do so change things with care).

    The above code is validated and working in IE6, IE7, Firefox2 and opera 9

    Hope it helps

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, to get the dropdowns to be positioned below the correct tab, the relative positioning should be applied to the tab <l1>s and not the <ul>. The dropdown <ul>s can then be positioned using left and top properties. The tab <li>s should also be floated left rather than displayed inline to assist with the dropdown positioning. The width of the dropdowns can also be applied genrally, rather than separately (I used ems to cater for text resize). To prevent multiple items on a line in the dropdowns, The <li> float is removed, and block dispay on the dropdown <a> links will make the links extend the full width of the dropdown.

    Try these changes:
    Code:
    #Tabs { float: right; clear: right; line-height: normal; margin-top: 50px; width: 500px; padding: 10px 10px 0 50px; list-style: none; }
    #Tabs li { position: relative; float: left; margin: 0; padding: 0; }
    
    #Tabs ul { border: 1px dotted #30353b; background: #FDD30B; position: absolute; display: none; top: 27px; left: 0; width: 10em; padding: 1px 1px 0 1px; }
    
    #Tabs ul li { float: none; font-size: 0.9em; list-style: none}
    #Tabs ul li a { background: none; color: #000; padding: 4px 8px 4px 8px; display: block; float: none}
    
    #Tabs li:hover ul { display: block; }
    the original styles
    Code:
    #Tabs ul.TabsForum { left: 108px; width: 200px; }
    #Tabs ul.TabsAbout { left: 120px; width: 200px; }
    #Tabs li:hover ul li { display: inline; }
    can then be removed.


    Edit : Damn, Paul posted similar while I was typing ......
    Last edited by Centauri; Oct 18, 2007 at 06:28. Reason: add Damn

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by centauri

    Edit : Damn, Paul posted similar while I was tying ....
    Never mind - yours may be better

  7. #7
    SitePoint Zealot LORDGreg's Avatar
    Join Date
    May 2001
    Location
    Ptuj, Slovenia
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! Thank you, both of you. I really appreciate your help! Finally, i can continue working on design. These tabs just went on my nerves...

    thank you again!
    lordgreg, sloreactor.com
    http://www.sloreactor.com/

  8. #8
    SitePoint Zealot LORDGreg's Avatar
    Join Date
    May 2001
    Location
    Ptuj, Slovenia
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,

    i really hope someone will check this bump-up message. everything looks fine in IE, Firefox, but, take a look what happens in Opera browser when you mouseover those tabs, that have submenus.

    can anyone offer a help here please?

    many thanks!
    lordgreg, sloreactor.com
    http://www.sloreactor.com/

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Opera will probably prefer the anchor not to be floated but IE6 will.

    e.g.
    Code:
    #Tabs a { display:block;}
    * html #Tabs a{float:left;}

  10. #10
    SitePoint Zealot LORDGreg's Avatar
    Join Date
    May 2001
    Location
    Ptuj, Slovenia
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    works as charm!

    thank you Paul, i appreciate your help.
    lordgreg, sloreactor.com
    http://www.sloreactor.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
  •