header img; css angleichen für Links --> hover

Hallo Leute,

es geht um http://www.imd-trading.de

- Wie bekomme Ich das Bild in meinem Modul "header" zentriert? div align center klappt nicht.

HTML-Code:

---

<img src="tl_files/IMD-Trading/IMD-Logo-Webseite.jpg" id="top_image" width="500" height="177" alt="IMD Trading" />

---

- Zweitens habe Ich der linken Navispalte und der Breadcrumb-Navigation in der englischen Version den css-Befehl hover gegeben. In der deutschen Version bekomme Ich das nicht hin. Was muss Ich denn da ändern?

Edit: Und was muss Ich in der css ändern, damit bei der Navigation links die fetten schwarzen Überpunkte wie "Das Unternehmen" nicht mehr als Links erscheinen, sondern nur Überschriften sind?

Wer erbarmt sich? ;)

Danke und Grüße aus Nürnberg
Nils

Hallo Nils.

Zitat:

---

Wie bekomme Ich das Bild in meinem Modul "header" zentriert?

---

Da Du das Bild absolut positionierst könnte folgende Anweisung helfen

Code:

---

#top_image {
  position: absolute;
  left: 260px;
  top: 13px;
}

---

Gesamtbreite(820px) - Navigation(200px) = 620px
620px - Bildbreite(500px) = 120px
die Hälfte von 120px = 60px
=> left: Breite Navigation + 60px = 260px

Zitat:

---

- Zweitens habe Ich der linken Navispalte und der Breadcrumb-Navigation in der englischen Version den css-Befehl hover gegeben. In der deutschen Version bekomme Ich das nicht hin.

---

Das kommt daher, dass Du in der englischen Version zuerst IMD_Trading.css und dann basic.css eingebunden hast. In der deutschen Version ist das umgekehrt. Da in IMD_Trading.css auch Links formatiert werden, wird die :hover-Anweisung wieder überschrieben.
Bei der Formatierung von Links ist eine vorgegebene Reihenfolge einzuhalten => SelfHTML
Ich würde Dir daher empfehlen alle Links in der Datei IMD_Trading.css zu stylen.

Zitat:

---

Und was muss Ich in der css ändern, damit bei der Navigation links die fetten schwarzen Überpunkte wie "Das Unternehmen" nicht mehr als Links erscheinen, sondern nur Überschriften sind?

---

Warum willst Du das machen? Die Links verweisen auf von Dir angelegte Seiten, die bereits jetzt auch schon Inhalte haben => Kontakt

Wenn das Layout so bleiben soll (die linke Spalte geht bis ganz nach oben), dann empfehle ich dir, alle absoluten Positionierungen zu entfernen. Dann im Layout den Header zu entfernen und nur mit linker Spalte und Hauptspalte zu arbeiten. Dann hast du es sauber, brauchst keine Tricksereien und kannst das Bild z.B. mit display:block und margin:0 auto; horizontal zentrieren.

Den Sprachwechsler und die Navigation packst du dann nach links, das Bild und die Breadcrumb in die Hauptspalte.

Grüße

@Karl: Vielen Dank, du hast mir schon mal sehr weitergeholfen.

Zitat:

---

Da Du das Bild absolut positionierst könnte folgende Anweisung helfen

Code:

---

#top_image {
  position: absolute;
  left: 260px;
  top: 13px;
}

---

Gesamtbreite(820px) - Navigation(200px) = 620px
620px - Bildbreite(500px) = 120px
die Hälfte von 120px = 60px
=> left: Breite Navigation + 60px = 260px

---

Danke, hat funktioniert!

Zitat:

---

Das kommt daher, dass Du in der englischen Version zuerst IMD_Trading.css und dann basic.css eingebunden hast. In der deutschen Version ist das umgekehrt. Da in IMD_Trading.css auch Links formatiert werden, wird die :hover-Anweisung wieder überschrieben.
Bei der Formatierung von Links ist eine vorgegebene Reihenfolge einzuhalten => SelfHTML
Ich würde Dir daher empfehlen alle Links in der Datei IMD_Trading.css zu stylen.

---

Das check Ich nicht wirklich. Wenn Ich die hover-Anweisungen in die IMD_Trading.css verschiebe und diese bei beiden Layouts als erstes einbinde, funktioniert es trotzdem nicht. Ich habe jetzt einfach IMD_Trading.css als erstes bei beiden Layouts eingebunden.

Zitat:

---

Warum willst Du das machen? Die Links verweisen auf von Dir angelegte Seiten, die bereits jetzt auch schon Inhalte haben => Kontakt

---

Weil Ich die Punkte "Startseite", "Das Unternehmen", "Produktion / Herstellung" etc. gerne nur als Überschrift hätte, da Ich sonst ja dort auch überall eine Seite mit Inhalt füllen müsste.

@Andreas: Vielen Dank für deine Information. Ich werde dies bei der künftigen Bearbeitung ändern.

Edit: Eine Frage habe Ich noch bezüglich der News: Wenn Ich auf http://www.imd-trading.de/index.php/Neuigkeiten.html klicke, werden die News aus der deutschen und englischen Version angezeigt (ebenfalls dasselbe in der englischen Version). Hier hänge Ich ebenfalls seit geraumer Zeit fest und finde den Fehler leider nicht.

Für die Newsliste brauchst du 2 verschiedene Module, eins welches die deutschen und eins welches die englischen zeigt. [newslanguage] könnte dir helfen. [i18nl10n] könnte dir auch dabei helfen deine Mehrsprachigkeit zu managen.

Die Flags sind im Firefox nicht klickbar, weil das absolut positionierte Menü darüber hängt. Versuch mal meine Lösung ohne die Positionierung, die ist wirklich einfach. Positionierungen sollte man im Allgemeinen nur dann anwenden, wenn das gewünschte Ergebnis anders nicht zu erzielen ist. Block-Elemente wie z.B. DIVs verlieren durch die Positionierung die Eigenschaft sich über den ihnen zur Verfügung stehenden Raum in die Breite auszudehnen.

Wenn du diese erste Ebene im Menü als Überschriften haben möchtest, müsstest du das Template verändern, was eventuell nicht so einfach ist. Du kannst aber auch das Template so lassen und die erste Ebene anders formatieren cursor:default; oder auto. Standard für Links ist cursor:pointer. Dann text-decoration:none usw.

Im BE kannst du diese Seiten dann als interne Weiterleitungen einrichten. Eine Zielseite brauchst du dabei nicht anzugeben, es wird dann die erste Unterseite genommen. Damit wäre die erste Ebene immer noch anklickbar, aber das Ziel ist dann eben die erste Unterseite. Das wäre auch für Suchmaschinen besser, da du ansonsten Seiten ohne Inhalte hast.

Das mit dem hover scheinst du jetzt ja gelöst zu haben. Was Karl dir gesagt hat ist folgendes:

Code:

---

p {
  color: red;
}
p {
  color: green;
}

---

Obiges gibt grünen Text, weil das was zuletzt kommt vorheriges überschreibt. Und bei den Pseudoklassen :visited, :focus, :hover, :active kann es passieren, dass du keinen Hover-Effekt hast, wenn du die falsche Reihenfolge hast

Grüße.

Zitat:

---

Zitat von Andreas

Wenn das Layout so bleiben soll (die linke Spalte geht bis ganz nach oben), dann empfehle ich dir, alle absoluten Positionierungen zu entfernen. Dann im Layout den Header zu entfernen und nur mit linker Spalte und Hauptspalte zu arbeiten. Dann hast du es sauber, brauchst keine Tricksereien und kannst das Bild z.B. mit display:block und margin:0 auto; horizontal zentrieren.

Den Sprachwechsler und die Navigation packst du dann nach links, das Bild und die Breadcrumb in die Hauptspalte.

Grüße

---

Wenn Ich das jetzt richtig verstanden habe, lösche Ich bei allen css Formatdefinitionen, bei denen "position:absolute" steht, überall nur das "position:absolute" raus?

Nicht so ganz.
Ich denke, Andreas meint, dass Du zunächst im BE bei dem Seitenlayout den Haken bei Kopfzeile einfügen entfernst. Du bekommst so ein zweispaltiges Layout ohne Header.
Bei Eingebundene Module fügst Du zuerst den Sprachwechsler und dann die Navigation in die linke Spalte ein, die sich nun einfach über margin/padding positionieren lassen.

Für Dein top_image bietet es sich nun an, ein Modul Eigener HTML-Code anzulegen und als erstes Modul in der Hauptspalte einzufügen. Darunter dann Breadcrumb und Artikel.

Dein Header-Bild kannst Du dann mit margin: ?px auto zentrieren.

Ja, genau so wie Karl sagt.

Und ja, du enfernst das position:absolute;. Zusätzlich kannst du dann auch das dazugehörige left und top rausschmeißen. Die Navigation braucht auch keine Breite mehr, da sie ja in der linken Spalte sitzt. Und das Bild braucht auch kein float:right mehr. Schau dir die Werte am besten mit Firebug an. Du kannst dort mit einem Klick zum Testen temporär die Eigenschaften deaktivieren.

Wenn du nicht 100% fit in HTML bist, brauchst du auch kein HTML-Modul für das Bild und andere seitenweite Elemente. Mach das Bild einfach als Inhaltselement in einem Artikel auf einer nicht veröffentlichen Seite (ich nenne die immer Ressourcen). Und in ein HTML-Modul schreibst du dann nur noch {{insert_content::27}}, also die ID von dem Element nehmen. Mit {{insert_article::12}} kannst du auch ganze Artikel einbinden. Das Verfahren ist prima, weil du nachher die Schuld auf Contao schieben kannst, wenn was am Code nicht stimmt ;-).

Grundsätzlich kannst du immer sagen "je weniger, je einfacher umso besser". Und so viel wie geht Contao generieren lassen und möglichst keine Templates ändern.

Grüße

Zitat:

---

Zitat von Andreas

Du kannst dort mit einem Klick zum Testen temporär die Eigenschaften deaktivieren.

---

Ein weiteres ungemein nützliches Tool für den Firefox ist die Web Developer browser extension von Chris Pederick. Unter dem Menüpunkt Keine CSS-Fehler findest Du den Punkt CSS bearbeiten. In dem sich darufhin öffnenden Fenster kannst Du die verschieden css-Dateien direkt bearbeiten und live die Auswirkung der gemachten Änderung im Browser mitverfolgen.

Der Vorteil gegenüber Firebug ist, dass sich hier auch neue Selektoren festlegen lassen. Mit Firebug finde ich das umständlicher. Dies bewirkt natürlich keine Änderung der Dateien auf dem Server.

Zitat:

---

Zitat von Andreas

Mach das Bild einfach als Inhaltselement in einem Artikel auf einer nicht veröffentlichen Seite ...

---

Bei diesem Vorgehen muss dies dann aber auf jeder Seite als erstes Inhaltselement eingefügt werden, sonst wird nichts angezeigt.

Zitat:

---

Zitat von kos

Bei diesem Vorgehen muss dies dann aber auf jeder Seite als erstes Inhaltselement eingefügt werden, sonst wird nichts angezeigt.

---

Nein, das Modul mit dem Inserttag einfach im Layout einbinden. Genauso wie vorher das Modul mit dem eigenen HTML auch, nur das jetzt einzig der Inserttag darin steht, d.h. man kann keine HTML-Fehler produzieren. ;-)

Für den Header und den Footer nutze ich das regelmäßig.

Dazu gab's auch mal zwei Blogs, aber ich denke es ist so einfach, dass meine Erklärung reichen müsste.

http://www.contao.org/blog-leser/ite...nterlegen.html
http://www.contao.org/blog-leser/ite...-pflegbar.html

ps Neue Selektoren mit dem Firebug finde ich nicht so umständlich. Ich hab zwar auch den Developer, aber den nutze ich für andere Sachen.

Grüße

Zitat:

---

Zitat von Andreas

Nein, das Modul mit dem Inserttag einfach im Layout einbinden. Genauso wie vorher das Modul mit dem eigenen HTML auch ...

---

Hallo Andreas,

das Du das Inserttag in einem Modul verwendst habe ich glatt irgendwie überlesen.:rolleyes:

Ich habe jetzt versucht alles umzusetzen und Ich denke, es hat auch das meiste so geklappt wie es sollte.

Probleme habe Ich allerdings noch mit der Positionierung des Sprachenwechslers. Diesen hätte Ich gerne linksbündig und ein kleines Stück weiter oben. Da scheint die Positionierung über Margin nicht zu funktionieren.

Als nächstes würde Ich dann gerne die Navigation ein Stück nach oben ziehen, damit quasi die obere Rahmenlinie mit der Pfeilspitze des Logos abschließt. Ich vermute mal, dass das funktionieren würde, wenn Ich den Sprachenwechsler weiter oben positionieren könnte.

Auf jeden Fall vielen vielen Dank an euch beide! Falls ihr in Fürth/Nürnberg seid geht das Mittagessen auf mich!

Grüße aus Nürnberg
Nils

Einige Margins sind dafür verantwortlich. Untersuche die Elemente einfach mit Firebug, er zeigt dir die Margins und Paddings farblich an. Es ist kein Problem alles so einzurichten wie du es möchtest.

Grüße

Ach, ich seh grad noch - wenn du nur die erste Ebene des Menüs anders formatieren möchtest, dann kannst du diese beiden Selektor benutzen. (einfach mit einem Komma trennen)

.mod_navigation > ul > li a,
.mod_navigation > ul > li span

Das Zeichen ">" ist ein "Kind-Selektor" es bedeutet, dass alle Kinder aber keine Enkelkinder formatiert werden. In diesem Fall ist UL das Kind von .mod_navigation und von diesem UL dann die Kinder LI. Davon dann die As und SPANs.

Hier erklärt Formate für verschachtelte HTML-Elemente

Grüße