Grow your CSS skills. Land your dream job.

Dynamically re-sizing width of display

  • # December 12, 2012 at 9:15 pm

    Hi there,

    I am trying to display a number of columns on a navigation panel. However, I would not know how many columns there are to be displayed till a (PHP) DB query is done.

    I want to display them spaced out, in equal widths, across the navigation panel. If the number of items to be displayed changes, then I want the spacing to dynamically change to still fill the navigation panel. I am not having much luck doing this.

    The (PHP) code to query the DB table and then display the contents is as follows:

    The definitions in the CSS files are:

    #navigationContainer {
    height:35px;
    position:relative;
    z-index: 597;
    margin-left: 15px;
    margin-right: 40px;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 0px;
    width: 947px;
    }
    #navigationContainer a.dirV
    {
    background-position: 94% 50%;
    background-repeat: no-repeat;
    }
    .nav{
    background-color: #2A2E35;
    border: 1px solid #474B52;
    border-radius: 8px 8px 1px 1px;
    height: 41px;
    position: absolute;
    width: 990px;
    z-index: 1;
    margin-top:0px !important;
    }
    .nav ul{}
    .nav ul li{
    color: #FFFFFF;
    float: left;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 12px;
    padding-top: 4px;
    }
    .nav ul li a{
    color: #7b7c7e;
    }
    .nav ul li a:hover{
    color: #0C0;
    }

    In short, I would like the items to span the width of the navigation panel. Also, automatically re-size, not necessarily the font size, should the number of items change.

    I am new to this, so please be gentle (patient) with the explanation.

    Thank you.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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