Ga naar inhoud
Log in om dit te volgen  
August

Opacity tabel

Aanbevolen berichten

Hey,
ik maak voor school een website, nu heb ik een tabel waarvan de achtergrond doorzichtig moet zijn, maar de inhoud niet.
Toch zijn beide doorzichtig.
Weet iemand hoe ik ervoor zorg dat de plaatjes in de tabel niet doorzichtig worden?
Plaatje
Alvast bedankt voor de hulp!
Codeblok:
1
2
3
4
5
6
7
<style type="text/css">
.opacity {
background-color: black;
opacity:0.5;
filter:alpha(opacity=50);
}
</style>

Codeblok:
1
2
3
4
5
6
7
8
<center><table border="1" width="100%" height="160">
<tr>
<td class="opacity" width="706" height="154"> <center>

<img src="images/iMac.png" width="142" height="133" /><img src="images/2012-ipodtouch4-product-family.png" alt="" width="83" height="121" /><img src="images/snelste_macbook_pro.png" width="195" height="113" /><img src="images/2012-ipodtouch4-product-family.png" width="83" height="121" /><img src="images/iMac.png" width="142" height="133" /></td>
</tr>
</table>
</center>

Deel dit bericht


Link naar bericht
Delen op andere sites
Klopt, als je een aparte div hebt voor de inhoud, wordt het gezien als uitzondering op de div van de omgeving. Bij html gaan specifieke divs altijd voor.

Deel dit bericht


Link naar bericht
Delen op andere sites
CSS:
Codeblok:
1
2
3
4
5
6
7
.content{
float: left;
}
.background{
background-color: black;
opacity:0.5;
filter:alpha(opacity=50);

HTML:
Codeblok:
1
2
3
4
<div class="content">
<div class="background"></div>
//EN HIER DE IMAGES
</div>

Deel dit bericht


Link naar bericht
Delen op andere sites
Desire (link):
CSS:
Codeblok:
1
2
3
4
5
6
7
.content{
float: left;
}
.background{
background-color: black;
opacity:0.5;
filter:alpha(opacity=50);

HTML:
Codeblok:
1
2
3
4
<div class="content">
<div class="background"></div>
//EN HIER DE IMAGES
</div>


Hoe moet ik die onderste code dan precies neerzetten bij deze?

Codeblok:
1
2
3
4
5
6
7
8
<center><table border="1" width="100%" height="160">
<tr>
<td class="opacity" width="706" height="154"> <center>

<img src="images/iMac.png" width="142" height="133" /><img src="images/2012-ipodtouch4-product-family.png" alt="" width="83" height="121" /><img src="images/snelste_macbook_pro.png" width="195" height="113" /><img src="images/2012-ipodtouch4-product-family.png" width="83" height="121" /><img src="images/iMac.png" width="142" height="133" /></td>
</tr>
</table>
</center>


dat lukt me niet.

Deel dit bericht


Link naar bericht
Delen op andere sites
August (link):
Desire (link):
CSS:
Codeblok:
1
2
3
4
5
6
7
.content{
float: left;
}
.background{
background-color: black;
opacity:0.5;
filter:alpha(opacity=50);

HTML:
Codeblok:
1
2
3
4
<div class="content">
<div class="background"></div>
//EN HIER DE IMAGES
</div>


Hoe moet ik die onderste code dan precies neerzetten bij deze?

Codeblok:
1
2
3
4
5
6
7
8
<center><table border="1" width="100%" height="160">
<tr>
<td class="opacity" width="706" height="154"> <center>

<img src="images/iMac.png" width="142" height="133" /><img src="images/2012-ipodtouch4-product-family.png" alt="" width="83" height="121" /><img src="images/snelste_macbook_pro.png" width="195" height="113" /><img src="images/2012-ipodtouch4-product-family.png" width="83" height="121" /><img src="images/iMac.png" width="142" height="133" /></td>
</tr>
</table>
</center>


dat lukt me niet.

Codeblok:
1
2
3
4
5
6
7
8
9
10
11
<center><table border="1" width="100%" height="160">
<tr>
<td width="706" height="154"> <center>

<div class="content">
<div class="background"></div>
<img src="images/iMac.png" width="142" height="133" /><img src="images/2012-ipodtouch4-product-family.png" alt="" width="83" height="121" /><img src="images/snelste_macbook_pro.png" width="195" height="113" /><img src="images/2012-ipodtouch4-product-family.png" width="83" height="121" /><img src="images/iMac.png" width="142" height="133" />
</div></td>
</tr>
</table>
</center>

Deel dit bericht


Link naar bericht
Delen op andere sites
Het werkt niet, maar in ieder geval bedankt voor de moeite. Ik heb besloten de tabel achtergrond gewoon een kleurtje te geven smiley

Deel dit bericht


Link naar bericht
Delen op andere sites
De opacity; optie in CSS gaat automatisch ook de elementen in de div beïnvloeden (child objects).
Om dat te verhelpen moet je inderdaad geen HEX code gebruiken, maar rgba() als achtergrond waar je als 4e element de doorzichtigheid meegeeft. Wat je ook kan doen is dit.

Deel dit bericht


Link naar bericht
Delen op andere sites
Jvdw (link):
dit werkt wel
Codeblok:
1
2
3
.opacity {
background-color: rgba(0, 0, 0, 0.5);
}


dit moet het echt wel doen

Deel dit bericht


Link naar bericht
Delen op andere sites
Jvdw (link):
Jvdw (link):
dit werkt wel
Codeblok:
1
2
3
.opacity {
background-color: rgba(0, 0, 0, 0.5);
}


dit moet het echt wel doen


... in browsers die HTML5 ondersteunen dus niet de oude IE die nog veel gebruikers gebruiken ...

Deel dit bericht


Link naar bericht
Delen op andere sites
Antonn (link):
Jvdw (link):
Jvdw (link):
dit werkt wel
Codeblok:
1
2
3
.opacity {
background-color: rgba(0, 0, 0, 0.5);
}


dit moet het echt wel doen


... in browsers die HTML5 ondersteunen dus niet de oude IE die nog veel gebruikers gebruiken ...


En de leraren bij mijn opleiding gebruiken massaal internet explorer, omdat het vaker vast hangt ofzo, geen idee.

Deel dit bericht


Link naar bericht
Delen op andere sites
Jvdw (link):
August (link):
Jvdw (link):


Thanks, die ga ik morgen wel gebruiken!


als je problemen hebt pb me maar of hier kan ook smiley


Ja, nu krijg je dadelijk miljoen PBs van al die miljoenen mensen die nog browsers gebruiken zonder CSS ondersteuning smiley

Deel dit bericht


Link naar bericht
Delen op andere sites
Antonn (link):
Jvdw (link):
August (link):
Klik om eerdere quotes te tonen


Thanks, die ga ik morgen wel gebruiken!


als je problemen hebt pb me maar of hier kan ook smiley


Ja, nu krijg je dadelijk miljoen PBs van al die miljoenen mensen die nog browsers gebruiken zonder CSS ondersteuning smiley

een browser zonder css noem ik geen browser smiley

Deel dit bericht


Link naar bericht
Delen op andere sites

Maak een account aan of log in om te reageren

Je moet lid zijn om een reactie te kunnen achterlaten

Account aanmaken

Maak een account aan in onze gemeenschap. Het is makkelijk!

Registreer een nieuw account

Aanmelden

Ben je al lid? Meld je hier aan.

Nu aanmelden
Log in om dit te volgen  

×