Top Bar in stile Google - Versione stampabile

Codice:

<div id="topbar">

        <ul id="menu">

            <li><a href="http://dev.vincenzolarosa.it/short">Home</a></li>

            <li><a href="http://webmail.vincenzolarosa.it" target="_blank">Mail</a></li>

            <li><a href="http://www.vincenzolarosa.it" target="_blank">News</a></li>

            <li><a href="http://www.twitter.com/enzolarosa" target="_blank">Twitter</a></li>

            <li><a href="http://www.facebook.com/vincenzolarosa.it" target="_blank">Facebook</a></li>

            <li><a href="http://www.vincenzolarosa.it/news" target="_blank">NewsLetter</a></li>

        </ul>

        <?

        if ($login==0){

        ?>

        <!--Utente non registrato -->

        <ul id="menu_dx">

            <li><a href="#">Accedi</a></li>

        </ul>

        <?

        }else{

        ?>

        <!--Utente registrato -->

        <ul id="menu_dx">

            <li><a href="#">Profilo</a></li>        

            <li><a href="#">Messaggi</a></li>

            <li><a href="#">Esci</a></li>

        </ul>

        <?

        }

        ?>

    </div>

Codice:

/*zona di sinistra*/

#menu {

    background: #333;

    float: left;

    list-style: none;

    margin: 0;

    padding: 0;

    width: 70%;

}

#menu li {

    float: left;

    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

    margin: 0;

    padding: 0;

}

#menu a {

    background: #333 url("images/seperator.gif") bottom right no-repeat;

    color: #ccc;

    display: block;

    float: left;

    margin: 0;

    padding: 8px 12px;

    text-decoration: none;

    font-weight:normal;

}

#menu a:hover {

    background: #2580a2 url("images/hover.gif") bottom center no-repeat;

    color: #fff;

    padding-bottom: 8px;

}

 

/*zona di destra*/

#menu_dx {

    background: #333;

    float: right;

    list-style: none;

    margin: 0;

    padding: 0;

    width: 30%;

}

#menu_dx li {

    float: right;

    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

    margin: 0;

    padding: 0;

}

#menu_dx a {

    background: #333 url("images/seperator.gif") bottom right no-repeat;

    color: #ccc;

    display: block;

    float: right;

    margin: 0;

    padding: 8px 12px;

    text-decoration: none;

    font-weight:normal;

}

#menu_dx a:hover {

    background: #2580a2 url("images/hover.gif") bottom center no-repeat;

    color: #fff;

    padding-bottom: 8px;

}

 

/*Top Bar*/

#topbar{

    position:fixed !important;

    top:0px;

    left:0px; 

    height:30px;

    width: 100%;

    background:#333;

    border-style:groove;

    border-width:1px;

}

 

 

#container{

    display:block;

    position: relative;

    margin:0 auto;

    text-align:left;

     

}