Wichtiges zum Design von Forumstyles

Hallo

Es gibt auf Websites allgemein und auch in unseren Foren speziell ein paar Eigenarten, die man berücksichtigen sollte, wenn man sich nachträgliche Arbeit ersparen will

Dafür ist dieser Thread gedacht, um diese zu sammeln und einen Überblick und Anhaltspunkt über Mindest- und maximale Größen, Auflösungen, Farben etc. zu bieten.

Wenn ihr etwas in diese Übersicht eintragen wollt dann schickt mir das bitte über PN und ich werde es dann einfügen (soweit geeignet )

---

Hintergrundbilder:

Hintergrundbilder allgemein, also als Gesamthintergrund für das Forum im html - oder body-Bereich sowie in den Navigationsleisten (BB3) und den Tabellen-Headern haben die Eigenschaft, dass sie nicht automatisch skaliert werden, sondern dass das Hintergrundbild, das eingesetzt wird, bei größer werdendem Bildschirm oder Feld neben- oder teilweise auch untereinander wiederholt und aneinandergesetzt wird. Mit CSS kann diese Wiederholung deaktiviert werden {background-repeat: no-repeat;} oder nur seitlich {background-repeat: repeat-x;} oder unterenander erlaubt werden {background-repeat: repeat-y;} bei Eintragung der Bild-URL in der Bildverwaltung geht das jedoch nicht.

Zur Verdeutlichung ein paar Shots in den gängigsten Bildschirmbreiten, die ich für einen anderen Beitrag gerade gemacht hab, wobei zu beachten ist, dass die Bildschirme durch die technische Entwicklung von Jahr zu Jahr breiter werden und die zur Zeit meistverkaufte Größe (also Standardgröße) schon eine Breite von 1680px hat.

Das hier verwendete Hintergrundbild hat die Abmessungen 1024 x 768 px.
Die höher liegenden Ebenen hab ich transparent gestellt, damit man das Bild besser sieht.

1024 Pixel Breite: http://kserv1.de/sup/shots/abc1024.png
1280 Pixel Breite: http://kserv1.de/sup/shots/abc1280.png
1440 Pixel Breite: http://kserv1.de/sup/shots/abc1440.png
1680 Pixel Breite: http://kserv1.de/sup/shots/abc1680.png
1920 Pixel Breite: http://kserv1.de/sup/shots/abc1920.png

Hintergrundbilder müssen immer links oben beginnen oder zentriert sein, damit sie in allen Browsern korrekt angezeigt werden. Setzt man sie zum Beispiel im CSS mit {background-position:top right;} rechtsbündig oder mit mit {background-position: left bottom;} nach unten, so wird das nicht von allen Browser erkannt und demzufolge fängt das Bild dann bei manchen Usern links und bei manchen rechts an, bei manchen oben und bei anderen unten.

Am sinnvollsten haben sich daher Hintergründe erwiesen, die über eine Höhe von mindestens 1400 px gehen und eine Breite von nur 1px haben, die dann automatisch seitlich aneinandergesetzt werden und eine sehr kleine Dateigröße = Ladezeit haben (User mit Modem oder ISDN nicht vergessen!), zum Beispiel

http://kserv1.de/sup/div/1-bg-imghtmlundbody.jpg
(jpg, 1px x 1600px, weniger als 1kB)

das ergibt dann: http://kserv1.de/sup/div/bg-praes1.html

Alternativ kann der obere Bereich mit einem Bild gefüllt werden und der Rest dann in der passenden Hintergrundfarbe, oder der linke Rand mit einem Bild und der Rest nach rechts mit der passenden Farbe.

LG,
Alex

Danke Alex
Das ist sehr hilfreich

Navigationsleisten

Die Navigationsleisten lassen sich entweder nur mit Textlinks, mit Textlinks und Icons oder nur mit Buttons darstellen.

1. Teil: Nur Textlinks
(Gültig für BB2 und BB3)

Hierbei lassen sich Schriftfarbe und Schriftgröße sowie zusätzliche Parameter wie Fettschrift oder unterstrichene Schrift sehr leicht über das CSS-Stylesheet einstellen.

Zusätzlich lässt sich auch der mouseover-Effekt definieren, d.h. die Darstellung des Links, wenn sich der Maus-Cursor darüber befindet.

Dazu diesen Code in das CSS-Feld einsetzen (Adminbereich/Anzeige/Logos&Bilder/Farben/CSS Stylesheet)
Sollten dort bereits Eintragungen enthalten sein dann darunter.
Zur Fehlervermeidung bitte hier alles markieren, kopieren und dann in das Feld im Forum einsetzen.

Code:


 .mainmenu{
          font-size : 11px;
    }
a.mainmenu{
        text-decoration: none;
        color : #000000;
        font-weight: normal;
    }
a.mainmenu:hover{
        text-decoration: underline;
        color : #ff0000;
        font-weight: bold;
    }

Es sind hierbei

.mainmenu --> Einstellungen, die für "normal" und "mouse-over" gelten

a.mainmenu --> Einstellungen für die "normale" Linkdarstellung

a.mainmenu:hover --> Einstellungen für die Darstellung bei mouse-over


font-size : 11px; --> Schrifgröße in px

text-decoration: none; --> nicht unterstrichen

text-decoration: underline; --> unterstrichen

font-weight: normal; --> keine Fettschrift

font-weight: bold; --> Fette Schrift


Obiges Beispiel führt also dazu, dass die Links 11 Pixel hoch dargestellt werden.
Im Normalzustand sind sie nicht unterstrichen, haben die Farbe schwarz (#000000) und sind nicht fett geschrieben.

Wenn sich der Mauscursor darüber befindet (mouseover bzw. hover-Effekt) wechselt die Darstellung auf rote (#ff0000), fette und unterstrichene Schrift.

Die Darstellung erfolgt in der Standardschriftart.
Soll die Schriftart zusätzlich noch geändert werden kann man einfach noch eine Zeile hinzufügen:

Code:

font-family: Verdana,Arial,Helvetica,sans-serif;

Die bevorzugte Schriftart hier als erste eintragen und unbedingt darauf achten, dass in der Liste mindestens eine der Windows-Standard-Schriftarten enthalten ist (siehe dieses Beispiel), da sonst die Schrift bei manchen Usern nicht angezeigt wird.


Besonderheit für BB3:

Bei BB3 besteht die Möglichkeit, die Links insgesamt mit einem Hintergrundbild zu hinterlegen, das dann üblicherweise etwa 900px breit und 30px - 80px hoch ist. (Höhe im Prinzip nach Belieben)

Sollte dies gewünscht werden (gute CSS-Kenntnisse nötig!) bitte hier im Bereich posten, denn eine Fertiglösung ist leider nicht möglich, da dies an jedes Forum-Style angepasst werden muss und ausserdem einige Hacks im CSS integriert werden müssen, damit zum Beispiel der IE (7 aufwärts) das korrekt darstellt.

Bitte auch beim Gestalten einer Navigationsleiste mit reinem Text unbedingt darauf achten, dass durch die Schriftgröße die maximale Breite nicht überschritten wird.

--> Die Navigationsleiste muss in jedem Fall bei aktivierter Galerie und aktiviertem Kalender auf einen 1024 px breiten Bildschirm passen. Falls nicht, dann im Adminbereich die entsprechende Einstellung ändern, so, dass die Buttons auf 2 Reihen verteilt werden.