Ich komme mit <div> nicht mehr klar

Dieses Thema im Forum "Web Page Design" wurde erstellt von iGeek, 08.03.2007.

  1. iGeek

    iGeek Thread Starter MacUser Mitglied

    MacUser seit:
    02.03.2007
    Beiträge:
    34
    Zustimmungen:
    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:

  2. 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. :)
     
  3. simusch

    simusch MacUser Mitglied

    MacUser seit:
    27.09.2004
    Beiträge:
    2.226
    Zustimmungen:
    187
    overflow:auto;

    ist die lösung...
    zeigt die balken nur an wenn benötigt :)
     
  4. iGeek

    iGeek Thread Starter MacUser Mitglied

    MacUser seit:
    02.03.2007
    Beiträge:
    34
    Zustimmungen:
    0
    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...
     
  5. simusch

    simusch MacUser Mitglied

    MacUser seit:
    27.09.2004
    Beiträge:
    2.226
    Zustimmungen:
    187
    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: 08.03.2007
  6. iGeek

    iGeek Thread Starter MacUser Mitglied

    MacUser seit:
    02.03.2007
    Beiträge:
    34
    Zustimmungen:
    0
    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!
     
  7. simusch

    simusch MacUser Mitglied

    MacUser seit:
    27.09.2004
    Beiträge:
    2.226
    Zustimmungen:
    187
    nochmals nachgucken :)
    ist schon erledigt...
     
  8. iGeek

    iGeek Thread Starter MacUser Mitglied

    MacUser seit:
    02.03.2007
    Beiträge:
    34
    Zustimmungen:
    0
    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...
     
  9. simusch

    simusch MacUser Mitglied

    MacUser seit:
    27.09.2004
    Beiträge:
    2.226
    Zustimmungen:
    187
    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 ;)
     
Die Seite wird geladen...

Diese Seite empfehlen