Tutorial: Website ausrichten

**Milchbox** · 07.10.2005 19:47

Das Tutorial habe ich geschrieben weil in den letzten paar monaten immer wieder Leute kommen und ihre Websites mit Frame gestalten.
Frames mögen zwar einfacher sein als Tabellen etc. dafür werden sie aber :
1. Meistens nicht so angezeigt wie man es will und 2. Ist die Kompatibilität nicht zu allen Browsern da!
Daher handelt das Tutorial nicht über Frames sondern über das Ausrichten mit CSS und DIV-Tags.

Ich zeige erstmal den Grundbefehl zum ausrichten von DIV-Tags mit CSS:

PHP-Code:


float: //befehl für Ausrichtung.Mögliche Parameter: left und right

Jetzt machen wir eine Beispiel Website:

index.html :

PHP-Code:


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

<ul id="Nav">

<li><a href="#">Ein Beispiel Link</a><br>

<li><a href="#">Ein Beispiel Link</a><br>

<li><a href="#">Ein Beispiel Link</a>

</ul>

<div id="Main">

<p>Hier steht ein Text im Main DIV-Tag.<br><br><br><br><br><br></p>

</div>

</body></html>

So jetzt haben wir die index.html Datei.
Natürlich könnte man noch auf der rechten seite eine Box hinsetzen.
Jetzt fehlt aber noch die style.css Datei und die kommt jetzt:

style.css :

PHP-Code:


  body {

    color: black; background-color: white; //Schriftfarbe und Hintergrundfarbe

    font-size: 100.01%; //Schriftgröße

    font-family: Helvetica,Arial,sans-serif; //Schriftart

    margin: 0; padding: 1em; //Abstand zum nächsten Element und Allgemeiner Innenabstand

  }

  ul#Nav {

    font-size: 0.83em; //Schriftgröße

    float: left; width: 18em; //Ausrichtung und Breite der Nav-Leiste

    margin: 0; padding: 0;

    border: 1px solid silver; //Rand: 1 Pixel breit, Linie durchgezogen und Silber

  }

  ul#Nav li {

    list-style: none; //kein Listenstil; kein Listenzeichen

    margin: 0; padding: 0.5em;

  }

  ul#Nav a {

    display: block;

    padding: 0.2em;

    font-weight: bold; //Schriftstil

  }

  ul#Nav a:link {

    color: black; background-color: #eee;

  }

  ul#Nav a:visited {

    color: #666; background-color: #eee;

  }

  ul#Nav a:hover {

    color: black; background-color: white;

  }

  ul#Nav a:active {

    color: white; background-color: gray;

  }

  div#Main {

    margin: 0 12em 0 16em;

    padding: 0 1em;

    border: 1px solid silver;

  }

  div#Main h1 {

    font-size: 1.5em;

    margin: 0 0 0.5em;

  }

  div#Main h2 {

    font-size: 1.2em;

    margin: 0.2em 0;

  }

  div#Main p {

    font-size: 1em;

    margin: 1em 0;

  }

Wenn man sich das anguckt ging das doch einfach oder?
Und so wie man es jetzt sieht ist es mit jedem Browser kompatibel (sogar IE)
Falls jemand fragen hat:
ICQ: 232-142-611

Ich hoffe ich konnte helfen.
MFG Milchbox

Thema: Tutorial: Website ausrichten

Themen-Optionen

Anzeige

Baum-Darstellung

Tutorial: Website ausrichten

Berechtigungen