div in div unten ausrichten

make · #1 (**permalink**) 24.04.2012, 10:22

Hallo Zusammen

Ich kämpfe seit einiger Zeit mit folgendem Problem und finde den Fehler einfach nicht...:

Ich möchte gerne die zwei grünen Divs am Grauen Div am unteren Rand ausrichten. Die Grösse der grünen Divs wird dynamisch verändert. Sie sollen übereinander gestapelt sein.

Trotz intensiver suche und allen möglichen versuchen, finde ich die Lösung nicht..

Html:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="technicalView.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="feld">
<div class="rahmen">
  <div class="box">
    <div class="inbox">
      <div class="text">5845W</div>
    </div>
  </div>
  
  
  <div class="box_beschreibung">
    <div class="inbox">
      <div class="text">Waschmaschiene</div>
    </div>
  </div>
</div>



<div class="rahmen">
  <div class="box">
    <div class="inbox">
      <div class="text">5845W</div>
    </div>
  </div>
  
  
  <div class="box_beschreibung">
    <div class="inbox">
      <div class="text">Waschmaschiene</div>
    </div>
  </div>
</div>




</div>
</body>
</html>

CSS:

Code:

@charset "utf-8";
body {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

.feld{
	
#position: absolute;
	background-color: grey;
	height: 700px;
	margin-bottom: 0px;
}


.rahmen {
	height: 300px;
	width: 400px;
	
}
.box {
	float:left;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 5px 5px 10px #999;
	-moz-box-shadow: 5px 5px 10px #999;
	box-shadow: 5px 5px 10px #999;
	background-color: #8DBE44;
	display: table;
	height: 100%;
	width: 100px;
#position: relative;

color:white;
}

.box_beschreibung {
	float:left;
	display: table;
	height: 100%;
	width: 300px;
#position: relative;

}

.inbox {
 #position: absolute;
 #top: 50%;
	display: table-cell;
	vertical-align: middle;
}
.text {
	font-size:18px;
	text-align: center;
 #position: relative;
 #top: -50%;
}

Ich danke für alle Tipps...

Viele Grüsse

Manuel Keel

lottikarotti · #2 (**permalink**) 24.04.2012, 10:34

Hallo,

die Klasse "rahmen", welche "box" und somit auch "inbox" umschließt, hat eine feste Höhe von 300px. Demzufolge, kann sie sich nur statisch verhalten.

Was genau ist denn das Ziel von deinem Vorhaben?

PS: Wenn du der Klasse "rahmen" eine Höhe von 350px zuweist, schließt die untere Box bündig mit dem 700px hohen Element "feld" ab.

Gruß, lotti.

make · #3 (**permalink**) 24.04.2012, 10:54

Hallo lotti

Vielen Dank für deine Schnelle Antwort.
Das Ziel ist folgendes Balkendiagramm:

Die Balken sollen natürlich dynamisch generiert werden.

Vielen Dank und viele Grüsse

Manuel

lottikarotti · #4 (**permalink**) 24.04.2012, 11:23

Hallo,

spontan fallen mir da zwei Möglichkeiten ein. Du könntest mittels position:absolute und der bottom-Eigenschaft die div-Container unten ausrichten. Hierzu habe ich dir mal schnell ein kleines Beispiel gebastelt:

- div-Container mit position:absolute und bottom am unteren Rand ausrichten

Nachteil: die Angaben sind absolut und müssten, um eine dynamische Darstellung zu ermöglichen, entweder per jQuery angepasst oder mittels PHP generiert werden.

Eine zweite Möglichkeit wäre, die grünen Boxen mit einem transparenten div-Container nach unten zu drücken - nicht so elegant wie ich finde.

Eine Frage habe ich noch: wie genau sieht die dynamische Generierung der Boxen aus? Kommt hier JavaScript/ jQuey oder PHP zum Einsatz?

Gruß, lotti.

make · #5 (**permalink**) 24.04.2012, 11:46

Vielen Dank, für deine Bemühungen.

Ich habe dein Beispiel angeschaut. Ich hatte eigentlich die Idee dass ich nur die Höhe angeben müsste. Ohne den Botton Wert zu berechnen.

Deine Idee mit dem Transparenten Div oben finde ich eine sehr gute Idee, bzw. einfacher als als die Bottom Werte zu berechnen.

Ich denke ich werde dies so lösen...

Die Werte werden per JavaScript gesetzt.

Ich danke dir vielmals für deine Bemühungen.

Viele Grüsse

Manuel

lottikarotti · #6 (**permalink**) 24.04.2012, 11:57

Zitat:

Zitat von make

Ich habe dein Beispiel angeschaut. Ich hatte eigentlich die Idee dass ich nur die Höhe angeben müsste. Ohne den Bottom Wert zu berechnen.

Na ja, so viel Aufwand ist das auch nicht

Zitat:

Zitat von make

Deine Idee mit dem Transparenten Div oben finde ich eine sehr gute Idee, bzw. einfacher als als die Bottom Werte zu berechnen.

Ok, ich möchte auch für diesen Weg ein Beispiel, für alle die ähnliches vorhaben, bereitstellen:

- Mehrere div-Container durch transparenten div-Container unten ausrichten

Gruß, lotti.

heiko_rs · #7 (**permalink**) 24.04.2012, 13:42

Du brauchst kein leeres Element als padding-top-Ersatz

(denn de facto tut #space nicht anderes.)

Es gibt Möglichkeiten, Elemente unten auszurichten, ohne dass sie eine feste Höhe haben oder abs. pos. sind. Folgendes Beispiel enthält beide: Das graue div ist auf die eine Weise unten ausgerichtet, und das schwarze auf die andere. (Hacks für den IE < 8 habe ich ausgelassen.)

HTML-Code:

<!DOCTYPE html>
<html lang="de">

<meta charset="utf-8">
<title>Test</title>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
	}

html,
body {
	width: 100%;
	height: 100%;
	display: table;
	background: #fff;
	color: #000;
	}

body {
	display: table-cell;
	vertical-align: bottom;
	}

body > div {
	background: #c0c0c0;
	width: 400px;
	margin: 0 auto;
	}

div > div {
	width: 150px;
	display: inline-block;
	vertical-align: bottom;
	padding: 10px;
	}

div > div:first-child {
	background: #000;
	color: #fff;
	margin-right: 40px;
	}

</style>

<div>
	<div>Text links</div>

	<div>Text rechts<br>
		Text rechts<br>
		Text rechts<br>
		Text rechts<br>
		Text rechts<br>
		Text rechts<br>
		Text rechts<br>
		Text rechts
	</div>
</div>

lottikarotti · #8 (**permalink**) 24.04.2012, 15:14

Zitat:

Zitat von heiko_rs

Du brauchst kein leeres Element als padding-top-Ersatz

(denn de facto tut #space nicht anderes.)

Richtig. Wobei ich in diesem Fall zu margin-top greifen würde. Dass diese Lösung nicht elegant ist, habe ich aber bereits erwähnt

Zitat:

Zitat von heiko_rs

Es gibt Möglichkeiten, Elemente unten auszurichten, ohne dass sie eine feste Höhe haben oder abs. pos. sind. Folgendes Beispiel enthält beide: Das graue div ist auf die eine Weise unten ausgerichtet, und das schwarze auf die andere. (Hacks für den IE < 8 habe ich ausgelassen.)

Manchmal sieht man den Wald vor lauter Bäumen nicht. Vielen Dank für die Info. Auf vertical-align hätte ich von selbst kommen können!

Für alle Interessenten habe ich hier ein lauffähiges Beispiel parat:

- div-Container unten ausrichten mittels vertical-align

Gruß, lotti.

heiko_rs · #9 (**permalink**) 24.04.2012, 20:16

Zitat:

Zitat von lottikarotti

Wobei ich in diesem Fall zu margin-top greifen würde.

Warum?

make · #10 (**permalink**) 25.04.2012, 08:34

Ich danke euch beiden für eure Bemühungen, dies war genau dass was ich gesucht hatte.

Vielen herzlichen Dank.

Manuel

Falls jemand einmal dasselbe Problem haben sollte:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.wrapper {
	position: absolute;
	display: table;
	top: 10px;
	left: 10px;
	width: 500px;
	height: 500px;
	background-color: lightgrey;
}
.wrapper > div {
	display: table-cell;
	vertical-align: bottom;
}

#verbraucher{
	top: 10px;
	left:600px;
}
#erzeuger{
	top: 10px;
	left: 10px;
	text-align: right;
}

.box {
	margin: 1px;
	width: 500px;
}
.box_green {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 5px 5px 10px #999;
	-moz-box-shadow: 5px 5px 10px #999;
	box-shadow: 5px 5px 10px #999;
	background-color: #8DBE44;
	float:left;
	display: table;
	height: 100%;
	width: 100px;
#position: relative;
	/* Textfarbe Definieren */
	color: #FFF;
	
	text-align: center;
}
.box_trans {
	float:left;
	display: table;
	height: 100%;
	width: 300px;

#position: relative;
	/* Textfarbe Definieren */

margin-left: 15px;
margin-right: 15px;
}
.inbox {
 #position: absolute;
 #top: 50%;
	display: table-cell;
	vertical-align: middle;
}
.text {
	font-size:18px;
 #position: relative;
 #top: -50%;
}
/* Höhen */
#b110 {
	height: 110px;
}
#b39 {
	height: 39px;
}
#b23 {
	height: 23px;
}
#b73 {
	height: 73px;
}

</style>
</head>

<body>
<div id="verbraucher" class="wrapper">
  <div>
    <div id="b73"  class="box">
      <div class="box_green">
        <div class="inbox">
          <div class="text">5845W</div>
        </div>
      </div>
      <div class="box_trans">
        <div class="inbox">
          <div class="text">Waschmaschiene</div>
        </div>
      </div>
    </div>
    <div id="b23"  class="box">
      <div class="box_green">
        <div class="inbox">
          <div class="text">5845W</div>
        </div>
      </div>
      <div class="box_trans">
        <div class="inbox">
          <div class="text">Waschmaschiene</div>
        </div>
      </div>
    </div>
    <div id="b39"  class="box">
      <div class="box_green">
        <div class="inbox">
          <div class="text">5845W</div>
        </div>
      </div>
      <div class="box_trans">
        <div class="inbox">
          <div class="text">Waschmaschiene</div>
        </div>
      </div>
    </div>
    <div id="b110" class="box">
      <div class="box_green">
        <div class="inbox">
          <div class="text">5845W</div>
        </div>
      </div>
      <div class="box_trans">
        <div class="inbox">
          <div class="text">Waschmaschiene</div>
        </div>
      </div>
    </div>
  </div>
</div>



<div id="erzeuger" class="wrapper">
  <div>
    <div id="b73"  class="box">
      <div class="box_trans">
        <div class="inbox">
          <div class="text">Solaranlage</div>
        </div>
      </div>
      <div class="box_green">
        <div class="inbox">
          <div class="text">50KWH</div>
        </div>
      </div>
    </div>
    <div id="b23"  class="box">
      <div class="box_trans">
        <div class="inbox">
          <div class="text">Netz</div>
        </div>
      </div>
      <div class="box_green">
        <div class="inbox">
          <div class="text">3KWH</div>
        </div>
      </div>
    </div>
  
  </div>
</div>



</body>
</html>

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18