HTML/CSS Nach Ansicht von Experten i.O.?

[Cheatah]

Hi,

Ich bin relativer Anfänger im HTML und Scriptsprachen dafür bzw. CSS Programmieren.

dann ist Dein Irrtum verzeihbar. Weder HTML noch CSS haben auch nur im Ansatz etwas mit Programmierung zu tun.

Was haltet ihr von folgendem Code?

Er ist unvollständig. Ein Link zur Seite hätte weit mehr Informationen vermittelt - beispielsweise den von Dir angegebenen DOCTYPE sowie die Content-Types der betroffenen Ressourcen.

<div class="navi" id="leftnavi"> <!-- Anfang: Linke Navigation -->

Falsch. Die Navigation ist nicht links, sondern am Anfang. Ich unterstelle zudem, dass die Klassifizierung als "navi"-Element unnötig ist, da sich alle diese Elemente aus ihrer ID ergeben.

<div class="naviheader" id="leftheader"> <!-- Kein Inhalt! --> </div>

"Kein Inhalt" schreibt sich in HTML als "bitte lösch mich". Zumindest sofern es kein Empty Element wie z.B. <img/> ist.

<div class="area" id="leftarea"> <!-- WICHTIG: AUF HINTERGRUND ACHTEN NACH EINFÜGEN -->

Wenn "leftarea" nicht zufällig "übrig Bereich" heißen soll, ist es ein falscher Bezeichner. *Nichts* in HTML hat mit der derzeit gewünschten Darstellung zu tun - auch nicht die IDs.

<h2>Login</h2>

Wo steht das <h1>, dem dies untergeordnet ist?

Loginscripte von PHP <br />

Der Einsatz von <br/> ist immer ein sehr, sehr starkes Indiz für die Notwendigkeit, sich selbst zu fragen: Welche Semantik hat der Inhalt drum herum? Dies wird noch umso mehr verstärkt dadurch, dass eben dieser Inhalt hier noch keine Semantik besitzt.

<p class="areafooter" id="leftareafooter">angemeldet / unangemeldet (PHP)</p>
        </div>
        <ul class="navilink" id="leftlink">

Du solltest eindeutig noch etwas über den Einsatz von IDs und Klassen meditieren. Sie dienen der IDentifizierung bzw. Klassifizierung von Elementen, nicht dem paarweisen Einsatz in allen Elementen, die man irgendwie für interessant hält.

<li class="liheader" id="leftliheader">Überschrift 1</li>

Überschriften werden per <h1> bis <h6> formatiert. Übrigens ist auch diese Überschrift nicht "left".

<li>Link1</li>

Ich nehme mal an, im Original sind die Links auch noch verlinkt ;-)

</div> <!-- Ende: Linke Navigation -->
      <div class="navi" id="rightnavi"> <!-- Anfang: Rechte Navigation -->

Zwei Navigationen sind zwei Elemente innerhalb eines Navigationsbereiches. Außerdem finde ich es unfair der ersten Navigation gegenüber, diese hier als die richtige zu bezeichnen.

<div class="naviheader" id="rightheader"> <!-- Kein Inhalt! --> </div>

Siehe oben. Dieses Element hat im HTML-Code nichts verloren.

div.navi {
width: 185px;

Bei größerer Schrift wird dieser Rahmen gesprengt. Gib _alle_ Werte, die in irgend einer Form von der Schrift abhängen, in em oder % an.

direction: ltr;

Hussa. Gibt's hierfür einen besonderen Grund?

div#rightnavi {
direction: rtl;

Au Backe. Na, da hoffe ich mal, dass Du die Konsequenzen kennst.

div.area {
font-size: 10pt;

Ist das hier ein Druck-Stylesheet? Anderswo ist pt nämlich eher selten eine geeignete Schriftart. Auf dem Bildschirm ist sie es nie. Davon abgesehen ist das *deutlich* zu klein. Arbeite mit em oder %.

font-size: 6pt;

Ähm, das ist bitteschön lächerlich klein. Wenn die hiervon betroffenen Informationen juristische Relevanz haben - beispielsweise das Teledienstgesetz betreffen - könnte ein Richter die Auflagen als nicht erfüllt ansehen. Mit einigen handelsüblichen Browsern ergibt das gerade mal einen Grauschleier, aber garantiert keine Schrift. Arbeite mit em oder %.

div#leftnavi ul#leftlink li {
height: 30px;

In diesen Elementen steht Text. Arbeite also mit em oder %.

font-size: 1em;

Beispielsweise so. Wobei diese Angabe etwas ... überflüssig ist. Befindet sich die Seite im Quirks-Mode?

Viel von Deinem CSS-Code ist übrigens redundant, was Du vermeiden solltest. Zunächst einmal ist aber der HTML-Code zu überarbeiten: Setze sowohl IDs als auch Klassen sinnvoll sein. Achte auf eine sinnvolle Verschachtelung. Verwende HTML im Sinne von HTML, also *ohne auch nur einen winzigen Augenblick lang an die derzeit gewünschte Darstellung zu denken*! Der HTML-Code ist *absolut* unabhängig von der Darstellung. Er strukturiert lediglich die Inhalte.

Cheatah