background-color voor afbeelding

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Louis Deconinck

Louis Deconinck

09/10/2013 18:51:06
Quote Anchor link
Ik ben bezig met een webshop aan het maken en graag zou ik de prijs in een cirkel (div met border-radius) plaatsen en deze cirkel boven een afbeelding plaatsten. Nu ben ik er in geslaagd om de tekst voor de image te brengen met z-index, maar dit lukt niet voor de background color, hoe kan ik de background color naar boven brengen? (VB: http://www.spelgezel.nl/spel-zoeken/gevonden.asp?speelduur=&spelers=&spel=kolonisten-catan-2012&leeftijd=strategie&sorteer=naam&rijen=2) Maar dan met cirkels in plaats van met schilden

CODE

index.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
echo '<div class="bgsec"><h5>'.$gr['name'].'</h5><img src="'.$gr['img1'].'" width="200" height="150" /><br /><div class="price"><s>&euro;'.number_format($gr['price'],2, ',', ' ').'</s><br/><b>&euro;'.number_format($gr['promo'],2, ',', ' ').'</b></div><br /><a href="cart.php?add='.$gr['id'].'">Add to cart</a></div>';
?>


style.css
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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.bgsec {
    height: 300px;
    width: 200px;
    border-radius: 15px;
    box-shadow: 0 0 3px 3px #ccc;
    background-color: #ffffff;
    padding: 0 5px 5px 5px;
}

.bgsec img {
    margin-top: -20px;
    z-index: -1;
}

.price s {
    font-size: 12px;
    margin-left: 20px;
}

.price b {
    margin: 15px 0 0 6px;
}

.price {
    width: 80px;
    height: 80px;
    background-color: #c0392b;
    border-radius: 40px;
    margin-top: -60px;
    z-index: 999;
}
 
PHP hulp

PHP hulp

16/09/2021 18:02:06
 
Frank Nietbelangrijk

Frank Nietbelangrijk

09/10/2013 19:39:22
 
Louis Deconinck

Louis Deconinck

09/10/2013 19:44:36
Quote Anchor link
Bedankt, ik vergat position: absolute;
 



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.