Das Forum der Foren
Willkommen im offiziellen Supportforum von Forumieren!

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind, loggen Sie sich ein.


Erstellen Sie ein kostenloses Forum wie dieses hier.

Wichtiges zum Design von Forumstyles

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Wichtig Wichtiges zum Design von Forumstyles

Beitrag von Alex am Di 23 Sep 2008 - 3:01

Hallo Smile

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 Smile

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 Wink )



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. Wink

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 Smile


Zuletzt von Alex am Di 23 Dez 2008 - 2:41 bearbeitet; insgesamt 1-mal bearbeitet

Alex
Admin a.D.
Admin a.D.

Männlich Beiträge : 8116
Anmeldedatum : 02.09.07
keine
Invision

Benutzerprofil anzeigen

Nach oben Nach unten

Wichtig Re: Wichtiges zum Design von Forumstyles

Beitrag von Gast am Di 23 Sep 2008 - 9:00

Danke Alex
Das ist sehr hilfreich Smile
avatar
Gast
Gast


Nach oben Nach unten

Wichtig Die Navigationsleiste

Beitrag von Alex am Mi 22 Okt 2008 - 16:27

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.

Alex
Admin a.D.
Admin a.D.

Männlich Beiträge : 8116
Anmeldedatum : 02.09.07
keine
Invision

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten