Die Flaggen formatieren
Nach dem Entfernen des Linktextes an den Language-Flaggen stehen diese solo senkrecht untereinander im Language Switcher Block.
Aufgabe
Nun sollen die Flaggen waagerecht nebeneinander angeordnet werden.
CSS formatieren
Die Flaggen werden als Liste ausgegeben. Mittels geeigneter Formatierung werden die Flaggen waagerecht nebeneinander angeordnet. Dazu wird in der CSS-Datei des Theme eine Formatierung der die Flaggen ausgebenden Liste durchgefuehrt. Die CSS-Datei ist bei den meisten Themes die Datei "style.css".
Für die Flaggen-Liste wird es bereits eine Formatierung geben. Diese wird vermutlich so aussehen:
.item-list ul li {
CSS Code
}Um die Formatierung der Flaggen-Liste auf den Language Switcher Block zu begrenzen wird folgende Formatierung neu eingetragen:
#block-i18n-0 .item-list ul li {
background-image: none;
list-style-image: none;
list-style-type: none;
display: inline;
margin: 0 12px 0 0;
}Bezüglich der ID
#block-i18n-0 prüft man am Besten im HTML-Code, welche ID der Block Language Switcher tatsächlich hat.
Die Formatanweisungen list-style-image: none; und list-style-type: none; sind nach Bedarf einzufügen. Je nach dem wie die voran genannte CSS-Formatierung mit .item-list ul li definiert ist.
Die eigentliche Formatierung zum Auflösen der senkrechten Flaggen-Liste ist die Formatanweisung display: inline;.
Die Formatanweisung margin: 0 12px 0 0 regelt den Abstand der Flaggen. Die 12px als Abstand können den eigenen Vorstellungen angepasst werden.
Flaggen, Feintuning der Abstände
Im Beispiel wird an den einzelnen Flaggen rechts ein Abstand erzeugt. Das bedeutet auch, an der rechten Flagge gibt es nach rechts einen Abstand.
Wenn sich die Abstände an den Flaggen links befinden sollen verwendet man die Formatanweisung margin: 0 0 0 12px;. Damit befinden sich alle Abstaende an den einzelnen Flaggen auf der linken Seite. Das bedeutet auch, an der linken Flagge gibt es nach links einen Abstand.
Diese Veraenderung der Position des Abstandes an den einzelnen Flaggen hängt hauptsächlich davon ab wo der Flaggen-Block eingesetzt wird - auf der linken oder rechten Seite.
- Anmelden oder Registrieren um Kommentare zu schreiben
danke für die anleitung.
am 04.11.2009 - 13:17 Uhr
danke für die anleitung. ich scheitere daran die klasse herauszufinden. im garland ist das nach der standard-installation block-locale-0
wenn ich also
#block-locale-0 .item-list ul li {background-image: none;
list-style-image: none;
list-style-type: none;
display: inline;
margin: 0 12px 0 0;
}
eintrage tut sich nichts. auch ohne das .item-list ul li bin ich nicht erfolgreich. kann mir da jemand helfen?
susi_333 schrieb danke für
am 04.11.2009 - 14:36 Uhr
danke für die anleitung. ich scheitere daran die klasse herauszufinden. im garland ist das nach der standard-installation block-locale-0
wenn ich also
#block-locale-0 .item-list ul li {background-image: none;
list-style-image: none;
list-style-type: none;
display: inline;
margin: 0 12px 0 0;
}
eintrage tut sich nichts. auch ohne das .item-list ul li bin ich nicht erfolgreich. kann mir da jemand helfen?
Um die entsprechenden Klassen herauszufinden empfiehlt sich das Firefox Addon Firebug - dieses Erweiterung bietet dir die Möglichkeit Seitenelemente zu "untersuchen" und die entsprechenden Klassen herauszufinden..
https://addons.mozilla.org/de/firefox/addon/1843
danke für den hinweis.
am 08.01.2010 - 16:45 Uhr
danke für den hinweis. damit arbeite ich bereits. also über firebug bekommt man gesagt dass es im garland der bereich "block-locale-0" ist.
um zu testen ob die css klassen auch funzen habe ich folgendes eigegeben
ol li, ul li, ul.menu li, .item-list ul li, li.leaf {background-image: none;
list-style-image: none;
list-style-type: none;
display: inline;
margin: 0.15em 0 0.15em .5em; /* LTR */
}
ergebnis: die formatierungen sind wie gewünscht, aber natürlich für alle listen. der fehler liegt aber eindeutig in der falschen ID. etwas anderes als block-locale-0 ist über html nicht herauszufinden. das problem habe ich übrigens auch bei dem design der suchfunktion. also konkret gefragt: welche klasse ist es denn sowohl über die html anzeige der seite als auch über firefbug bekommt man eindeutig gesagt dass die klasse stimmen müsste. dankeschön
//edit bei mir ging dann:
#block-locale-0 li {background-image: none;
list-style-image: none;
list-style-type: none;
display: inline;
margin: 0 12px 0 0;
}