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:
float: //befehl für Ausrichtung.Mögliche Parameter: left und right
Jetzt machen wir eine Beispiel Website:
index.html :
<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 :
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
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:
float: //befehl für Ausrichtung.Mögliche Parameter: left und right
Jetzt machen wir eine Beispiel Website:
index.html :
<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 :
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