Menu obrazkowe css


(Markin) #1

Witam,

Próbuje zrobić poziome menu obrazkowe CSS, ale mam z tym problem, nie wyświetla się w poziomie oraz obrazki nie są takie jak powinny

Bardzo proszę o pomoc.

<style type="text/css">

       

       #menu {

    float: left;

    height: 50px;

    width: 100%;

    margin-top: 110px;   

}



a#omnie {

    display: block;

    height: 50px;

    background-image: url("http://serwer1645901.home.pl/tlo/omnie2.png");

    width: 160px;   

}



a#omnie:hover {

    text-decoration: underline;

    background-position: 0 -30px;

}



a#moje {

    display: block;

    height: 50px;

    background-image: url(" http://serwer1645901.home.pl/tlo/moje2.png");

    width: 210px;   

}



a#moje:hover {

    text-decoration: underline;

    background-position: 0 -30px;

}



a#komen {

    display: block;

    height: 50px;

    background-image: url("http://serwer1645901.home.pl/tlo/komen2.png");

    width: 210px;   

}



a#komen:hover {

    text-decoration: underline;

    background-position: 0 -30px;

}

a#zadaj {

    display: block;

    height: 50px;

    background-image: url("http://serwer1645901.home.pl/tlo/zadaj2.png");

    width: 210px;   

}

 a#zadaj:hover {

    text-decoration: underline;

    background-position: 0 -30px;

}



ul, ul li {

    display: block;

    list-style: none;

    margin: 0;

    padding: 0;

}



ul li {

    display: inline;

    white-space: nowrap;

}

 </style>



</head>



<body>

<div id="menu">

            <ul>

                <li><a href="http://allegro.pl/sellerInfoFrontend/2764833/aboutSeller" id="omnie"></a></li>

                <li><a href="http://allegro.pl/listing/user/listing.php?us_id=2764833" id="moje"></a></li>

                <li><a href="http://allegro.pl/show_user.php?uid=2764833" id="komen"></a></li>

                <li><a href="http://allegro.pl/SendMailToUser.php?userId=2764833" id="zadaj"></a></li>

            </ul>

        </div>

nav2.htm

    


(Fizyda) #2

Float left powinien być na elementach li, a nie na #menu.

 

A po najechaniu myszki wyświetlają się dokładnie tak jak je zakodowałeś. Czyli przesuwają się w górę, tło jest duplikowane i przez to pojawia się kawałek u góry ucięty od góry i na dole ścięty z dołu.

 

Poza tym tak się nie robi menu tak gdzieś od '95.


(Markin) #3

Czesc Fizyda, dzięki za porade, a byłbyś w stanie zrobić mi fajne poziome menu, jestem w stanie zapłacić 20zł, ,jeśli tak,to podaj mi swój e-mail.