Navbar - höhe ändern (noob)

html.de-Forum HTML, XHTML & CSS
1

Hallo, Ich bin ein Anfänger und würde gerne wissen, wie ich die Höhe der navbar bei (a:acitve) ändern kann. Ich will sie genau so hoch wie das Logo (siehe Bild (schwarzer balken)) neben an haben. Bitte um Hilfe!! :frowning: Danke im voraus :slight_smile:

2

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=„…“

machst du

<a href="..."
...

Dadurch konnte ich die Pseudoklasse :active stylen wie ich wollte. Aber nicht mit a:active sondern jetzt mir div:active

HTML:

Beispiel

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

geht bitte antworten.
Würde mich auch interessieren und vielleicht ist meine Lösung nur eine vorübergehende
Methode das Problem zu lösen o_O

3

Wenn Jemand mehr Ahnung hat und weiß wie es ohne

geht bitte antworten.

z.B. mit display: block.

4

Hatte ich mir auch überlegt, ging aber trotzdem nicht mit a:active

EDIT:
Hatte es vorhin probiert, hatte aber nen kleinen Fehler drin :oops: deswegen hats ned gefunzt…
Grade eben nochmal getestet und funktioniert. Danke

5

Was hat das damit zu tun? Wenn a ein Blockelement ist, kann es width und height bekommen. Daran ändert eine angehängte Pseudoklasse nichts. Abgesehen davon gibt es auch noch padding.

6

padding funktioniert aber bei Inline-Elementen genauso wenig wie height. Darum gehts ja nicht.

7

Also bei mir schon. Vielleicht habe ich ja ein anderes padding als du. :wink:

8

Ich meinte mit padding kann man Pseudoklassen bei Inline-Elemente genauso wenig stylen wie mit height. :slight_smile: Zumindest bei mir nicht :confused:

9

Ich weiss ja nicht mit was du arbeitest, aber das geht… Und ein div um jedes zu packen ist auf jedenfall nicht „korrekt“

10

Dann könnt ihr mir ja vielleicht helfen, bei mir funktioniert es nicht…

[I]

a:active { display: block; background-color: black; color: red; height: 70px; } 
<body>

<a href=" http://www.html.de/ "> html.de </a

</body>
[/I] Wenn ich es so eingebe passiert gar nichts, das Element a lässt sich kein Stück stylen, auch nicht mit Farbe. Wenn ich [I]display: block;[/I] rausnehme, nimmt es zumindest die Farbe an, die [I]height[/I] ignoriert es trotzdem. Erst wenn ich ein [I]
[/I] drumherum setze, nimmt es sowohl Farbe als auch Höhe an...
11

http://codepen.io/anon/pen/zoqni

geht… genau mit deinem Code… ausser das ich das noch korrekt geschlossen habe…

12

:eek:
Ich sitze hier grade an nem Mac und da funktioniert das alles gar nicht. (Safari)
Auch ned in dem Link den du gepostet hast…

Habe jetzt extra den PC gewechselt und auf Windows mit Chrome versucht, da passt alles wunderbar!
Wie kann das denn sein?

13

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