zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie funktioniert der overflow: hidden? Oder warum funktioniert er nicht?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.06.2013, 13:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2013
Beiträge: 10
ChaosZarth befindet sich auf einem aufstrebenden Ast
Standard Wie funktioniert der overflow: hidden? Oder warum funktioniert er nicht?

Hi Forum,

ich habe eine Site auf der ich den oberen Bereich schwarz darstellen will. Also er verläuft von fast ganz links unten bis fast ganz rechts oben.
html:
Code:
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" media="all" type="text/css" href="./css/style.css" />
 
    </head>
    <body>
        <div id="wrapper">
            <div id="foregrnd"></div>
        </div>
    </body>
</html>
css:
Code:
html, body {
    margin: 0;
    height: 100%;
}
body {
    background-color: #fff;
}

#wrapper {
    width: 100%;
    height: 100%;
}

#foregrnd {
    background-color: #000;
    background-repeat: repeat-x;
    position: absolute;
    top: -30%;
    left: -10%;
    overflow: hidden;
    height:100%; 
    width:120%;
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
Ich habe dazu die transform-Eigenschaft benutzt und es ist auch alles ganz schick, aber dass rechts eine Ecke aus dem Fenster rausragt, so dass man scrollen muss, ist nicht gewollt. Ich dachte, dass ich hier overflow: hidden; nehmen könnte, aber das funktioniert nicht. Auch wenn ich dem wrapper eine max-width: 100%; verpasse geht es nicht.

Vielleicht habt ihr ja einen Lösungsvorschlag. Danke im Vorraus.

Gruß

Karsten
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.06.2013, 14:05
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Overflow bezieht sich auf den darin liegenden container. Heißt: Wenn ein Container Overflow-Hidden hat, und darin ein Container liegt, dann wird dieser bei "überfließen" zum Teil verschwinden.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.06.2013, 14:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2013
Beiträge: 10
ChaosZarth befindet sich auf einem aufstrebenden Ast
Standard

Danke für die schnelle Antwort.

Heißt das, dass ich dem wrapper ein overflow: hidden; geben muss? Weil wenn ich das probiere geht es auch nicht:

css:
Code:
html, body {
    margin: 0;
    height: 100%;
}
body {
    background-color: #fff;
}

#wrapper {
    max-width: 100%;
    height: 100%;
    overflow: hidden;
}

#foregrnd {
    background-color: #000;
    position: absolute;
    top: -30%;
    left: -10%;
    
    height:100%; 
    width:120%;
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
Mit Zitat antworten
  #4 (permalink)  
Alt 22.06.2013, 14:57
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.825
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

position: relative; für #wrapper, sonst ist dein Element nicht darin "verankert".
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
  #5 (permalink)  
Alt 22.06.2013, 15:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2013
Beiträge: 10
ChaosZarth befindet sich auf einem aufstrebenden Ast
Standard

Wow, supi, funzt tadellos!

Tausend Dank. *freu* *hüpf*
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Probleme mit overflow: hidden im IE7 dabjoern CSS 7 27.01.2011 12:36
Mysteriöse weiße Linie Xethon CSS 3 27.02.2010 16:50
Mouseover funktioniert nicht (externe Methode) blackhtml CSS 2 07.04.2009 18:49
visibility: hidden; funktioniert nicht, warum? webseite_freaky CSS 2 26.02.2009 12:35
Problem im Firefox mit Listenhintergrund netnite CSS 9 05.02.2009 12:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:33 Uhr.