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

Container Position fixen, aber an Bildschirm anpassen.

macfreakmac

Neues Mitglied
Hallo,

Ich habe einen Div Container, in dem mehrere kleine Container sind (Bilder, Text und ein Skript).

Wie kann ich die Position von dem Haupt Container so fixen, dass wenn ich die Breite de Browser Bildschirms verändere, der Haupt Container in der Mitte bleibt, aber die Objekte im Container so bleiben wie sie sind.

Danke :)
 
Zuletzt bearbeitet:
Werbung:
also ich meine, wenn ich den browser kleiner mache, soll der div container 'komplett' in der mitte bleiben.

PS: Beim Bild mit dem großen Browser soll der div container natürlich auch mittig sein
 

Anhänge

  • Bildschirmfoto 2014-04-24 um 12.46.05.png
    Bildschirmfoto 2014-04-24 um 12.46.05.png
    23 KB · Aufrufe: 8
  • Bildschirmfoto 2014-04-24 um 12.47.37.png
    Bildschirmfoto 2014-04-24 um 12.47.37.png
    23,1 KB · Aufrufe: 6
Werbung:
Code:
#container {
 width:80%;
margin:0 auto;
....
...
}

#col1 {
 width:30%;
 float:left;
...
...
}

#col2 {
 width:70%;
 float:left;
...
...
}

Du kannst auch mit Pixelangaben arbeiten, aber bitte kein Margin oder Padding auf die Selectorblöcke anwenden.
 
ok danke schon einmal für deine Mühen.
was meinst du mit col?
haha ja ich habe margin angewendet? inwiefern ist das ein problem?

unten mein code. das problem ist, dass sich das ganze komplett verschiebt, wenn ich die fenstergröße verändere.
danke

Code:
#divcontainerkomplett
{
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -150px;

#divlinks {
  position: fixed;
  top: -10%;
  left: 20%;
}

#divobenrechts {
  
position: fixed;
  top: 50%;
  left: 52%;
  margin-top: -150px;
  margin-left: -150px;
}
#divuntenrechts {
  
    position: fixed;
    top: 70%;
  left: 45%;
  margin-top: -150px;
  margin-left: -100px;
    }
 
ok danke schon einmal für deine Mühen.
was meinst du mit col?
haha ja ich habe margin angewendet? inwiefern ist das ein problem?

unten mein code. das problem ist, dass sich das ganze komplett verschiebt, wenn ich die fenstergröße verändere.
danke

Code:
#divcontainerkomplett
{
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -150px;

#divlinks {
  position: fixed;
  top: -10%;
  left: 20%;
}

#divobenrechts {
 
position: fixed;
  top: 50%;
  left: 52%;
  margin-top: -150px;
  margin-left: -150px;
}
#divuntenrechts {
 
    position: fixed;
    top: 70%;
  left: 45%;
  margin-top: -150px;
  margin-left: -100px;
    }

Mit position:fixed kannst du das gleich vergessen - dann gibt es garantiert keine Lösung für dein Problem.
Nimm statt dessen float. Fertig.
 
Werbung:
Also, absolute und fixe Positionierung sind totaler Misst. Das solltest du sein lassen. Warum nur?

Zu deiner Frage.
Zu den Breitenangaben werden Border ,Außen- und Innenabstände zuaddiert.

@Edit Gedankenübertragung?!

Hier mal nach deiner Grafik nachgebaut.
Code:
<!doctype html>
<html>
<head>
<title>test</title>
<style>
* {
 margin:0;
 padding:0;
}
#divcontainerkomplett {
 width: 300px;
 height: 180px;
 margin:0 auto;
 padding:1px 20px 20px 20px;
 background:#ddd;
}
   
#divlinks {
 width:100px;
 height: 180px;
 float:left;
 background:#aaa;
}
   
#divobenrechts {
 margin: 50px 0 20px 120px;
 height:55px;
 background:#aaa;
}

#divuntenrechts {
 margin-left:120px;
 height:55px;
 background:#aaa;
}
   
p {
 padding:5px;
}


</style>
</head>
<body>
<div id="divcontainerkomplett">
<div id="divlinks"><p>links</p></div>
<div id="divobenrechts"><p>obenrechts</p></div>
<div id="divuntenrechts"><p>untenrechts</p></div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Zurück
Oben