BlackBoard | Druckvorschau: div design

BlackBoard (http://www.black-board.net/index.php)
- Design, Programmierung & Entwicklung (http://www.black-board.net/board.php?boardid=55)
-- Webdesign (http://www.black-board.net/board.php?boardid=19)
--- CSS div design (http://www.black-board.net/thread.php?threadid=22457)

Geschrieben von ragtek am 31.08.2006 um 13:12:

div design

ich hab eine homepage die in etwa so realisiert gehört:
www.ragtek.org/Publikation3.jpg

was ist das jetz?
position: absolut; oder relativ?
irgendwie schnall ich ds alles einfach nicht

Geschrieben von LX am 31.08.2006 um 14:06:

Soll Container 2 tatsächlich die anderen überlappen oder soll er sich nur zwischen 1 und den beiden anderen befinden?

Wenn ersteres, dann würde für 1, 3 und 4 ein normales Floating-Modell ohne weitere Positionierung genügen und 2 müsste absolut ausgerichtet werden. Ansonsten sollte für alle ein Float-Modell reichen.

Beispiel für 1:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:

body {
  margin: 0;
}

div {
  font-size: 5em;
  border: 1px solid blue;
  text-align: center;
}

#cont1 {
  width: 200px;
  float: left;
  height: 100%;
}

#cont2 {
  position: absolute;
  left: 180px;
  width: 200px;
  height: 100%;
  border-color: green;
}

#cont3,
#cont4 {
  margin-left: 350px;
  height: 50%;
  border-color: red;
}

Für Variante 2 würdest du analog verfahren, nur dass #cont2 dann eben nicht absolut positioniert, sondern ebenfalls mit float: left ausgestattet wäre.

Geschrieben von ragtek am 31.08.2006 um 14:31:

und ohne px angaben geht das nicht?
also das 3&4 zB direkt neben 1 sind und 4 direkt unterhalb von 3?
weil ich gelesen hab das ie und firefox die px angaben nicht gleich behandeln
ausserdem stimmt hier allgemein was nicht

http://213.47.118.10/entwicklung/physita/
das ist der erste entwurf, da hab ich noch mit tabellen gearbeitet
und im firefox stimmts alles aber im ie sind die überschriften auf manchen seiten links und auf manchen zentriert
keine ahnung wieso

Geschrieben von LX am 31.08.2006 um 14:46:

Zitat:

Original von spookykids
und ohne px angaben geht das nicht?
also das 3&4 zB direkt neben 1 sind und 4 direkt unterhalb von 3?

4 ist direkt unterhalb von 3, und die margin-Angaben für 3 und 4 hab ich nur drin, damit der Rahmen entsprechend deines Beispiels zu sehen ist. Würde man margin weglassen, wäre der Rahmen bis zum rechten Rand, aber der Inhalt würde dennoch erst neben 1 beginnen. Ein Padding müsste somit zumindest rein, damit der Bereich unter 2 frei bleibt. Die Pixelangaben sind zu einem bestimmten Teil notwendig. Wie breit 1 und 2 sind, sollte schon bekannt sein.

Zitat:

weil ich gelesen hab das ie und firefox die px angaben nicht gleich behandeln

Stimmt zum Teil. Gelegentlich passieren im IE Fehler, wie dass eine bestimmte margin-Angabe einfach doppelt genommen wird oder dass sich 3 Pixel Ränder irgendwo einschleichen, die nirgends definiert sind. Ansonsten achte auf einen korrekten DOCTYPE, dann behandeln IE und Firefox Rahmen und Innenabstände auch gleich.

Geschrieben von ragtek am 31.08.2006 um 15:10:

i find das einfach viel zu arg

code:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
.body { margin: 0px; top:0px;
}
.container1 { width:125px;
			  float:left;
}

#cont3 { margin-left: 300px; z-index:3; margin-top:50px; z-index:3;}
#cont4 {
  margin-left: 300px;
  height: 50%;
  border-color: red;
}
#cont2 {
  position: absolute;
  left: 125px;
  width: 200px;
  height: 100%;
  border-color: green;
  z-index:0;
}
-->
</style>
</head>

<body>
<div class="container1" id=""><!-- linkes weißes eck -->12312</div>
<div id="cont2"><img src="physita datein/Signet-Maxerl.gif"></div>
<div id="cont3"><h1>&Uuml;berschrift</h1></div>
</body>
</html>

im ie passt das "irgendwie" z-index muss i ma no anschaun
aba im firefox schauts komisch aus... alles auf gleicher höhe

Geschrieben von LX am 31.08.2006 um 15:40:

z-index brauchst du hier nicht.

Warum alles nach unten geschoben wird, wenn du #cont3 einen Rand nach oben gibst, weiß ich gerade auch nicht, aber du kannst es auch einfach durch einen Innenabstand (padding-top) ersetzen.

Geschrieben von ragtek am 04.09.2006 um 11:42:

ich krieg das einfach nicht hin

code:
1:	<div style="z-index: 1; position:fixed; top:26px; left:60px;"><img src="Signet-Maxerl.gif"alt="logo" /></div>

wie muss das ausschaun das es im firefox und im ie mitscrollt????
im firefox funktionierts aber im ie leider nicht, da bleibt es fix