|
|||
Menü und Footerproblem
Hallo alle zusammen. Habe da ein kleines Problem. Ich hoffe, dass mir Jemand dabei helfen kann. Es geht um folgende Webseite.
Problem 1: Die Navigation: Wenn ich auf der Startseite bin, dann möchte ich auch, dass der Hover aktiv bleibt. Habe es schon mit einer Klasse ausprobiert, aber ohne Erfolg. Problem 2: Footer Content: Dieses Bild soll rechts den Content abschließen. Jedoch wird der Abschluß nicht richtig angezeigt. Dieser wird jedes Mal abgeschnitten und es lässt sich in dem Bereich auch kein Text mehr einfügen. Schon mal vielen Dank im Voraus. Geändert von Xtremo (14.03.2007 um 15:24 Uhr) |
Sponsored Links |
|
||||
also um den ausgewählten zustand stehen zu lassen brauchst du eine klasse z.B. class="active" und überschreibst damit die Styles fürden a-Tag. Aber warum hast Du bei der Navgation nicht ein Listenmenü benutzt und warum diese vielen IDs für jeden container und link?
Wegen Deines Backgrounds: Ich kann keinen Tag mit der ID "#contentbottom" entdecken in Deinem Quelltext, habe mir aber auch nicht alle Seiten angesehen... Warum gibts Du dieses Hintergrundbild nicht einfach dem Container "contenttext"? Code:
#contenttext { padding-top: 20px; padding-right: 45px; padding-bottom: 20px; padding-left: 35px; background: url('../img/content_bottom.jpg') no-repeat left bottom; }
__________________
Mein Bug, Dein Bug, Bugs sind für uns alle da... |
Sponsored Links |
|
|||
Yep, die Kontaktseite wird noch angepasst. Ist nur ein Beispiel.
Mit der Klasse active hatte ich bereits schon probiert, aber darauf reagiert der nicht. Wie ist das mit den vielen IDs gemeint? Ist das etwa falsch? Eine ID nehme ich doch nur, wenn diese nur einmal in einem Dokument benötigt wird. |
|
|||
Ah, verstehe, so hast du das mit dem bottom gelöst. Man man, wie simpel. Hätte ich auch drauf kommen müssen, aber man versucht es irgendwie kompliziert zu machen.
Zu der Navigation. Das active war ja das Erste, was ich probiert hatte. Hat aber darauf nicht reagiert, was ich ja selbst nicht verstehen kann, da ich es bei einer anderen Seite, nur in veränderter Form, bereits eingesetzt hatte. Als Listenmenü werde ich es auch fertig machen. Waren meine Anfänge und hatte es auch so übernommen. Zu deinem Kommentar: Aber warum hast Du bei der Navgation nicht ein Listenmenü benutzt und warum diese vielen IDs für jeden container und link? Wollte wissen, was du damit meinst. Die IDs sind ja in dem Link dazu da, damit ich den hover Effekt nutzen kann. Mit den Containern meinst du wohl das Restliche. Code:
#navigation { float: left; width: 240px; height: 209px; background-image: url('../img/menu_left.jpg'); } #navigation a { display: block; width: 240px; height: 30px; float: left; margin-right: -3px; } #navigation a#startseite:hover { background: url('../img/menu_01.jpg') no-repeat; } #navigation a#ueberuns:hover { background: url('../img/menu_02.jpg') no-repeat; } #navigation a#service:hover { background: url('../img/menu_03.jpg') no-repeat; } #navigation a#bad:hover { background: url('../img/menu_04.jpg') no-repeat; } #navigation a#heizung:hover { background: url('../img/menu_05.jpg') no-repeat; } #navigation a#leckortung:hover { background: url('../img/menu_06.jpg') no-repeat; } #navigation a#dachufach:hover { background: url('../img/menu_07.jpg') no-repeat; } #navigation span { display: none; } Code:
#navigation a#startseite:active { background: url('../img/menu_01.jpg') no-repeat; } Geändert von Xtremo (09.02.2007 um 16:36 Uhr) |
|
||||
kein problem...
naja, dann liegt es daran dass eine id eben stärker ist als eine klasse und deinen klassenwert überschreibt. ersetze doch die ids gegen klassen, zumal alle deine menüpunkte gleich aussehen, brauchst du hier eigentlich gar keine ids oder klassen... sondern nur ein umschließendes div mit einer id oder klasse oder eben ein listenmenü (einfach mal nach suchen)...
__________________
Mein Bug, Dein Bug, Bugs sind für uns alle da... |
|
|||
Stimmt, CSS arbeitet ja nach einem Punkteregelsystem. Hatte es mal vor einiger Zeit gelesen, aber überhaupt nicht daran gedacht. Werde mal nachschauen. Gibt es sonst noch etwas, was du bemängeln oder besser machen würdest?
Habe es auf die Schnelle folgendermaßen gelöst. Simpel. Jedoch nicht, das was ich mir gewünscht hatte, aber die Seite muß online gehen. Werde es später anpassen. Navigation oben HTML: Code:
<div id="link"> <ul id="navigationtop"> <li class="service" id="service"><a href="service.html" title="Beckumer Bäder erhalten Sie beim Fachmann">Service</a></li> <li class="kontakt"><a href="kontakt.php" title="Bau von Heizungs- und Lüftungsanlagen">Kontakt</a></li> <li class="impressum"><a href="impressum.html" title="Die gezielte Leckortung erfordert Erfahrung">Impressum</a></li> </ul> </div><!-- End link --> Code:
#navigationtop li { float: left; list-style: none; display: inline; margin-right: 1px; } #navigationtop li a { height: 30px; display: block; text-indent: -9999px; } #navigationtop li.service a { background: url('../img/link_service.jpg') top left no-repeat; width: 80px; } #navigationtop li#service a { background: url('../img/link_service_a.jpg') top left no-repeat; width: 80px; } #navigationtop li.kontakt a { background: url('../img/link_kontakt.jpg') top left no-repeat; margin-left: 17px; width: 80px; } #navigationtop li#kontakt a { background: url('../img/link_kontakt_a.jpg') top left no-repeat; margin-left: 17px; width: 80px; } #navigationtop li.impressum a { background: url('../img/link_impressum.jpg') top left no-repeat; margin-left: 17px; width: 85px; } #navigationtop li#impressum a { background: url('../img/link_impressum_a.jpg') top left no-repeat; margin-left: 17px; width: 85px; } #navigationtop li a:hover { background-position: 0 -58px; } Navigation links HTML: Code:
<div id="navigation"> <a href="index.html" class="startseite" id="startseite"><span>Startseite</span></a> <a href="ueberuns.html" class="ueberuns"><span>Über uns</span></a> <a href="service.html" class="service"><span>Service</span></a> <a href="bad.html" class="bad"><span>Bad</span></a> <a href="heizung.html" class="heizung"><span>Heizung</span></a> <a href="leckortung.html" class="leckortung"><span>Leckortung</span></a> <a href="dachufach.html" class="dachufach"><span>Dach und Fach</span></a> </div><!-- End navigation --> Code:
#navigation { clear: both; width: 240px; height: 209px; background-color: #fff; background-image: url('../img/menu_left.jpg'); background-repeat: no-repeat; background-position: top left; } #navigation ul { list-style-type: none; } #navigation a { display: block; width: 240px; height: 30px; float: left; margin-right: -3px; } #navigation a.startseite:hover { background: url('../img/menu_01.jpg') no-repeat; } #navigation a#startseite { background: url('../img/menu_01.jpg') no-repeat; } #navigation a.ueberuns:hover { background: url('../img/menu_02.jpg') no-repeat; } #navigation a#ueberuns { background: url('../img/menu_02.jpg') no-repeat; } #navigation a.service:hover { background: url('../img/menu_03.jpg') no-repeat; } #navigation a#service { background: url('../img/menu_03.jpg') no-repeat; } #navigation a.bad:hover { background: url('../img/menu_04.jpg') no-repeat; } #navigation a#bad { background: url('../img/menu_04.jpg') no-repeat; } #navigation a.heizung:hover { background: url('../img/menu_05.jpg') no-repeat; } #navigation a#heizung { background: url('../img/menu_05.jpg') no-repeat; } #navigation a.leckortung:hover { background: url('../img/menu_06.jpg') no-repeat; } #navigation a#leckortung { background: url('../img/menu_06.jpg') no-repeat; } #navigation a.dachufach:hover { background: url('../img/menu_07.jpg') no-repeat; } #navigation a#dachufach { background: url('../img/menu_07.jpg') no-repeat; } #navigation span { display: none; } Geändert von Xtremo (09.02.2007 um 18:22 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
Vertikale Navigation: IE6 - Whitespace-Bug? | b.erry | CSS | 6 | 12.02.2009 17:46 |
Umbruch in einem LI bei horizontalem Menü | M4rco | CSS | 12 | 13.10.2006 12:26 |
Navigation - Menü | T.S. | CSS | 6 | 18.02.2006 19:49 |