CSS Clip Galerie Problem

Pokerface · 24.11.2009

Hallo alle zusammen,
ich möchte eine Gallerie für meine Website erstellen.
Nun habe ich aber leider ein Problem mit dem clip-attribut.
ersteinmal hatte ich mir die Navigation so vorgestellt:
http://i144.photobucket.com/albums/r176/Reptilica/vorschau-1.jpg
aber irgendwie "funktioniert" das clip-attribut nicht wirklich sodass der Container "Funktionen" nicht abgeschnitten, sondern außerhalb des "Interfaces" angezeigt wird.
ein screenshot:
http://i144.photobucket.com/albums/r176/Reptilica/screen-2.jpg
Könntet ihr mir bitte helfen?
hier der html code:

Code:

<html>
    <head>
        <title>
        Versuch Gallerie
        </title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div id="Navigation">
            <div id="HochButton">
            </div>
            <!-- eigentliche "menüs" -->
            <div id="Interface">
                
                <div id="Alben">
                    A
                </div>
                
                <div id="Bilder">
                    B
                </div>
                
                <div id="Funktionen">
                    C
                </div>
                
            </div>
            
            <div id="RunterButton">
            </div>
            
        </div>        
    </body>
</html>

und der css-code:

Code:

#Navigation { /* enthält alles */
    height:600px;
    width:150px;
    float:left;
    /* Farbe zum Test */
    background-color:#aa0000;
}
/* Befinden sich in Navigation */
    #HochButton{
    width:150px;
    height:50px;
    /* Farbe zum Test */
    background-color:#a00a00;
    }
    
    #Interface{
    width:150px;
    height:500px;
    clip:rect(0px 150px 500px 0px);
    /* Farbe zum Test */
    background-color:#00ff00;
    }
    /* Befinden sich in Interface (eigentliche "Menüs") */
        #Alben{
        width:60px;
        height:500px;
        /* Farbe zum Test */
        background-color:#111111;
        float:left;
        }
        
        #Bilder{
        width:60px;
        height:500px;
        /* Farbe zum Test */
        background-color:#eeeeee;
        float:left;
        }
        
        #Funktionen{
        width:60px;
        height:500px;
        /* Farbe zum Test */
        background-color:#ff00ff;
        float:right;
        }
    
    #RunterButton{
    width:150px;
    height:50px;
    /* Farbe zum Test */
    background-color:#00a0a0;
    }

ich bedanke mich schon mal...
mfg

cebito · 24.11.2009

AW: CSS Clip Galerie Problem

Dein #interface ist 150px breit, die drei container die da rein sollen zusammen 180px (3x60px) - merkst was, kann nicht funktionieren.

Pokerface · 24.11.2009

AW: CSS Clip Galerie Problem

die 30px, die überstehen sollen auch mit dem clip-attribut des Interfaces abgeschnitten werden.

mfg

cebito · 24.11.2009

AW: CSS Clip Galerie Problem

Pokerface schrieb:
die 30px, die überstehen sollen auch mit dem clip-attribut des Interfaces abgeschnitten werden.

mfg

clip wirkt aber nur auf positionierte Elemente, also:

Code:

    #Interface{
[COLOR=Red]    position:absolute;[/COLOR] /* oder fixed */
    width:150px;
    height:500px;
    clip:rect(0px 150px 500px 0px);
    /* Farbe zum Test */
    background-color:#00ff00;
    }

dann funzt das auch

Pokerface · 24.11.2009

AW: CSS Clip Galerie Problem

das hilft auf jeden fall dagegen, dass der "Funktionen"-Container nicht außerhalb des "Interfaces" angezeigt wird, aber irgendwie verschwindet er vollkommen ,d.h. die 30px, die eigentlich noch angezeigt werden müssten werden nicht angezeigt.
Wisst ihr vielleicht wieso das so ist?

mfg

cebito · 24.11.2009

AW: CSS Clip Galerie Problem

Uups, vergessen, dein #interface muss natürlich trotzdem 180px haben, sonst hast ja nix zum abschneiden

Pokerface · 24.11.2009

AW: CSS Clip Galerie Problem

Danke danke

thread kann geschlossen werden

mfg
ps: endlich kann ich mit dem "galeriescript" anfangen