Grow your CSS skills. Land your dream job.

Div Positions

  • # March 28, 2009 at 3:36 am

    Hi All,

    I need to place 3 divs in a position.

    Div 1: bluetabs

    Div 2: menudropdown

    and the flash object

    I wnat the blueTabe to appear on top of the above and next menudropdown div and atlast the flash object.

    Below is my css for the blue tabs and menudrop down

    Code:
    .bluetabs{

    }

    .bluetabs ul{
    z-index: 100;
    padding: 3px 0;
    margin-left: 0;
    margin-top: 1px;
    margin-bottom: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the menu as desired*/

    }

    .bluetabs li{
    z-index: 100;
    display: inline;
    margin: 0;
    }

    .bluetabs li a{
    z-index: 100;
    text-decoration: none;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid #000;
    color: #2d2b2b;
    background: white url(media/bluetab.gif) top left repeat-x; /*THEME CHANGE HERE*/
    }

    .bluetabs li a:visited{
    z-index: 100;
    color: #2d2b2b;
    }

    .bluetabs li a:hover{
    z-index: 100;
    text-decoration: underline;
    color: #2d2b2b;
    }

    .bluetabs li.selected{
    }

    .bluetabs li.selected a{ /*selected main tab style */
    background-image: url(media/bluetabactive.gif); /*THEME CHANGE HERE*/
    padding-bottom: 9px;
    border-bottom-color: #fff;
    }

    .bluetabs li.selected a:hover{ /*selected main tab style */
    text-decoration: none;
    }

    /* ######### Style for Drop Down Menu ######### */

    .menudropdown {
    z-index: -1;
    BORDER-TOP: #000 1px solid; float: left;
    BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 8px; PADDING-LEFT: 8px; VISIBILITY: hidden; PADDING-BOTTOM: 8px;
    BORDER-LEFT: #000 1px solid; WIDTH: 300px; PADDING-TOP: 8px;
    BORDER-BOTTOM: #000 1px solid; POSITION: absolute; BACKGROUND-COLOR: #fff;
    }

    * html .menudropdown a{ /*IE only hack*/
    width: 100%;
    }

    .menudropdown a:hover{ /*THEME CHANGE HERE*/
    background-color: #fff;
    }

    This is my flash object code

    Code:

    below is my divs in the html code

    I am going mad abt this. Try to throw some light into it.

    thanks in advance.

    Preview of the site is this
    http://www.frankebearings.com/default.asp

    # March 28, 2009 at 7:01 am

    Through some post I got the answer as to give the element containing your menu the following style:

    position: relative;
    z-index: 1000;

    And it solved my problem.

    Thanks a lot !!!!!!!!!!!!!!!!!!!!!!!!!!111 :D

    Rob
    # March 28, 2009 at 7:42 am

    hehe :)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".