Ergebnis 1 bis 3 von 3

Thema: css overflow problem

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

    Standard css overflow problem

    Hallo liebe Forumgemeinde,

    ich habe da gerade ein Problem wo ich nicht weiterkomme bzw. erstmal an die Grenzen meines Wissen komme.
    Im HTML Code sind divs als Rahmen_links und Rahmen_rechts bezeichnet. Diese sollen eine feste Größe habe und als Bildhalter dienen. Diese sind absolut positioniert zum Hauptcontainer. In einer großen Monitorauflösung gibt es kein Problem. Bei kleineren Auflösungen werden und sollen die Elemente Rahmen_links und _rechts nicht voll dargestellt werden, mehr als Bildauslauf .... Problem ist allerdings das er die Größe vom div#center + die Größe vom div#rahmen_rechts addiert und somit einen waagerechten Scrollbalken darstellt. Wenn ich den body auf overflow:hidden stelle dann ist es so wie es sein sollte. Allerdings ist dann der senkrechte automatische Bildlauf nicht mehr da, wenn ein user die Höhe nicht mehr als 600px darstellen kann dann sollte er ja scrollen können. Einfach bei #Rahmen_rechts ein overflow:hidden setzen funktioniert nicht.
    Also - Senkrecht Bildlauf automatisch wenn benötigt - Waagerechter Bildlauf komplett unerwünscht.

    Ich glaub ich bin mit meiner Positionierung komplett durcheinander gekommen. Natürlich ist das nur der Entwurf. Normalerweise stecken mehr Inhalte und Grafiken dahinter .....


    HTML Code :
    </head>
    <body>
    <div id="main-1">
    <div id="center">
    <div id="rahmen_links"></div><div id="rahmen_rechts"></div>
    <div id="impressum"><a href="impressum.html" title="Impressum">Impressum</a></div>
    </div>
    <div id="left"></div>
    </div>
    <div id="main-2">
    <div id="right"></div>
    </div>
    </body>
    </html>


    CSS :

    * { outline:none 0; margin: 0; padding: 0; list-style: none; }
    body { font-size: 13px; font-family: arial, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #dbbd81; word-wrap: break-word; }
    #main-1,#main-2 {width: 50%; }
    #main-1 { float: left; }
    #main-2 { float: right; }
    #center { background-color: #fff; background-repeat: no-repeat; background-position: 70% 91%; float: right; width: 890px; margin-right: -445px; position: relative; height: 800px; }
    #left,#right {background: #fff; }
    #left { background-color: white; background-image: url(../images/verlauf.png); background-repeat: repeat-y; background-position: left top; height: 120px; margin-top: 105px; margin-right: 300px; border-top: 1px solid white; border-bottom: 1px solid white; }
    #right { background-image: url(../images/verlauf1.png); background-repeat: repeat-y; background-position: right center; height: 120px; margin-top: 105px; margin-left: 300px; border-top: 1px solid white; border-bottom: 1px solid white; }
    div {min-height: 1px; /* IE 7 */}
    * html div {height: 1px; }
    * html #left {margin: 0;}
    * html #center { margin-left: -3px; }
    #rahmen_links { background-image: url(../images/blume.png); background-repeat: no-repeat; background-position: center; position: absolute; top: 50px; left: -361px; width: 360px; height: 640px; overflow: hidden; float: left; border: solid 1px black; }
    #rahmen_rechts { background-image: url(../images/blume1.png); background-repeat: no-repeat; background-position: center; position: absolute; top: 50px; left: 891px; width: 360px; height: 640px; overflow: hidden; border: solid 1px black; }
    #impressum { color: #5a2d18; font-size: 11px; text-decoration: none; text-align: center; position: relative; top: 801px; left: 750px; width: 100px; height: 15px; border: solid 1px red; }
    #impressum a { color: #5a2d18; text-decoration: none; }
    #impressum a:hover { color: white; text-decoration: none; }


    Ich bin mir sicher mit dem div#impressum kann man auch besser lösen ....
    Falls sich jemand die Mühe macht und das sich anschaut : Vielen Dank im Voraus.
    mfg
    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
    Fortgeschrittene/r Avatar von unknownsoldier
    Registriert seit
    16.06.2010
    Ort
    "Dreamland"
    Alter
    26
    Beiträge
    174
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: css overflow problem

    overflow-x:hidden;

  3. #3
    HTML Newbie
    Registriert seit
    31.01.2007
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: css overflow problem

    nochmal danke für den Tip.

    Allerdings ist mir jetzt ein kleines Problem aufgefallen. Die Darstellung des Layouts funktioniert im Internet Explorer 7 (nur da) leider nicht korrekt. 1 Fehler .....

    Der Container #right richtet sich anscheinend im IE7 nach dem #center aus. dadurch ist der Container nicht an seinem vorgesehen Platz. IE8 oder MOzilla klappt es.

Ähnliche Themen

  1. overflow:visible in IE7
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 29.09.2008, 18:23
  2. CSS: float:left; und overflow:auto; IE6 und kleiner==Problem
    Von LinuxMan im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 19.07.2008, 20:00
  3. Problem: style="overflow:auto" .....
    Von Dark_Dog im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 21.06.2007, 12:27
  4. Overflow
    Von mgraf im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 08.01.2007, 01:07
  5. #content overflow Problem
    Von mgraf im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 2
    Letzter Beitrag: 08.01.2007, 00:47

Stichworte

Berechtigungen

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