Ashura: Seitenentwicklung

Beitrag lesen

Hallo Florian.

Könntest du uns sagen, welches der bald verbleibenden Postings nun wirklich von dir stammte?

Nun aber zu deiner Site.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Möchtest du keine http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=DTD angeben und damit zumindest den IE6 aus dem http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch@title=Quirksmodus holen?

<link rel=stylesheet type="text/css" href="style.css">

Nur eine Kleinigkeit und unter Umständen einfach vergessen, aber: schreibe möglichst sauber und verzichte nicht auf die Quotes (") um Attributwerte.

<div class="banner">  
  
  <div class="toplinks">  
    <a class="toplinks" href="impressum.htm">Impressum</a>&nbsp;&nbsp;&nbsp;<a class="toplinks" href="internindex.htm">Intern</a>  
    </div>  
  
</div>

Du befindest dich offenbar in einem Klassenwahn. Anders kann ich mir die abstruse Verteilung der solchen nicht erklären.

Hier handelt es sich um eine Linkliste, also bietet sich hier logischerweise auch eine http://de.selfhtml.org/html/text/listen.htm@title=Liste an. Diese können natürlich auch wunderbar http://de.selfhtml.org/css/eigenschaften/listen.htm@title=formatiert werden.

Zudem genügt dann eine ID für das div-, oder falls dies im Grunde überflüssig ist, für das ul-Element.

<div class="links">  
  
<a class="navi" href="index.htm">Home</a>  
<!-- […] -->  
<a class="navi" href="download.htm">Downloadbereich</a>  
  
 </div>

Hier gilt das gleiche wie oben; warum nicht einfach eine Liste? Und auch hier sind die Klassenzuweisungen für die a-Elemente überflüssig, da du diese bereits eindeutig über den http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Nachfahrenselektor selektieren und formatieren kannst.

CSS:

body {  
/* … */  
  font-family: arial;

Gib bitte *immer* eine <http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=generische Schriftfamilie> als letzte Alternative an, welche in Kraft tritt, wenn keine der vorhergehenden Schriften zur Verfügung steht.

  font-size: 12pt;  
}

So lange du kein Stylesheet für die Druckausgabe entwirfst, ist pt eine denkbar ungeeignete Maßeinheit für Schriftgrößen. Nutze lieber em und %. (Lesenswertes)

div.allgemein {  
  width : 1000px;  
  margin-left : 60px;  
/* … */  
}

Auch hier verwendest du wieder eine ungeeignete Maßeinheit. Mit einer Breitenangabe in px und ebenso für den Außenabstand zementierst du die Dimensionen regelrecht ein und schaffst so ein völlig unflexibles Layout. Auch hier bieten sich wieder em und % an.

background-image : url(bg.png);  
background-position : -35px -38px;  
background-repeat : no-repeat;

Nur zur Info. Das geht kürzer:

[ref:self811;css/eigenschaften/hintergrund.htm#background@title=background]: url(bg.png) no-repeat -35px -38px;

div.banner {  
/* … */  
  border : 0px dashed black;  
}

Wirkt dies auf dich nicht ebenso unsinnig, wie auf mich?

Layout:

Die Farben bedürfen noch ein wenig Abstimmung. Das Grau für den Hintergrund will noch nicht wirklich gefallen. Zudem wirkt das „Boxendesign“ ein wenig eintönig. Verzichte auf die Rahmenlinien oder formatiere nur einzelne von ihnen, ohne dass es kindisch wirkt.

Du bist auf dem richtigen Weg, also lass dich nicht entmutigen.

Einen schönen Dienstag noch.

Gruß, Ashura

--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
<mathbr:del.icio.us />