padding auf Verweise

[Michael]

Hallo,

Ich habe eine horizontale Navigation mit ein paar Verweisen. Das sieht in etwa so aus:

<div>
<a href="Link1">Link1</a>
<a href="Link2">Link2</a>
<a href="Link3">Link3</a>
<a href="Link4">Link4</a>
</div>

Jetzt wollte ich auf die Links ein padding anwenden damit sie nicht so nebeneinander kleben. Leider vergrößert sich die Höhe des DIVs dadurch nicht und man sieht nur den Abstand nach Links und Rechts. Die Links kleben also immer noch am oberen und unteren Rand. Bei einem <p> tritt dieses Problem nicht auf. Es liegt also daran, dass Verweise ja Inline-Element sind. Hat jemand eine Lösung für mich?

[Thomas J.S.]

Hallo,

Ich habe eine horizontale Navigation mit ein paar Verweisen. Das sieht in etwa so aus:

<div>
<a href="Link1">Link1</a>
<a href="Link2">Link2</a>
<a href="Link3">Link3</a>
<a href="Link4">Link4</a>
</div>

Jetzt wollte ich auf die Links ein padding anwenden damit sie nicht so nebeneinander kleben. Leider vergrößert sich die Höhe des DIVs dadurch nicht und man sieht nur den Abstand nach Links und Rechts. Die Links kleben also immer noch am oberen und unteren Rand. Bei einem <p> tritt dieses Problem nicht auf. Es liegt also daran, dass Verweise ja Inline-Element sind. Hat jemand eine Lösung für mich?

<div id="meineNavigation">

#meineNavigation {
   padding:3px 0;
}

Grüße
Thomas

[Michael]

<div id="meineNavigation">

#meineNavigation {
   padding:3px 0;
}

Grüße
Thomas

Hallo Thomas

Das Problem dabei ist, das sich der Hintergrund der Links beim Darüberfahren mit der Maus ändern soll. (a:hover) Wenn ich dem DIV ein padding gebe, wird ja nicht mehr der ganze Hintergrund geändert.

Ich hab es jetzt so gelöst:

<a href="#" style="display:block; float:left; padding:5px;">Link</a>

Vielleicht kann mir ja noch jemand eine "schönere" Lösung geben.

[Thomas J.S.]

Hallo,

<div id="meineNavigation">

#meineNavigation {
   padding:3px 0;
}

Das Problem dabei ist, das sich der Hintergrund der Links beim Darüberfahren mit der Maus ändern soll. (a:hover) Wenn ich dem DIV ein padding gebe, wird ja nicht mehr der ganze Hintergrund geändert.

Das ist korrekt, aber da du es vorher nicht gesagt hast, konnte außer dir das ja keiner wissen. Weshalb wir nicht müde werden, darauf hinzuwesien, dass richtig Fragen schon die halbe Antwort ist.

Ich hab es jetzt so gelöst:

<a href="#" style="display:block; float:left; padding:5px;">Link</a>

Vielleicht kann mir ja noch jemand eine "schönere" Lösung geben.

Gebe den Links eine CSS-Klasse in der du diese Angaben unterbringst, statt in sie in styel="" zu packen. Sonst ist diese Lösung die Lösung.

Grüße
Thomas

[Michael]

Das ist korrekt, aber da du es vorher nicht gesagt hast, konnte außer dir das ja keiner wissen. Weshalb wir nicht müde werden, darauf hinzuwesien, dass richtig Fragen schon die halbe Antwort ist.

Ja sorry, ich hab mich nicht ganz klar ausgedürckt.

Gebe den Links eine CSS-Klasse in der du diese Angaben unterbringst, statt in sie in styel="" zu packen. Sonst ist diese Lösung die Lösung.

Grüße
Thomas

Ich mache das natürlich alles mit Klassen. Ich hoffe nur, das diese Lösung in älteren Browsern nicht zu Problemen führt.

mfg

[wahsaga]

hi,

Gebe den Links eine CSS-Klasse in der du diese Angaben unterbringst, statt in sie in styel="" zu packen.

Nutze den Nachfahrenselektor, statt allen Links die selbe Klasse zu verpassen.

(Und pack das ganze in eine Liste.)

gruß,
wahsaga