ChristophTutorials - (Video)Tutorialseite und IT-Blog

Zitat der Woche

Früher hatten wir die spanische Inquisition. Jetzt haben wir die Kompatibilität.
- Herbert Klaeren

Letzte Artikel

Zufällige Artikel

Verzeichnisse

Blogverzeichnis - Blog Verzeichnis bloggerei.de Blogverzeichnis Blog Verzeichnis Blog Top Liste - by TopBlogs.de Blog Button
Datenschutzerklärung
Impressum
CSS - ein Float-Layout - 05.01.2011
Hier wird das erste mal in unserer Tutorialreihe ein Beispiel für ein richtiges Design gezeigt. Das Tutorial trägt den Titel Float-Layout, da die Linkliste per float nach Links geschoben wurde.
Der HTML-Code
Hier erst einmal der HTML-Code unseres Designs:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <link rel="stylesheet" type="text/css" href="float.css">
    <title>Ein Floatdesign</title>
  </head>
  <body>
    <div id="container">
      <div id="titel">
        Die Beispielseite
      </div>
      <div id="links">
        <ul>
          <li><a href="#">Startseite</a></li>
          <li><a href="#">Andere Seite</a></li>
          <li><a href="#">Sinnlose Seite</a></li>
          <li><a href="#">...</a></li>
          <li><a href="#">Impressum</a></li>
        </ul>
      </div>
      <div id="text">
        <div id="uberschrift">
          Startseite
        </div>
Dies ist ein Beispietext, welcher beispielhaft dazu geschrieben wurde ein besonders gutes, einzigartiges und möglichst auch nicht zu kurzes, aber auch nicht soooo langes Beispiel darzustell. Einfach beispielhaft. Aber so ein bisschen was könnte ich ja noch schreiben. Ich hoffe mir fällt noch genügend Beispieltext ein...<br> Ah, ich habe eine Idee, ich wiederhole einfach alles noch einmal:<br> Dies ist ein Beispietext, welcher beispielhaft dazu geschrieben wurde ein besonders gutes, einzigartiges und möglichst auch nicht zu kurzes, aber auch nicht soooo langes Beispiel darzustell. Einfach beispielhaft. Aber so ein bisschen was könnte ich ja noch schreiben. Ich hoffe mir fällt noch genügend Beispieltext ein...
      </div>
    </div>
  </body>
</html>
Der Code sollte recht selbsterklärend sein. Als Linkleiste wurde hier eine Aufzählung benutzt. Das wird häufig so gemacht.
Der CSS-Code
Und hier folgt der Inhalt der Datei float.css:
*{
  margin: 0;
  padding: 0;
}
body{
  background-color: #ccddff;
}
#container{
  margin: 1em 5em 1em 5em;
  border: 0.2em solid #0000ff;
  padding-bottom: 3em;
}
#titel{
  text-align: center;
  font-size: 3em;
  font-style: italic;
  letter-spacing: 0.4em;
  color: #99bbff;
  background-color: #0000ff;
  padding-top: 1em;
  padding-bottom: 0.3em;
  border-bottom: 3px solid #002299;
}
#links{
  float: left;
  margin: 2em 2em 0 3em;
  border: 0.2em solid #223399;
}
#links li{
  list-style-type: none;
}
#links a{
  text-decoration: none;
  color: #aabbff;
  display: block;
  line-height: 1.5em;
  padding: 0 2em 0 1em;
}
#links a:link, #links a:visited{
  background-color: #4444ff;
}
#links a:focus, #links a:hover{
  background-color: #6666ff;
}
#uberschrift{
  margin-left: 3em;
  margin-top: 2em;
  font-size: 1.5em;
}
#text{
  margin: 1em 5em 3em 15em;
}
Hier gibt es nun schon einiges neues. In den ersten Zeilen werden die Einstellungen für margin und padding für alle Elemente auf 0 gesetzt. Das sollte man immer machen, da Browser zu manchen Elemente schon Voreinstellungen haben und es ohne das auf 0 setzen zu unvorhergesehenen Ergebnissen kommen kann.
Wie man außerdem sieht kann man Padding-Werte auch einzeln, nur für eine Seite angeben (padding-right). Gleiches gilt übrigens für margin und border.
Wir haben auch eine neue Eigenschaft namens letter-spacing, die den Abstand der Buchstaben voneinander angibt.
Mit "#links li{list-style-type: none;}" verhindern wir, das vor den Listenelementen Punkte angezeigt werden. Andere Werte für list-style-type wären disc, circle und square für ul-listen und für geordnete Listen gibt es noch decimal, lower-roman, upper-roman, lower-alpha, upper-alpha.
Außerdem haben wir mit "#links li{list-style-type: none;}" noch etwas neues, denn wir sprechen weder alle Listen im Dokument an, noch hat die von uns angesprochene Liste eine class oder eine id. Wir sprechen alle Listen die es in dem Element mit der id links gibt an.
Direkt danach sprechen wir auf die gleiche Weise alle Links, die es in links gibt an. Und schon wieder gibt es eine neue Eigenschaft: "text-decoration". Links werden vom Browser ja Standardmäßig unterstrichen dargestellt. Das verhindern wir hier. text-decoration kann außerdem die Werte underline, overline und line-through annehmen.
Noch im gleichen Anweisungsblock habe wir wieder zwei neue CSS-Eigenschaften. Die eine heißt "display". Sie kann die Werte block, inline und none annehmen. In HTML gibt es Block- und Inlineelemente. Nach Blockelementen beginnt automatisch eine neue Zeile, nach Inlineelementen, wie der Name schon vermuten lässt, nicht. Ein Link wäre also beispielsweise ein Inlineelement, da Links in einer Zeile neben anderem Text stehen können. Ein div dagegen ist ein Blockelement.
Eine weitere Eigenschaft von Blockelementen ist es den ganzen verfügbaren Platz zu nutzen und das wollen wir an dieser Stelle, damit die Hintergrundfarbe und auch die Klickbare Fläche bei allen Links gleich groß ist. Links sind nun aber Inlineelemente, also muss man sie per CSS zu Blockelementen machen.
Die zweite uns noch unbekannte Eigenschaft ist "line-height". Sie sorgt ganz einfach dafür, das die Zeilenhöhe erhöht wird und die Links nicht so zusammen gequetscht aussehen.
Und es gibt noch etwas wichtiges neues in diesem CSS-Code. Auf vielen Webseiten, ändert sich die Hintergrundfarbe der Links, wenn man darüber fährt. Das geschieht mit den sogenannten Pseudoklassen :link, :visited, :focus, :hover und :active, die auch in dieser Reihenfolge angegeben werden sollten. ":link" wird ausgeführt, wenn der Link noch nicht angeklickt wurde, ":visited" wenn man die Seite schon einmal besucht hat, ":hover" wenn man mit der Maus darüber fährt, ":focus" wenn der Link mit der Tastatur Fokussiert wird und ":active" wenn gerade auf den Link geklickt wird.
Wie immer sollte man etwas mit dem Beispiel hier herumprobieren und sich daraus vielleicht sogar eine eigene Seite bauen.

Kommentare:

- kein Kommentar -
Um einen Kommentar zu schreiben ist eine Anmeldung nötig.