[HTML][CSS] Zmiana koloru obramowania, jednego paska przy dwóch odnośnikach Opcje

[b_chmura]

Witam
Trudno mi opisać sprawę wiec pomogę sobie obrazkami.

Mam takie proste menu:
(IMG:http://triptic.pl/chmura/1.jpg)
Gdy najadę na którą pozycje pasek u góry, u dołu i napis zmieniają kolor na czarny:
(IMG:http://triptic.pl/chmura/2.jpg)
Gdy najadę na pozycje poniżej robi się tak samo ale jak widzicie pasek który wcześniej był dolnym teraz jest górnym i tak samo zmienia kolor na czarny:
(IMG:http://triptic.pl/chmura/3.jpg)

Jak zrobić żeby tak właśnie się działo?

Jeśli dalej pisze niezrozumiale, powiedzcie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował b_chmura 6.08.2009, 14:38:31

[f1xer]

czyli chcesz żeby tylko dolny pasek się robił czarny?? więcej szczegółów nt. CSS i HTML tego fragmentu by się przydało

[Ellington]

Ustawiaj zmieniajace sie border-top i border-bottom dla elementu li.

[b_chmura]

Nie, chcę żeby przy każdej pozycji w menu dolny i górny pasek zmieniał kolor na czarny.

DODANO:
ale w tym wypadku jeden pasek musi być wspólny dla dwóch pozycji w menu

Ten post edytował b_chmura 6.08.2009, 14:55:57

[Ellington]

Pokaz kod. Trudno cos wywrozyc.

[b_chmura]

Kod wam nic nie da. Poza tym łatwo można się domyśleć jak by to wyglądało... ale skoro chcecie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Tak to wygląda gdy zmieniam tylko np. dolny pasek:

[HTML] pobierz, plaintext 
<style>
a.menu
{ 
  display: block;
  height: 15px;
  font-size: 11px;
  color: #C0C0C0;
  border: solid 0px #C0C0C0;
  border-width: 0 0 1px 0;
  text-decoration: none;
}
a.menu:hover 
{ 
  color: #000000; 
  border-color: #000000; 
}
</style>
 
<a class="menu" href="#" title="">pozycja 1</a>
<a class="menu" href="#" title="">pozycja 2</a>
<a class="menu" href="#" title="">pozycja 3</a>
<a class="menu" href="#" title="">pozycja 4</a>
<a class="menu" href="#" title="">pozycja 5</a>
<a class="menu" href="#" title="">pozycja 6</a>
[HTML] pobierz, plaintext 

[f1xer]

no to ja nie rozumiem (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) pierwszy i drugi obrazek się niczym nie różnią (poza wyróżnioną pozycją) a jednak mówisz że na drugim jest źle, sorry ale mi to trzeba łopatologicznie wyłożyć (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[b_chmura]

zauważ ze na jednym i drugim obrazku jeden z pasków zmienia się jak najadę na "others" i "about" czyli dla tych dwóch pozycji jest wspólnym. Ten pomiędzy nimi.

Pasek pomiędzy dwoma pozycjami powinien się zmieniać jak najadę na jedną i drugą pozycje. Jak to zrobić?

[danny6]

W css raczej się nie da. Próbuj w JS.

[b_chmura]

hmm w js mistrzem nie jest. Wątpię bym to zrobił przyzwoicie optymalnie... Macie jakieś pomysły?

[viking]

Przeczytałem to kilka razy i dalej nie rozumiem co chcesz osiągnąć (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Kod

a.menu:hover {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  color: #000;
}

a.menu {
/* to samo tylko inne kolory */
}

[f1xer]

no to teraz rozumiem (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) cóż tak jak kolega napisał w css raczej się nie da, możesz co prawda połączyć obramowania i popróbować z hover, mi najbliżej ideałowi wyszło coś takiego

[HTML] pobierz, plaintext 
<style>
ul.kontener_menu li {  
     list-style: none;  
     padding: 10px;  
     border-top:#aaaaaa solid 1px;
     border-bottom:#aaaaaa solid 1px;
 }
.bordercollapse li {  
    margin: 0 -1px -1px 0;  
}  
.bordercollapse li:hover{
border-color:black;
}
</style>
<ul class="kontener_menu bordercollapse">
  <li><a href="">Menu 1</a></li>
  <li><a href="">Menu 1</a></li>
  <li><a href="">Menu 1</a></li>
  <li><a href="">Menu 1</a></li>
</ul>
[HTML] pobierz, plaintext 

edit:
tak teraz patrze i ten margin w .bordercollapse li:hover był niepotrzebny (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował f1xer 6.08.2009, 15:52:40