positioniereung von divs

kleinerChemiker

Here to stay

Registered: Feb 2002
Location: Wien
Posts: 4282

24.06.2004 - 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

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

24.06.2004 - 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

Here to stay

Registered: Feb 2002
Location: Wien
Posts: 4282

24.06.2004 - 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.

Bearbeitet von kleinerChemiker am 24.06.2004, 19:02

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

24.06.2004 - 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

Here to stay

Registered: Feb 2002
Location: Wien
Posts: 4282

24.06.2004 - 20:55

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

MIK

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

24.06.2004 - 21:39

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

dio

Here to stay

Registered: Nov 2002
Location: Graz
Posts: 4887

26.06.2004 - 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

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

27.06.2004 - 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

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

27.06.2004 - 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

Here to stay

Registered: Nov 2002
Location: Graz
Posts: 4887

27.06.2004 - 12:05

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

ahja, danke
utfsf wlkikiv

kleinerChemiker Here to stay Registered: Feb 2002 Location: Wien Posts: 4282	24.06.2004 - 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 Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	24.06.2004 - 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 Here to stay Registered: Feb 2002 Location: Wien Posts: 4282	24.06.2004 - 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. Bearbeitet von kleinerChemiker am 24.06.2004, 19:02
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	24.06.2004 - 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 Here to stay Registered: Feb 2002 Location: Wien Posts: 4282	24.06.2004 - 20:55 thx, aber scheinbar wollen mich divs nciht. daher bin ich halt gezwungenermasen wieder auf die guten alten table umgestiegen MIK
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	24.06.2004 - 21:39 Sind auch anspruchsvoller, ausserdem muss man dazu Dinge wie das visual formatting model aus dem specs verstehen.
dio Here to stay Registered: Nov 2002 Location: Graz Posts: 4887	26.06.2004 - 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 Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	27.06.2004 - 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 Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	27.06.2004 - 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 Here to stay Registered: Nov 2002 Location: Graz Posts: 4887	27.06.2004 - 12:05 Zitat von Rektal Den Thread hab ich sogar gebookmarkt: http://www.overclockers.at/showthre...mp;pagenumber=1 ;-) ahja, danke utfsf wlkikiv

positioniereung von divs

Forum Index > Software > Coding Stuff

kleinerChemiker

Rektal

kleinerChemiker

Rektal

kleinerChemiker

Rektal

dio

watchout

Rektal

dio