CSS positioning problem

davewood

Hallo,

Das Ergebnis soll so aussehen wie in diesem Attachment
informatik-forum.net/attachment/17190/

Anmerkungen:

Die Seite ist horizontal mittig zentriert.
Der blaue Bereich ist in der Höhe fix, in der Breite kann er aber variieren. Die Gesamtseite soll zentriert bleiben
Der text in div#content_nav und div#content_desc soll unten ausgerichtet sein. Also "vertical-align:bottom;" Geht aber bei divs nicht so recht.
WICHTIG: der DOM muss in dieser Struktur bleiben, also ich kann die divs nicht anders schachteln. Da setzt mir mein Templatingsystem die Grenzen.

Hier ein Grundgerüst:

HTML

<html>
<head>
<style type="text/css">
div#wrapper {
    margin:0 auto 0;
    background-color:LightGray;
    width:400px;
    height:300px;
}
div#nav {
    background-color:Orchid;
    width:150px;
    height:50px;
}
div#content {
}
div#content_nav {
    height:150px;
    width:150px;
    background-color:YellowGreen;
}
div#content_desc {
    height:100px;
    width:150px;
    background-color:Tomato;
}
div#content_img {
    width:250px;
    height:300px;
    background-color:SlateBlue;
}
</style>
</head>
<body>
<div id="wrapper">
   <div id="nav">nav</div>
   <div id="content">
      <div id="content_nav">&lt; &gt;</div>
      <div id="content_desc">
         o.T. (Paar)<br/>
         Acryl/Leinwand<br/>
         220cm x 200cm
      </div>
      <div id="content_img"></div>
   </div>
</div>
</body>
</html>

Alles anzeigen

spinball

Zitat von davewood

Der text in div#content_nav und div#content_desc soll unten ausgerichtet sein.

Viel Glück. Das geht nur mit 349843743 Verrenkungen und auf Kosten der Wartbarkeit.
Mit zwei weiteren DIV-Elementen ist es aber möglich:

PHP

<html>
<head>
<style type="text/css">
body {
	margin:10px;
	padding:10px;
}
div#wrapper {
	margin:0 auto 0;
	background-color:LightGray;
	width:400px;
	height:300px;
}
div#nav {
	width:150px;
	height:50px;
	background-color:Orchid;
	position:absolute;
}
div#content_nav {
	height:150px;
	width:150px;
	background-color:YellowGreen;
	position:absolute;
	top:70px;
}
div#content_desc {
	height:100px;
	width:150px;
	background-color:Tomato;
	position:absolute;
	top:220px;
}
div#content_nav div, div#content_desc div {
	position:absolute;
	bottom:0px;
}
div#content {
	height:300px;
	background-color:SlateBlue;
	padding-left:150px;
}
</style>
</head>
<body>
<div id="wrapper">
	<div id="nav">nav</div>
	<div id="content_nav">
		<div>
			&lt; &gt;
		</div>
	</div>
	<div id="content_desc">
		<div>
			o.T. (Paar)<br/>
			Acryl/Leinwand<br/>
			220cm x 200cm
		</div>
	</div>
	<div id="content">content</div>
</div>
</body>
</html>

Alles anzeigen

davewood

Ein weiteres DIV an der Stelle is kein Problem. Danke.

Dafür hab ich einen Fehler bei meiner Problembeschreibung gemacht und jetzt sollt das eigentliche problem sichtbar sein. Normalerweise würd ich sonst einfach 2 spalten layout machen.

die div struktur sieht so aus.

Code

<div id="wrapper">
   <div id="nav">...</div>
   <div id="content">
      <div id="content_nav">...</div>
      <div id="content_desc">...</div>
      <div id="content_img>...</div>
   </div>
</div>

matmö

Ganz allgemein kann ich das hier empfehlen: http://www.yaml.de/ - Das ist ein CSS-Framework, dass die gängigsten Layout-Fälle abdeckt und in den wichtigsten Browsern funktioniert. Der Autor hat auch ein Buch geschrieben (Dirk Jesse - CSS Layouts) das ich sehr empfehlen kann, wenn man häufiger mit CSS-Layouts arbeitet. Gibts auch in der TU-Bibliothek zum Ausleihen

davewood

Hätte nun eine Lösung aber jetzt kann ich keine Links mehr anklicken.

Mit Firefox kann man zumindest ned mehr anklicken, Opera geht. wtf?

Ich hab so den Verdacht das hat was mit overlapping zu tun.

Beispiel: http://davidschmidt.at/foo.html

davewood

yep, durch dieses div werden die links ueberdeckt.
jetzt mitm zindex zu arbeiten bringt aber nur unnötige komplexität rein und wird sicher mal wieder ned ueberall gleich dargestellt. AARGH

Code

div#content_img {
                height:600px;
                padding-left:330px;
                position:relative;
                top:-600px;
            }

spinball

Zitat von davewood

die div struktur sieht so aus.

Dann mach es wie folgt:

PHP

body {
    margin:10px;
    padding:10px;
}
div#wrapper {
    margin:0 auto 0;
    width:800px;
    height:300px;
}
div#nav, div#content_nav, div#content_desc {
	width:150px;
}
div#nav {
    height:50px;
    background-color:Orchid;
    position:absolute;
}
div#content {
    height:100%;
    background-color:SlateBlue;
}
div#content_nav {
    height:150px;
    background-color:YellowGreen;
    position:absolute;
    top:70px;
}
div#content_desc {
    height:100px;
    background-color:Tomato;
    position:absolute;
    top:220px;
}
div#content_nav div, div#content_desc div {
    position:absolute;
    bottom:0px;
}
div#content_img {
	padding-left:150px;
}

Alles anzeigen

Das Problem mit der Überlappung entsteht, wenn es mehrere absolut platzierte Elemente gibt. Die meisten Browser vergeben die Z-Indizes anhand der Reihenfolge im Quelltext. Später = höher. Verweise werden aber bei manchen Browsern stets ganz oben dargestellt. Lass #content_img einfach normal platziert, dann geht alles glatt.

davewood

TIMTOWTDI

Code

<div id="wrapper">
   <div id="menu">
      <div id="nav"></div>
      <div id="content_nav">
          <div>
          </div>
      </div>
      <div id="content_desc">
         <div>
         </div>
      </div>
   </div>
   <div id="content"></div>
</div>

Alles anzeigen

Code

#wrapper {
  height:600px;
  width:980px;
}


#menu {
  clear:left;
  float:left;
  height:600px;
  width:330px;
}


#nav {
  clear:left;
  float:left;
  height:300px;
  width:330px;
}


#content_nav {
  clear:left;
  float:left;
  height:180px;
  width:330px;
  position:relative;
}


#content_desc {
  clear:left;
  float:left;
  height:120px;
  width:330px;
  position:relative;
}


#content {
  height:600px;
}


#content_nav div, #content_desc div {
  bottom:0;
  position:absolute;
}

Alles anzeigen

CSS positioning problem

Jetzt mitmachen!

Benutzer online in diesem Thema