Unterstrichener Text als Hover Effekt

R4v3r · 07.04.2008, 16:33

Hallo,

ich möchte erzeugen, dass ein Text(link) bei einem Mouse-Hover eine Unterstreichung bekommt, welche 2 px hoch ist, und sowohl rechts als auch links 5px übersteht (also länger das der eigentliche Text ist). Das Ganze sollte nach Möglichkeit dynamisch sein, dh der Text kann sich ändern.

Ich habe das so realisiert, dass ich den a-Tag genommen habe, diesem rechts und links ein padding von 5px gegeben habe und im Hover-Fall wird unten ein rahmen von 2 px höhe angezeigt.

Im Firefox klappt das auch wunderbar, nur im IE nicht, da wird gar nichts angezeigt.

Hat jemand von euch eine sinnvolle Idee, wie ich dies lösen könnte?

Viele Grüße!

cycap · 07.04.2008, 16:46

Hmm wie genau sieht dein CSS denn aus? Vielleicht will der IE auch noch display:block; haben...

R4v3r · 07.04.2008, 16:55

Ja, mit display: block wird die Linie angezeigt, nur erhält die Linie dann die volle zur Verfügung stehende Breite und nicht nur Textbreite + 5px + 5px

Der Aufbau sieht folgendermaßen aus:
Jeder Link ist zentriert in einem div, welches eine feste Breite hat. Von diesen Link-Divs sind dann einige per float: left; nebeneinander. Ansonsten gibt es keine weiteren beeinflussenden Faktoren (nur noch color-Sachen usw.)

cycap · 07.04.2008, 17:05

Wie siehts mit

display:inline;
margin-left: 5px;
margin-right: 5px;

aus?

[edit]
blödsinn, das wird nicht funktionieren, aber schau mal hier:

http://www.css4you.de/wsboxmodell/index.html

R4v3r · 07.04.2008, 17:19

Jo, der a-Tag ist ja schon ein inline-Element

Das Hauptproblem ist ja, dass die Breite quasi unbekannt ist, da der Text dynamisch ist. Hätte ich die Breite, wäre alles kein Thema. Wenn ich auf den a-Tag display: block; float: left; anwende, klappt es zwar mit der richtigen Breite der Linie, nur ist der Text dann nicht mehr zentriert...

cycap · 07.04.2008, 17:22

Wie wärs wenn du nen eigenen div um den link machst? sorry wenn ich jetzt müll rede, aber ich kann mir unter dem was du beschrieben hast schwer was vorstellen

R4v3r · 07.04.2008, 17:26

Zur einfacheren Vorstellung hier mal der Quelltext:

Code:

<div class="header_splitter"></div>
<div class="header_link_box">
	Link 1
</div>
<div class="header_splitter"></div>
<div class="header_link_box">
	Link2
</div>

Dieser Teil wiederholt sich mehrmals, je nachdem was für ein Menü es ist, sind 4 - 8 dieser Links nebeneinander.

"header_splitter" stellt eine Trennlinie dar.

Hier die css-Klassen:

Code:

.header_splitter {
	background: url('../images/header_splitter.gif');
	float: left;
	width: 4px;
}

.header_link_box {
	text-align: center;
	float: left;
	width: 80px;
	margin: 0 10px;
}

.header_link {
	padding: 0 5px;
	display: block;
}

.header_link:hover {
	border-bottom: 2px solid #C8D32D;
}

nikosch · 07.04.2008, 21:17

Klappt bei mir wunderbar Dein Code (IE6, FF1.5, Doctype Transitional / loose.dtd)
Vielleicht ist das line-height zu niedrig. Strg + F5 gedrückt?

R4v3r · 10.04.2008, 16:19

Hallo,

Sorry für die späte Reaktion, leider bin ich in den letzten Tagen nicht dazu gekommen

BTT:

ja, in der geposteten Version besteht ja das Problem, dass die Linie dann über die volle Breite geht. Entfern mal das "display: block;" aus der header_link Klasse, dann hast du die Version die im FF so funktioniert, wie es sein soll, nur im IE eben nicht....

nikosch · 10.04.2008, 17:12

Wie geschrieben. Es liegt am line-height (nächstes mal einfach mal ausprobieren...)

Code:

.header_splitter {
   background: url('../images/header_splitter.gif');
   float: left;
   width: 4px;
}

.header_link_box {
   text-align: center;
   float: left;
   width: 80px;
   margin: 0 10px;
   line-height:1.4em;
}

.header_link {
   padding: 0 5px;
   
}

.header_link:hover {
   border-bottom: 2px solid #C8D32D;
}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JavaScript/PHP: qooxdoo 0.7.1 - Teil 1 : Eine Einführung	Zergling-new	Tutorials	6	25.01.2008 10:41
JavaScript: Text Area: Scrollen zu einer Zeile im Text	SvenLittkowski	HTML, Usability und Barrierefreiheit	13	28.11.2007 16:31
CSS - Bild im div container überlappt andere container	Buschdieb	HTML, Usability und Barrierefreiheit	13	19.07.2007 23:17
MySQL-Volltextsuche	SvenLittkowski	Datenbanken	6	14.06.2007 19:58
spalte rechts ausrichten, text aber trotzdem linksbündig	Crypi	HTML, Usability und Barrierefreiheit	5	14.09.2006 11:35
CSS - Design (clear - Problem)		HTML, Usability und Barrierefreiheit	7	21.12.2005 14:55
Text aus der DB verteilen		PHP Tipps 2007	17	16.11.2005 12:04
Hover Effekt für Textfelder?	Masteroi	HTML, Usability und Barrierefreiheit	3	27.07.2005 14:36
[Erledigt] Link		PHP Tipps 2005-2	10	20.07.2005 21:28
[Erledigt] DIV´s wollen nicht wie ich das will :-)		HTML, Usability und Barrierefreiheit	22	28.03.2005 18:36
frames probleme		HTML, Usability und Barrierefreiheit	6	18.01.2005 02:33
Per Button Text formatieren	Igäl	HTML, Usability und Barrierefreiheit	1	11.11.2004 06:25
Javascript: Text einfügen geht nich über "javascript:BL		HTML, Usability und Barrierefreiheit	14	19.10.2004 21:44
Zeilenumbrüche aus einem formatierten Text entfernen	woods	PHP Tipps 2004	9	23.09.2004 12:50
txt-Datei erstellen	d-81	PHP Tipps 2004	12	11.08.2004 20:31

07.04.2008, 16:33
R4v3r Erfahrener Benutzer Registriert seit: 17.11.2003 Beiträge: 212	Unterstrichener Text als Hover Effekt Hallo, ich möchte erzeugen, dass ein Text(link) bei einem Mouse-Hover eine Unterstreichung bekommt, welche 2 px hoch ist, und sowohl rechts als auch links 5px übersteht (also länger das der eigentliche Text ist). Das Ganze sollte nach Möglichkeit dynamisch sein, dh der Text kann sich ändern. Ich habe das so realisiert, dass ich den a-Tag genommen habe, diesem rechts und links ein padding von 5px gegeben habe und im Hover-Fall wird unten ein rahmen von 2 px höhe angezeigt. Im Firefox klappt das auch wunderbar, nur im IE nicht, da wird gar nichts angezeigt. Hat jemand von euch eine sinnvolle Idee, wie ich dies lösen könnte? Viele Grüße!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

07.04.2008, 16:46
cycap Moderator Registriert seit: 13.02.2008 Beiträge: 6.816 PHP-Kenntnisse: Fortgeschritten	Hmm wie genau sieht dein CSS denn aus? Vielleicht will der IE auch noch display:block; haben...

07.04.2008, 16:55
R4v3r Erfahrener Benutzer Registriert seit: 17.11.2003 Beiträge: 212	Ja, mit display: block wird die Linie angezeigt, nur erhält die Linie dann die volle zur Verfügung stehende Breite und nicht nur Textbreite + 5px + 5px Der Aufbau sieht folgendermaßen aus: Jeder Link ist zentriert in einem div, welches eine feste Breite hat. Von diesen Link-Divs sind dann einige per float: left; nebeneinander. Ansonsten gibt es keine weiteren beeinflussenden Faktoren (nur noch color-Sachen usw.)

07.04.2008, 17:05
cycap Moderator Registriert seit: 13.02.2008 Beiträge: 6.816 PHP-Kenntnisse: Fortgeschritten	Wie siehts mit display:inline; margin-left: 5px; margin-right: 5px; aus? [edit] blödsinn, das wird nicht funktionieren, aber schau mal hier: http://www.css4you.de/wsboxmodell/index.html

07.04.2008, 17:19
R4v3r Erfahrener Benutzer Registriert seit: 17.11.2003 Beiträge: 212	Jo, der a-Tag ist ja schon ein inline-Element Das Hauptproblem ist ja, dass die Breite quasi unbekannt ist, da der Text dynamisch ist. Hätte ich die Breite, wäre alles kein Thema. Wenn ich auf den a-Tag display: block; float: left; anwende, klappt es zwar mit der richtigen Breite der Linie, nur ist der Text dann nicht mehr zentriert...

07.04.2008, 17:22
cycap Moderator Registriert seit: 13.02.2008 Beiträge: 6.816 PHP-Kenntnisse: Fortgeschritten	Wie wärs wenn du nen eigenen div um den link machst? sorry wenn ich jetzt müll rede, aber ich kann mir unter dem was du beschrieben hast schwer was vorstellen

07.04.2008, 21:17
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Klappt bei mir wunderbar Dein Code (IE6, FF1.5, Doctype Transitional / loose.dtd) Vielleicht ist das line-height zu niedrig. Strg + F5 gedrückt?

10.04.2008, 16:19
R4v3r Erfahrener Benutzer Registriert seit: 17.11.2003 Beiträge: 212	Hallo, Sorry für die späte Reaktion, leider bin ich in den letzten Tagen nicht dazu gekommen BTT: ja, in der geposteten Version besteht ja das Problem, dass die Linie dann über die volle Breite geht. Entfern mal das "display: block;" aus der header_link Klasse, dann hast du die Version die im FF so funktioniert, wie es sein soll, nur im IE eben nicht....