Bitte hier außer FAQ's keine weiteren Beiträge einstellen (wird noch um Themen ergänzt)
INHALT
I. Wie erstelle ich eine Homepage? - Tutorials
II. CSS: Layoutbeispiele, Positionierungen u.v.m.
1. Das Boxmodell - unendliche Breiten
2. Layoutbeispiele
3. Richtig floaten
4. Seite horizontal zentrieren
5. Seite horizontal und vetrikal zentrieren
6. Gleich lange Divs / Faux Columns
III. Links, Menues und Navigation
1. Unterstrich bei Links entfernen
2. Standardmenues mit CSS gestalten
3. Ausklappmenues, Dropdownmenues
4. Navigation per PHP includen
5. Links unterschiedlich gestalten
6. Den Link der jeweils geöffneten Seite optisch hervorheben
7. Interne Links, Verweise und Anker setzen
IV. Bilder und Grafiken auf der Homepage
1. Bilder und Grafiken werden nicht angezeigt
2. Unter dem Bild erscheint ein kleiner Rand
I. Wie erstelle ich eine Homepage? - Tutorials
Friedel's HTML-Crashkurs
sejuma's CSS-Einsteigerkurs
CSS-Fundgrube www.ohne-css.gehts-gar.net
HTML lernen
Homepage im Internet veröffentlichen
http://www.admin-wissen.de/tutorials...g/html-lernen/
II. CSS:Layoutbeispiele, Positionierungen u.v.m.
1. Das Boxmodell - unendliche Breiten
Das CSS-Boxmodell
Wichtig: Die Gesamtbreite eines Containers (div's) ergibt sich aus seiner eigentlichen Breite, zuzüglich der linken und rechten Breiten für Rahmen und Padding.
Der Box-Model-Bug des Internetexplorers führt zu einer fehlerhaften Darstellung des Boxmodells. Abhilfe schafft i.d.R. der richtige DOCTYPE.
2. Layoutbeispiele
Einige Links für verschiedene Layoutbeispiele mit CSS:
http://www.dynamicdrive.com/style/layouts/
http://www.css4you.de/wslayout1/index.html
http://www.stichpunkt.de/css/bereiche.html
http://css.fractatulum.net/sample/layout1format.htm
http://blog.html.it/layoutgala/
3. Richtig floaten
http://css-technik.de/css-examples/219_9/
http://de.selfhtml.org/css/eigenschaf…erung.htm#float
4. Seite horizontal zentrieren
Eine Seite lässt sich horizontal zentrieren, indem man ihren Quelltext innerhalb des body-Bereiches in einen zentrierten Container packt. Dieser muss eine fixe Breite haben.
CSS-Code dieses Containers (Beispiel; Werte können verändert werden; außer margin auto):
#horizontalzentriert
{background-color: #ff00ff; width:500px; height:400px; margin: 0 auto;}Der height-Wert ist nicht unbedingt erforderlich. Ohne ihn passt sich die Höhe ihrem Inhalt an.
HTML-Code
<body>
<div id="horizontalzentriert">Dieser div ist horizontal zentriert.
In ihm kann noch weiterer Quelltext mit weiteren Elementen stehen.</div>
</body>Sollte der Internetexplorer <7 die Seite nicht zentriert darstellen, liegt dies meist daran, dass kein oder ein falscher Doctype vorhanden ist.
5. Seite horizontal und vertikal zentrieren
Voraussetzung ist, dass die Seite (div) eine bestimmte Breite und Höhe hat. Im Beispiel soll sie 700px breit und 500px hoch sein.
Um ein einheitliches Browserverhalten zu gewährleisten sollte der body folgende Angaben enthalten:
body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}Den Container, den es innerhalb des body zu zentrieren gilt, nennen wir #center.
Daraus folgt der HTML-Code:
<body>
<div id="center">
Ich bin ein zentrierter Container
</div>
</body>Der #center wird per CSS zunächst so formatiert (Farbangabe und Rahmen nur zur besseren Verdeutlichung):
#center
{
background-color: red;
border:2px solid black;
width: 700px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
}Zwischenergebnis:
Die obere linke Ecke des #center ist jetzt genau in der Mitte des Bildschirms. Also 50% von oben und 50% von links positioniert.
Damit jetzt die Zentrierung erfolgt, muss er nach links und nach oben "zurück" geschoben werden. Und zwar genau um den hälftigen Wert seiner Breite und Höhe. Dies erreicht man mit entsprechenden negativen margin-Werten.
Somit fügen wir dem #content noch folgende Angaben hinzu:
margin-left: -350px;
margin-top: -250px;oder insgesamt:
#center
{
background-color: red;
border:2px solid black;
width: 700px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -350px;
margin-top: -250px;
}Damit ist der Container zentriert. In ihn kann man jetzt weitere Elemente wie z.B. Header, Navi und Content packen.
III. Links, Menues und Navigation
1. Unterstrich bei einem Link entfernen
Sofern das Menue mit CSS-Angaben formatiert ist:
a:link, a:visited, a:hover {text-decoration:none;}oder direkt im HTML-Teil:
[URL='http://#']Link ohne Unterstrich[/URL]
2. Standardmenues mit CSS gestalten
Für CSS-Menues sollte man das Listenformat verwenden. Es dient zum einen der Übersichtlichkeit im Quelltext und lässt sich zum andern systematischer formatieren.
Zahlreiche Codebeispiele bieten
Listamatic
CSS Library - Horizontal-Menues
CSS Library - Vertikal-Menues
3. Ausklappmenues, Dropdownmenues
Ausklappmenues mit Unternavigation erfordern meist Javascript, da der Internetexplorer bis Version IE6 den Hovereffekt für den li-Tag nicht interpretiert.
Ein vollkommen barrierefreies Ausklappmenue ohne Javascript gibt es hier: http://barrierefrei.e-workers.de/workshops/tricks/menues.php
Diese Variante erfordert sehr umfangreiche Sonderdefinitionen für den Internetexplorer.
Etwas einfacher ist es, den Internetexplorer (bis Version 6) zu "trimmen", indem man eine bestimmte Javascriptdatei hinterlegt. Diese Methode ist sehr ausführlich hier beschrieben: http://www.drweb.de/leseproben/klappmenu.shtml
4. Navigation per PHP includen
Im Unterschied zu Frames wird mit der CSS-Methode immer eine Seite komplett geladen. Das bedeutet, dass sich auf jeder Datei auch immer der komplette HTML-Code der sogenannten "Fixbestandteile" wie z.B. Header und Navigation befinden muss.
Besteht eine Website aus sehr vielen Einzelseiten und soll z.B. ein Link in der Navigation geändert, entfernt oder hinzugefügt werden, so müsste jede Seite einzeln angepasst werden, was sehr umständlich und aufwendig ist.
Es gibt Editoren wie z.B. den "Phase 5", mit denen man die Anpassung dateiübergreifend nach der Methode "Suche und Ersetze" vornehmen kann.
Einfacher ist es, Fixbestandteile einer Homepage zentral in einer Datei zu hinterlegen und sie in die jeweilige Seite einzufügen (includen).
Um diese Methode anzuwenden muss der Webserver php-fähig sein (das Webpaket muss PHP enthalten). Die einzelnen Dateien müssen die Dateiendung "php" statt "html" haben. Dazu z.B. die bisherige "index.html" einfach umbenennen in "index.php".
Achtung: Eventuell bereits vorhandene Links müssen ebenfalls umbenannt werden.
Nun schreibt man in den Navi-Container anstelle des HTML-Codes mit den einzelnen Links nur folgendes:
<?php include("menue.php"); ?>Den HTML-Code mit den einzelnen Links schreibt man (mit einem einfachen Editor) in eine weitere Datei und speichert diese mit der Bezeichnung "menue.php" ab.
Inhalt dieser Datei könnte z.B. sein:
<ul>
[*][URL='http://index.php']Startseite[/URL]
[*][URL='http://seite1.php']Seite 1[/URL]
[*][URL='http://seite2.php']Seite 2[/URL]
[/list]Soll später das Menü einmal geändert oder ergänzt werden, muss man lediglich die Datei "menue.php" anpassen.
Nach der gleichen Methode könnte auch der Header includet werden.
Hinweis: Zum Testen müssen die Dateien erst auf den Webspace hochgeladen werden oder auf dem PC muss z.B. XAMPP installiert sein.
5. Links unterschiedlich gestalten
Will man neben den Standardlinks im Menue auch noch andere Links einfügen, die davon abweichend gestaltet sein sollen, ist dies durch Definition weiterer Link-Klassen möglich.
CSS-Standard-Link:
a:link
{
color:#FF00FF;
text-decoration:none;
}
a:visited
{
color:#8B2323;
text-decoration:none;
}
a:hover
{
color:#FFB90F;
font-weight:bold;
font-size:1.1em;
text-decoration:none;
}Zusatzlink (Definition über die Klasse ".class1" – Bezeichnung beliebig):
CSS-Code:
a.class1:link
{
color:#ff0000;
text-decoration:none;
}
a.class1:visited
{
color:#0000ff;
text-decoration:none;
}
a.class1:hover
{
color:#ADFF2F;
font-weight:bold;
font-size:1.1em;
text-decoration:none;
}HTML-Code:
[URL='http://#']Standardlink[/URL]
[URL='http://#']Zusatzlink definiert über class1[/URL]
6. Den Link der jeweils geöffneten Seite optisch hervorheben
Hierzu ist im CSS-Teil ein zusätzlicher ID oder eine zusätzliche Klasse zu definieren (siehe hierzu auch 5.)
Auf der jeweiligen Seite ist beim Link dieser Seite auf diesen Zusatz-ID oder die Zusatzklasse zu verweisen.
Eine Anleitung hierzu gibt es (in englisch) hier: http://www.alistapart.com/articles/keepingcurrent
7. Interne Links, Verweise und Anker setzen
https://www.forum-hilfe.de/viewtopic.php?t=30480&highlight=
IV. Bilder und Grafiken auf der Homepage
1. Bilder und Grafiken werden nicht angezeigt
Als häufige Fehlerursachen kommen in Betracht:
Die Bilddateien befinden sich nicht auf dem Webspace >>> hochladen
Der Pfad zu den Bilddateien verweist auf die Festplatte des eigenen PC's, der nicht mit dem web verbunden ist
Das sieht dann z.B. so aus:
[img]file:///C:/Dokumente%20und%20Einstellungen/bilddatei.jpg[/img]Dieser Pfald verweist fälschlich auf die Festplatte C.
Richtig müsste er lauten (sofern sich die Bilder im gleichen Webspace-Ordner wie die html-Dateien befinden):
[img]bilddatei.jpg[/img]Der Name der Bilddatei beinhaltet unzulässige Zeichen
Bilddateien sollten durchgängig in Kleinschrift benannt sein. Sie dürfen keine Umlaute (ä,ö,ü) und Sonderzeichen (z.B. ß, /, (, :, !, " usw.) und Leerzeichen enthalten.
Also nicht
schönes Spaßbild.jpgsondern:
schoenesspassbild.jpgDateiendungen stimmen nicht überein
Es ist darauf zu achten, dass Pfad und Datei die gleichen Dateiendungen haben.
Beispiel:
Dateibezeichnung:
meinbild.jpgPfad:
[img]meinbild.JPG[/img]In diesem Fall ist die Dateiendung "jpg" im Pfad groß geschrieben und weicht somit von der Dateibezeichnung (Kleinschreibung) ab. Richtig wäre deshalb:
[img]meinbild.jpg[/img](dieser Tipp stammt von Dark_Dog)
2. Unter dem Bild erscheint ein kleiner Rand
Bilder sind Inline-Elemente, die einen natürlichen Abstand zur unteren Textlinie haben.
Das Problem lässt sich beheben, indem man sie als Blockelemente definiert:
CSS:
img {display: block;}oder direkt in HTML:
[img]bilddatei.jpg[/img]alternativ:
<div>[img]bilddatei.jpg[/img]</div>