Div immer mittig ausrichten

[Amin]

Hallo,
würde gerne eine Seite aufbauen die sich so verhält wie diese hier:
http://www.cssplay.co.uk/layouts/bodyfix.html

Allerdings wäre es mir wichtig das beim Verkleinern des Browsers, von rechts nach links, das Div stehen bleibt sobald es den Browserrand erreicht.

Habe jetzt schon stundenlang probiert und bekomme es einfach nicht hin!

So wie im folgendem Beispiel würde es funktionieren:

  
#head {  
background-image: url(Bilder/yun_2172.jpg);  
margin:0 auto;  
position:relative;  
width:800px;  
height:148px;  
top:50px;  
}  

Nur funktioniert dass leider nicht wenn ich den scroll Bereich einbinde:

  
#content {  
border-left:1px solid #000000;  
border-right:1px solid #000000;  
border-bottom:1px solid #000000;  
margin:0 auto;  
display:block;  
overflow:auto;  
position:absolute;  
top:225px;  
bottom:100px;  
width:800px;  
}  

Es hat aufjedenfall etwas mit der "position" zu tun.
Sobald ich die Position von absolute auf relativ ändere ist der scroll Bereich mittig. Blöder weise funktioniert es mit dem scrollen dann nicht mehr.

Ich hoffe ich konnte mein Problem halbwegs gut schildern.

Über Hilfe würde ich mich sehr freuen.

Vielen Dank.

[Gawin]

Mach dir einfach nochn scrollDiv im contentDiv so kannste content auf relative setzten und im scrollDiv dann absolute und overflow:auto

[Amin]

Mach dir einfach nochn scrollDiv im contentDiv so kannste content auf relative setzten und im scrollDiv dann absolute und overflow:auto

dass hatte ich auch schon versucht. Aber der contentDiv Bereich soll sich doch auch dynamisch verkleinern und vergrößern können.

Vielleicht mal anders gefragt: Wie bekomme ich diese Seite dazu am Browserrand stehen zu bleiben wenn ich den Browser von rechts nach links verkleinere?
http://www.cssplay.co.uk/layouts/bodyfix.html

Danke!

[apsel]

Om nah hoo pez nyeetz, Amin!

Vielleicht mal anders gefragt: Wie bekomme ich diese Seite dazu am Browserrand stehen zu bleiben wenn ich den Browser von rechts nach links verkleinere?

So dass man das Fenster nicht mehr kleiner machen kann? - Garnicht.

Matthias

[Amin]

So dass man das Fenster nicht mehr kleiner machen kann? - Garnicht.

Matthias

nein nein, der Browserfenster soll schon verkleinert werden können. Nur sollen die Divs sobald sie den Browserrand erreichen stehen bleiben.

[dave]

Hi,

meinst du in etwa so?

~dave

[Amin]

Hi,

meinst du in etwa so?

~dave

nicht ganz, denn da fehlt leider das overflow!

[Gernot Back]

Hallo Amin,

Vielleicht mal anders gefragt: Wie bekomme ich diese Seite dazu am Browserrand stehen zu bleiben wenn ich den Browser von rechts nach links verkleinere?
http://www.cssplay.co.uk/layouts/bodyfix.html

... indem du das position:absolute entsorgst und statt mit left, top und bottom beim margin-left und margin-right mit dem Wert auto operierst.

Gruß Gernot

[Amin]

Hallo Amin,

Vielleicht mal anders gefragt: Wie bekomme ich diese Seite dazu am Browserrand stehen zu bleiben wenn ich den Browser von rechts nach links verkleinere?
http://www.cssplay.co.uk/layouts/bodyfix.html
... indem du das position:absolute entsorgst und statt mit left, top und bottom beim margin-left und margin-right mit dem Wert auto operierst.

Gruß Gernot

Hi Gernot,
hab ich jetzt mal ausprobiert:

  
#head {  
background-image: url(Bilder/yun_2172.jpg);  
margin: 50px auto 0;  
width: 800px;  
height: 148px;  
}  
#content {  
border:1px solid #000000;  
border-top: none;  
margin-right:auto;  
margin-left:auto;  
margin-bottom:auto;  
display:block;  
overflow:auto;  
top:225px;  
width:800px;  
}  

  
<div id="head">asdf</div>  
<div id="content">a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a  
</div>  

Leider klappt dass jetzt mit dem overflow nicht mehr.

[Gernot Back]

Hallo Amin,

Leider klappt dass jetzt mit dem overflow nicht mehr.

nein klar, dafür müsstest du dem Content-Element onload und onresize des Fensters  über JavaScript eine Höhe in Pixeln zuweisen.

Gruß Gernot

[Amin]

Hallo Amin,

Leider klappt dass jetzt mit dem overflow nicht mehr.

nein klar, dafür müsstest du dem Content-Element onload und onresize des Fensters  über JavaScript eine Höhe in Pixeln zuweisen.

Gruß Gernot

nagut,
schade, dass ich eine Nummer zu groß für mich:-)
dachte dass ließe sich vielleicht mit css lösen...

Die Seite soll ja genauso aufgebaut sein wie hier
Nur soll beim verkleinern der Seite von rechts nach links der Bereich stehen bleiben sobald es den linken Broserrand erreicht...

[apsel]

Om nah hoo pez nyeetz, Amin!

Es hat aufjedenfall etwas mit der "position" zu tun. Sobald ich die Position von absolute auf relativ ändere ist der scroll Bereich mittig. Blöder weise funktioniert es mit dem scrollen dann nicht mehr.

Da wir den Aufbau deines Dokuments nicht kennen, wissen wir auch nicht, was das position bewirkt, bzw. beweirken soll.

Vielleicht hilft dieser Artikel im neuen Wiki. Matthias

[Amin]

Da wir den Aufbau deines Dokuments nicht kennen, wissen wir auch nicht, was das position bewirkt, bzw. beweirken soll.

Der Aufbau ist ziemlich ist momentan ziemlich klein gehalten:

  
#head {  
background-image: url(Bilder/yun_2172.jpg);  
margin:0 auto;  
position:relative;  
width:800px;  
height:148px;  
top:50px;  
}  
#content {  
border-left:1px solid #000000;  
border-right:1px solid #000000;  
border-bottom:1px solid #000000;  
margin:0 auto;  
display:block;  
overflow:auto;  
position:absolute;  
top:225px;  
bottom:100px;  
width:800px;  
}  
  

  
<div id="head">asdf</div>  
<div id="content">a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
a  
</div>  
  
  
Dass wars schon!Jetzt soll der content Bereich quasi unter dem Head Bereich uns sich genauso verhalten.  

[apsel]

Om nah hoo pez nyeetz, Amin!

#head {
   background-image: url(Bilder/yun_2172.jpg);
   margin: 50px auto 0; /* für Notation siehe [selfhtml-wiki](http://wiki.selfhtml.org/wiki/Doku:CSS/Eigenschaften/Au%C3%9Fenabstand#margin_.28Au.C3.9Fenabstand_allgemein.29) */
   width: 800px;
   height: 148px;
 }
#content {
   border:1px solid #000000;
   border-top: none; /* spart eine Zeile */
   margin: 0 auto 100px;
   overflow:auto;
   width: 798 px; /* wegen Box-Modell */
   max-height: 400px; /*zum Beispiel */
 }
 

Matthias

[Amin]

Om nah hoo pez nyeetz, Amin!

#head {
   background-image: url(Bilder/yun_2172.jpg);
   margin: 50px auto 0; /* für Notation siehe [link:http://wiki.selfhtml.org/wiki/Doku:CSS/Eigenschaften/Au%C3%9Fenabstand#margin_.28Au.C3.9Fenabstand_allgemein.29@title=selfhtml-wiki] /
   width: 800px;
   height: 148px;
}
#content {
   border:1px solid #000000;
   border-top: none; / spart eine Zeile /
   margin: 0 auto 100px;
   overflow:auto;
   width: 798 px; / wegen Box-Modell */
   max-height: 400px; /*zum Beispiel */
}

>   
>   
> Matthias  
  
Hallo Matthias,  
danke für deine Hilfe!  
Leider ist es nicht das wonach ich suche.  
Der Content Bereich soll sich genauso wie der head Bereich verhalten.  
Bei fixer länge immer mittig im Browser bis es beim verkleinern des Browsers den Browserrand erreicht.

[apsel]

Om nah hoo pez nyeetz, Amin!

Deine Versuche mit top usw. sind untauglich, ebenso display block für das Div, da das Div von Hause aus ein Blockelement ist.

Das was ich denke, was du möchtest ließe sich mit overflow: hidden für den Body lösen.

Matthias

[Amin]

Om nah hoo pez nyeetz, Amin!

Deine Versuche mit top usw. sind untauglich, ebenso display block für das Div, da das Div von Hause aus ein Blockelement ist.

Das was ich denke, was du möchtest ließe sich mit overflow: hidden für den Body lösen.

Matthias

Bin mir nicht sicher ob ich es richtig verstanden habe. Meinst du es so:

  
body {  
overflow: hidden;  
}  
#head {  
background-image: url(Bilder/yun_2172.jpg); margin: 50px auto 0;  
width: 800px;  
height: 148px;  
}  
#content {  
border:1px solid #000000; border-top: none;  
margin-right:auto;  
margin-left:auto;  
overflow: auto;  
top:225px;  
width:800px;  
}  

[apsel]

Om nah hoo pez nyeetz, Amin!

Ja so meine ich.

#content { border:1px solid #000000; border-top: none; margin-right:auto; margin-left:auto; overflow: auto; top:225px;

width:798p ; Du musst den Rahmen noch berücksichtigen. [selfhtml-wiki]

} [/code]

Matthias

[Amin]

width:798p ; Du musst den Rahmen noch berücksichtigen. [selfhtml-wiki]

}
[/code]
Matthias

Ok, klappt aber leider auch nicht!

[Cyx23]

Hallo,

Ok, klappt aber leider auch nicht!

vielleicht läßt sich das Problem einfacher eingrenzen, wenn du dein Beispiel online stellst. Sonst gibts da noch etwas zum Thema: Zentrieren per CSS und Zentriertes Div für alle Browser.

Grüsse

Cyx23