CSS-Listen-Menü mit Grafiken und Text - leider noch nicht optimal... @ tutorials.de: Tutorials, Forum & Hilfe

css_tester · 03.04.07 03:37

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:

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

Twinsetter · 03.04.07 04:03

Was hast Du gegen Deine Arbeit? Mit Opera betrachtet sieht alles hervorragend aus.
Deine Startseite ist sehr vielversprechend.

css_tester · 03.04.07 04:15

Hi, Danke Danke...
Allerdings ist die Optik nicht alles

Ich denke - und so ein paar "Probleme" und Unklarheiten hab ich ja schon oben beschrieben, dass man den Code durchaus noch verbessern kann...

Twinsetter · 03.04.07 04:23

Sicher kann man Code immer besser machen - aber wie gesagt unter Opera hat alles bestens funktioniert.

PS: Wenn Du als Bergführer arbeitest solltest Du mal auf dieser Adresse http://fliana.at/vorbeischauen. Der Chef (Christian Eiterer) ist Bergführer und auch Canyoningguide. Er hat schon das Dach der Welt bestiegen. Wäre für Dich bestimmt interessant mit ihm Kontakt aufzunehmen.

**Quaese** · 03.04.07 08:44

Hi,

das Flackern hat seine Ursache im deaktivierten Cache des IEs. Wenn ich ihn einschalte, ist es nicht mehr da.

Die Gesamtbreite berechnet sich nach dem korrekten Boxmodell durch die Addition von padding, margin und width.
Für Dich heisst das, in modernen Browsern (einschl. IE6) haben die Links eine Breite (width) von 216 Pixeln. Die IEs
vorher interpretieren das Boxmodell falsch und verlangen eine Breite von 279 Pixeln, so dass hier zum Beispiel mit Hilfe
eines Conditional Comments, der nach der eigentlichen CSS-Definition eingebunden wird, nachkorrigiert werden muss.

Weiterhin kannst Du padding- und margin-Werte zusammenfassen.

Code :

<style type="text/css">
  <!--
#navigation_index_pic li a {
     width: 216px; /* 216 + 53 + 10 = 279 */
     height: 45px;
   padding: 4px 10px 0 53px;
     display: block;
     text-decoration: none;
     background-color: transparent;
     border: none;
     color: #000;
}
 //-->
</style>
<!--[if lt IE6]>
  <style type="text/css">
#navigation_index_pic li a{ width: 279px;}
  </style>
<![endif]-->

Vielleicht reicht Dir das als Anregung.

Ciao
Quaese

css_tester · 03.04.07 16:41

Danke #Quaese

Ja... das sind Tipps die mich wirklich weiterbringen

Werde ich gleich heute Abend mal ausprobieren

IE Cache: Einschalten/Ausschalten?
Meinst du das hier:
Im IE auf "Extras" -> "Internetoptionen" und wähle auf der Registerkarte "Allgemein" im Untermenü "Temporäre Internetdateien" den Punkt Einstellungen. Da wählst ich in der Option "Neuere Version der gespeicherten Seiten suchen" den Punkt "Nie" = dann ist er ausgeschaltet und wenn ich ihn einschalten will, muss ich das auf "bei jedem Zugriff auf die Seite" einstellen. Also dann ist er bei mir eingeschaltet...

Ist nur komisch, dass das Flackern weg ist - bei mir - wenn ich das besagte Hintergrundbild einbinde!?

**Quaese** · 04.04.07 09:22

Hi,

ja, das meinte ich mit dem Cache im IE.

Bei mir flackert es ohne Hintergrundbild und ausgeschaltetem Cache ebenfalls. Das liegt darin begründet,
dass das Hintergrundbild jedesmal neu geladen werden muss. Ist ein Hintergrund eingebunden, flackert
es auch, es fällt dem Betrachter nur nicht auf.

Ciao
Quaese

css_tester · 04.04.07 14:51

OK.... Danke... ohne Hintergrundbild ist es wirklich unerträglich... aber mit geht es ganz gut... das ist der Nachteil bei Bilder mit CSS... Ciao

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

die ersten Panoramen .. leider noch keine 360°

Cronjob wegen Apache Problem, doch geht leider noch nicht

SORRY! Leider noch eine Blätterfunktion!

Ich muss leider noch einmal stören , aber .....

E-Mail:

Abonnieren Abbestellen