Forum PHP.pl > Problem z poziomym menu na divach

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Problem z poziomym menu na divach

Forum PHP.pl > Forum > Po stronie przeglądarki

tomazzi

4.06.2013, 16:48:23

Próbuje zrobić poziome menu, gdzie pozycją jest div a w nim link. Chcę, aby cały div był linkiem. Aktualnie nie wiem dalczego ale pozycje menu wyświatlane są pod sobą.
CSS:

Kod

.pozycja {
    display: inline;

    width: 120px;
    height: 40px;
    color: whitesmoke;
    font-weight: bold;
        background-color:     #C9B5E8;
}

a:hover{
    background-color:     #C9B5E8;
}

#menu {
    background-color: #8658CB;

}
a{
    display: block;

}

HTML:

Kod

<div id="menu">
    <div class="pozycja"><a href="#">POZYCJA1</a></div>
    <div class="pozycja"><a href="#">POZYCJA2</a></div>
        <div class="pozycja"><a href="#">POZYCJA3</a></div>
</div>

Co należałyby zmienić/dodać?

nospor

4.06.2013, 16:51:01

1) Menu to się robi raczej na UL -> LI
2) Dałeś dla A BLOCK, więc raczej nie ma co się dziwić, że ci zjezdza do nowej linii

tomazzi

4.06.2013, 17:15:52

Wykorzystałem <ul>, <li> zgodnie z tuturialem na stronie http://www.kurshtml.edu.pl/css/poziome_menu,menu.html i menu dalej jest w pionie> Kod:

Kod

ul, ul li {
    display: block;
    list-style: none;
    width: 120px;
    height: 40px;
    color: whitesmoke;
    font-weight: bold;

}

ul li {
      display: inline;
}

Kod

<ul>
    <li><a href="#">POZYCJA1</a></li>
    <li><a href="#">POZYCJA2</a></li>
     <li><a href="#">POZYCJA3</a></li>
</ul>

Arcioch

4.06.2013, 17:27:46

Jak już to tak

[HTML] pobierz, plaintext 
ul {
    display: block;
    list-style: none;
    margin: 0;
   padding: 0;
 
}
 
ul li {
    display: inline-block;
    width: 120px;
    height: 40px;
    color: whitesmoke;
    font-weight: bold;
}
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.