Ich komme mit <div> nicht mehr klar

I

iGeek

Mitglied
Thread Starter
Dabei seit
02.03.2007
Beiträge
34
Reaktionspunkte
0
Hallo Community,

Ich bräuchte mal eure Hilfe bei den <div>-Tags. Ich hab mal vor ca. 2 Jahren mit diesen Tags Seiten erstellt, aber ich irgentwie hab ich alles vergessen wie es scheint. Ich hab mal unten einen Screenshot angehängt wo man sehen kann wie ich das Layout per <div> machen will. Was in diesem Layout auch umgesetzt werden muss, ist dass sich der rechte untere "Frame" scrollen lässt bei Bedarf, d.h. wenn der Text zu groß wird.

Könnt ihr mir dabei mal wieder auf die Sprünge helfen wie ich das mit <div> mache...
 

Anhänge

  • screen.jpg
    screen.jpg
    17,9 KB · Aufrufe: 82
Mittels der CSS-Eigenschaft "overflow:scroll" kannst Du Blockelementen sagen, dass sie, sofern der Inhalt größer ist als sie selbst, scrollen sollen.

Das verursacht bei einigen Browsern jedoch permanente Scrolleisten, was bei zu wenig Text zum Scrollen meist doof aussieht :D

gruß
Lukas

PS.: Schau mal bei SelfHTML rein, les ein paar Sachen quer und Du solltest wieder drin sein in der Materie. :)
 
overflow:auto;

ist die lösung...
zeigt die balken nur an wenn benötigt :)
 
Danke mal für die schnellen Antworten bzgl des Scrollens. Kann mir vielleicht noch einer ein wenig Code mit einer abfolge wie ich die <div>-Tags setzen muss posten. Ich hab mich da jetzt schon rumgespielt eine ganze Weile und bekommen immer nur die Boxen hin die sich aber wild verschieben wenn ich mal 2 positioniert hab und eine neue hinzufüge...
 
Code: 
<html>
<head>
<style>
* {
    margin:0;
    padding:0;
    }

html, body {
    height:100%;
    }

body {
    background-color:#FFFECB;
    text-align:center; /* horizontal centering for IE Win quirks */
    }

#distance { 
    width:1px;
    height:50%;
    margin-bottom:-300px; /* half of container's height */
    float:left;
    }

#container {
    margin:0 auto;
    position:relative; /* puts container in front of distance */
    text-align:left;
    height:600px;
    width:800px;
    clear:left;
}

#topleft {
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:400px;
    border:1px solid #000;
    background-color:#D7A85A;
}

#topright {
    position:absolute;
    top:0px;
    left:200px;
    height:80px;
    width:600px;
    border:1px solid #000;
    background-color:#D7A85A;
}

#bottomleft {
    position:absolute;
    top:400px;
    left:0px;
    height:200px;
    width:200px;
    border:1px solid #000;
    background-color:#D7A85A;
}

#content {
    position:absolute;
    top:80px;
    left:200px;
    height:520px;
    width:600px;
    overflow:auto;
    border:1px solid #000;
    background-color:#B98531;
}
</style>

<style type="text/css">@import("iemac-center.css");</style>

</head>
<body>
<div id="distance"></div>
<div id="container">
    <div id="topleft"></div>
    <div id="topright"></div>
    <div id="bottomleft"></div>
    <div id="content"><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>
</body>
</html>

Damit auch der IE die Seite vertikal zentriert:


Datei iemac-center.css
Code: 
html, body {
	height:auto;
}
 
Zuletzt bearbeitet:
Super danke, ich werd mal schaun was ich auf der Basis hinbekomme, ich hab schon Sorgen wie ich das Ganze dann noch browsermittig positionieren werde aber das bekomme ich schon noch hin denk ich. Wenn nicht werd ich sicher wieder posten ;)

Schönen Abend noch bis dahin...

edit

@simusch: klappt wunderbar auf deiner Basis so wie ich das haben wollte!
 
nochmals nachgucken :)
ist schon erledigt...
 
Wow weiß gar nicht was ich sagen soll, außer danke!

Lässt mir ja gar keine Arbeit mehr über ;)

Ich werd euch dann aber noch erfreuen mit einem Review wenns soweit mal ansehnlich zu testen ist...
 
ich verwende diese struktur ziemlich häufig... vorallem das zentrieren auf der Seite, weil es eben richtig klappt und auch beim Fenster kleinerziehen der Content nicht zum Browser rausrutscht.

Bei der Variante mit

position:absolute;
left:50%;
margin-left:-300px (Halbe Content-Breite)

passiert eben genau dies ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten