[CSS] Gradient background Links --> Rechts - Softwareontwikkeling

dinsdag 30 juni 2009 10:14

Acties:

0 Henk 'm!

int(e^x) = f(u)^n

Topicstarter

Allen,

ik ben aan het sukkelen met de gradient background image voor een website.
De website bevat in het midden van het scherm een flash-header waar de kleur als volgt gaat: Donker groen links naar Licht groen rechts.

Nu heb ik zowel links als rechts van de flash 2 grote witte vlakken en dacht: als ik nu dezelfde kleurcombinatie als achtergrond zou maken......

Hier de desbetreffende HTML en CSS code tot nu toe:

HTML:

<body>

    <!-- Begin wrapper -->
    <div id="Wrapper">
    
        <!-- Begin Header -->
        <div id="Header">
            <object style="position:absolute" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24" width="766" height="407">
                <param name="movie" value="../flash/header_v8.swf?button=1" />
                <param name="quality" value="high" />
                <param name="menu" value="false" />
                <param name="wmode" value="transparent"  />
                    <!--[if !IE]> <-->
                        <object data="../flash/header_v8.swf?button=1" width="766" height="407" type="application/x-shockwave-flash"> 
                            <param name="quality" value="high" />
                            <param name="menu" value="false" />
                            <param name="wmode" value="transparent"  />
                            <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
                            FAIL (the browser should render some flash content, not this).
                        </object>
                    <!--> <![endif]-->
            </object>
        </div>
        <!-- End Header -->
        
        <!-- Begin Left Column -->
        <div id="LeftCol">
            <ul>
                <li><a href="#">Mijn gegevens</a></li>
                <li><a href="#">Mijn afspraken</a></li>
            </ul> 
            <img alt="" src="../images/li.gif" style="margin:0 0 0 10px" /><br />
            <ul>
                <li><a href="#">Afspraak maken</a></li>
                <li><a href="#">Gastenboek</a></li>
                <li><a href="#">en nog iets...</a></li>
            </ul> 
        </div>
        <!-- End Left Column -->
        
        <!-- Begin Content Column -->
        <div id="Content">
            Hier komt de eigenlijke content. <br/>
            Dit wordt dynamisch opgevuld zoals de linkernavigatie. <p/>
            De gebruikte coding-taal hiervoor zal C# zijn icm ASP.NET <br/>
            Deze Div wordt automatisch in hoogte aangepast aan de eigenlijke content....
        </div>
        <!-- End Content Column -->
        
        <!-- Begin Footer -->
        <div id="Footer">
            &copy; 2009 - Kapsalon-eva.be
        </div>
        <!-- End Footer -->
    
    </div>
    <!-- End Wrapper -->

</body>
</html>

en de CSS

Cascading Stylesheet:

* { padding: 0; margin:0; }

html{
    background-image:url('../images/test.jpg');
    background-repeat:repeat-y;
}

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}

#Wrapper{
    margin: 0 auto; 
    width:766px;
    background:#f2f2e6;

    /*width:922px;*/
}

#Header{
    color:#333;
    width:766px;
    height:407px;
    float:left;
    border-style:none;
    margin:0px;
    background:#bd9c8c;
    /*background:url('../images/bg_header.jpg') top left no-repeat;*/
    
    /*
    padding:10px;
    border:1px solid #ccc;
    */
}

#LeftCol{
    color:#333;
    border-style:none;
    background:#e7dbd5;
    margin:0px;
    padding:0px;
    height:auto;
    width:258px;
    float:left;
    
    /*
    border:1px solid #ccc;
    margin:0px 5px 5px 0px;
    padding:10px;
    height:350px;
    width:195px;
    */
}

#Content{
    float:right;
    color:#333;
    border-style:none;
    background:#f2f2e6;
    margin:0px;
    padding:0px;
    height:auto;
    width:508px;
    display:inline;
    
    /*
    border:1px solid #ccc;
    width:678px;
    height:350px;
    padding:10px;
    margin:0px 0px 5px 0px;
    */
}

#Footer{
    width:766px;
    clear:both;
    color:#333;
    border-style:none;
    background:#bd9c8c;
    margin:0px;
    padding:0px;
    text-align:center;
    
    /*
    width:900px;
    padding:10px;
    margin:0px 0px 10px 0px;
    border:1px solid #ccc;
    */
}



ul{margin:10px; padding:0px; list-style:none}
li{ line-height:20px; font-size:12px }
li a{ background:url(../images/Scissor.png) no-repeat; background-position:0 5px; margin:0px; padding-left:13px; color:#717353; text-decoration:none}
li a:hover{color:#717353; text-decoration:underline}
}

Nu is het zo dat de code die ik gebruik wel degelijk werkt maar enkel voor een max resolutie van 1024.
De afbeelding heeft de volgende afmetingen: 984 * 5 px.

Nu vroeg ik mij af of er een mogelijkheid bestaat om de BREEDTE onafhankelijk van de browser te laten vullen dmv CSS.....

Ik heb al gevonden dat er bepaalde code van Microsoft zelf is om een gradient toe te passen zonder image, maar dit werkt enkel onder IE.

Hier nog een klein printscreentje van wat ik bedoel (let niet op de kleuren van de gradient

dit was voor duidelijkheid

Afbeeldingslocatie: http://img31.imageshack.us/img31/7296/sitep.th.jpg

ps: mijn resolutie is 1280 px dus hoe groter resolutie hoe groter het 'witte' vlak.... vandaar de vraag voor een 'auto' fill mogelijkheid oid

[ Voor 0% gewijzigd door dj_vibri op 30-06-2009 10:18 . Reden: Linkje gecorrigeerd ]

Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.

dinsdag 30 juni 2009 10:45

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Je kunt toch een gradient nemen van laten we zeggen 10 pixels hoog en 3000 pixels breed en deze centreren met background-position?

[ Voor 10% gewijzigd door Bosmonster op 30-06-2009 10:45 ]

dinsdag 30 juni 2009 11:02

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Als je de gradient dan aan beide kanten na een zeg 200-300 pixels gewoon naar de zelfde kleur laat lopen kun je die kleur als achtergrond instellen.

Dus:

- Een image van je website-breedte met aan beide kanten 300px voor een gradient verloop.
- Daarna gewoon de laatste kleur van de gradient als achtergondkleur instellen.

dinsdag 30 juni 2009 11:04

Acties:

0 Henk 'm!

dj_vibri

int(e^x) = f(u)^n

Topicstarter

@ both: Straks eens proberen en wat betreft de breedte van 3000 pixels, krijg je dan geen scrollbars?

Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.

dinsdag 30 juni 2009 11:09

Acties:

0 Henk 'm!

jbdeiman

@dj_vibri
De achtergrond heeft niets met de breedte van de website te maken, dat is het leuke van een background.