Antworten auf deine Fragen:
Neues Thema erstellen

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

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..
}
 
Zuletzt bearbeitet:

BigBilly

Nicht mehr ganz neu hier

AW: wiso klappt dan nicht...

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

Engelskind

Noch nicht viel geschrieben

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

Noch nicht viel geschrieben

AW: 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..
}

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.
 
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;
}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
174.473
Beiträge
2.577.942
Mitglieder
65.955
Neuestes Mitglied
astrid
Oben