3 Layer nebeneinander platzieren

LoiK · 13.08.2003, 14:58

Hallo zusammen,

wie schaffe ich es 3 Layer (je 200px) nebeneinander
mit einem Abstand von 20px zu setzen?

#spalte1 {
width: 200px;
position: relative;
left: 20px;
top: 10px;
background-color: #CCFF33;
}

#spalte2 {
width: 200px;
position: relative;
left: 20px;
top: 10px;
background-color: #CCFF33;
}

#spalte3 {
width: 200px;
position: relative;
left: 20px;
top: 10px;
background-color: #CCFF33;
}

Man muss irgendwas mit float: left/right machen, aber ich weiss nicht, wieso sich dieser Tag nicht logisch verhält. Was muss ich machen, damit alle drei exakt nebeneinander platziert sind?

WICHTIG:
Die Layer müssen relative bleiben, weil sie sich in einem
anderen Layer befinden, was zentriert ausgerichtet ist.

Danke + Grüße
LoiK

prefix · 13.08.2003, 15:03

hi!

so vielleicht!!??

hab hier nur eine klasse erstellt, die ich dann einfach nacheinander einbinde:

Code:

.ebene {
	width: 200px;
	height: 200px;
	margin-left: 20px;
	float: left;
	background-color: red;
}

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>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="nebeneinander.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="ebene">ebene 1</div>
<div class="ebene">ebene 2</div>
<div class="ebene">ebene 3</div>
</body>
</html>

LoiK · 13.08.2003, 15:10

Oink,oink...
ich bin ein Ochse :-)

naja...muss mich erst in das thema einriemeln.

Hmm, sag mal ...wenn ich drei
boxen habe die unterschiedliche größen haben
und ich will die auch nebeneinander platzieren.
Wie macht man das ?

z.B. 100px, 200px, 300px,

Danke + Grüße
LoiK

prefix · 13.08.2003, 15:12

das würd ich dann so machen

css-code:

Code:

.ebene1 {
	width: 100px;
	height: 200px;
	margin-left: 20px;
	float: left;
	background-color: red;
}

.ebene2 {
	width: 200px;
	height: 200px;
	margin-left: 20px;
	float: left;
	background-color: yellow;
}

.ebene3 {
	width: 300px;
	height: 200px;
	margin-left: 20px;
	float: left;
	background-color: blue;
}

wenn sie die ebenen nicht wiederholen sollen, würd ich zu ids greifen, also statt .ebene1 -> #ebene1

einbindung in xhtml dann mit <div id="ebene1">ebene 1</div>

ist aber an sich geschmackssache, nur der code bleibt in meinen augen dann halt übersichtlicher

LoiK · 13.08.2003, 15:59

Hi Prefix,

vielen Dank. Jetzt habe ich es geschnallt.
Mein Fehler war die "left:" ausrichtung.
Deswegen hat das nie korrekt hingehauen.

Danke + Grüße
LoiK

p.S.
Thema erledigt!