login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Probleem met margin en opacity

Offline b4nkr0bz0r - 20/04/2009 17:07 (laatste wijziging 22/04/2009 13:29)
Avatar van b4nkr0bz0rPHP gevorderde Beste,

Ik heb 2 problemen:
- firefox, en chrome doen moeilijk met margin-top (de afbeelding moet aan elke kant 6px van die witte rand over houden, padding werkt ook niet echt.
- Onderaan de afbeelding, zie je de opacity van 50%. Dit is allenmaal goed maar nu moet links nog een titel komen (tekst) en rechts 2 icons (IMG) die moeten navigeren, maar ook deze titel en navigatie-buttons worden met 50% verlicht.

Voorbeeld]

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <head>	   	   
  5. <title>test</title>
  6. <style type="text/css">
  7. body
  8. {
  9.    margin: 30px;
  10.    background-color: #181a18;
  11. }
  12.  
  13. .SlideShowBG
  14. {
  15.    width: 520px;
  16.    height: 200px;
  17.    background-color: #FFFFFF;
  18. }  
  19. .SlideShowAfbeelding
  20. {
  21.    margin: 6px;
  22.    width: 508px;
  23.    height: 188px;  
  24.    background-image: url('img/slideshow_bg.png');
  25. } 
  26. .SlideShowIndeling
  27. {				 
  28.    margin-top: 147px;
  29.    width: 100%;
  30.    height: 22%; 
  31.    float:left; 
  32.    filter:alpha(opacity=50); 
  33.    -moz-opacity:.50; 
  34.    opacity:.50; 
  35.    background-image: url('img/slideshow_opacity.png');
  36. } 
  37. .project
  38. {				 
  39.    margin-top: 6px;	  
  40.    margin-left: 6px;
  41.    color: #fbffd3;
  42.    font-family: Verdana;
  43.    font-weight: bold; 
  44.    font-size: 11px;
  45.    width: 100px;
  46.    height: 20px;
  47.    float: left; 
  48. }
  49. .knoppen
  50. {				 
  51.    background: none;
  52.    margin-top: 14px;	  
  53.    margin-right: 6px;
  54.    width: 40px;
  55.    height: 20px;
  56.    float: right;
  57. }
  58. </style>
  59.  
  60. </head>
  61. <body>
  62. <div class="SlideShowBG">
  63.   <div class="SlideShowAfbeelding">
  64.     <div class="SlideShowIndeling">  
  65. 	<div class="project">
  66. 	 blaat
  67. 	 </div>
  68. 	 	<div class="knoppen">
  69. 	 <img src="img/slideshow_vorige.png" alt="" style="cursor: pointer;"/>
  70. 	 <img src="img/slideshow_volgende.png" alt="" style="cursor: pointer;"/>
  71. 	 </div>	 
  72. 	</div>
  73.   </div>
  74. </div>
  75. </body>
  76. </html>

0 antwoorden

Gesponsorde links
Er zijn nog geen reacties op dit bericht.
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.185s