CSS: menü készítése
Hello!
A probléma a következő: táblázatos menüt akarok helyettesíteni réteges megjelenítéssel, ezzel elvileg a javascriptet is kilőhetném. Azonban nem tudom, h hogyan: egy menüsor úgy néz ki, hogy van egy kerete alul és felül, pontozva, de képpel(!) és a jobb oldalon van egy nyíl jelzés úgy, hogy ehhez kapcsolódik az alsó és felső keret. A gond ott kezdődik, h akármit csinálok, valami mindig kiütközik, vagy a kép van rossz helyen IE-ben (egy kicsit elcsúszik a jobb oldalról balra és kilóg alul a háttér, míg Firefox mellett minden ok), vagy felette-alatta átcsúszik a szín. Amit meg akarok csinálni megtalálható itt: www.bokatex.hu/main.php. Előre is kösz a segítséget:)
Egy jónak tűnt minta:
<style type="text/css">
#menu {
width: 175px;
height: 20px;
background-image: url('button_back.gif');
background-position: right;
background-repeat: repeat-x;
text-align: left;
}
#menu A {
width: 175px;
height: 18px;
display: block;
text-indent: 3px;
text-decoration: none;
position: relative;
top: 1px;
font-family: Arial, Helvetica, Sans serif;
font-size: 13px;
font-weight: normal;
font-style: normal;
color: #FFFFFF;
text-align: left;
text-decoration: none;}
#menu A:hover {
background-color: #CCCCCC;
color: #000000;}
</style>
...
<div id="menu"><a href="#" class="menu"><img src="button_r.gif" width="10" height="20" alt="" border="0" style="float: right; position: relative; top: -1px;"> • Menüelem</a></div>
■ A probléma a következő: táblázatos menüt akarok helyettesíteni réteges megjelenítéssel, ezzel elvileg a javascriptet is kilőhetném. Azonban nem tudom, h hogyan: egy menüsor úgy néz ki, hogy van egy kerete alul és felül, pontozva, de képpel(!) és a jobb oldalon van egy nyíl jelzés úgy, hogy ehhez kapcsolódik az alsó és felső keret. A gond ott kezdődik, h akármit csinálok, valami mindig kiütközik, vagy a kép van rossz helyen IE-ben (egy kicsit elcsúszik a jobb oldalról balra és kilóg alul a háttér, míg Firefox mellett minden ok), vagy felette-alatta átcsúszik a szín. Amit meg akarok csinálni megtalálható itt: www.bokatex.hu/main.php. Előre is kösz a segítséget:)
Egy jónak tűnt minta:
<style type="text/css">
#menu {
width: 175px;
height: 20px;
background-image: url('button_back.gif');
background-position: right;
background-repeat: repeat-x;
text-align: left;
}
#menu A {
width: 175px;
height: 18px;
display: block;
text-indent: 3px;
text-decoration: none;
position: relative;
top: 1px;
font-family: Arial, Helvetica, Sans serif;
font-size: 13px;
font-weight: normal;
font-style: normal;
color: #FFFFFF;
text-align: left;
text-decoration: none;}
#menu A:hover {
background-color: #CCCCCC;
color: #000000;}
</style>
...
<div id="menu"><a href="#" class="menu"><img src="button_r.gif" width="10" height="20" alt="" border="0" style="float: right; position: relative; top: -1px;"> • Menüelem</a></div>
Ez?
A képet meg tedd be símán háttérképnek, és pozícionáld megfelelően.
Üdv, Pali
Ps.: ja, kell egy minimális js a buta IE miatt ;)
Nem
egy megoldás
Igen
<li class="folder"> és
<a href="#" class="submenu">
Üdv, Pali