Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Benutzerhandbuch › Fortgeschrittene › Tutorials & How To's - Tipps & Tricks › i18n Language Switcher Block, die Links mit den Flaggen themen ›

Die Flaggen formatieren

Eingetragen von quiptime (4972) am 08.11.2007 - 02:41 Uhr in
  • Drupal 5.x

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.

‹ i18n Language Switcher Block, die Links mit den Flaggen themen nach oben ui.slider als Ersatz für den Ajax-Pager von Views ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

danke für die anleitung.

Eingetragen von susi_333 (105)
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?

weshalb bin ich hier? weil ich keine domain/website habe

  • Anmelden oder Registrieren um Kommentare zu schreiben

susi_333 schrieb danke für

Eingetragen von SteffenR@drupal.org (2260)
am 04.11.2009 - 14:36 Uhr
susi_333 schrieb

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

http://www.twitter.com/_steffenr
Drupal-Initiative e.V.

undpaul

  • Anmelden oder Registrieren um Kommentare zu schreiben

danke für den hinweis.

Eingetragen von susi_333 (105)
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;
}

weshalb bin ich hier? weil ich keine domain/website habe

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Wer ist online Block
  • Doppelte Anzeige von Node im View
  • Content Ex-/Import
  • URL-Alias von bestehendem Link wird gelöscht und auf -0 gesetzt 404 Fehler entsteht
  • Ausblenden von Taxonomy wenn diese keinen Inhalt haben
  • Image als Anhang
  • [gelöst] Benutzer erstellen ohne Berechtigung zum ändern von E-Mail oder Passwort
  • HTTP ERROR 500, wenn der Node eines bestimmten Typs gespeichert wird oder ein neuer Inhalt dieses Typs erzeugt werden soll
  • Module modifizieren zb Statuses
  • Exposed Filter einer View in seperatem Block darstellen, wie kann ich die exposed Filter der zug. View deaktivieren
  • Website ohne öffentlichen Zugriff
  • »Geschwister« Nodes anzeigen
Weiter

Neue Kommentare

  • dinmikkith schrieb Ja du hast
    vor 2 Tagen 41 Minuten
  • SaarlandToday schrieb Es gibt
    vor 2 Tagen 8 Stunden
  • ich hab das Problem gefunden!
    vor 2 Tagen 9 Stunden
  • Sorry, das mit dem Theme war
    vor 2 Tagen 9 Stunden
  • Zitat: Es gibt in den
    vor 2 Tagen 10 Stunden
  • Es gibt in dem Template das
    vor 2 Tagen 20 Stunden
  • Zitat: da es dort eine
    vor 2 Tagen 21 Stunden
  • Sorry, dachte das ich das
    vor 2 Tagen 23 Stunden
  • Ich habe den Fehler gemacht
    vor 3 Tagen 45 Minuten
  • Kein zusätzliches Modul nötig
    vor 3 Tagen 1 Stunde

Statistik

Beiträge im Forum: 245939
Registrierte User: 18824

Neue User:

  • Damian1802
  • MrWebMV
  • kiba

» Alle User anzeigen

User nach Punkten sortiert:
wla9007
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3916
ronald3829
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 5 Gäste online.

DrupalCenter durchsuchen:

Benutzerhandbuch

  • FAQ - Häufig gestellte Fragen.
  • Links & Downloads
  • Über Drupalcenter.de und das deutschsprachige Benutzerhandbuch
  • Über Drupal
  • Einsteiger
  • Fortgeschrittene
    • Best Practice - Drupal Sites - Guidelines
    • Die beliebtesten Themes und Module
    • Tutorials & How To's - Tipps & Tricks
      • Kurztipps - Dinge die Stunden sparen können.
      • Notfallpläne - Tipps die Deine Drupalinstallation retten können
      • Anleitung zur Erstellung eines einfachen Kontaktformulars
      • Arbeiten mit dem Drupal Taxonomie-System [beinhaltet veraltete Inhalte]
      • Bearbeiten-Tab zu jeden Block hinzufügen
      • Block View mit Argument
      • Das Tagebuch einer Site
      • Drupal 6 - Automatisch unterschiedliche Bildgröße bei Teaser und Artikel
      • Drupal 6 - Eigene CSS Datei in ein Theme integrieren
      • Drupal 6 - Einfache Bildergalerie mit Image und Lightbox2
      • Drupal 6 - Einrichten eines Kalenders
      • Drupal 6 - Google Adsense ohne Zusatzmodul einbinden
      • Drupal 6 - Hauptnavigation mit DropDown Effekt ab Ebene Zwei
      • Drupal 6 - ImageMagick mit XAMPP Lite nutzen
      • Drupal 6 - Imagefield mit Imagecache und Colorbox
      • Drupal 6 - Installation FCK Editor
      • Drupal 6 - Installieren der WYSIWYG API inkl. Editoren
      • Drupal 7: mehrere Bilder in Node: 1 Bild in Anrisstext
      • Drupal Code Highlighting in Redmine Projektarchiv (CodeRay)
      • Drupal Theming: JavaScript einhängen in Abhängigkeit von Page-Variablen
      • Drush - Das Schweizermesser für Drupal auf Kommandozeile
      • Einfaches und erfolgreiches Patchen unter Windows
      • Eingabeformat & Inputfilter
      • Einrichten eines einfachen, statischen Menüsystems
      • Erstellen von Patches
      • Gallery mit CCK und Views erstellen (Drupal 5)
      • Header image Modul einrichten
      • Inhaltsübersicht für einen User mit einem View erstellen
      • Javascript und CSS-Dateien einbinden
      • Kontaktformular mit Jquery aufwerten
      • Leitfaden zur Erstellung von Suchmaschinenoptimierten Drupal-Sites
      • Mac OSX - Backupskript für Websites auf MAMP
      • Module updaten via Shell auf Windows
      • Module übersetzen
      • Perl-Script zum Erzeugen einer statischen Kopie einer Drupal-Website
      • Portierung eine Themes von openwebdesign.org
      • Prozentbalken bei Views (Balkendiagramm)
      • Themen eines Node-Formulars
      • Titel mit Stil
      • Umkreissuche mit Location- und Views-Modul
      • Usergalerie mit ImageCache, CCK, Views + Thickbox
      • Userprofil mit Usernodes erstellen
      • Validierung von Usereingaben bei Nodes
      • Variation vom Showroom auf drupalcenter.de
      • View mit Eingabeformular für neue Beiträge
      • WebSVN mit Drupal Code Highlighting
      • Zusätzliche Submit-Schaltfläche in Node-Formularen
      • i18n Language Switcher Block, die Links mit den Flaggen themen
        • Die Flaggen formatieren
      • ui.slider als Ersatz für den Ajax-Pager von Views
      • Zugriffsbeschränkungen für Nodes - eine Übersicht der Möglichkeiten
  • Entwicklung von Modulen und Themes
  • Drupalcenters Community
  • Drupal 7 Video-Trainings (Deutsch)
  • Drupal-Testumgebung erstellen
  • Drupal 6 Module
  • Drupal 7 Module
  • Drupal Screencasts auf deutsch
  • Archiv

Das Copyright des deutschsprachigen Drupal-Benutzerhandbuches unterliegt den jeweiligen Autoren. Übersetzungen des englischsprachigen Drupal-Benutzerhandbuches unterliegen der Creative Commons License, Attribution-ShareAlike 2.0.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association