Ergebnis 1 bis 3 von 3

Thema: [HTML/CSS|PROBLEM]Scrollen bei vielen Divs

  1. #1
    HTML Newbie
    Registriert seit
    10.07.2011
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard [HTML/CSS|PROBLEM]Scrollen bei vielen Divs

    Hallo,

    ich habe das Problem, dass folgende Seite (siehe Screenshoot 1) bei großen Auslösungen zwar bestens funktioniert (der blaue Rand verteilt sich sowohl oben und unten als auch links und rechts gleichmäßig um den Inhalt), bei kleineren Auflösungen/eingeschalteter Zoomfunktion des Browsers (wenn man um den gesamten Inhalt sehen zu können scrollen muss) der Scrollbalken es jedoch nicht zulässt, nach ganz links und ganz nach oben zu scrollen (in den gängien Browsern IE9/Firefof/Aurora 7.0a2/Chrome 12.0.742.122).

    Etwas schwer zu erklären, deshalb ein paar Screenshoots :

    optimale Darstellung bei großer Auflösung (alle Screenshoots sind von mir - besonders links - ein bisschen zugeschnitten worden):



    Ruft man die Webseite nun mit einer kleineren Auflösung auf oder verwendet wie ich hier die browserinterne Zoomfunktion, so ergibt sich folgendes Problem:

    => obwohl ein Teil des Rosa-Bereichs abgeschnitten ist, lässt der Scrollbalken es nicht zu, nach oben (bzw. bei einer höheren Zoomstufe nach links) zu schrollen !

    nach unten hingegen kann man wie gewünscht problemlos zoomen:



    Das Problem ist also, dass links (etwa die Breite des Lila-Bereichs) und oben (die Hälfte des Rosa-bereichs) abgeschnitten sind

    Ich hoffe, irgendjemand kann mir helfen, denn dieses problem bewegt mich nun schon eine Woche lang und ich bin am Verzweifeln
    Ich hab schon so viel probiert...

    Die HTML-Datei:
    HTML-Code:
    <!DOCTYPE
     html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html
     xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head>
    
    
    <meta
     http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    
    <title><<<<<Test>>>>>></title>
    
    
    <link
     rel="shortcut icon" href="favicon/BETA (1).ico" type="image/x-icon" />
    
    
    </head>
    
    
    <body>
    
    <link
     href="CSS/index.css" rel="stylesheet" type="text/css">
    
    
    <div
     id="content_gesamt">
    
    
        
    <div id="head">
    
        
    </div>
    
    
       
        <div id="content_fix">
    
    
        
        <div class="sidebar1"></div>
    
        
        <div class="content"></div>
    
        
        <div class="sidebar2"></div>
    
            
    <div id="foot">    </div>
    
    
        
    </div>
    
    
    </div>
    
    
     
    
    <div
     class="rand_rel"></div>
    
    <div
     class="rand_rel"></div>
    
    
    </body>
    
    </html>
    ...und die zugehörigen CSS-Definitionen (ich habe in der letzten Woche so unendlich viel darin ausprobiert/verändert, sodass jetzt allerlei Zeug drinsteht, welches ich anfangs vielleicht weggelassen hätte und was unnötig ist):

    HTML-Code:
    @charset
     "utf-8";
    
    
    /*###################################*/
    
    /*##############EBENE0###############*/
    
    /*###################################*/
    
    
    HTML,
     BODY {
    
        
    margin: 0;
    
        
    padding: 0;
    
        
    height: 100%;
    
        
    /*++++++FARBE++++++*/
    
        
    background-color: #3300cc;
    
        
    /*++++++FARBE++++++*/
    
    }
    
    
    /*###################################*/
    
    /*##############EBENE1###############*/
    
    /*###################################*/
    
    
    .
    rand_rel {
    
        
    float: left;
    
        
    /*++++++FARBE++++++*/
    
        
    background-color: #3300cc;
    
        
    /*++++++FARBE++++++*/
    
        
    width: 50%;
    
        
    min-height: 100%;
    
        
    height: auto;
    
    }
    
    
    *
     html .rand_rel {
    
        
    height: 100%;
    
    }
    
    
    #content_gesamt
     {
    
        
    margin: 0 auto;
    
        
    left: 50%;
    
        
    top: 50%;
    
        
    right: 50%;
    
        
    bottom: 50%;
    
        
    margin-left: -500px;
    
        
    margin-top: -375px;
    
        
    width: 1000px;
    
        
    height: 750px;
    
        
    position: absolute;
    
        
    background-color: #3300cc;
    
        
    float: left;
    
    }
    
    
    *
     html #content_gesamt {
    
        
    height: 100%;
    
    }
    
    
    /*###################################*/
    
    /*##############EBENE2###############*/
    
    /*###################################*/
    
    
    #head
     {
    
        
    width: 1000px;
    
        
    height: 150px;
    
        
    background-color: #FF3E96;
    
        
    position: fixed;
    
    }
    
    
     
    
    #content_fix
     {
    
        
    width: 1000px;
    
        
    height: 600px;
    
        
    position: absolute;
    
        
    margin-top: 150px;
    
        
    margin-bottom: 15px;
    
    }
    
    
     
    
     
    
    /*###################################*/
    
    /*##############EBENE3###############*/
    
    /*###################################*/
    
    
    #foot
     {
    
        
    clear: both;
    
        
    width: 1000px;
    
        
    height: 15px;
    
        
    background-color: #008B00;
    
        
    position: absolute;
    
        
    bottom: 0pt;
    
    }
    
    
    .
    sidebar1 {
    
        
    width: 22px;
    
        
    height: 600px;
    
        
    background-color: #9932CC;
    
        
    float: left;
    
        
    overflow: hidden;
    
        
    position: relative;
    
    }
    
    
    .
    sidebar2 {
    
        
    width: 22px;
    
        
    height: 600px;
    
        
    background-color: #9932CC;
    
        
    float: left;
    
        
    overflow: hidden;
    
        
    position: relative;
    
    }
    
    
    .
    content {
    
        
    width: 956px;
    
        
    margin: 0 auto;
    
        
    height: 600px;
    
        
    float: left;
    
        
    /*++++++FARBE++++++*/
    
        
    background-color: #696969;
    
        
    /*++++++FARBE++++++*/
    
        
    position: relative;
    
    }
    Ich bin für jedne Tipp dankbar

    Viele Grüße
    Philipp
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: [HTML/CSS|PROBLEM]Scrollen bei vielen Divs

    Schmeiß überall die absoluten und relativen Positionierungen samt top, left, right, bottom-Werten raus.
    Die heißen so, weil sie meist absolut unnötig sind und zu den von dir genannten Problemen führen.
    Positioniere besser und ausschließlich mit margin und/oder float.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    10.07.2011
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: [HTML/CSS|PROBLEM]Scrollen bei vielen Divs

    Hi,

    erstmal vielen Dank für deine Antwort
    leider konnte ich alleine durch deinen Tipp das Problem nicht lösen.

    Ich habe aber nach langer Websuche einen Tread zu meinem Thema gefunden:
    http://www.ayom.com/topic-16647.html#entry107301

    Dort habe ich einen Lösungsansatz für mein Problem gefunden, und nun funktioniert es perfekt (es wird horizontal/vertikal zentriert und das Scrollen funktioiniert!) !!

    Das Ganze sieht jetzt so aus:

    HTML-Code:
    <!DOCTYPE
     
     
     html>
    
     
    <head>
    
     
    <meta
     
     
     
     http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    
     
    <title><<<<<Test>>>>>></title>
    
     
    <link
     
     
     
     rel="shortcut icon" href="favicon/BETA (1).ico" type="image/x-icon" />
    
     
    </head>
    
    
     
    <body>
    
     
    <link
     
     
     
     href="CSS/index.css" rel="stylesheet" type="text/css">
    
    
     
    <div
     
     
     
     id="distance_top"></div>
    
    
     
    <div
     
     
     
     id="content_gesamt">
    
    
     
        
     
     
     
    <div id="head"></div>
    
     
       
     
     
     
        <div id="content_fix">
    
     
            
    
     
            
     
     
    <div class="side"></div>
    
     
        
     
     
     
            
    
     
                
     
     
    <div id="content"></div>
    
     
                
    
    
     
        
     
     
     
        <div class="side"></div>
    
     
            
     
     
     
    <div id="foot">    </div>
    
     
            
    
     
        
     
     
     
    </div>
    
    
     
    </div>
    
    
     
    </body>
    
     
    </html>
    HTML-Code:
    /*##############EBENE0###############*/
    
     
    HTML
     
     
     
    , BODY {
    
     
        
     
     
    margin: 0;
    
     
        
     
     
    padding: 0;
    
     
        
     
     
    height: 100%;
    
     
        
     
     
    background-color: #0000FF;
    
     
    }
    
     
    /*###################################*/
    
    
     
    /*##############EBENE1###############*/
    
     
    #distance_top
     
     
     
    {
    
     
        
     
     
    height: 50%;
    
     
        
     
     
    width: 10px;
    
     
        
     
     
    margin-top: -375px;
    
     
        
     
     
    background-color:#0000FF;
    
     
        
     
     
    float: left;
    
     
    }
    
    
     
    #content_gesamt
     
     
     
     {
    
     
        
     
     
    margin: 0 auto;
    
     
        
     
     
    width: 1000px;
    
     
        
     
     
    height: 750px;
    
     
        
     
     
    background-color: #3300cc;
    
     
        
     
     
    clear: left;
    
     
    }
    
     
    /*###################################*/
    
    
     
    /*##############EBENE2###############*/
    
     
    #head
     
     
     
     {
    
     
        
     
     
    width: 1000px;
    
     
        
     
     
    height: 150px;
    
     
        
     
     
    background-color: #FF3E96;
    
     
        
     
     
    overflow: hidden;
    
     
    }
    
    
     
    #content_fix
     
     
     
     {
    
     
        
     
     
    width: 1000px;
    
     
        
     
     
    height: 600px;
    
     
    }
    
     
    /*###################################*/
    
    
     
    /*##############EBENE3###############*/
    
     
    #foot
     
     
     
     {
    
     
        
     
     
    clear: both;
    
     
        
     
     
    width: 1000px;
    
     
        
     
     
    height: 15px;
    
     
        
     
     
    background-color: #008B00;
    
     
    }
    
    
     
    .
     
     
     
     
    side {
    
     
        
     
     
    width: 22px;
    
     
        
     
     
    height: 600px;
    
     
        
     
     
    background-color: #9932CC;
    
     
        
     
     
    float: left;
    
     
        
     
     
    overflow: hidden;
    
     
    }
    
    
     
    #content
     
     
     
     {
    
     
        
     
     
    width: 956px;
    
     
        
     
     
    margin: 0 auto;
    
     
        
     
     
    height: 600px;
    
     
        
     
     
    float: left;
    
     
        
     
     
    background-color: #696969;
    
     
    }
    
     
    /*###################################*/

    Es hat mich aber doch gewundert, dass es im Web nicht viel mehr zum von mir gewünschten Design gibt - sollte das doch eigentlich ein recht verbreitetes und gängiges sein...
    Naja, hauptsache es geht jetzt - und vielleicht hilft meine Lösung ja auch noch manch Anderem weiter!

    Viele Grüße!
    Philipp

Ähnliche Themen

  1. Layout problem, div scrollen
    Von dj-giver im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 24.02.2010, 21:54
  2. HTML-Codes eines divs ausgeben
    Von anagramm im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 14
    Letzter Beitrag: 25.01.2009, 17:15
  3. Unterhalb einer Linie Scrollen HTML
    Von Merlin im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 14.03.2007, 09:39
  4. großes problem mit divs im IE
    Von ALex 16 im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 30.05.2005, 22:55
  5. Antworten: 0
    Letzter Beitrag: 03.02.2005, 12:37

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •