positioniereung von divs

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/positioniereung_von_divs_117918/page_1 - zur Vollversion wechseln!

kleinerChemiker schrieb am 24.06.2004 um 16:44

ich will in der mitte von der seite meinen content haben, der unabhängig der auflösung immer gleich groß ist. mit table wäre das kein problem, aber ich würde das gerne mit divs lösen. es besteht aus 3 feldern: überschrift(1), menü(2) und content(3). eine kleine skizze hab ich angehängt. folgende idee: ich mach ein div, das nach mitte-mitte zentriert ist, und da detz ich die 3 felder rein. aber mein problem ist nun: ich hätte gerne zwischen den feldern einen fixen abstand. kann ich das zentrier-div mit einer fixen größe versehen und dann von dessen kanten meine absolute positionierung vornehmen? oder inteerpretiert das jeder browser etwas anders?

tia

MIK

Rektal schrieb am 24.06.2004 um 17:06

Code:

<div style="width: 500px; margin: auto;">
  <div style="height: 50px;">Ueberschrift</div>
  <div style="float: left; width: 150px;">Menue</div>
  <div style="float: right; width: 350px;>Content</div>
</div>

Den Abstand zwischen den DIVs kansnt du a) entweder ueber padding/margin (musst aber aufpassen bei IE box-model bugs und extra DIVs einbauen) oder b) du passt die width der floated DIVs gleich an.

kleinerChemiker schrieb am 24.06.2004 um 18:49

hmm, so ganz wills nicht funktionieren. ich hab jetzt folgendes:

Code:

#center_div {
	vertical-align: middle;
	text-align: center;
	height: 100%;
	width: 100%;
}
#main_div {
	height: 550px;
	width: 750px;
	max-height: 550px;
	max-width: 750px;
}
#title_div {
	height: 50px;
	width: 750px;
	left: 0px;
	top: 0px;
	position: absolute;
	border: 2px solid #00B9BB;
}
#menu_div {
	height: 490px;
	width: 150px;
	left: 0px;
	bottom: 0px;
	position: absolute;
	border: 2px solid #00B9BB;
}
#content_div {
	height: 490px;
	width: 590px;
	right: 0px;
	bottom: 0px;
	position: absolute;
	border: 2px solid #00B9BB;
}

Code:

<html>
<head>
<title>..::Homepage-Test::..</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="Azure">
<div id="center_div">
<div id="main_div">

<div id="title_div">The Home Page</div>
<div id="menu_div">
	.)Teest1<br>
	.)Test2
</div>
<div id="content_div">
	CONTENT CONTENT CONTENT
</div>

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

so, nun ist aber mein problem, daß die 3 felder nicht in der mitte beieinander sind, sondern in den ecken pickt. also die überschrift links oben, das menü links unten und der content rechts unten. daraus folgere ich, daß das div, das die größe vorgibt sich nicht an die vorgabe hält

wie kann ich es dazu bringen, sich daran zu halten?

tia

MIK

edit: ich hab jetzt beim main_div einen fetten rand gemacht, dabei folgendes festgestellt: das main_div seitenmäßig mittig, aber höhenmäßig nciht mittig ausgerichtet. die divs innterhalb des main_div's kleben in den ecken des bildschirms, scheinbar wird die positionierung nicht von den rändern des main_divs aus berechnet.

Rektal schrieb am 24.06.2004 um 19:37

height: 100% auf ein div und vertical-align: middle gibts nicht wie du es dir denkst.

1) damit 100% funzt muss das parent-Element die entsprechende Groesse schon zur Verfuegung stellen, siehe auch http://www.quirksmode.org/css/100percheight.html
2) vertical-align bei block-Elementen hat eine andere Bedeutung als bei z.B. table-cells. Dort macht es was du willst. Hier bezieht sich vertical-align nur auf die Ausrichtung der Zeichen in einer Zeile.

kleinerChemiker schrieb am 24.06.2004 um 20:55

thx, aber scheinbar wollen mich divs nciht. daher bin ich halt gezwungenermasen wieder auf die guten alten table umgestiegen

MIK

Rektal schrieb am 24.06.2004 um 21:39

Sind auch anspruchsvoller, ausserdem muss man dazu Dinge wie das visual formatting model aus dem specs verstehen.

dio schrieb am 26.06.2004 um 21:36

Zitat von Rektal
Sind auch anspruchsvoller, ausserdem muss man dazu Dinge wie das visual formatting model aus dem specs verstehen.

da du dich anscheinend gut auskennst was divs angeht

hast vielleicht irgendwo eine gute seite wo das wichtigste beschrieben wird?

watchout schrieb am 27.06.2004 um 00:09

Zitat von diokletian
da du dich anscheinend gut auskennst was divs angeht hast vielleicht irgendwo eine gute seite wo das wichtigste beschrieben wird?

http://www.w3c.org

aber eigentlich: es gibt da nen thread ganz oben im forum mit tutorial/referenz links

Rektal schrieb am 27.06.2004 um 10:10

Zitat von diokletian
Zitat von veNi
weil des netzteil erscheint mir ein bissl schwach (ist es ein markennetzteil? ).. es sollte zwar locker reichen für dein system was ich da so seh.. aber.. eh scho wissen

Den Thread hab ich sogar gebookmarkt: http://www.overclockers.at/showthre...mp;pagenumber=1 ;-)

dio schrieb am 27.06.2004 um 12:05

Zitat von Rektal
Den Thread hab ich sogar gebookmarkt: http://www.overclockers.at/showthre...mp;pagenumber=1 ;-)

ahja, danke
utfsf wlkikiv