css_tester
Grünschnabel
Hallo Zusammen,
vielleicht liegt es auch an der Uhrzeit... aber mir fehlt einfach mal ein Hinweis, Tipp oder Code für eine CSS-Listen-Grafik-Menü
Das ganze ist valide (nur im CSS gibt es eine Wahrung = "Diese Eigenschaft gilt für Elemente auf Block-Level" ?), doch irgendwie habe ich wohl viel zuviel getrickst, bis alles geklappt hat und auch an der richtigen Stelle positoniert war... im FF und IE!
Das Positonieren der Linktexte über der Grafik, war ein böses gefummel, da der Text leider nach rechts über die Grafiken herrausragen kann, obwohl ich doch die Breite angegeben habe (279px)! Auch bewegen sich die Grafiken beim ausrichten der Texte per padding!? Und mit margin hat schon mal gar nicht im FF geklappt!
Auch "springen" oder "flackern" die Grafiken im IE6 beim überfahren, aber nur solange ich nicht auf einen Link geklickt habe... daher habe ich "background-image: url "bilder/pic_index/navi_index_bg.jpg");" eingefügt, also quasi noch mal die ganze Navigation als Pic... da war das "flackern" beim überfahren fort!!
Ich denke, dass können hier bestimmt viele Leute besser
Schon mal einen herzlichen Dank im Voraus...
Hier ist das ganze zu bewundern!
Und hier der Code dazu:
vielleicht liegt es auch an der Uhrzeit... aber mir fehlt einfach mal ein Hinweis, Tipp oder Code für eine CSS-Listen-Grafik-Menü
Das ganze ist valide (nur im CSS gibt es eine Wahrung = "Diese Eigenschaft gilt für Elemente auf Block-Level" ?), doch irgendwie habe ich wohl viel zuviel getrickst, bis alles geklappt hat und auch an der richtigen Stelle positoniert war... im FF und IE!
Das Positonieren der Linktexte über der Grafik, war ein böses gefummel, da der Text leider nach rechts über die Grafiken herrausragen kann, obwohl ich doch die Breite angegeben habe (279px)! Auch bewegen sich die Grafiken beim ausrichten der Texte per padding!? Und mit margin hat schon mal gar nicht im FF geklappt!
Auch "springen" oder "flackern" die Grafiken im IE6 beim überfahren, aber nur solange ich nicht auf einen Link geklickt habe... daher habe ich "background-image: url "bilder/pic_index/navi_index_bg.jpg");" eingefügt, also quasi noch mal die ganze Navigation als Pic... da war das "flackern" beim überfahren fort!!
Ich denke, dass können hier bestimmt viele Leute besser
Schon mal einen herzlichen Dank im Voraus...
Hier ist das ganze zu bewundern!
Und hier der Code dazu:
Code:
<body>
<div id="box">
<div id="pic">
<div id="navigation_index">
<ul id="navigation_index_pic">
<li><a class="navigation_index_german" href="home.htm" title="German">Ihr Bergführer für Fels, Schnee, Eis<br />und Canyons im gesamten Alpenraum</a></li>
<li><a class="navigation_index_english" href="#" title="English">Discover the alps with an english<br />speaking lokal mountainguide</a></li>
<li><a class="navigation_index_francais" href="#" title="Français">Suisse, Autriche, Allemagne avec un<br />guide de haute montagne bilingue</a></li>
</ul>
<ul id="navigation_index_pic_wasc">
<li><a class="navigation_index_wasc" href="#" title="WASC 2008">49th World Airline Ski Championship<br />Discovering the alps with skis bevor<br />and after the Campionship 2008</a></li>
</ul>
</div>
</div>
[...]
Code:
div#navigation_index {
width: 279px;
height: 205px;
background-repeat: no-repeat; /**/
background-image: url("bilder/pic_index/navi_index_bg.jpg");
/* background-color: #ccc; */
padding-top: 29px;
padding-left: 9px;
/* padding-right: 200px; zeigt gar keine Wirkung? */
margin-top: 0px; /* positionierung in IE und FF nur mit padding? */
margin-left: 0px; /* positionierung in IE und FF nur mit padding? */
}
/* Navigation Index ----------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
ul#navigation_index_pic {
/* text-indent: -9999px; text verschwinden lassen, anzeige nur ohne css */
}
ul#navigation_index_pic li {
list-style-type: none;
font-family: Arial, Verdana, Helvetica, Sans-Serif;
font-size: 75%;
font-weight: bold;
}
#navigation_index_pic li a {
width: 279px;
height: 45px;
padding-top: 4px; /**/
padding-left: 53px;
/* padding-right: 50px; keine Wirkung? */
display: block;
text-decoration: none;
background-color: transparent;
border: none;
color: #000;
}
li .navigation_index_german {
background-image: url('bilder/pic_index/nav_d.jpg');
background-repeat: no-repeat;
}
li .navigation_index_german:hover {
background-image: url('bilder/pic_index/nav_d_hover.jpg');
background-repeat: no-repeat;
}
li .navigation_index_english {
background-image: url('bilder/pic_index/nav_e.jpg');
background-repeat: no-repeat;
}
li .navigation_index_english:hover {
background-image: url('bilder/pic_index/nav_e_hover.jpg');
background-repeat: no-repeat;
}
li .navigation_index_francais {
background-image: url('bilder/pic_index/nav_f.jpg');
background-repeat: no-repeat;
}
li .navigation_index_francais:hover {
background-image: url('bilder/pic_index/nav_f_hover.jpg');
background-repeat: no-repeat;
}
/*
li .navigation_index_wasc {
background-image: url('bilder/pic_index/nav_wasc.jpg');
background-repeat: no-repeat;
}
li .navigation_index_wasc:hover {
background-image: url('bilder/pic_index/nav_wasc_hover.jpg');
background-repeat: no-repeat;
}
*/
/* Navigation Index WASC ------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------- */
ul#navigation_index_pic_wasc {
/* float: left; */
}
ul#navigation_index_pic_wasc li {
list-style-type: none;
font-family: Arial, Verdana, Helvetica, Sans-Serif;
font-size: 75%;
font-weight: bold;
}
#navigation_index_pic_wasc li a {
width: 279px;
height: 59px;
padding-top: 4px;
padding-left: 62px;
display: block;
text-decoration: none;
background-color: transparent;
border: none;
color: #000;
}
li .navigation_index_wasc {
background-image: url('bilder/pic_index/nav_wasc.jpg');
background-repeat: no-repeat;
}
li .navigation_index_wasc:hover {
background-image: url('bilder/pic_index/nav_wasc_hover.jpg');
background-repeat: no-repeat;
}
