XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS-Menü mit Mouseover (http://xhtmlforum.de/showthread.php?t=54672)

Gomilli 23.11.2008 15:39

CSS-Menü mit Mouseover
 
Hallo Community,

ich suche jetzt schon eine halbe-Stunde nach einer Lösung, weiß aber nicht genau, nach welchen Schlagwörtern ich ausschau halten soll. Deswegen stelle ich jetzt einfach mal hier mein Problem zur Schau und hoffe, dass mir jemand helfen kann.

Auf dongomillo.de findet Ihr eine Navigation, die noch nicht so funktioniert, wie ich es gerne hätte. Ich möchte bei dem Mouseover, dass der orange Balken ganz links an den Rand rutscht, über die komplette Höhe der Zeile geht und der Text da stehen bleibt, wo er jetzt ist. Solche Navigationen habe ich schon zig mal gesehen, nur jetzt wo ich eine brauche, finde ich keine ;/

Das CSS-File könnt Ihr unter http://dongomillo.de/styles.css einsehen.

Wie Ihr sicher auf den ersten Blick erraten könnt, beschäftige ich mich noch nicht lange mit CSS. Trotzdem hoffe ich hier eine Antwort zu finden.

Besten Dank schonmal!

Grüße,
Roman

kadees 23.11.2008 16:02

Über border:
Gib deinem Link einen linken border in der Hintergrundfarbe deiner Navi-Box:
Code:

.navi_link a {
        border-left: 5px solid #ddd;
        }


Gomilli 23.11.2008 16:07

Ok, damit verdrängt der mir den Text schonmal nicht mehr. Das ist schonmal Gold wert ;)

Es bleibt allerdings weiterhin das Problem bestehen, dass der Balken direkt an der Schrift klebt und nicht ganz links, wo er hingehört und nicht in voller Höhe über die Zeile.

Hat da jemand eine Idee für?

kadees 23.11.2008 16:38

Das liegt an der Klasse .navi_link:

Code:

.navi_link
color:#434343;
line-height:22px;
text-indent:20px;
}

Grund: CSS 4 You - The Finest in Stylesheets: Workshop CSS: Teil 8 - Vererbung

Nimm das text-ident mal raus und setze dafür:

Code:

.navi_link a
border-left:5px solid #F4F4F4;
padding-left:20px;
}

Informier dich mal:
SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell
text-indent: Texteinrückung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets bzw.
padding-left: Innenabstand links: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Gomilli 23.11.2008 17:06

Super, das funktioniert schonmal. Der Rahmen ist ganz links, geht aber noch nicht über die volle Zeilenhöhe...da finde ich den Fehler leider ebenfalls nicht.

Könnte mir da nochmal kurz jemand auf die Sprünge helfen?

Danke für Eure Geduld!!

PS: Die Seite mit der Vererbung habe ich mir gerade durchgelesen...klingt alles logisch ;)

Gomilli 23.11.2008 19:08

Falls es interessant ist: Wenn ich den Balken in ".navi_link" anzeigen lasse (andere border-left-Farbe), dann geht der über die komplette Zeilenhöhe. Nur in ".navi_link a:hover" funktioniert es dann nicht.

Ich komm nicht weiter. Hilfe!!

fricca 23.11.2008 19:22

Du suchst display:block.

Wie wär's mit einem Buch? Little Boxes eignet sich.
Du willst ja offensichtlich Webdesign als Dienstleistung anbieten. Dann solltest du die Grundlagen auch sicher beherrschen.

Gomilli 23.11.2008 19:27

Ne, mache eine Ausbildung zum Mediengestalter. Da ist es zum Glück nur ein Schulprojekt, in dem wir eine eigene Dienstleistung "simulieren" sollen. Aber da ich mich auch privat dafür interessiere, werde ich mir das Buch mal bei Amazon angucken.

Danke für die Hilfe! Habe dafür alle Helfer gut bewertet ;)

Grüße,
Roman

fricca 23.11.2008 19:45

Zitat:

Zitat von Gomilli (Beitrag 411711)
Da ist es zum Glück nur ein Schulprojekt, in dem wir eine eigene Dienstleistung "simulieren" sollen.

Hm.
Dann schreib das mal lieber groß und deutlich auf deine Seiten. Das große G hat dich bald.


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:08 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023