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

[Adrian]

Hallo!

Nur für Leute, die Zeit und Lust haben<<<<

Ich bin relativer Anfänger im HTML und Scriptsprachen dafür bzw. CSS Programmieren.
Was haltet ihr von folgendem Code? Also wenn irgendwas unübersichtlich ist, bzw. falsch,
dann erklärt bitte. Man möchte sich ja auch zum Profi entwickeln... ;)

  
      <div class="navi" id="leftnavi"> <!-- Anfang: Linke Navigation -->  
        <div class="naviheader" id="leftheader"> <!-- Kein Inhalt! --> </div>  
  
        <div class="area" id="leftarea"> <!-- WICHTIG: AUF HINTERGRUND ACHTEN NACH EINFÜGEN -->  
          <h2>Login</h2>  
          Loginscripte von PHP <br />  
          u.s.w. hier einfügen <br />  
          <p class="areafooter" id="leftareafooter">angemeldet / unangemeldet (PHP)</p>  
        </div>  
        <ul class="navilink" id="leftlink">  
          <li class="liheader" id="leftliheader">Überschrift 1</li>  
          <li>Link1</li>  
          <li>Link2</li>  
          <li class="lifooter" id="leftlifooter">Unten drunter</li>  
        </ul>  
  
      </div> <!-- Ende: Linke Navigation -->  
  
      <div class="navi" id="rightnavi"> <!-- Anfang: Rechte Navigation -->  
        <div class="naviheader" id="rightheader"> <!-- Kein Inhalt! --> </div>  
  
        <div class="area" id="rightarea"> <!-- WICHTIG: AUF HINTERGRUND ACHTEN -->  
          <h2>Was auch immer</h2>  
          Irgendwas hier einfügen, <br />  
          was auch immer... <br />  
          <p class="areafooter" id="rightareafooter">und hier auch was ausdenken</p>  
        </div>  
        <ul class="navilink" id="rightlink">  
          <li class="liheader" id="leftliheader">Überschrift 2</li>  
          <li>Link3</li>  
          <li>Link4</li>  
          <li class="lifooter" id="leftlifooter">Unten drunter</li>  
        </ul>  

  
div.navi {  
margin: 0px;  
height: auto;  
width: 185px;  
border: none;  
}  
div#leftnavi {  
background: url("../../pictures/gfx/leftbg.gif") repeat-y;  
float: left;  
direction: ltr;  
}  
div#rightnavi {  
background: url("../../pictures/gfx/rightbg.gif") repeat-y;  
float: right;  
direction: rtl;  
}  
div.naviheader {  
margin: none;  
padding: none;  
width: 185px;  
height: 15px;  
border: none;  
}  
div#leftnavi div#leftheader {  
background: url("../../pictures/gfx/leftheader.gif");  
}  
div#rightnavi div#rightheader{  
background: url("../../pictures/gfx/rightheader.gif");  
}  
div.area {  
margin: 10px 0px;  
font-size: 10pt;  
text-indent: 40px;  
border: none;  
}  
div#leftnavi div#leftarea {  
background: url("../../pictures/gfx/leftareabg.gif") repeat-y;  
text-align: left;  
}  
div#rightnavi div#rightarea {  
background: url("../../pictures/gfx/rightareabg.gif") repeat-y;  
text-align: right;  
}  
div#leftnavi div#leftarea h2 {  
height: 48px;  
padding-top: 12px;  
background: url("../../pictures/gfx/leftareaheader.gif") no-repeat;  
text-align: left;  
font-size: 10pt;  
}  
div#rightnavi div#rightarea h2 {  
width: 184px;  
height: 48px;  
padding-top: 12px;  
background: url("../../pictures/gfx/rightareaheader.gif") no-repeat;  
text-align: right;  
font-size: 10pt;  
}  
p.areafooter {  
height: 20px;  
font-size: 6pt;  
}  
div#leftnavi div#leftarea p#leftareafooter {  
background: url("../../pictures/gfx/leftareafooter.gif") no-repeat;  
text-align: left;  
}  
div#rightnavi div#rightarea p#rightareafooter {  
background: url("../../pictures/gfx/rightareafooter.gif") no-repeat;  
text-align: right;  
}  
ul.navilink {  
margin: 10px 0px;  
text-indent: 40px;  
}  
div#leftnavi ul#leftlink {  
text-align: left;  
}  
div#rightnavi ul#rightlink {  
text-align: right;  
}  
div#leftnavi ul#leftlink li {  
height: 30px;  
background: url("../../pictures/gfx/leftlink.gif") no-repeat;  
padding-top: auto;  
padding-bottom: auto;  
text-align: left;  
font-size: 1em;  
list-style: none;  
}  
div#rightnavi ul#rightlink li {  
height: 30px;  
background: url("../../pictures/gfx/rightlink.gif") no-repeat;  
padding-top: auto;  
padding-bottom: auto;  
text-align: right;  
font-size: 1em;  
list-style: none;  
}  
li.liheader {  
height: 49px;  
padding-top: 12px;  
font-size: 10pt;  
}  
div#leftnavi ul#leftlink li#leftliheader {  
background: url("../../pictures/gfx/leftlinkheader.gif") no-repeat;  
text-align: left;  
}  
div#rightnavi ul#rightlink li#rightliheader {  
background: url("../../pictures/gfx/rightlinkheader.gif") no-repeat;  
text-align: right;  
}  
li.lifooter {  
height: 15px;  
font-size: 6pt;  
}  
div#leftnavi ul#leftlink li#leftlifooter {  
background: url("../../pictures/gfx/leftlinkfooter.gif") no-repeat;  
text-align: left;  
}  
div#rightnavi ul#rightlink li#rightlifooter {  
background: url("../../pictures/gfx/rightlinkfooter.gif") no-repeat;  
text-align: right;  
}  

Mit freundlichen Grüßen,
Adrian

[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

[Adrian]

alles klar ^^

[Der Martin]

Hallo Adrian,

alles klar ^^

ehrlich? Dann hast du meinen uneingeschränkten Respekt.
Denn wenn ich mich in die Rolle des Neulings versetze, der du zu sein behauptet hast, müsste ich nach diesen Ausführungen von Cheatah erstmal einige Stunden, wenn nicht Tage, nachdenken und schlaue Bücher oder Online-Referenzen lesen, vielleicht auch noch einige Details nachfragen.

Mit "alles klar" meintest du also wahrscheinlich "danke, ich lass mir das mal durch den Kopf gehen".

Schönen Abend noch,

Martin

[O'Brien]

Hi Martin,

alles klar ^^

[...]
Mit "alles klar" meintest du also wahrscheinlich "danke, ich lass mir das mal durch den Kopf gehen".

auch auf die Gefahr hin, Adrian Unrecht zu tun: Auf mich wirkt "alles klar ^^" mehr wie "alles klar, red' du man, schon OK, geh schlafen".

@ Adrian: Sollte es nicht so gemeint gewesen sein, sondern so, wie Martin es dargestellt hat, dann entschuldige ich mich jetzt schon und zolle dir ebenfalls Respekt.

Schönen Sonntag noch!
O'Brien

[Ingo Turski]

Hi,

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.

welchen Vorteil hätte Deiner Meinung nach die Angabe von 18%?
Ich finde es ziemlich unpassend - abgesehen von gröberen Aufteilungen wie 50% oder 33% - die Dimensionen von den Fenster- bzw. Boxgrößen abhängig zu machen...

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

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

und hier trifft das noch stärker zu. Etwas anderes als em ist hier unpassend, wenn Textinhalte vorhanden sind.

freundliche Grüße
Ingo

[Cheatah]

Hi,

welchen Vorteil hätte Deiner Meinung nach die Angabe von 18%?

bei der Breite wohl keinen. Das ändert aber nichts daran, dass em und % diejenigen Einheiten sind, die bei schriftabhängigen Werten in Frage kommen. (ex klammere ich wegen üblicherweise fehlender Praxisnähe aus.)

Cheatah

[Ingo Turski]

Hi,

welchen Vorteil hätte Deiner Meinung nach die Angabe von 18%?

bei der Breite wohl keinen. Das ändert aber nichts daran, dass em und % diejenigen Einheiten sind, die bei schriftabhängigen Werten in Frage kommen. (ex klammere ich wegen üblicherweise fehlender Praxisnähe aus.)

Doch. % bei Dimensionensangaben beziehen sich ja nicht auf die Schriftgröße, sondern die Elementgröße - und das kann bei kleineren Werten wie hier wirklich ungünstiger als px sein.
18% von 800px sind nur 144px - da gebe ich doch lieber 185px an und habe eine verläßlichere Breite, die auch für nicht zu lange Worte bei Schriftvergrößerung noch paßt.
(ex klammere ich übrigens wegen der zusätzlichen Anhängigkeit von der Schriftart in einigen Browesern aus).

freundliche Grüße
Ingo

[Adrian]

Hallo!

Außerdem möchte ich dazu nochmal sagen, dass das gesamte Layout mit Bildern hinterlegt ist, sodass eine prozentuale Angabe nicht sehr sinnvoll hierbei wäre... ;)

Mit freundlichen Grüßen,
Adrian

[Ingo Turski]

Hi,

noch ein paar Tips zum CSS:

div.navi {
margin: 0px;
height: auto;
border: none;

diese Angaben sind überflüssig und verschlechtern die Übersichtlichkeit.  
  

> ~~~css
  

> direction: ltr;  
> 

dies ist der Normalfall bei uns.

div.naviheader {
margin: none;
padding: none;
height: 15px;
border: none;

überflüssig.  
  

> ~~~css
  

> div#leftnavi div#leftheader {  
> 

Entscheide Dich besser für einen einfachen Selektor (auch im HTML).

div#leftnavi div#leftarea p#leftareafooter {

Und hier erst recht. Hinterher bekommst Du sonst leicht Probleme, solche Regeln zu überschreiben.  
  

> font-size: 1em;  

Grundsätzlich sehr gut. Nur ist überflüssig, da Voreinstellung.  
Und wenn Du andere Werte angeben würdest, dann fehlt im Elternelement eine prozentuale Angabe zur Vermeidung von Browserbugs, z.B. body {font-size:100.1%}  
  
freundliche Grüße  
Ingo

-- 
[[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Hommingberger Gepardenforelle](http://www.1ngo.de/hommingberger-gepardenforelle/);-)

[Cheatah]

Hi,

font-size: 1em;
Grundsätzlich sehr gut. Nur ist überflüssig, da Voreinstellung.

es sei denn, man hat einen IE im Quirks-Mode vor sich. Dann nämlich kämpft man gegen Windmü^Wextrem mangelhafte Vererbung. Was einer der zahlreichen Gründe ist, warum man den Quirks-Mode unter allen, allen, allen Umständen vermeiden sollte.

Cheatah

[Ingo Turski]

Hi,

font-size: 1em;
Grundsätzlich sehr gut. Nur ist überflüssig, da Voreinstellung.

es sei denn, man hat einen IE im Quirks-Mode vor sich. Dann nämlich kämpft man gegen Windmü^Wextrem mangelhafte Vererbung.

Wirkt sich denn 1em in irgendeiner Weise bei der Vererbung aus? Ich habe es noch nicht im IE unter dem quirks mode ausprobiert, kann mir aber selbst hier nicht vorstellen, was er da anders sehen könnte, als bei keiner Angabe.

freundliche Grüße
Ingo

[Fine]

Hi Adrian

Du hast jetzt ja schon ziemlich viele und hilfreiche Tipps bekommen, wie du deinen Quellcode so einfach wie möglich halten kannst. Deine Frage war ja auch, ob dein Code falsch ist.
Dein Code hier ist nicht falsch. Dennoch gebe ich dir zwei Links, unter denen du deine Falschheit bzw. Richtigkeit (= Validität) ptüfen lassen kannst.

Für den HTML-Code:
http://validator.w3.org

und für den CSS-Code:
http://jigsaw.w3.org:80/css-validator/validator-uri.html

Das sind die offiziellen Validatoren des WWW-Konsortiums.
Durch valides Schreiben kannst du Probleme in diversen Browsern umgehen.
Vielleicht hat dir jemand schon diese Links gegeben, dann tut es mir leid. Ich denke jedoch, im Sinne deiner Frage, dürfen die beiden Validatoren nicht unerwähnt bleiben.

Fine

[O'Brien]

Hi Fine,

Vielleicht hat dir jemand schon diese Links gegeben, dann tut es mir leid.

warum sollte es dir Leid tun, wenn ihm jemand weitergeholfen hat? ;-)

Schönen Sonntag noch!
O*berpingel*'Brien