28221 sujets

CSS et mise en forme, CSS3

Exemple pour cadre CSS coin arrondi + titre + galerie photo ?

bonjour,
ne trouvant pas de solution à mon problème, malgré mes nombreuses heures de recherche (il ne faut pas croire que je me contente d'attendre les réponses à mes questions) je n'arrive toujours pas à obtenir le résultat que je souhaite. J’ai donc décidé de vous exposer ce que je veux exactement afin de voir si quelqu'un à un exemple concret..(car la je suis à la limite de faire l'irréparable, à savoir, mettre une table html avec des TR et des TD ...)

Donc ce que je souhaite, c'est de faire un cadre au coin arrondi avec un titre qui viens se superposer à la partie supérieure du cadre (parfaitement sous ie et firefox)

Dans ce cadre, je veux afficher des images miniatures (une galerie photos) avec le nom de chaque photo en dessous des miniatures. et bien sur les miniatures sont en lignes (4 ou 5 par lignes .. Sur plusieurs lignes, enfin une galerie normale quoi).


Un grand merci d'avance !! Un énorme même.

Chris.

Ps : Voici un exemple de ce que je désire:
upload/279-CadreCSS.jpg
Modifié le 16 Dec 2004 - 14:04
Administrateur
plc2k a écrit :
Concrètement...


Salut, je ne vais pas répondre à ta question, par contre je vais me permettre de te rappeler qu'avec un titre aussi peu explicite, personne n'aura envie de voir de quoi parle ton sujet Smiley ohwell

Règles du forum a écrit :
11- Conventions d'écriture
L'emploi des majuscules est à utiliser avec parcimonie dans les titres de sujet comme dans les messages. En effet, un texte entièrement rédigé en majuscules donne l'impression que la personne crie sur un ton agressif, sur internet. Veuillez donner un titre de sujet évocateur lorsque vous en rédigez un nouveau, et non pas simplement 'Question', 'HELP', 'Problème!' ou 'URGENT!!!!'.
J'approuve entièrement la remarque de Raphaël mais comme je peux aider (pour une fois Smiley lol et que tu as corrigé, voici un petit exemple (imparfait sans doute et sans cadre arrondi mais, avec le tutoriel
http://www.alsacreations.com/articles/cadre/ en complément, tu devrais pouvoir t'en sortir pour compléter) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
		html, body {
		margin:0;
		padding:0;
		}
		#cadre {
		background:#909090;
		border:1px solid;
		float:left;
		margin:0;
		padding:0;
		}
		#cadre ul {
		float:left;
		list-style-type:none;
		margin:5px 15px 5px 5px;
		padding:0;
		}
		#cadre li {
		margin:0 0 15px 0;
		padding:0;
		text-align:center;
		}
		#cadre h3 {
		text-align:center;
		}
		#cadre img {
		border:1px solid #fff;
		}
		.legende {
		font-size:0.8em;
		margin:0 0 15px 0;
		}
	</style>
</head>

<body>
<div id="cadre">
<h3>Test</h3>
	<ul>
		<li><img src="image.gif" alt="" /></li>
		<li class="legende">Legende 1</li>
		<li><img src="image.gif" alt="" /></li>
		<li class="legende">Legende 4</li>
		<li><img src="image.gif" alt="" /></li>
		<li class="legende">Legende 7</li>
	</ul>
	<ul>
		<li><img src="image.gif" alt="" /></li>
		<li class="legende">Legende 2</li>
		<li><img src="image.gif" alt="" /></li>
		<li class="legende">Legende 5</li>
		<li><img src="image.gif" alt="" /></li>
		<li class="legende">Legende 8</li>
	</ul>
	<ul>
		<li><img src="image.gif" alt="" /></li>
		<li class="legende">Legende 3</li>
		<li><img src="image.gif" alt="" /></li>
		<li class="legende">Legende 6</li>
		<li><img src="image.gif" alt="" /></li>
		<li class="legende">Legende 9</li>
	</ul>
</div>

</body>
</html>



Remplace image.gif par une image à toi pour te rendre compte du rendu (ok sous ie5.5 et ie6, je ne sais pas tester sous un autre navigateur au boulot Smiley cligne )
Sujet clos
Aller à