Überlappendes Bild in mehrere Layoutbereiche

**Luki** · 09.01.2016, 18:46

Hallo,

ich brauche Hilfe bei einem Problem, dass ich durch googlen nicht lösen konnte.

Ich habe eine Navigation, bestehend aus Punkten. In der Mitte möchte ich gerne ein Logo platzieren (Beispiel: https://blogtmssl-templatemonster.ne...iew.png?7a9951)
Außerdem muss nach den ersten drei Punkten ein Platz sein, damit das Logo nichts überdeckt.

Meine Fragen sind nun also:
Wie binde ich das logo mittig ein, sodass es andere Layoutbereiche überdeckt?
Wie kann ich nach den ersten drei Menüpunkten Platz dafür schaffen?

Ich würde mich über Hilfe freuen.

Gruß Luki

**Kermit** · 09.01.2016, 20:55

Hallo, ich denke du kannst den Abstand bzw. die Lücke per CSS lösen. Wenn du in der Seitenstruktur bei der CSS-Klasse etwas einträgst, dann wird das auch bei den Navigationen eingetragen. Dann kannst du den Abstand per CSS zu dem Standart verändern.

Mit dem Logo würde ich es mit Z-Index und Positionart relative versuchen.
Overflow müßte dann auf show gesetzt werden.
Gruß
Kermit

**Samuell** · 09.01.2016, 22:25

Alternativ kannst Du auch das Template erweitern und das Logo dort integrieren.

**Luki** · 10.01.2016, 11:04

Danke schonmal für die Antworten.

Wie genau integriere ich das Logo im Template, sodass es die Menübar nicht vergrößert?
Wenn ich es per height kleiner mache, ist das Logo abgeschnitten.
Ein weiteres Problem ist, dass es zwischen den Menüpunkten sein muss, ich es aber auch nur davor oder dahinter platzieren kann.

**tab** · 10.01.2016, 12:35

Gibt natürlich immer mehrere Ansätze, kommt auch drauf an, was genau jetzt eigentlich wichtig ist ... Muss das Logo immer nach der Hälfte der Menüpunkte kommen? Oder muss es nach einem bestimmten Menüpunkt kommen? Wie breit muss die Lücke sein? Automatisch so breit wie das Logo (+Abstand x links und rechts)?

In deinem Beispiel (Bild) ist es so gemacht, dass einer der Links eine bestimmte Klasse mitbekommt (midsection) und per CSS eine entsprechende margin-right für die Lücke verpasst bekommt.

HTML-Code:

<li>
  <a class="midesction" href="..."</a>
</li>

Code:

#nav li a.midsection {
    margin-right: 220px;
}

Das Logo selbst ist nicht innerhalb der Navigation angelegt, sondern wird einfach mit absoluter Positionierung an die gewünschte Stelle geschoben. In Contao könntest du wohl am einfachsten z.B. dem <li> des entsprechenden Menüpunkts diese Klasse mitgeben, indem du der entsprechenden Seite diese Klasse zuweist. So müsste in Templates gar nichts gemacht werden. Der Selektor müsste dann halt ensprechend abgeändert z.B. lauten

Code:

#nav li.midsection a

**Samuell** · 10.01.2016, 17:05

Eine mögliche Lösung wäre noch:
Seitenstruktur interner Link auf Startseite, dann schiebst Du diesen dahin wo Du ihn haben möchtest und gibst dem Link eine Klassen.

Im Template könntest Du nun via PHP sagen "wenn css-Klasse logo, bitte nur Bild statt Text anzeigen".

Das ließe sich sogar relativ leicht machen.