CSS bg-img half transparant sliding doors

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Nicoow Unknown

Nicoow Unknown

04/10/2010 19:15:48
Quote Anchor link
Hallo allen,

Ik heb op het moment een probleempje.
Ik ben een layout aan het basen, en heb een probleempje met stretchbare buttons.
Meestal gebruik ik hiervoor de "Css Sliding doors" techniek.
Hierbij heb je een <span> voor de linkerkant van je button, (alleen de rounded corner) en de rest komt van een div die eronder licht (een rounded corner met een heel lang recht stuk eraan).

Nu werkt dit leuk met normale buttons, maar ik heb nu half transparante gifs.
Omdat deze techniek altijd een beetje overlap heeft, is er nu een deel van de button iets donkerder (2 transparanten over elkaar).

Nu heb ik al een hoop lopen kloten met margins en paddings, te vergeefs.
Heeft iemand van jullie een idee hoe dit moet?

Het gaat om 2 verschillende types.
Hieronder een afbeelding van beiden.

Afbeelding

Afbeelding
 
PHP hulp

PHP hulp

29/03/2024 01:33:10
 
- -

- -

04/10/2010 22:06:07
Quote Anchor link
Padding of margin gebruiken zodat het binnenste element niet te breed wordt.

Bijvoorbeeld:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a><span>Klik op mij!</span></a>

<style>
a {
    background: url(left.png) left no-repeat;
    padding-left: 10px;
    /* Net zo breed als left.png */
}

span {
    background: url(right.png) right no-repeat;
    padding-right: 10px;
    /* Compensatie voor de padding-left */
}
</style>
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.