CSS Positionierung

[wapplegraph]

Hallo

Bei der CSS Positionierung, habe ich irgend einen groben Knopf.

Bei der Positionierung, nebeneinander klappt es einnfach nie.
Habe in einem div 750px breit, dieses div ist bei dem programierten nicht zu sehen, da das Programmierte, mit PHP eingefügt wird.

Nun links eine Ebene mit 2 Ebenen und rechts ein Bild sollte alles nebeneinander sein.
Habe vieles ausprobiert, nun musste ich für das linke div mir mit position:absolute behelfen, doch ich bringe diese zwei divs nicht nebeneinander, mein Erfolg wenigstens nicht untereinander, aber übereinander.

img#homebackimg	{
padding-left:358px;
width:392px;
height:496px;
}


div#adresse	{
	position:absolute;
	top:268px;
	left:25%;
	height:200px;
	width:540px;
	color:#FFCC00;
	border:3px #000000 solid;
	z-index:7;
}

div#adresse	div	{
position:absolute;
margin:10px 10px;

}

<img src="image/homeback1.jpg" id="homebackimg" />

<div id="adresse">
		<div> Brandriedstrasse 38 <br />
				CH-8307 Effretikon<br />
				<br />
				Filiale:<br />
				Seetalstrasse 56<br />
				5706 Boniswil<br />
				<br />
				Showroom:<br />
				Safenwilerstrasse23<br />
				5742 Kölliken<br />
    	</div>
		<div>
				052 343 80 60 Tel.<br />
   				052 343 80 88 Fax<br />
  				<a href="mailto:[email protected]">[email protected]</a><br />
				<br />
				062 777 21 21 Tel.<br />
				062 777 00 43 Fax<br />
				<a href="mailto:[email protected]">[email protected]</a>
		
		</div>
</div>

Wo liegt mein schwerwiegendes Problem?

Der Witz: sieht nur bei Safari einigermassen so aus. Und online ist ein riesen Cako!

Ich bin am verzweifeln!

Hier noch der Code vom Index und Stylesheet

 

[Valou]

Versuch es mal mit float. du musst beide divs floaten lassen. float:left; das eine float:right; das andere. Entschuldige das ich es nicht besser erklären kann bin kein Webdesignprofi.

Gruß aus Hamburg

 

[wapplegraph]

Versuch es mal mit float. du musst beide divs floaten lassen. float:left; das eine float:right; das andere. Entschuldige das ich es nicht besser erklären kann bin kein Webdesignprofi.

Gruß aus Hamburg

Ne das hat nichts bewirkt, sie sind immer noch übereinander.

wapplegraph

 

[MacMoneysuck]

Hallo,

also so ganz versteh ich nicht was du meinst, sonst könnte ich dir konkreter helfen.
Ich versuchs mal allgemein.
Also du willst zwei Ebenen nebeneinander platzieren, dann geht das zum einen mit position: absolute; wichtig ist die Positionsangabe

#ebenelinks{position: absolte; 
left 5px; 
top 5px;
width: 400px;}

#ebenerechts{position: absolte; 
left 410px; 
top 5px;
width: 400px;}

im html sieht das dann so aus:

<div id="drumherum">
<div id="ebenelinks">blabla</div>
<div id="ebenerechts">bild drin</div>
</div>

Der Ebenen "drumherum" weist du noch ein position:relative zu, damit die absolut positionierten Ebenen auch fein mitscrollen.

Eine andere Möglichkeit wäre, mit floats zu arbeiten, bei gleichen html-code wie oben gezeigt, müsste der ebenelinks ein float: left zugewiesen werden in der css-datei. Vorraussetzung damit das funktioniert, ist allerdings: das position: absolute muss weg in beiden ebenen und genügend Platz in der Ebene "drumherum" muss gegeben sein.

Ich hoffe, ich habe mich einigermaßen verständlich ausgedrückt.


hilfreich ist es, gerade beim arbeiten mit CSS ist es, sich andere Seiten anzuschauen, wie die es gemacht haben, hilfreich dabei ist der Firefox und das Add-on Web Developer Toolbar, mit der man direkt im Browser eingebundene CSS-Dateien öffnen und sogar live bearbeiten kann.

Ansonsten gibts auch zahlreiche CSS-Foren und Beispielseiten im Netz, wo du bei solchen Fragen besser aufgehoben bist.
Auch gibt es einige gute Websites zum Thema:

[SIZE=-1]www.cssplay.co.uk/[/SIZE]
http://css.fractatulum.net/
http://www.lipfert-malik.de/webdesign/tutorial/css.html


um nur ein paar zu nennen...

Gruß
Macmomeysuck

 

[wapplegraph]

Merci Macmomeysuck

Hast mir geholfen!
Sie stehen jetzt nebeneinander.
Ohne float, dies hat irgendwie nicht geklappt.

Eine Frage, warum verhalten sich die Ebene hier mit der position:absolute zum Aussenrand der Ebene und das äussere div absolute zum Fensterrand, obwohl es dann wiederum in einem div verschachtelt ist?

Die Ebene #adresse Verhält sich jetzt halt anders mit dem Abstand, zum Rand als der Rest, da sie absolute positioniert ist und nicht ins div eingebunden ist, doch mit dem kann ich leben.

wapplegraph

 

[MacMoneysuck]

Die Positionsangaben von absoluten Ebenen beziehen sich immer auf die nächste relativ oder absolut positionierte umschließende Ebene.
Wenn keine umschließende Ebene absolut oder relativ positioniert ist, gilt als Referenz fü die Position das body-tag, dass ja meisten den ganzen Bildschirm abdeckt.

Wenn deine Abstände nicht ganz stimmen, kannst du diese mit margin (=Außenbabstand) und padding (=Innenabstand) korrigieren.

Und wie gesagt, viel bei anderen Websites umschauen, wie es da gelöst wurde.
Denn bei CSS führen meistens mehrere Wege zum Ziel, die alle vor oder Nachteile haben.

Da hilft eigentlich nur viel, viel üben und schauen.

Gruß
MacMoneysuck

 

[wapplegraph]

Die Positionsangaben von absoluten Ebenen beziehen sich immer auf die nächste relativ oder absolut positionierte umschließende Ebene.

Merci!