Navigationslisten ausrichtung

[dpascalm]

moin zusammen.

ich möchte meine navigationsleiste gerne direkt unter mein header bild machen ohne margin dafür zu benutzen. wenn ich auf ausrichtung gehe bewirkt das überhaupt nichts.

ich mal ein link zur seite http://http://neu.sack-gesichter.de/

[harley-rider]

Kontrolliere mal im Seitenlayout die Reihenfolge der Header Module

[dpascalm]

Habe ich und es kommt als erstes oben der Header in der Kopfzeile und dann kommt die Navigationsleiste darunter in der Kopfzeile.
Hat es vielleicht was mit der Layout Reihenfolge zu tun ?

[bizon]

Für das Ergebnis im Anhang habe ich nachfolgende Selektoren bearbeitet:

#wrapper {
    margin: 0 auto;
    max-width: 1920px;
    width: 100%;
}

#header {
    background-image: url("../../files/tiny_templates/Sack-Gesichter/Header/hp_cover.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    border-bottom: 1px solid #89ADAC;
    height: 238px;
    margin: 0;
    padding: 0;
    position: relative;
}

#container, .inside { }

#header .mod_navigation {
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: visible;
}

#header .mod_navigation .level_1 {
    margin: 0 auto;
    padding: 0;
    position: relative;
    background: none;
}

#header .mod_navigation ul {
    float: left;
    margin-bottom: 0;
    padding: 0;
    background: #111;
}

#header .mod_navigation li {
    display: block;
    float: left;
    list-style-type: none;
    margin: 0;
}

#header .mod_navigation a, 
#header .mod_navigation span {
    color: #FFFFFF;
    display: block;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    padding: 10px 20px;
    text-decoration: none;
}

[dpascalm]

erstmal danke für die starke coomunity..ehrlich.

ich habe es jetzt mal so geändert wie bei dir oben und soweit hat sich es auch verändert das unter dem header bild platz für die navigation ist aber die navigation is jetzt verschwunden.

#header .mod_navigation {
position: absolute;

der absolut wert stört. wenn ich auf relativ gehe wird die navigation wieder sichtbar aber leider oben am header und nicht drunter

[dpascalm]

wie es aussieht setzt er die navigationleiste über das bild statt drunter. weil wenn ich unter #header .mod_navigation bottom 0 wegnehme und stattdessen top 0 hin mache wird mir die navigationsleiste wieder angezeigt aber auch wieder oben am header(über dem bild)

[mlweb]

Dort wirst nicht drumherum kommen Dich mit css zu beschäftigen, wenn Du ein Theme selbst aufbauen oder anpassen willst.
Alternativ lass Dir das Theme aufbauen und kümmere Dich nur um die Inhalte.
Im Moment sieht mir das nach absolutem Stochern im Nebel aus. Das ist wirklich nicht zielführend.
Als Literatur kann ich da mal wieder Little Boxes von Peter Müller empfehlen.

[Andreas]

Mal die wichtigsten Grundsätze für absolute Positionierung:

<div class="outer">
  <div  class="inner" style="position:absolute;">
    Wirklich ganz viel Text.
  </div>
</div>

1. Angenommen der div.inner hat so viel Inhalt, dass seine Höhe z.B. 100px wäre. Wie hoch ist dann div.outer? Erst raten, dann unten nachschauen.

2. Ausrichtung woran? Ein absolut positioniertes Element mit einer Ausrichtung left|right|top|bottom sucht in seiner Ahnengalerie so lange, bis es jemanden gefunden hat, der NICHT static positioniert ist und richtet sich an ihm aus. Wandere also in deinem DOM ausgehend von deinem Element zu dem Eltern-Element, dessen Eltern-Element usw. solange bis du eins gefunden hast, welches nicht static positioniert ist. An diesem richtet es sich aus. static ist der Standard, also wenn keine position-Angabe gesetzt ist.

Willst du also ein Element abs. positionieren, musst du dir zuerst überlegen, an welchem Eltern-Element es sich orientieren soll. Diesem Element musst du dann mindestens position:relative; geben. Möchtest du dein Element z.B. an den Großeltern ausrichten, die Eltern haben aber bereits position:relative, dann musst du das entfernen, oder mit position:static; überschreiben.

3. Sind left|right|top|bottom nicht gesetzt, dann stehen sie auf auto und das Element versucht sich left und top an seinen direkten Eltern bzw. vorherigem Geschwister welche position static|relative haben, auszurichten.

4. Ein absolut positioniertes Element, auch ein Inline-Element, hat automatisch die Eigenschaft display:block.

5. Ein absolut positioniertes Element verliert die Eigenschaft von Blockelementen sich automatisch auf die zur Verfügung stehende Breite auszudehnen.

Antwort zu 1: div.outer hat eine Höhe von 0.

[mlweb]

Mal davon abgesehen. Ich hab zwar nicht bis ins Detail geschaut, aber ich glaube ich würde für die vom TO gewünschte Optik gar kein position:absolute verwenden. Verwende ich ohnehin nur sehr selten.