Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 22.06.2013, 13:44
ChaosZarth ChaosZarth ist offline
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