Positionierung DIV Box

[dia]

Hallo Zusammen,

Bei folgendem Code soll die Kind-Box mit dem Inhalt "Aufputschmittel" direkt angrenzend an "Koffeinhaltiges Getränk" gelegt werden. Aber habe es bisher nicht zum laufen gebracht.

Ich habe nur die Möglichkeit alle Eltern/Kind Stylewerte gleichzeitig zu ändern, weil die Boxen dynamisch von einem Script aus erstellt werden.
D.h. ich kann nicht einzelne Boxen anders behandeln.

<style>  
#parent {  
	border-width: 0px;  
	border-style: solid;  
	border-color: blue;  
	float:left;  
	text-align:center;  
	color:#FFFFFF;  
	font-weight: bold;	  
	//position:relative;  
}  
#child {  
	width:100%;  
	border-width: 0px;  
	border-style: solid;  
	border-color: green;  
	float:left;  
	background-color:#a52a2a;  
	//position:absolute;  
	//vertical-align:bottom;  
	//bottom:0;  
}  
</style>

<div id='parent' style='width:50%'> <!-- Elternelement -->  
	<div id='parent' style='width:100%'> <!-- Elternelement -->  
		<div id='child'>  <!-- Tochterelement -->  
			&nbsp; Lebensmittel &nbsp;  
		</div>  
	</div>  
	<div id='child'>  <!-- Tochterelement -->  
		&nbsp; Getränk &nbsp;  
	</div>  
</div>  
<div id='parent' style='width:50%'> <!-- Elternelement -->  
	<div id='child'>  <!-- Tochterelement -->  
		&nbsp; Aufputschmittel &nbsp;  
	</div>  
</div>  
  
<br style="clear: both;" />  
  
<div style='border-width: 0px; border-style: solid; border-color: red; background-color:#8b0000; text-align:center; color:#FFFFFF; font-weight: bold;'>  
	&#8226; &#8226; &#8226; Koffeinhaltiges Getränk &#8226; &#8226; &#8226;  
</div>

Ich würde mich wirklich sehr freuen, wenn mir hier jemand helfen könnte.

Vielen Dank schon mal

liebe Grüße
Alex

[Gerch2003]

Hi,

ich weis nicht ob ich dich richtig verstehe, aber bei mir sieht es Momentan so aus:

Lebensmittel           Aufputschmittel
        Getränk
              Koffeninhaltiges Getränk

Und du möchstest jetzt, dass es so aussieht:

Lebensmittel           Aufputschmittel
        Getränk                Koffeninhaltiges Getränk

Dann nimm das <br style="clear: both;" /> raus ;-)

Gruß

[dia]

danke für die antwort.

nicht ganz, ich möchte dass es folgendermaßen aussieht:

Lebensmittel
         Getränk                Aufputschmittel
               Koffeninhaltiges Getränk

liebe Grüße
Alex

[Gunnar Bittersmann]

@@dia:

nuqneH

<style>

@type="text/css" fehlt (es sei denn, du verwendest HTML5).

//position:relative;

Es gibt in CSS keine einzeiligen Kommentare mit "//".

<div id='parent' style='width:50%'> <!-- Elternelement -->

Verwende keine @style-Attribute! Keine Angaben inline notieren, sondern alle im Stylesheet! Alle!

Der Kommentar ist überflüssig, wenn das Element schon @id='parent' hat.

<div id='parent' style='width:100%'> <!-- Elternelement -->

@id='parent' war schon vergeben. Polizei!

  	  Lebensmittel    

'&nbsp;' hat dort nichts zu suchen. Abstände erzeugst du mit CSS: 'margin' bzw. 'padding'.

&#8226; &#8226; &#8226; Koffeinhaltiges Getränk &#8226; &#8226; &#8226;

Die Bullet-Zeichen haben dort auch eher nichts zu suchen. Sie sind kein Inhalt, sondern Verzierung, sollten also mit CSS erzeugt werden: Pseudoelemente '::before' und '::after' mit 'content'-Eigenschaft bzw. Hintergrundbild.

Qapla'

[dia]

Danke für die Nachhilfe in CSS.

habe nachgebessert und bin zu folgendem Ergebnis gekommen:

<style type="text/css">  
.parent {  
	border-width: 0px;  
	border-style: solid;  
	border-color: blue;  
	float:left;  
	text-align:center;  
	color:#FFFFFF;  
	font-weight: bold;	  
}  
.wid50 {  
	width:50%  
}  
.wid100 {  
	width:100%  
}  
.child {  
	width:100%;  
	border-width: 0px;  
	border-style: solid;  
	border-color: green;  
	float:left;  
	background-color:#a52a2a;  
	vertical-align:bottom;  
}  
.koffein {  
	border-width: 0px;  
	border-style: solid;  
	border-color: red;  
	background-color:#8b0000;  
	text-align:center;  
	color:#FFFFFF;  
	font-weight: bold;  
}  
</style>  
  
	  
<div class='parent wid50'>  
	<div class='parent wid100'>  
		<div class='child'>  
			Lebensmittel  
		</div>  
	</div>  
	<div class='child'>  
		Getränk  
	</div>  
</div>  
<div class='parent wid50'>  
	<div class='child'>  
		Aufputschmittel  
	</div>  
</div>  
  
<br style="clear: both;" />  
  
<div class='koffein'>  
	Koffeinhaltiges Getränk  
</div>

leider hat das ganze mein eigentliches Problem noch nicht gelöst.

Wäre sehr dankbar, wenn jetzt auch noch das Hauptproblem gelöst werden könnte. Vielen Dank

liebe Grüße
Alex