Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Menu z nagłówkiem
Forum PHP.pl > Forum > Przedszkole
slimboot
Poniższy styl tworzy menu z nagłówkiem:

Kod
dl, dt, dd {
    display: block;
    margin: 0;
    padding: 0;
}

dl {
    width: 200px;
    padding: 1px 2px;
  

}

dt {  
    padding: 7px 15px;    
    font-weight: bold;
    background-color: #006fda;
    color: #d3eafc;
    text-align: right;
    border-right: 20px solid #29b3fe;
    margin-top: 1px;
  text-shadow: 1px 1px 5px white;      
}

dd {
    border-top: 1px solid #29b3fe;
}

dl a:link, dl a:visited {
    display: block;
    width: 176px;
    text-decoration: none;
    padding: 7px;
    font-weight: bold;
    background-color: white;
    color: #002c5a;
    border-left: 10px solid #006fda;
  text-shadow: 2px 2px 2px #d3eafc;  
}

dl a:hover {
    width: 166px;
    background-color: #d3eafc;
    color: #001e3b;
    border-left: 20px solid #29b3fe;
  text-shadow: 2px 2px 2px #d3eafc;  
}


Przykład menu:

Kod
<dl>
      
<dt>Menu:</dt>
<dd><a href="strona1.php">Pozycja 1</a></dd>
<dd><a href="strona2.php">Pozycja 2</a></dd>      
      

</dl>


chciałem sprawić by nagłówek także był odsyłaczem, ale po wstawieniu odsyłacza między <dt></dt> znika mi grafika z nagłowka i zostaje zastąpiona grafiką z odsyłaczy między <dd></dd>. Próbowałem na kilka sposobów i wychodziły mi tylko jakieś dziwadztwa. Jak to zrobić, by wyglad nagłówka pozostał niezmieniony i jednocześnie nagłowek był odsyłaczem?
r4xz
http://jsfiddle.net/8y5VC/
co tutaj jest nie tak?
slimboot
To jest wersja bez odsylacza

A to jest wersja jak dodałem odsyłacz

Moje pytanie brzmi, co zrobić, by wersja z odsyłaczem wygladała jak ta pierwsza?
r4xz
dodać:
  1. dt a {
  2. color: #000;
  3. text-decoration: none;
  4. }

i zmienić linijkę
  1. dd a:link, dl a:visited {

na
  1. dd a:link, dd a:visited {
slimboot
Ok, działa swietnie, wielkie dzięki i plusik thumbsupsmileyanim.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.