nicht angemeldet
Navigation
0 0 0 0 Semantik
Navigation
Hallo,
ich irre schon seit Tagen im Internet umher und bin nicht sehr weit gekommen. In meinem Forum
http://www.projekt-baby.de/ habe ich eine Navigationsleiste, wo ich etwas ergänzen möchte.
Ich möchte einer Unternavigation in der Rubrik "Kugelbauch-Liste" erstellen und beim drüber
fahren mit der Maus soll ein Bild (zu 2) angezeigt werden. ich weiß absolut nicht, wie ich das
jetzt einbinden kann.
Ich hoffe es kann mir jemand helfen.
Hier noch mein CSS-Code
<head>
<style type="text/css">
body {
font: normal 100.01% Happy Monkey;
color: black; background-color: none;
}
ul#Navigation {
margin: 0px; padding:0.8em;
text-align: center;
background-image: url("http://projektbaby.lima-city.de/neu/page_header_navbg.png");
height: 50px;
width: 1240px;
padding-top: 25px;
padding-bottom: 0px;
}
ul#Navigation li {
list-style: none;
display: inline;
margin: 1.0em; padding: 0;
height: 50px;
}
ul#Navigation a, ul#Navigation span {
padding: 0.5em 1em;
text-decoration: none;
border: 0px;
border-left-color: white; border-top-color: white;
color: white; background-color: #none;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 1em; /* nur fuer IE 5.0x erforderlich */
w/idth: auto; /* sicherheitshalber fuer IE 6 zurueckgesetzt */
}
ul#Navigation a:hover, ul#Navigation span {
border-color: white;
border-left-color: black; border-top-color: black;
color: #7dab00; background-color: none;
}
</style>
</head>
und der HTML-Code
<!-- Navigation --!>
<html>
<body>
<ul id="Navigation">
<li><a href="http://www.projekt-baby.de/portal.html"><font face="Calligraffiti" size="5"><b>Portal</b></font></a></li>
<li><a href="http://www.projekt-baby.de/"><font face="Calligraffiti" size="5"><b>Forum</b></font></a></li>
<li><a href="http://www.projekt-baby.de/gallery.php"><font face="Calligraffiti" size="5"><b>Bildergalerie</b></font></a></li>
<li><a href="http://www.projekt-baby.de/page-entbindungstermine.html"><font face="Calligraffiti" size="5"><b>Kugelbauch-Liste</b></font></a></li>
<li><a href="http://www.projekt-baby.de/page-forumkinder.html"><font face="Calligraffiti" size="5"><b>Forumkinder</b></font></a></li>
</ul>
</body>
</html>
Vielen lieben Dank schon im vorraus
Evelyn
-
Hallo,
du must mit zwei ul-Ebenen arbeiten. In der zweiten Ebene umhüllst du das ul noch mit einem div, damit ein Bild agezeigt werden kann:
<ul> <li>Kugelbauch <div> <ul> <li>Unterpunkt 1</li> <li>Unterpunkt 2</li> </ul> <img ...> </div> </li> <li>...</li> </ul>Damit die zweite Ebene nicht angezeigt wird, schreibst du
ul li>div {display:none}Wenn du nun über das li fährst, soll die zweite Ebene eingeblendet werden:
ul li:hover>div {display:block}Das ist jetzt sehr vereinfacht und nicht getestet. Probiere mal.
Gast
-
Meine Herren,
du must mit zwei ul-Ebenen arbeiten. In der zweiten Ebene umhüllst du das ul noch mit einem div, damit ein Bild agezeigt werden kann:
Ich vermute, dass das Bild nicht Teil des Inhalts, sondern Teil des Designs, deswegen kann man das img-Element und das div-Element auch gleich weg lassen und das innere ul-Element mit CSS gestalten.
-
Hoppla, ich schon wieder,
Ich vermute, dass das Bild nicht Teil des Inhalts, sondern Teil des Designs, deswegen kann man das img-Element und das div-Element auch gleich weg lassen und das innere ul-Element mit CSS gestalten.
Man könnte das Bild auch in ein Listenelement der zweiten Ebene setzen, dann entfällt das umhüllende div auch.
Gast
-
Hoppla, ich schon wieder,
Ich vermute, dass das Bild nicht Teil des Inhalts, sondern Teil des Designs, deswegen kann man das img-Element und das div-Element auch gleich weg lassen und das innere ul-Element mit CSS gestalten.
Man könnte das Bild auch in ein Listenelement der zweiten Ebene setzen, dann entfällt das umhüllende div auch.
es geht nicht darum, was man alles machen "könnte", sondern darum, was semantisch richtig ist! :-P
Und so wie ich das Ausgangsposting verstanden habe, geht es nicht um ein Untermenü, sondern vielmehr um eine Art "Tooltipp", welcher ganz sicher nicht in eine weitere Liste gehört.
Gruß Gunther
-
Und so wie ich das Ausgangsposting verstanden habe, geht es nicht um ein Untermenü, sondern vielmehr um eine Art "Tooltipp", welcher ganz sicher nicht in eine weitere Liste gehört.
Das könntst du missverstanden haben:
"Ich möchte einer Unternavigation in der Rubrik "Kugelbauch-Liste" erstellen..."
Gast
-
Und so wie ich das Ausgangsposting verstanden habe, geht es nicht um ein Untermenü, sondern vielmehr um eine Art "Tooltipp", welcher ganz sicher nicht in eine weitere Liste gehört.
Das könntst du missverstanden haben:
Ja, durchaus.
Du aber auch:"... und beim drüberfahren mit der Maus soll ein Bild (zu 2) angezeigt werden."Also sollte doch zuerst mal dieser Punkt geklärt werden, bevor man irgendwelche (Code-)Vorschläge macht ...! ;-)
Gruß Gunther
-
Hallo ihr beiden,
also, ich versuche es nochmal zu erklären.
Ich möchte das Bild zu 2 anzeigen lassen, wenn man
mit der Maus drüber fährt, wo aber in der Box eine Unternavigation
mit Link angezeigt werden soll und klickbar ist!-
Hallo!
also, ich versuche es nochmal zu erklären.
Das ist nett von dir! :-)
Ich möchte das Bild zu 2 anzeigen lassen,
Und schon bin ich wieder an dem Punkt, an dem ich dich nicht verstehe (obwohl ich den Rest auch gelesen habe). Von welchem Bild redest du denn die ganze Zeit über!?
wenn man mit der Maus drüber fährt,
Wenn man mit der Maus "wo rüber" fährt? Über den entsprechenden Menüpunkt (Bildergalerie)?
wo aber in der Box eine Unternavigation mit Link angezeigt werden soll und klickbar ist!
Also ein ganz "normales" Drop-Down Menü (und nix mit Bild)!?
Sorry, keine böse Absicht, aber ich verstehe es noch nicht wirklich. Und wie bereits geschrieben, ist das für eine "brauchbare" Antwort durchaus erforderlich.
Gruß Gunther
-
Hallo Gunter,
hier nochmal das "Beispielbild"
Die Grafik/Bild zu 1 ist in meinem Forum als Navigation aktiv.
Wenn man mit der Maus, über Kugelbauch-Liste fährt, sollte sich
das Bild/Grafik zu 2 öffnen und ein Untermenü sichtbar sein!
Wie Du es schon geschrieben hast, als Dropdownmenü.-
Meine Herren,
Die Grafik/Bild zu 1 ist in meinem Forum als Navigation aktiv.
Das entsprechende HTML dazu:
<ul id="Navigation"> <li><a href="http://www.projekt-baby.de/portal.html"><font face="Calligraffiti" size="5"><b>Portal</b></font></a></li> <li><a href="http://www.projekt-baby.de/"><font face="Calligraffiti" size="5"><b>Forum</b></font></a></li> <li><a href="http://www.projekt-baby.de/gallery.php"><font face="Calligraffiti" size="5"><b>Bildergalerie</b></font></a></li> <li><a href="http://www.projekt-baby.de/page-entbindungstermine.html"><font face="Calligraffiti" size="5"><b>Kugelbauch-Liste</b></font></a></li> <li><a href="http://www.projekt-baby.de/page-forumkinder.html"><font face="Calligraffiti" size="5"><b>Forumkinder</b></font></a></li> </ul>Du solltest als erstes alle font-Elemente entfernen, die gibt es seit HTML4.01 nämlich nicht mehr. Die b-Elemente dienen auch nur dem Design und sind deshalb auch Fehl am Platz. Die Schriftart, bzw. Schrift-Gewichtung kannst und solltest du mit CSS festlegen. Siehe dazu die Serie Der Weg zu HTML5 aus dem selfhtml-Blog. Darüber hinaus kannst du aus dem Artikel auch andere Auszeichnungen für deine Seitenstruktur mitnehmen, die ich in dieser Antwort unerwähnt lasse.
Wenn man mit der Maus, über Kugelbauch-Liste fährt, sollte sich
das Bild/Grafik zu 2 öffnen und ein Untermenü sichtbar sein!
Wie Du es schon geschrieben hast, als Dropdownmenü.Diese Unternavigation musst du erstmal in deine Dokument-Struktur einfügen, als Unterliste.
Ein Beispiel, wie man ein so verschachteltes Menü mit CSS gestalten kann findest du im selfhtml-Wiki.
Dabei sind aber verscheide Abwägungen zu machen: Wie soll sich das Menü zum Beispiel bei Smartphones und Tablets verhalten? Dort gibt es keinen Mauszeiger.
Das Sprechblasen-Design deines Untermenü-Punktes kannst du übrigens auch ganz ohne Bilder umsetzen: http://www.sitepoint.com/pure-css3-speech-bubbles/
--
Hey Girl,
i wish you were asynchronous, so you'd give me a callback.
-
-
-
-
-
-
-
-
-