Antworten zum Thema „wiso klappt dan nicht...“

Thomas2704 · 02.09.2008

wiso klappt das nicht...

huhu ich teste gerade mal ne html und ne css,aber irgendwie sitzen die divs nicht so wie ich die haben will.ich will nicht mit przentangabe arbeiten.

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

<body>

<div class="body">
<div class="header">header</div>
<div class="navi1">navi1</div>
<div class="contest">"contest"</div>

<div class="navi2">Raum für den Inhalt von class "navi2"</div>
</div>
</body>
</html>

css

.body {
width:1200px;
min-height:720px;
background-color: #99FFFF;
margin: 0px 0px 0px 0px;
}
.header {
width: 1100px;
height: 150px;
background-color: #00FF66;
margin: 20px 0p 50px 0px;
}
.contest {
background-color: #33CCFF;
width: 600px;
min-height: 500px;
float: left;
margin: 10px 0px 0px 0px;
}
.navi2 {
background-color: #0099FF;
width: 150px;
min-height: 300px;
margin: -20px 10px 0px 100px;
}

.navi1 {
width: 150px;
min-height: 300px;
background-color: #00FF99;
margin: -20px 0px 0px 100px;

der header soll mittig sitzen.dann untendrunter die navi, daneben der contest und daneben die navi1..
}

BigBilly · 02.09.2008

AW: wiso klappt dan nicht...

Erstens kappiert man überhaupt nicht was du willst.
Und zweitens hast du eine schöne Überschrift gewählt...

Engelskind · 02.09.2008

AW: wiso klappt dan nicht...

Wenn du deine DIV-Container an bestimmten Stellen positionieren willst, dann musst du mit positions arbeiten und dementsprechend mit left, right, top oder bottom dein div verschieben.

Näheres dazu findest du hier.

Thomas2704 · 02.09.2008

AW: wiso klappt dan nicht...

ja nee.. ich hab das noch nicht hochgeladen..kann ich aber erst heute abend,da ich malochen bin

ich hab das problem das die divs nicht so dargestrellt werden wie ich das møchte...

Engelskind · 02.09.2008

AW: wiso klappt das nicht...

Thomas2704 schrieb:
huhu ich teste gerade mal ne html und ne css,aber irgendwie sitzen die divs nicht so wie ich die haben will.ich will nicht mit przentangabe arbeiten.

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

<body>

<div class="body">
<div class="header">header</div>
<div class="navi1">navi1</div>
<div class="contest">"contest"</div>

<div class="navi2">Raum für den Inhalt von class "navi2"</div>
</div>
</body>
</html>

css

.body {
width:1200px;
min-height:720px;
background-color: #99FFFF;
margin: 0px 0px 0px 0px;
}
.header {
width: 1100px;
height: 150px;
background-color: #00FF66;
margin: 20px 0p 50px 0px;
}
.contest {
background-color: #33CCFF;
width: 600px;
min-height: 500px;
float: left;
margin: 10px 0px 0px 0px;
}
.navi2 {
background-color: #0099FF;
width: 150px;
min-height: 300px;
margin: -20px 10px 0px 100px;
}

.navi1 {
width: 150px;
min-height: 300px;
background-color: #00FF99;
margin: -20px 0px 0px 100px;

der header soll mittig sitzen.dann untendrunter die navi, daneben der contest und daneben die navi1..
}

Ja klar dass die divs nicht so angezeigt werden, wie du willst. Ich sagte ja schon mit position und left, right, bottom und top verschiebst du deine gesamten div-container an die stelle wo das alles stehen soll. Und dabei arbeitest du mit Pixelangaben.

In deinen div-Klassen hast du bisher ja nur angegeben, dass es eine maximale Höhe und Weite gibt, und dass xx Pixel Abstand von oben sein sollen und so viele von rechts, etc., Hintergrundfarbe.

Du willst zb das der Header mittig sitzt.
Damit der Header mittig sitzt, sagt man dass egal bei welcher Bildschirmauflösung der Außenabstand links und rechts automatisch ist.

Das heißt folgende Änderung wäre:

.header {
width: 1100px;
height: 150px;
background-color: #00FF66;
margin-left: auto;
margin-right: auto;
}

Wenn du den Text im Header auch noch mittig haben willst, dann setzt du noch ein "text-align: center;" dazu.

Dann kommt die navi. Da du keine Position bisher angegeben hast siehst du wie sich die Navigation anzeigen lässt. Zb so:

.navi {
position: absolute;
left: 200px;
top: 30px;
}

hier entsteht eine absolute Position, die nen Abstand links mit 200px hat und von oben 30px. (Musst das dann eben so anpassen, dass die navi unter dem header ist)

Mehr kann ich dir leider nicht helfen, weil ich nicht weiß wie du was dargestellt haben willst. Wenn es nur um die Positionierung der Divs geht, dann guck dir das mit den positions an. Wenn es einfach nur darum geht, dass das div die und die Schriftart hat, und so viel Innenabstand, etc. dann solltest du dich mit CSS beschäftigen.

Thomas2704 · 03.09.2008

AW: wiso klappt dan nicht...

huhu..

ich hab das mal so gemacht und es geht ganz gut ,danke.
nur hab ich jetz das problem das sich der footer nicht atuomatisch mit verschiebt.

wie mach ich das jetz?

css:

.body {
width:1200px;
min-height:720px;
background-color: #99FFFF;
margin: 0px 0px 0px 0px;

}
.header {
width: 1200px;
height: 150px;
background-color: #00FF66;
margin-left:auto;
margin-right:auto;
margin-top:30px;
z-index: 1;

}
.navbarheader {
position: absolute;
width: 900px;
height: 20px;
margin-left: 200px;
margin-top: -20px;
background-color: #330000;
z-index: 2;
}

.navi1 {
position:absolute;
width: 200px;
min-height: 500px;
background-color: #00FF99;
margin-top:0px;

}
.randlinks {
position:absolute;
background-color: #000066;
width: 20px;
min-height: 500px;
margin-left: 200px;
}
.contest {
position:absolute;
background-color: #33CCFF;
width: 840px;
min-height: 500px;
margin-left:220px;
text-align: center;
padding-left: 10px;
padding-right: 10px;

}
.randrechts {
position:absolute;
background-color: #000066;
width: 20px;
min-height: 500px;
margin-left: 1080px;
}

.navi2 {
position:absolute;
background-color: #0099FF;
width: 100px;
height: 500px;
margin-left:1100px;
margin-top:0px;

}

.footer {
position:absolute;
background-color: #0033FF;
width:1200px;
height:40px;
margin-top:500px;
}