Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Meny poziome,jak zrobic jeden element po lewej a resztę po prawej.
Forum PHP.pl > Forum > Po stronie przeglądarki
kasek
Witam
Można powiedzieć że jestem początkujący z uwagi na długą przerwę w tworzeniu stron więc zwracam się do Was o pomoc,
Zrobiłem na stronie opartej na divach, menu poziome, wszystkie elementy ustawione są blokowo od prawej strony, chciałbym jednak żeby jeden element był od lewej strony paska i nie wiem jak to zrobić

W pliku HTML mam:

<div class="menu">
<ul>
<li><a href="#">Logowanie</a></li>
<li><a href="#">Rejestracja</a></li>
<li><a href="#">Cennik</a></li>
<li><a href="#">Strona Główna</a></li> < to chciałbym mieć po lewej stronie na pasku menu
<li><a href="#</a></li>
</ul>
</div>


w pliku CSS mam:

.clear { clear: both; background: none; }

.menu{
width: 100%;
overflow: hidden;
border-bottom: 0px solid black;
margin: 0px 0px 5px 0px;
background: #ABBEBE;
}

.menu ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 14px Verdana;
list-style-type: none;
}

.menu li{
display: inline;
margin: 0;
}

.menu li a{
float: right;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141;
}



.menu li a:visited{
color: white;
}

.menu li a:hover, .menu li.selected a{
background: black;
}


wstydnis.gif
Jeśli ktoś by coś doradził jak ten jeden element przesunąć do lewej to będę wdzięczny.
Pozdr
Piotr
vokiel
Coś takiego:

  1. <div class="menu">
  2. <ul>
  3. <li><a href="#">Logowanie</a></li>
  4. <li><a href="#">Rejestracja</a></li>
  5. <li><a href="#">Cennik</a></li>
  6. <li class="po_lewej"><a href="#">Strona Główna</a></li> < to chciałbym mieć po lewej stronie na pasku menu
  7. </ul>
  8. </div>


  1. .menu li.po_lewej a{
  2. float: left;
  3. display: block;
  4. text-decoration: none;
  5. margin: 0;
  6. padding: 7px 8px;
  7. border-right: 1px solid white;
  8. color: white;
  9. background: #414141;
  10. }
kasek
VOKIEL, dokładnie o coś takiego mi chodziło, bardzo dziękuje za kod! smile.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.