Ich komme mit <div> nicht mehr klar

Diskutiere mit über: Ich komme mit <div> nicht mehr klar im Web Page Design Forum

  1. iGeek

    iGeek Thread Starter MacUser Mitglied

    Beiträge:
    34
    Zustimmungen:
    0
    Registriert seit:
    02.03.2007
    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. koli.bri

    koli.bri Gast

    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

    Beiträge:
    2.221
    Zustimmungen:
    186
    Registriert seit:
    27.09.2004
    overflow:auto;

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

    iGeek Thread Starter MacUser Mitglied

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

    Beiträge:
    2.221
    Zustimmungen:
    186
    Registriert seit:
    27.09.2004
    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

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

    Beiträge:
    2.221
    Zustimmungen:
    186
    Registriert seit:
    27.09.2004
    nochmals nachgucken :)
    ist schon erledigt...
     
  8. iGeek

    iGeek Thread Starter MacUser Mitglied

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

    Beiträge:
    2.221
    Zustimmungen:
    186
    Registriert seit:
    27.09.2004
    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 ;)
     
  10. koli.bri

    koli.bri Gast

Die Seite wird geladen...
Ähnliche Themen - komme <div> klar Forum Datum
Problem mit verschachtelten div-Boxen Web Page Design 30.08.2016
Problem: DIV sprengt Container Web Page Design 22.08.2013
Link/Scroll zu div id animieren Web Page Design 22.11.2012
HTML (CSS) Schriftfarbe ändern !? Komme nicht weiter! Web Page Design 23.03.2009
Hilfe, ich komme nicht weiter! Web Page Design 08.05.2005

Diese Seite empfehlen

Benutzerdefinierte Suche