OhneName: div layer nebeneinander

Beitrag lesen

Hallo fesak,

CSS statt Tabellen fürs Layout zu benutzen ist schonmal sehr löblich. Es nutzt aber wenig, wenn man weiterhin HTML-Elemente zweckentfremdet.

<div id="navi">
    <p><a>text</a></p>
    <p><a href="banner.jpg" class="navi">link</a></p>
    <p><a href="banner.jpg" class="navi">link</a></p>
    <p><a href="banner.jpg" class="navi">link</a></p>
  </div>

Das hier sind keine Textabsätze, sondern Links und zwar eine ganze Liste davon. Die entsprechenden HTML-Elemente sind also <ul> und <li>. Dieser Anker ohne Ziel soll wohl eine Art Überschrift darstellen, also <hx>, je nachdem welcher Ordnung.

font-size: 9px;

Was soll denn das sein? 9px ist viel zu klein, das kann ja kein Mensch lesen. Und dadurch, dass du px als Einheit verwendest, können Benutzer des IE die Schrift nicht einmal vergrößern. Verwende em, Prozent oder verzichte ganz auf eine Angabe.

width: 811px;

Muss es denn wirklich eine feste Breite sein? Warum lässt du diese Angabe nicht weg und nimmst den ganzen Platz, den dir der Viewport des Besuchers lässt?

position: relative;
top: 19px;
left: 12px;

Relative Positionierung halte ich hier für völlig fehl am Platze. Sie verschiebt das Element um die gegebenen Maße von dem Platz wo es normalerweise stände, hält diesen aber trotzdem frei.

width: 30px;
height: 10px;

Also echt, was bitte willst du in 30x10px quetschen?

position: relative;
top: 19px;
left: 93px;

Und hier wieder relative Positionierung und wieder ist sie völlig ungeeignet. #navi hält den ursprünglichen Platz ja frei, also steht #navi2 immer noch unter(!) ihm. Es nach unten und nach rechts zu verschieben bringt es also nicht neben(!) #navi.

.navi:link {color:#FFFFFF; text-decoration:none}
.navi:visited {color:#FFFFFF; text-decoration:none}

Die optische Unterscheidung von besuchten und unbesuchten Links ist eine wichtige Orientierungshilfe, warum nimmst du sie dem Besucher weg?

[Verweise richtig einbinden](http://home.arcor.de/fesak/html/}

[link:http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden)

Ein weiteres kleines Problemchen wäre das die layer bei firefox und iexplorer immer um ein paar pixel unterschiedlich positioniert werden.

100% pixelgenaue Positionierung ist praktisch unmöglich, da jeder Browser so seine kleinen Macken hat wodurch dieses Ziel nie erreicht werden kann. Verabschiede dich von der Idee alles pixelgenau festzuzementieren, das wird dir in Zukunft noch einige Probleme und viel Aufregung ersparen.

Es würde mich wirklich mal interessieren in welchem Tutorial du diesen Quatsch gelernt hast. SELFHTML bietet doch so eine schöne Einführung in das Thema der CSS-basierten Layouts! Les dir das alles durch und dann fange noch einmal von vorn an mit deinem Layout. Ich bin mir sicher, dass dann auch die Frage wie du zwei Elemente neben(!)einander bekommst (Stichwort float) geklärt ist.

Gruss,
OhneName