XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Wie funktioniert der overflow: hidden? Oder warum funktioniert er nicht? (http://xhtmlforum.de/showthread.php?t=69613)

ChaosZarth 22.06.2013 13:44

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

Thielo 22.06.2013 14:05

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.

ChaosZarth 22.06.2013 14:12

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);
}

:?:

gato 22.06.2013 14:57

position: relative; für #wrapper, sonst ist dein Element nicht darin "verankert".

ChaosZarth 22.06.2013 15:01

Wow, supi, funzt tadellos!:D

Tausend Dank. *freu* *hüpf* :)


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:20 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023