Einfache Frage zur Positionierung der Flaggen

[Santa Sphinx]

Hallo,

möchte die Flaggen vonhttp://www.imd-trading.de/index.php gerne linksbündig mit der Na vigatin haben. Komme mit Firebug nicht genau dahinter welche Formatierung Ich genau wählen muss.

Danke.

[schman]

.mod_changelanguage ul {
  margin: 0 5px;
  padding: 0;
}

[Santa Sphinx]

super, vielen Dank!

[Santa Sphinx]

Hi Leute,

wenn Ich auf www.imd-trading.de zwischen den beiden Sprachen wechsle, verschiebt sich die Navigation um ein winziges Stück. Zudem wird bei Firefox der Abstand zwischen den Flaggen nicht angezeigt. Das hier sind meine CSS:

.mod_changelanguage .lang-de 
{
    background-image: url("../../tl_files/Flaggen/de.gif");
    display: block;
    float: left;
    height: 11px;
    margin-right:5px;
    list-style-type: none;
    width: 16px;
}

.mod_changelanguage .lang-en 
{
    background-image: url("../../tl_files/Flaggen/us.gif");
    display: block;
    float: left;
    height: 11px;
    list-style-type: none;
    width: 16px;
}

.mod_changelanguage a, .mod_changelanguage span 
{
    text-indent: -9999em;
}

Was ist denn falsch?

[Santa Sphinx]

Ok, habe es doch gelöst bekommen, indem Ich bei Position noch die Nullen angegeben hab

BTW: Wie Ich die Flaggen linksbündig mit der Navigation bekomme würd mich noch interessieren, ebenfalls wie man die Flaggen ein Stück nach oben setzen kann.

[schman]

.mod_changelanguage .level_1 {
  margin: 0 15px;
}

[Santa Sphinx]

Danke, wird aber nicht angenommen! Noch eine Idee jemand?

[Messa]

.mod_changelanguage  {
    margin: 0;
    margin-left: -25px;
}

Ist nicht die schönste Lösung.
Habe keine Zeit um den ganzen Code zu betrachen.
Vielleicht ist irdenwo ein Wert drinnen der deine Falgen verschiebt.
Padding, etc.

lg Matthias

[bizon]

So Klappt's

.mod_changelanguage ul {
    margin-left: 15px;
    padding: 0;
}

[Santa Sphinx]

Hmm, auch das klappt nicht. Da muss also doch irgendwo was drin sein, was diese Werte überschreibt?

[schman]

Wo fügst du die Werte ein? Kann es sein das dir hier irgendwo der Cache in die Quere kommt?
Laut Firebug funktioniert das nämlich

[Santa Sphinx]

Ich hab die Werte in eigener Code eingefügt, hab es aber immer auch direkt im Menü (Abstand und Ausrichtung) probiert.

Caching habe Ich jetzt mal ausgestellt, hilft nix, egal ob Ich das in Opera oder Firefox betrachte.

So sieht das jetzt in Contao aus:

Changelanguage.jpg

[bizon]

Der Code aus meinem Post oben, gehört ins CSS.

Du kannst auch den ersten Eintrag aus deinem Screenshot um

padding:0;

ergänzen, dann klappt es auch.

[bizon]

Kann es sein, dass deine CSS-Datei IMD_Trading im Seitenlayout nicht eingebunden ist?

[Santa Sphinx]

habe jetzt den ersten Eintrag um padding:0; ergänzt und jetzt geht es. Vllt lag es wirklich am Caching?

Jedenfalls Danke!!!

[bizon]

Wie deine Seite zeigt, klappt es doch noch nicht , oder?
Soll es nicht so aussehen, wie auf beil. Screenshot?

[Santa Sphinx]

Ja, es soll so wie auf deinem Screenshot aussehen. Aktuell sieht es bei mir aus aus, dass es meistens geht, bei einigen Seiten dann aber nicht?!

[bizon]

Zuerst ändere mal den ersten Selektor in deinem CSS

.mod_changelanguage .level_1

in

.mod_changelanguage ul


Dann mach bitte mal einen Screenshot von deinem Seitenlayout und zwar die Stelle mit den eingebundenen Stylesheets.

[Santa Sphinx]

Selektor geändert, hier der Screenshot:

Shot.jpg

[bizon]

Ändere die Reihenfolge so:

basic
IMD-Trading
print

Das print.css darf nur für media=print aktiviert sein.

[Santa Sphinx]

Danke, scheint zu funktionieren.

Jetzt hab Ich allerdings das Problem, dass die Links nicht mehr gehovert werden. Soll Ich die CSS dafür in die basic CSS einbauen?

[bizon]

Nein, nichts in der basic.css ändern. Basic enthält, wie der Name sagt, einige Basis-Einstellungen, die in den nachfolgenden CSS-Dateien angepasst und dadurch überschrieben werden. Deshalb auch die bestimmte Reihenfolge. Alle CSS Anpassungen für dein Layout also in der IMD_Trading.css machen.

Zunächst mach noch eine Systemwartung und bereinige vor allem die CSS-Dateien.

[Santa Sphinx]

Ok, danke, gut zu wissen.

Habe die CSS Dateien bereinigt. Und gleichzeitig mal alle CSS-Dateien gelöscht, die Ich noch aus der Music Academy übernommen hatte.

Frage: Kann Pagination und Listing auch weg?

Außerdem wird der Mauszeiger in Firefox nicht mehr zur Hand wenn man über die Navigation fährt. Warum?

Edit:

Das Hovern geht auch nur bei den Breaking News, es fehlt in der Navigation und im Breadcrumb Menü. Eingebunden ist es einmal in der basic.css und einmal abgeändert in der IMD_Trading.css

Hat sich erledigt, das habe Ich rausbekommen.

Das mit dem Mauszeiger würd mich aber noch interessieren und ob Ich das Pagination und Listing auch rausschmeißen kann.

[bizon]

So wie es jetzt aussieht, ist in den CSS Dateien ein richtiges Chaos. Ich vermute, dass du mehrere Seitenlayouts mit unterschiedlich eingebundenen CSS-Dateien verwendest und dabei etwas die Übersicht verloren hast. Das erklärt auch, dass manche CSS Änderungen (s.o.) nicht wirksam wurden. Je nachdem auf welcher Seite und damit eingebundenem CSS du warst, hat es funktioniert oder eben nicht.

Gehe von der Startseite aus, die scheint das richtige Layout mit den richtigen CSS-Dateien zu haben.
Das Seitenlayout muss man eigentlich nur dem Startpunkt einer Webseite zuweisen, alle Seiten darunter erben diese Einstellung. Ich würde also in den untergeordneten Seiten die Zweit-Seitenlayouts herausnehmen.

In der jetzigen Einstellung des CSS hat die Navigation kein :hover. Dieser Code repariert das:

.mod_navigation a:hover {
    color: #...;
    cursor: pointer;
}

Analog dazu kannst du auch die Breadcrumb-Navi reparieren.

.modbreadcrumb a:hover {...}

Zu Pagination, Listing etc. musst du selbst wissen, ob du das brauchst.

[bizon]

Guten Morgen,

ich habe gesehen, dass jetzt alles funktioniert, Glückwunsch!

Eine Kleinigkeit noch, im Firefox fehlt der rechte Scrollbalken auf Seiten mit wenig Inhalt, bei langen Seiten wird der Scrollbalken eingeschaltet. Das sorgt für ein "Verspringen" der Seiten.

Mit folgendem CSS Code, den du bei body{...} einfügen kannst, wird der Scrollbalken dauerhaft eingeschaltet

overflow-y: scroll;

[Santa Sphinx]

Hi bizon,

jetzt ist zwar schon etwas viel Zeit vergangen, aber es ging bei mir in den letzten Wochen drunter und drüber und inzwischen bin Ich in China gelandet, jedenfalls wollt Ich mich noch bedanken für deine Hilfe. Hat mich sehr viel weiter gebracht!

Das mit der dauerhaften Einschaltung des Scrollbalkens habe Ich zwar nicht hinbekommen, werde Ich aber noch mal versuchen.

LG aus China
Nils

[bizon]

Hallo Nils,

Hier ist die komplette CSS-Anweisung für den Scrollbalken:

body {overflow-y:scroll;}

Viel Erfolg in China und danke für die Blumen.

[Santa Sphinx]

Eigentlich gibt's bei

body {overflow-y:scroll;}

nicht viel falsch zu machen. Habe es so in eine neue CSS Datei eingegeben, der Scrollbalken erscheint trotzdem nicht dauerhaft.

[bizon]

Ich verstehe nicht, was du meinst, denn die Sroll-Leiste wird jetzt doch dauerhaft im Firefox angezeigt und die Seitendarstellung verspringt nicht mehr. Die Leiste ist natürlich leer (ohne Schieber), wenn der Inhalt der Seite kurz ist. Der Scrollbalken erscheint erst, wenn der Seiteninhalt länger ist als die Bildschirmhöhe.

Verändere doch die Höhe deines Browserfensters, dann kannst du es sehen.

[Santa Sphinx]

Verdammt, mein Fehler. Muss leider mit nem Netbook arbeiten und da kann Ich das nicht kontrollieren. Habe das nen Kumpel machen lassen, aber der hat wohl nicht ganz kapiert, was Ich meine.

Habe es jetzt doch auf nem anderen PC kontrollieren können und mit FF, IE und Opera geht es.

Danke.

[pmmueller]

html { overflow-y: scroll; } ist noch einen Tick besser als body, denn mit body erscheint in älteren Internet Explorern eine zweite vertikale Scrollbar am linken Fensterrand.