28111 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Bon, comme à chaque fois que je poste ici, je précise que je suis une bille en prog... sinon je ne serai pas là me direz-vous. Mais pourquoi nous faut-il un site web à nous printeux !!!!! Smiley cry

Je suis en train de me refaire un site tout neuf. Enfin... j'en suis à la page 1. Une page de portfolio, avec galerie photos.
ma petite page de travail

L'idée est de faire au maximum en code (css; java etc) et sans flash... pour m'apprendre des trucs et sortir de ce que je sais faire. Si je monte ma page par des moyens que je connais, cela n'a aucun intérêt pour moi.

Bon, forcément, j'ai glané sur le moteur de recherche pour des aides et astuces. Et j'ai modifié à ma sauce. Là où ça se complique : j'ai craqué pour l'article sur le css3 et html5. Trop beau le site de Goetter. Sauf que je ne peux pas quand on voit les embrouilles qu'il faut corriger sur les différents navigateurs.

Mais j'ai voulu un bloc blanc aux bords arrondis, sans images, avec une ombre portée programmée. Ca marche nickel partout sauf sous IE pour l'ombre portée.
J'ai testé des corrections trouvées sur ce forum pour des cas se rapprochant : nada; rien à faire.
Quand l'ombre portée veut bien se faire : c'est dans les textes et images intérieures et non sur mon cadre.

Voici les codes :

• mon html :

<h2>être précis... au mot près</h2>
<div id="cadre">
<div class="sample sample6">
	<div class="thumbs" id="handles6_1">
		<div><img src="lien1.gif" alt="Photo Thumb" /></div>
		<div><img src="lien2.gif" alt="Photo Thumb" /></div>
		<div><img src="lien3.gif" alt="Photo Thumb" /></div>
		<div><img src="lien4.gif" alt="Photo Thumb" /></div>
		<div><img src="lien5.gif" alt="Photo Thumb" /></div>
		<div><img src="lien6.gif" alt="Photo Thumb" /></div>
	</div>
	<div class="mask6">
		<div id="box6">
			<span><img src="lien1g.jpg" alt="Photo" /></span>
			<span><img src="lien2g.jpg" alt="Photo" /></span>
			<span><img src="lien3g.jpg" alt="Photo" /></span>
			<span><img src="lien4g.jpg" alt="Photo" /></span>
			<span><img src="lien5g.jpg" alt="Photo" /></span>
			<span><img src="lien6g.jpg" alt="Photo" /></span>
			<span><img src="lien7g.jpg" alt="Photo" /></span>
			<span><img src="lien8g.jpg" alt="Photo" /></span>
			<span><img src="lien9g.jpg" alt="Photo" /></span>
			<span><img src="lien10g.jpg" alt="Photo" /></span>
			<span><img src="lien11g.jpg" alt="Photo" /></span>
			<span><img src="lien12g.jpg" alt="Photo" /></span>
		</div>
			<div class="info" id="fond"></div>
	</div>
	<div class="thumbs" id="handles6_2">
		<div><img src="lien7.gif" alt="Photo Thumb" /></div>
		<div><img src="lien8.gif" alt="Photo Thumb" /></div>
		<div><img src="lien9.gif" alt="Photo Thumb" /></div>
		<div><img src="lien10.gif" alt="Photo Thumb" /></div>
		<div><img src="lien11.gif" alt="Photo Thumb" /></div>
		<div><img src="lien12.gif" alt="Photo Thumb" /></div>
	</div>
	<p class="buttons">
		<span id="prev6">&lt;&lt; Previous</span>
		<span id="playback6">&lt;Playback</span>
		<span id="stop6">Stop</span>
		<span id="play6">Play &gt;</span>
		<span id="next6">Next &gt;&gt;</span>
	</p>
</div>
</div>


• Dans le fichier css à part :
#cadre {
width: 760px;
background-color: #fff;
margin: 0px;
border: 2px solid #000;

-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
behavior: url(border-radius.htc);

-moz-box-shadow: 3px 3px 20px #000; 
-webkit-box-shadow: 3px 3px 20px #000; 
box-shadow: 3px 3px 20px #000; 
}


• Dans le css intégré dans le head du html :
<!--[if lte IE 8]> 
		<style type="text/css">
        #cadre { 
    		filter:progid:DXImageTransform.Microsoft.shadow(color='#aaaaaa', Direction=135, Strength=8); 
    		zoom: 1; 
 		 }  		
		</style>
	<![endif]--> 

Là, j'ai testé ms-filter et/ou dropshadow : l'un fait que rien n'apparait de l'ombré, l'autre, seul les boutons du bas en ont. Sinon, avec ce code, ce sont les petites images et les textes.
Pffffffffffff que c'est galère !
Mais pourquoi va-t-il chercher le contenu quand je lui dis "cadre" ???

Vous allez sûrement trouver que j'ai la "divite" (comme quoi j'ai bien retenu des passages du bouquin qui m'accompagne, très bien fait pour les billes de mon genre par ailleurs), mais pour moi, je frôle déjà l'exploit personnel car je n'utilise pas d'images.

Merci de votre attention. Je vais me faire une pause "cuisson de cookies au chocolat"... ça, je maîtrise !