• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div Container 100%

D

djfabi

Mitglied
hallo :D

Also ich habe mal ein Mark-UP programmiert, aber komme nicht weiter...

Also ich habe 2 Header, und ein Document. In diesem Document ist noch eins. darin nocheins.

Das soll so sein!

Aber wenn ich im dritten mit <br/> so verlängere, das es über 100% ist, verlängert sich der Border nur des Dritten, nicht des 2 und 1.

Wie änder ich das?

Hier erstmal der Code:

HTML: 
<html><head>


    <title></title>

<style>

html {    
height: 100%;    
overflow: auto;
}

body {    
height: 100%;    
padding: 0;    
margin: 0;
}

#eins {    
height: 50px;    
width: 100%;    
background-color: #FF0000;    
position: fixed;    
top: 0px;    
left: 0px;    
z-index: 20;
}

#zwei {    
height: 50px;    
width: 100%;    
background-color: #00FF00;    
position: fixed;    
top: 50px;    
left: 0px;    
border-top : none;    
border-left: none;    
border-right: none;   
border-bottom: 1px solid #996699;    
z-index: 20;
}

#doc1 {    
min-height: 100%;    
width: 1000px;    
border-top : none;    
border-bottom: none;    
border-left: 1px solid blue;   
 border-right: 1px solid blue;    
margin: auto;    
z-index: 0;   
 background-color: #FFFFFF;   
 position: relative;
}

#do2 {    
min-height: 100%;    
width: 650px;   
 position: absolute;   
 top: 0px;   
 left: 175px;   
 border-top: none;  
  border-left: 1px solid orange;  
  border-right: 1px solid orange;  
  border-bottom: none;
}

#d3 { 
   min-height: 100%; 
   width: 450px;   
 position: absolute; 
   top: 0px;
    left: 100px; 
   border-top: none;    
border-left: 1px solid green;    
border-right: 1px solid green;    
border-bottom: none;
}





</style>




</head><body>



<div id="eins"></div>

<div id="zwei"></div>


<div id="doc1">
    <div id="do2">


        <div id="d3">


        <br />
<br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />




        </div>


    </div>


</div>




</body>
</html>


Hier der Code .

Bitte helft mir, ich bin jetzt schon seit 2 Wochen erfolglos am Verzweifeln...

Danke im Vorraus

Gruß djfabi
 
Verzichte auf fixierte Positionierung. Und komm auch nicht auf die Idee absolute oder relative Positionierung zu verwenden. Und verzichte auf die Höhenangaben. Dann richten sich die Inhalte auch nach den Inhalten aus.

Die Frage wäre allerdings auch: wie soll das Design letztlich aussehen was Du erreichen willst? Mit "Dokument in Dokument in Dokument" kann ich nichts anfangen.
 
Verzichte auf fixierte Positionierung.
Zum Vergrößern anklicken....
Und wie soll es dann fest auf dem Bildschirm sein, wenn man scrollt?
Das will ich ja!

Und komm auch nicht auf die Idee absolute oder relative Positionierung zu verwenden.
Zum Vergrößern anklicken....
Und wieso?

Und verzichte auf die Höhenangaben. Dann richten sich die Inhalte auch nach den Inhalten aus.
Zum Vergrößern anklicken....
Das soll ja gerade nicht so sein.

Die Frage wäre allerdings auch: wie soll das Design letztlich aussehen was Du erreichen willst? Mit "Dokument in Dokument in Dokument" kann ich nichts anfangen.
Zum Vergrößern anklicken....
Dafür hab ich ja den Quellcode gepostet.

Das Design ist schon richtig so, aber Doc1 und Do2 werden nicht im Border erweiteret wenn d3 größer als 100% ist

Das ist meine Frage.
 
Nochmal:

djfabi schrieb:
Das Design ist schon richtig so, aber Doc1 und Do2 werden nicht im Border erweiteret wenn d3 größer als 100% ist
Zum Vergrößern anklicken....

Das verstehe ich nicht. Ich weiß nicht was Du mit "border" und "erweitert" meinst. Kann man sich das irgendwo auch mal anschauen wovon du sprichst?
 
Also :D
So sieht es aus:

html.de1.jpg

So soll es ja auch aussehen, das ist schon richtig so..

Aber wenn ich jz über den Rand scolle
:html.de2.jpg

Das hier!

Also nochmal dieser Blaue und der Orangene Border sollen auch mitscrollen, das es bis nach unten geht!

Wie geht das jz?

Ich hoffe ich hab es jz besser erklärt..

Danke im Vorraus :)
 
Wieso sollte man auf absolute und relative Positionierung denn verzichten? Ich arbeite zu 80% damit und habe keinerlei bedenken oder sonstiges.

zu deinem Problem djfabi:

Ich sehe da keinen orangefarbenen Balken. Wie meinst du das mit dem Scrollen?

Soll der Balken da oben hängen bleiben, während der Rest der Webseite scrollt? Wenn ja, dann erreichst du das mit position: fixed;.
Dein Skript habe ich eben mal abgespeichert und geladen. Der rote und grüne Balken hängen bei mir oben im Browser und bewegen sich kein Stück, während der Inhalt scrollt.

Entweder habe ich da was falsch verstanden und du solltest es noch genauer erklären oder dein Problem ist kein Problem?


Und anstatt dein Skript mit <br /> voll zu spammen, solltest du lieber margin verwenden. Dadurch wächst dein Skript nicht unnötig (Bytes).


lascaux
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben