ich möchte für unsere Klasse mal eine Homepage erstellen (kommt im IT Unterricht nacher auch noch (aber mit Tabellen ), ich hab meine Homepage dann schon
Das ist meine erste Homepage mit HTML/CSS, HTML beherrsche ich auch nur so lala, die Grundbefehle sitzen jedoch.
Aber jetzt zum eigentlichen:
Hier ist schonmal der Link.
Was noch auf der ToDo Liste steht:
Menübuttons vertikal zentrieren
den weißen Rand ganz außen entfernen
Die Menübuttons mit Mouseover versehen
Eine Shoutbox rechts einfügen
Die Menübuttons mit Links versehen
Da kommt schon das erste Problem: Ich bekomme die Menübuttons einfach nicht zentriert, egal was ich mache.
Zu dem Mouseover: Welche Variante funktioniert mit den meisten Browsern?
Dazu kannst du den Bilder, die später einmal die Navigation darstellen sollen eine id zuweisen und das img Tag neu definieren. Darin setzt du dann einen abstand nach oben, in deinem Beispiel habe ich das ausprobiert:
HTML-Code:
#menu img { margin-top: 2px; }
Dadurch setze ich einen Abstand der Bilder von 2px nach oben. Das würde ich aber später noch überarbeiten, denn spätestens wenn die Navigation also solche dazu kommt mit den entsprechenden Mouseover-Effekten eine Liste das sinnvollste darstellt.
Die kannst du später dann noch über die entsprechenden CSS-Anweisungen formatieren, so daß du auf den dann überflüssigen center tag und die Abstandshalter verzichten kannst.
Bei den Mouseover Effekten würde ich persönlich auf das klassische hover setzen. Dazu kannst du bei selfhtml was nachlesen und dann mit Bilder und Schriften experimentieren. Die Kompatibilität ist eigentlich ganz gut und auf modernen Browsern kein Problem.
Den weissen Rand bekommst Du weg, indem Du am Anfang deines CSS-Codes mit dem Sternchenselektor fuer alle Elemente margin und padding auf 0 setzt. Hat den Vorteil, dass Du in den meisten Browsern die gleiche Darstellung die Abstaende betreffend hinbekommst.
HTML-Code:
* {
margin: 0;
border: 0;
}
Das Menue machst Du dann am besten ueber eine Liste. Enstprechende Beispiele gibts hier.
Ansonsten wuerde ich dem Content Bereich (#main) noch ein padding mitgeben, da der Text recht eng am border klebt.
Du kannst den jeweiligen Button immer mit seinem passenden Hoverbutton in eine Bilddatei seitzen. Nehmen wir mal die Homebuttons, die steckst du in ein Bild untereinander (oder auch nebeneinander). Das bindest du jetzt als Hintergrundbild ein, an den entsprechenden Menüpunkt. Normal wird nur der erste Teil des Bildes angezeigt und beim Hover wird die Backgroundposition verschoben, so dass der untere Teil angezeigt wird.
Hier zum Anschauen (sry bin schlecht im erklären): http://standards.webmasterpro.de/ind...Nachladen.html
Gibt aber noch viele weitere Beispiele --> Google.
So wird das Bild sogar vorgeladen und du brauchst keinen Preloader.
Erste Versuche mit CSS - Einige Probleme
), ich hab meine Homepage dann schon 
(sry bin schlecht im erklären): 
