Ich komme mit <div> nicht mehr klar

  1. iGeek

    iGeek Thread StarterMacUser Mitglied

    Mitglied 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:

    • screen.jpg
      Dateigröße:
      17,9 KB
      Aufrufe:
      42
    iGeek, 08.03.2007
  2. koli.bri

    koli.bri

    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. :)
     
    koli.bri, 08.03.2007
  3. simusch

    simuschMacUser Mitglied

    Mitglied seit:
    27.09.2004
    Beiträge:
    2.239
    Zustimmungen:
    188
    overflow:auto;

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

    iGeek Thread StarterMacUser Mitglied

    Mitglied 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...
     
    iGeek, 08.03.2007
  5. simusch

    simuschMacUser Mitglied

    Mitglied seit:
    27.09.2004
    Beiträge:
    2.239
    Zustimmungen:
    188
    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;
    }
    
     
    simusch, 08.03.2007
  6. iGeek

    iGeek Thread StarterMacUser Mitglied

    Mitglied 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!
     
    iGeek, 08.03.2007
  7. simusch

    simuschMacUser Mitglied

    Mitglied seit:
    27.09.2004
    Beiträge:
    2.239
    Zustimmungen:
    188
    nochmals nachgucken :)
    ist schon erledigt...
     
    simusch, 08.03.2007
  8. iGeek

    iGeek Thread StarterMacUser Mitglied

    Mitglied 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...
     
    iGeek, 08.03.2007
  9. simusch

    simuschMacUser Mitglied

    Mitglied seit:
    27.09.2004
    Beiträge:
    2.239
    Zustimmungen:
    188
    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 ;)
     
    simusch, 08.03.2007
  10. koli.bri

    koli.bri

    koli.bri, 09.03.2007
Die Seite wird geladen...
Ähnliche Themen - komme <div> klar
  1. mingorius
    Antworten:
    4
    Aufrufe:
    361
  2. Isegrim242
    Antworten:
    6
    Aufrufe:
    1.028
    Isegrim242
    23.08.2013
  3. apstalker
    Antworten:
    8
    Aufrufe:
    947
    apstalker
    26.11.2012
  4. bigB
    Antworten:
    3
    Aufrufe:
    771
  5. zwiebel79
    Antworten:
    5
    Aufrufe:
    641