Der folgende Beitrag wurde am 10. 02. 2007, 12:16 Uhr von Michael veröffentlicht.
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?
Der folgende Beitrag wurde am 10. 02. 2007, 12:33 Uhr von Thomas J.S. veröffentlicht.
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
Der folgende Beitrag wurde am 10. 02. 2007, 12:40 Uhr von Michael veröffentlicht.
> <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.
Der folgende Beitrag wurde am 10. 02. 2007, 13:01 Uhr von Thomas J.S. veröffentlicht.
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
Der folgende Beitrag wurde am 10. 02. 2007, 13:35 Uhr von Michael veröffentlicht.
> 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
Der folgende Beitrag wurde am 10. 02. 2007, 23:16 Uhr von wahsaga veröffentlicht.
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
--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4