• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div-Container mit variablem Abstand links anordnen

  • Ersteller Ersteller Handarel
  • Erstellt am Erstellt am
H

Handarel

Guest
Hallo :-)
ich hab folgendes Problem:
ich möchte, dass ein Div-Container immer den gleichen Abstand zur linken Seite hat wie ein anderer (Bild ist dabei). Der Hauptcontainer (blau) ist allerdings mittig angeordnet und hat eine feste Breite (1440px). Wenn sich die Größe des Browserfernsters ändert, verändert sich auch der Abstand des Hauptcontainers zum Rand. Ich hab jetzt einen anderen Container (rot), der immer ganz links am Rand ist und in diesem einen weiteren Container (grün), der den gleichen Abstand nach links haben soll wie der Hauptcontainer.
Also wenn der blaue Container jetzt nach links einen Abstand von 200px hat, soll auch der grüne 200px Abstand haben. Hat der blaue Container 50px Abstand, soll es beim Grünen auch so sein. etc. Mit Prozentangaben funktioniert das aber nicht, hier hat der grüne Container immer den gleichen Abstand (wegen dem Roten wie ich annehme). Aktuell ist es auch so dass der blaue- und rote Container im HTML-Code nichts miteinander zu tun haben, und wenn möglich würde ich das auch gerne so lassen (Code-Beispiel ist dabei). Ich bekomme das aber leider nicht hin.

Anordnung der Div's in der HTML-Datei:
HTML: 
<body>
    <div id="rot">
        <div id="grün">
        </div>
    </div>
    <div id="blau">
    </div>
</body>

CSS-Datei:
Code: 
body {
    top: 0px;
    left: 0px;
    margin: 0px auto;
    width: 1440px;
    height: auto;
    background-color: #54534f;
}
#rot {
    position: absolute;
    top: 350px;
    left: 0px;
    padding: 5px 5px 5px 20px;
    width: 980px;
    height: 65px;
    background-color: #ff0000;
}
#grün {
    background-color: #4cff00;
    height: 20px;
    width: 100px;
}
#blau {
    position: absolute;
    top: 450px;
    margin: 0px auto;
    margin-bottom: 40px;
    padding: 20px;
    width: 1440px;
    height: 1000px;
    background-color: blue;
    border: 1px solid #808080;
}

Hier noch ein Bild:
probleme.JPG
 
Hallo,

ohne den Inhalt zu kennen ist dir nicht konkret zu helfen. Eventuell gibt es auch eine bessere Lösung als mit den drei Containern.

Ansonsten wirst du um eine Lösung mit Java-Script mit allen Nachteilen kaum herumkommen.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hmm... Ok, danke. Soll die Navigation beinhalten.
Ob es mit Containern realisiert wird oder anders ist mir relativ egal. Sollte aber ohne JavaScript klappen...

Ich bin jetzt auf eine Lösung gekommen die zwar "funktioniert", allerdings sind es dann noch mehr Container und der Code gefällt mir dann nicht mehr so:
Wenn ich einen Container erstelle der auch wie der Blaue mittig positioniert ist und auf der Höhe des Roten ist, passt die Position vom Inhalt/grüner Container. Mit einem weiteren Container "simuliere" ich dann die Verbindung zum Rand. Dieser hat dann eine feste Breite von z.B. 400px.
Klappt so zwar, gefällt mir aber wie gesagt vom Code her nicht... :confused:

LG
Handarel
 
Anders wird es auch nicht funktionieren.
Beispiel mit andere Maße.
Code: 
<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html {
background:#fff;
}

body {
margin:350px  0 0;
background-color: #54534f;
}

#rot {
width: 700px;
height: 65px;
background-color: #ff0000;
}

#gruen {
margin:-60px auto 0 auto;
width: 700px;background:#aaa;
}

#gruen span {
width:100px;
height:20px;
background:#4cff00;
display:block;
}

#blau {
margin: 70px auto 40px auto;
width: 700px;
height: 1000px;
background-color: blue;
border: 1px solid #808080;
}

</style>
</head>
<body>
  <div id="rot"></div>
  <div id="gruen"><span>was?</span></div>
  <div id="blau">Inhalt</div>

</body>
</html>

Aber, wass soll das überhaubt.
 
Zuletzt bearbeitet:
Der grüne Container soll lediglich den Inhalt simulieren und würde später ersetzt werden. Glaube das hatte ich vergessen zu verdeutlichen... ^^
Ich hatte mir überlegt, dass das vielleicht recht gut aussehen könnte, wenn es den gleichen Abstand/Positionierung hat wie der blaue Container. Naja, mach ich jetzt was anderes.
Trotzdem danke!

LG
Handarel
 
Handarel schrieb:
Der grüne Container soll lediglich den Inhalt simulieren und würde später ersetzt werden. Glaube das hatte ich vergessen zu verdeutlichen... ^^
Ich hatte mir überlegt, dass das vielleicht recht gut aussehen könnte, wenn es den gleichen Abstand/Positionierung hat wie der blaue Container. Naja, mach ich jetzt was anderes.
Trotzdem danke!

LG
Handarel
Zum Vergrößern anklicken....
Oh man, oh man!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben