Div-Container: zentrierte Ausrichtung und Größendef.

[Shadowcrow]

hi $name,

ich habe drei Bereiche (Header, Content, Footer) und versuche den Content Bereich so auszurichten das er mittig positioniert ist - nicht im verhältnis zum Viewport sondern sich im verbleibenden Platz mittig ausrichtet. Das Problem ist nur das dieser Bereich viel zu groß ausfällt (gelber Rahmen), ich bekomme ihn einfach nicht dazu nur den verbleibenden Platz einzunehmen.

relevantes, gekürztes HTML:

  
<div id="header">  
<h1 ><img src="pics/logo.gif" alt="" title="" /></h1>  
</div>  
<div id="content">  
<div id="pics">  
<a href="bilder.php?bild=01" ><img src="pics/t_b_01.jpg" /></a>  
<a href="bilder.php?bild=02" ><img src="pics/t_b_02.jpg" /></a> 					  
</div>  
</div>  
<div id="footer">  
<h3>Wilkommen</h3>  
</div>  
      <ul id="Navigation">  
        <li>  
          <a href="index.php" target="_self">Home / Fotos |</a>  
        </li>  
             </ul>  

CSS:

  
#header {  
}  
#content{  
border: 1px solid yellow;  
position: relative;  
height: 100%;  
width: 100%;  
min-height: 226px;  
min-width: 560px;  
  
}  
#pics {  
position:absolute;  
  top:50%;  
  left:50%;  
  width: 560px;  
  height:228px;  
  margin-left:-280px;/*halbe breite */  
  margin-top:-114px;/*halbe höhe */  
}  
  
#footer{  
}

Beispiel unter: http://meschigge.de
login:
name: self
pwd: selfself

Danke.

gruss
shadow

[suit]

Das Problem ist nur das dieser Bereich viel zu groß ausfällt (gelber Rahmen), ich bekomme ihn einfach nicht dazu nur den verbleibenden Platz einzunehmen.

Works as designed - du hast dem Bereich gesagt, er soll 100% hoch sein - das bezieht sich auf die Höhe seines Elternelements und wird auch korrekt umgesetzt.

100% + irgendwas (also das davor und das dahinter) ist idR. mehr als 100%

Ggf. hilft dir eine Suche nach "sticky footer" weiter - zu predigen, dass diese Idee uncool ist, hab' ich bereits aufgegeben :)

[Shadowcrow]

hi $name,

Works as designed - du hast dem Bereich gesagt, er soll 100% hoch sein - das bezieht sich auf die Höhe seines Elternelements und wird auch korrekt umgesetzt.

100% + irgendwas (also das davor und das dahinter) ist idR. mehr als 100%

*auch* Äh, danke das war eine geistige Fehlzündung meinerseits....mein Problem war/ist das der obere Bereich kleiner ist als der untere und deswegen (bei richtiger Ausrichtung (30% / 40% / 30%)) die Abstände optisch nicht Stimmen.

So siehts -halbwegs- wie gewünscht aus:

#header {  
}  
#content{  
position: relative;  
height: 55%;  
width: 100%;  
min-height: 226px;  
min-width: 560px;  
}  
#pics {  
position:absolute;  
  top:50%;  
  left:50%;  
  width: 560px;  
  height:228px;  
  margin-left:-280px;/*halbe breite */  
  margin-top:-114px;/*halbe höhe */  
}  
#footer{  
}

Ggf. hilft dir eine Suche nach "sticky footer" weiter - zu predigen, dass diese Idee uncool ist, hab' ich bereits aufgegeben :)

Genau das wollte ich vermeiden, außerdem hätte es mir auch nicht wirklich weitergeholfen....

gruss
shadow

[suit]

So siehts -halbwegs- wie gewünscht aus:

Ich hab' keine Lust, das ganze irgendwo einzubauen :) kannst du das ggf. in dein Online-Beispiel einbauen?

Genau das wollte ich vermeiden, außerdem hätte es mir auch nicht wirklich weitergeholfen....

Ich verstehe allerdings immer noch nicht, was du eigentlich genau machen möchtest.