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;
}
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>
<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?