Dokumentation der vorgegebenen CSS


Hinweis

Sie sehen hier Auszüge und Screenshots aus älteren Versionen der Jimdo-Handbücher. Viele Informationen und der Jimdo-Siteadmin wurden mittlerweile aktualisiert. Alle Titel finden Sie stets voll aktualisiert auf jimdo-handbuch.de.

 

Wenn Sie sich für das Thema Suchfunktion auf Jimdo interessieren, besuchen Sie bitte unsere Seite suchfunktion.website.



Bei jeder brandneuen Jimdo-Page sind Muster-HTML, -CSS und -DATEIEN bereits in der Schnittstelle hinterlegt. Diese wird hier – unterbrochen von einigen Hinweisen oder Tipps in den grauen Boxen – einmal stark bereinigt dargestellt.

body {background: #333333 url(bg.gif) no-repeat top left; padding:35px 0 0 0; 
margin:0; font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}

In diesem Quellcode wird dem Body direkt eine Standard-Schriftart, -Größe etc. mitgegeben. Ich empfehle, feste Schriftdefinitionen nur zu vergeben, wenn eine benutzerseitige Änderung (z.B. über Style) grundsätzlich unerwünscht ist. Für die Fließtexte body, p und die Überschriften h1 bis h3 etc. empfehle ich grundsätzlich keine Schriften, Farben etc. zuzuteilen, damit diese über den Bereich „Style“ ohne Eingriff in den Quellcode benutzseitig verändert werden können. Das grundsätzliche Text-Linkverhalten mit den Pseudoklassen :hover oder a:link, a:visited etc. würde ich aber zumindest für den Aspekt text-decoration, font-weight etc. definieren.

#container {margin:0 auto;width:834px;background:white;}

Eine Mischung aus Farbtypzuweisungen wie

background:white, color:#ffffff, 
border:1px solid rgb (255,255,255)

ist zu vermeiden.

Halten Sie sich am besten einheitlich an entweder die Hex- oder RGB(a)-Werte.

#header {padding:17px;}
#header h1,
#header a {padding:0; font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,
Arial,Helvetica,sans-serif; font-size:30px;font-weight:normal; text-decoration:none;
line-height:1.3em; color:#666666; text-align:right;}
#header a:hover {text-decoration:none; }

Aus SEO-Sicht wird die h1-Schrift je Unterseite nur einmal vergeben. Ich empfehle im Header keine h1-Überschrift zu platzieren, da sie immer mit einer h1 im Fließtext, Blog etc. im dargestellten Content konkurrieren wird. Selbst wenn man die Überschrift hier als #header .headueberschrift definiert, ist eine CSS-Definition der Schriftfamilie, des Linkverhaltens etc. hier auf jeden Fall angebracht.

#navigation {float:left; width:220px; padding:17px;}

#navigation regelt an dieser Stelle nur das Aussehen des Navigationscontainers, nicht das Navigationsverhalten.

#sidebar {padding-top:10px;}

Denken Sie beim DIV #sidebar daran, dass hier ggf. einmal der Warenkorb wohnt, sofern nicht anders definiert. Lassen Sie also ruhig ein wenig Platz, wobei 200 Pixel Breite in der Regel ausreichend sind.

#content {float:right; width:530px; padding:17px;}

#content ist die ein extrem wichtiger Bereich Ihrer CSS-Datei. Hier wird einmal nahezu alles stattfinden, was der User in seine Jimdo-Page einpflegt und seinem Besucher präsentiert. Texte, Bilder, Galerien, Videos, Shopartikel etc.
Den Contentbereich – sofern kreativ nicht anders verpflichtet – ausreichend breit und mit möglichst neutralem (am besten weißem) Hintergrund auszustatten, da nicht freigestellte Bilder, Widgets etc. problematisch auf zum, Beispiel buntem oder halbdurchsichtigem Hintergrund wirken können.

#footer {clear:both; margin-top:10px; background: url(footer-bg.gif) repeat-x top;
height:65px;}
#footer .gutter {height:30px; padding:35px 15px 0 90px;}

Achtung beim Footer! Hier sind durch die VARIABLE <var>footer</var> Areale für Fußzeilentexte, Meta-Menüs wie AGB, Impressum, Druckversion etc. vorgesehen die ihren Platz finden möchten. Diesen Bereich in der Höhe lieber dynamisch halten anstatt ihn fix zu begrenzen.

ul.mainNav1,ul.mainNav2 {margin:0; padding:0;}
ul.mainNav1 li, ul.mainNav2 li {display: inline;margin: 0; padding:0;}
ul.mainNav1 li a,ul.mainNav2 li a {font:normal 11px/140% Verdana, Geneva, Arial,
Helvetica, sans-serif; text-decoration: none; display: block; color:#333;
border-bottom:1px solid #CCC;}

ul.mainNav1 li a {padding:4px 4px 4px 4px;}
ul.mainNav2 li a {padding:4px 4px 4px 14px;}
ul.mainNav3 li a {padding:4px 4px 4px 24px;}
ul.mainNav1 a:hover {background:#EEE; color:black;}
ul.mainNav1 a.current {font-weight:bold;}

Diese Standard-Navigation ist quasi der Klassiker. Horizontalmenü mit drei Ebenen.


Seit Herbst 2013 gibt es die Möglichkeit unterschiedliche Navigationsmodelle zu wählen oder die Variablen bei der Vergabe in der Syntax zu bearbeiten um zum Beispiel einzelne und individuell per CSS gestaltete Navigationsebenen auszugeben. Siehe dazu das Kapitel „Die Jimdo-Variablen“. Im Rahmen der Navigation ist eine exakte Definition des Schriftverhaltens, -familie, -größe etc. übrigens absolut unerlässlich.