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

**dadie** · 08.10.2005 08:05

*hust* Tutuorial kann man das aber nicht so nenen.Nette idee jedoch kurz gehalten und wennich erklährt

Aber ne schöne idee und du hast mich auf eine idee gebracht

**Milchbox** · 08.10.2005 09:30

Klar kann man das noch kein tut nennen aber ich bin ja noch nicht fertig.

**Fixxer** · 08.10.2005 18:31

Naja, Tut, nicht wirklich, vor allem da es sich mit dem Thema Ausrichtung von/in Div Tags befasst. Das Gebiet ist aber ungleich komplexer als es hier den Anschein hat, vor allem da div-tags ja nicht "fest" wie zb Tables sind, sondern sich überlappen können etc...
Am einfachsten richtet man immer noch mit Tables aus.

Zum Thema Kompatibilität:
Da sind div tags wohl ne schlechte Lösung, die mögen zwar auf allen Browsern der neuen Generation richtig angezeigt werden, sobald aber jemand kommt, dessen Browser noch keine Div-Tags unterstützt, sit die Seite im Arsch (alte IE's, netscape Navigators,... gibts ja noch vor allen in den östlichen Ländern genug)
Aber mal warten bis es fertig ist.

FF · 08.10.2005 18:46

ich bin grad am lernen des selbigen.

aber dass, was ich wirklich brauche, konnte mir das tut nicht vermitteln.
so z.b. unterteilung in 3 zeilen und 3 spalten wie bei ner normalen tabellen-gelayouteten datei^^
oder die postionierung von bilder auf der seite an der richtigen stelle, ohne tabellen.

mach doch mal bitte einen link und zeige, wie dass oben von dir gezeigte aussieht^^

**Milchbox** · 08.10.2005 18:48

@Fixxer: Ich will jetzt ja nicht ungemütlich werden aber ich habe dieses Tut geschrieben weil andere nur auf frames zurück greifen.wie findest du das?

@Freierfall: Das Tut ist nur auf das positionieren von div tags bezogen.

FF · 08.10.2005 18:52

div tags kann man auch ohne css positionieren^^
so z.b. <div algin=xyz> ^^

Viele Benutzen auch Frames, um einen Inhalt einzubinden

Also brauchen wir ein php tutorial xD
Davon gibts aber schon genug.

Du solltest deines vllt noch etwas ausführlicher machen.

**Maisaffe** · 08.10.2005 19:19

Zitat von Freierfall

div tags kann man auch ohne css positionieren^^
so z.b. <div algin=xyz> ^^

Is aber net besonders XHTML1.0 Valide.

PS: Toturial ist gut, aber nicht so genau erklärt. Aber ausreichend. Fazit:

Thema: Tutorial: Website ausrichten

Themen-Optionen

Anzeige

Tutorial: Website ausrichten

Berechtigungen