PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Block Element als Link


TheCounter
2010-06-17, 23:49:38
EDIT:

Jetzt hab ich solang daran rumgewerkelt und dann war die Lösung doch so einfach. Hab das Problem jetzt schon selbst gelöst (einfach 6px bei der höhe und 8px bei der Breite wegnehmen) :freak:

Der Thread kann geschlossen/gelöscht werden. Sorry :/

------

Hi,

ich möchte eine Navigationsleiste mit <div> Elementen machen. Allerdings stehe ich vor dem Problem das ich innerhalb von <a> (also einem Inline Element) keine Block Elemente verwenden darf.

Nun kann ich zwar das <a> Element entsprechend formatieren aber den Text innerhalb des <a> Tags kann ich nicht mehr ausrichten (6px nach unten und 8px nach rechts). Wenn ich padding beim <a> Tag verwende so vergrößert sich die <a> Box automatisch anstatt das nur der Text versetzt wird.

Mit folgendem (Strict) Code sieht das ganze dann so aus:


<div style="margin-top:50px;margin-left:50px;width:205px;height:30px;background-color:#d3d3d3;">
<a style="float:left;border:1px solid black;width:205px;height:30px;padding-top:6px;padding-left:8px;" href="test.php">
<img src="./layout/images/arrow.png" style="border:0;" alt="test"/>&nbsp;Team
</a>
</div>

http://img339.imageshack.us/img339/6594/test1dr.jpg

Mit folgendem Code (non Strict) sieht es dann korrekt aus, is aber vom Code her "falsch":


<div style="margin-top:50px;margin-left:50px;width:205px;height:30px;background-color:#d3d3d3;">
<a style="float:left;border:1px solid black;width:205px;height:30px;" href="test.php">
<p style="margin-top:6px;margin-left:8px;"><img src="./layout/images/arrow.png" style="border:0;" alt="test"/>&nbsp; Team</p>
</a>
</div>


http://img16.imageshack.us/img16/2280/test2vg.jpg

Jemand nen Vorschlag?

Mfg

Sephiroth
2010-06-18, 00:26:18
Und jetzt das ganze nochmal ganz ohne Block-Element (p) im Inline-Element (a), da imo völlig unnötig. Wenn du auf die Div-Suppe verzichtest und eine unsortierte Liste nimmst, kannst du zusätzlich noch auf das img-Element verzichten und die Grafik stattdessen gleich als list-image nutzen.

TheCounter
2010-06-18, 06:22:55
Danke für den Tip, werd ich heute gleich mal probieren :)

Nedo
2010-06-19, 17:51:05
Entweder als List Image oder als background-image in der unsortierten Liste ^^

Aber du hasts ja schon :)