Navbar - höhe ändern (noob)
- Ersteller trapmwx
- Erstellt am
Kaspar_
Mitglied
Also ich kann es mir nur so erklären, dass das a-Tag ein Inline-Element ist und somit die Pseudoklassen wie :active nur begrenzt stylebar sind...
Style anstatt einem Inline-Element ein Blockelement:
also anstatt
<a href="..." </a>
machst du
<div> <a href="..." </a> </div>...
Dadurch konnte ich die Pseudoklasse :active stylen wie ich wollte. Aber nicht mit a:active sondern jetzt mir div:active
HTML:
<div>
<a href="http://www.Beispiel.de/"> Beispiel </a>
</div>
CSS:
div:active {
background-color: black;
color: white;
height: 50px;
}
Denke daran :active und :hover nach :link und :visited zu definieren, da sie sonst die Eigenschaften
von :visited übernehmen und die eigene Definition ignorieren. Dies ist kein Browser-Bug,
sondern eine Festlegung in CSS.
Wenn Jemand mehr Ahnung hat und weiß wie es ohne <div> geht bitte antworten.
Würde mich auch interessieren und vielleicht ist meine Lösung nur eine vorübergehende
Methode das Problem zu lösen
Style anstatt einem Inline-Element ein Blockelement:
also anstatt
<a href="..." </a>
machst du
<div> <a href="..." </a> </div>...
Dadurch konnte ich die Pseudoklasse :active stylen wie ich wollte. Aber nicht mit a:active sondern jetzt mir div:active
HTML:
<div>
<a href="http://www.Beispiel.de/"> Beispiel </a>
</div>
CSS:
div:active {
background-color: black;
color: white;
height: 50px;
}
Denke daran :active und :hover nach :link und :visited zu definieren, da sie sonst die Eigenschaften
von :visited übernehmen und die eigene Definition ignorieren. Dies ist kein Browser-Bug,
sondern eine Festlegung in CSS.
Wenn Jemand mehr Ahnung hat und weiß wie es ohne <div> geht bitte antworten.
Würde mich auch interessieren und vielleicht ist meine Lösung nur eine vorübergehende
Methode das Problem zu lösen
Zuletzt bearbeitet:
Kaspar_
Mitglied
Hatte ich mir auch überlegt, ging aber trotzdem nicht mit a:active
EDIT:
Hatte es vorhin probiert, hatte aber nen kleinen Fehler drin
deswegen hats ned gefunzt...Grade eben nochmal getestet und funktioniert. Danke
Zuletzt bearbeitet:
Kaspar_
Mitglied
padding funktioniert aber bei Inline-Elementen genauso wenig wie height. Darum gehts ja nicht.
Also bei mir schon. Vielleicht habe ich ja ein anderes padding als du. ;)
Kaspar_
Mitglied
Ich meinte mit padding kann man Pseudoklassen bei Inline-Elemente genauso wenig stylen wie mit height. :) Zumindest bei mir nicht
Kaspar_
Mitglied
Dann könnt ihr mir ja vielleicht helfen, bei mir funktioniert es nicht...
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8"/>
<style type="text/css">
a:active {
display: block;
background-color: black;
color: red;
height: 70px;
}
</style>
</head>
<body>
<a href="http://www.html.de/"> html.de </a
</body>
</html>
Wenn ich es so eingebe passiert gar nichts, das Element a lässt sich kein Stück stylen, auch nicht mit Farbe.
Wenn ich display: block; rausnehme, nimmt es zumindest die Farbe an, die height ignoriert es trotzdem.
Erst wenn ich ein <div> drumherum setze, nimmt es sowohl Farbe als auch Höhe an...
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8"/>
<style type="text/css">
a:active {
display: block;
background-color: black;
color: red;
height: 70px;
}
</style>
</head>
<body>
<a href="http://www.html.de/"> html.de </a
</body>
</html>
Wenn ich es so eingebe passiert gar nichts, das Element a lässt sich kein Stück stylen, auch nicht mit Farbe.
Wenn ich display: block; rausnehme, nimmt es zumindest die Farbe an, die height ignoriert es trotzdem.
Erst wenn ich ein <div> drumherum setze, nimmt es sowohl Farbe als auch Höhe an...
http://codepen.io/anon/pen/zoqni
geht... genau mit deinem Code... ausser das ich das <a> noch korrekt geschlossen habe...
geht... genau mit deinem Code... ausser das ich das <a> noch korrekt geschlossen habe...
Bei mir funktioniert es unter OS X Safari.
Nicht vergessen: Es gibt eine Reihenfolge, in welcher die Pseudoklassen geschrieben werden müssen:
http://www.w3schools.com/css/tryit.asp?filename=trycss_link
Nicht vergessen: Es gibt eine Reihenfolge, in welcher die Pseudoklassen geschrieben werden müssen:
http://www.w3schools.com/css/tryit.asp?filename=trycss_link
