Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Div's verschachteln“

Zero-PSD

Selbsternannter Held

Servus Leute,
ich baue gerade an einer Seite und habe da ein mächtiges Problem.

Ich habe im Anhang mal meinen Aufbau, wie es später aussehen soll (anhang1.jpg). Dann habe ich mal dazu hier meinen Quelltext, wie ich denke, dass es so aussehen sollte.

HTML:
<!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 rel="stylesheet" type="text/css" href="shared_files/styles.css">
<title>Willkommen bei Peddinghaus</title>
</style>
<script src="site-test/deutsch/willkommen/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div style="width:1000px;margin:0px auto;">
<div id="navi">Platz für die Navigation</div>

<div id="inhalt">PLatz für Text
	<div id="sub-navi">PLatz für die Sub-Navi</div>
    <div id="bilder-box">Platz für die Bilder</div>
</div>

<div id="footer">Platz für den Footern</div>
</div>
</body>
</html>

Css dazu gibt es hier:
HTML:
#navi {height:275px;width:1000px;}
#inhalt {width:1000px;}
#footer {height:85px;width:1000px;}
#bilder-box {float: right;width:175px;padding-left:10px}
#sub-navi {width:325px;float:left;}

Und das kommt bei mir bei herum in DW (anhang2.jpg). Da kann doch irgendetwas nicht richtig sein..

Ich wäre euch super dankbar, wenn ich mir helfen könntet. Ich weiß nicht woran es liegt. Und langsam werde ich auch leicht frustriert, weil ich die Welt momentan nicht mehr verstehe :eek:

Danke euch.
 

dosonaro

Aktives Mitglied

AW: Div's verschachteln

Schau mal habe dir hier was gebastelt, die css eigenschaften musste halt noch für dich anpassen. Bitte sehr

HTML:
<head>
<style type="text/css">
<!--

body {
margin:0px;
padding:0px;
}

div#navigation {
width:500px;
height:50px;
background-color:#FF0000;
}

div#inhalt {
width:480px;
padding:10px;
margin-top:20px;
background-color:#990000;
}

div#subnavi {
width:170px;
height:200px;
background-color:#00FF00;
}

div#text {
width:300px;
height:200px;
background-color:#0000FF;
float:right;
}

div#bildbox {
width:50px;
height:50px;
float:right;
margin-right:10px;
margin-top:10px;
background-color:#FF00FF;
}

div#footer {
width:500px;
height:50px;
background-color:#00CC00;
clear:both;
margin-top:5px;
}

-->
</style>
</head>

<body>

<div id="navigation">Hier die Navigation</div>

    <div id="inhalt">
    
        <div id="text">Hier Text
    
            <div id="bildbox">Hier die BIldbox</div>
    
        </div>

<div id="subnavi">Hier die Subnavi</div>

</div>

<div id="footer">Hier der Footer</div>

</body>
</html>
 

sokie

Mod | Web

AW: Div's verschachteln

ich würde im div Inhalt zwei bereiche einrichten. einmal die #sub-navi (mit float:left) und den inhaltsbereich (zb #content mit float:left).
im footer werden diese floats geklärt:
#footer{ clear:left;... }

im neuen #content wird das #bilder-box(mit float:right) eingerichtet.hier würde ich einen leeren div anschliessen, zB <div style="clear:right"></div> um auch das floaten der bilder-box zu klären.
so sollte es gehen.

die clear Funktionalität ist bei solchen floats wichtig, die hast du in deinem code ausgelassen.
 
Zuletzt bearbeitet:

Zero-PSD

Selbsternannter Held

AW: Div's verschachteln

Ich habe jetzt schon vermehrt vom clearen gelesen, welches mi bislang überhaupt nicht bekannt war. Ich merke aber, dass es anscheinend sehr wichtig ist, da man sonst nur einen riesen Mist bekommt :D
Allerdings verstehe ich dieses clearen auch noch nicht so ganz, kennt da einer einen Link, der es erklärt. Habe schon gesucht, finde aber keine mir schlüssigen Erklärungen :hmpf:

@dosonaro: Nette Idee, aber das wird später ein Flash-Objekt sein :rolleyes:

Danke Euch allen auf jeden Fall!
 

dosonaro

Aktives Mitglied

AW: Div's verschachteln

clear musst du benutzen, wenn du float benutzt

"Die Angabe clear beendet das Umfließen andere Elemente. Ein mit clearfloat-Eigenschaft formatiert werden, damit nachfolgende Elemente um dieses Element wieder herum fließen." formatiertes Element ist das Erste, dass nicht mehr neben anderen Elementen steht. Es kann aber trotzdem mit der

Oder hier ziemlich weit unten sehr gut erklärt:
 

Zero-PSD

Selbsternannter Held

AW: Div's verschachteln

Na, das ist doch mal 'nen Link!
Ich danke Euch allen, hab's jetzt geschafft. So schwer war es am Ende dann doch wieder nicht :D
 
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

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.858
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben