18041 sujets

Questions générales et questions de débutants

[Résolu] Galerie photo thumbails espacé

bonjour a tous,
Bon alors moi j'ai tenter d'inserer la galerie dans un "corp" assez petit, cela semble rentrer, mais les miniature de la galerie sont carrement trop espacé. Et je voudrais les placer de facon aligné.
Si quelqu'un peut m'orienter ca me serait sympatoch.


 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>David sureault Portfolio galerie graphiste 2D illustratoion </title>
        <link href="css.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="script.js"></script>
    </head>
    
    
    <body>
    	<div id="en_tete">
        </div>
        
        	
        
        <div id="menu">
                <a class="a" href="index.html"> <img src="image/accueil.gif" border="0"/> </a>  
                <a class="b" href="galerie.html"> <img src="image/galerie_lueur.gif" border="0"/> </a>  
                <a class="c" href="cv.html"> <img src="image/cv.gif" border="0"/> </a> 
                <a class="d" href="liens.html"> <img src="image/liens.gif" border="0"/> </a>
        </div>       
        
        <div id="corp">
        	<div id="galerie">
                <ul id="galerie_mini">
                    <li><a href="galerie/bouche_froide.jpg" title="Titre de la photo 1"><img src="thumbnails/bouche_froide.jpg" alt="Le titre de la photo 1" /></a></li>           
                    <li><a href="galerie/compo02.jpg" title="Titre de la photo 2"><img src="thumbnails/compo02.jpg" alt="Le titre de la photo 2" /></a></li>
                    <li><a href="galerie/compo03.jpg" title="Titre de la photo 3"><img src="thumbnails/compo03.jpg" alt="Le titre de la photo 3" /></a></li>
                    <li><a href="galerie/compo04.jpg" title="Titre de la photo 4"><img src="thumbnails/compo03.jpg" alt="Le titre de la photo 4" /></a></li>          
                    <li><a href="galerie/compo.jpg" title="Titre de la photo 5"><img src="thumbnails/compo.jpg" alt="Le titre de la photo 5" /></a></li>
                    <li><a href="galerie/composition_de_visage.jpg" title="Titre de la photo 6"><img src="thumbnails/composition_de_visage.jpg" alt="Le titre de la photo 6" /></a></li>
                    <li><a href="galerie/corbeau.jpg" title="Titre de la photo 7"><img src="thumbnails/corbeau.jpg" alt="Le titre de la photo 7" /></a></li>           
                    <li><a href="galerie/Doba.jpg" title="Titre de la photo 8"><img src="thumbnails/Doba.jpg" alt="Le titre de la photo 8" /></a></li>
                    <li><a href="galerie/dodoche_beta_1.1.jpg" title="Titre de la photo 9"><img src="thumbnails/dodoche_beta_1.1.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/femme.jpg" title="Titre de la photo 9"><img src="thumbnails/femme.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/Femme_papillon.jpg" title="Titre de la photo 9"><img src="thumbnails/Femme_papillon.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/Fromage.jpg" title="Titre de la photo 9"><img src="thumbnails/Fromage.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/GaTsu.jpg" title="Titre de la photo 9"><img src="thumbnails/GaTsu.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/Gorilla.jpg" title="Titre de la photo 9"><img src="thumbnails/Gorilla.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/shima [1600x1200].jpg" title="Titre de la photo 9"><img src="thumbnails/shima [1600x1200].jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/tete de gob.jpg" title="Titre de la photo 9"><img src="thumbnails/tete de gob.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/goroyellow.jpg" title="Titre de la photo 9"><img src="thumbnails/goroyellow.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/grand_maitre.jpg" title="Titre de la photo 9"><img src="thumbnails/grand_maitre.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/hajime_no_gatsu.jpg" title="Titre de la photo 9"><img src="thumbnails/hajime_no_gatsu.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/KinG.jpg" title="Titre de la photo 9"><img src="thumbnails/KinG.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/le_penseur_de_ShimA.jpg" title="Titre de la photo 9"><img src="thumbnails/le_penseur_de_ShimA.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/levitation.jpg" title="Titre de la photo 9"><img src="thumbnails/levitation.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/ma_femme.jpg" title="Titre de la photo 9"><img src="thumbnails/ma_femme.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/mafio.jpg" title="Titre de la photo 9"><img src="thumbnails/mafio.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/oriental.jpg" title="Titre de la photo 9"><img src="thumbnails/dodoche_beta_1.1.jpg" alt="Le titre de la photo 9" /></a></li>
                    <li><a href="galerie/dodoche_beta_1.1.jpg" title="Titre de la photo 9"><img src="thumbnails/oriental.jpg" alt="Le titre de la photo 9" /></a></li>                   
                    <li><a href="galerie/wahou.jpg" title="Titre de la photo 9"><img src="thumbnails/wahou.jpg" alt="Le titre de la photo 9" /></a></li>           
                </ul>
                	
            <dl id="photo">           
                <dt>Titre de la photo 1</dt>
                <dd><img id="big_pict" src="galerie/wahou.jpg" alt="Photo 1 en taille normale" /></dd>
            </dl>
        
		</div>
            </div>       
        
        <div id="footer">        
        </div>
	</body>
</html>




*
{
	padding:0px;
	margin:0px;
}


body
{	
	width:1400x;
	height:900px;
	background-color:#3f474a;		
	background-repeat:no-repeat;
	margin:auto;	
}



#en_tete
{
	width:834px;
	height:150px;
	background-image:url(image/ShimA02.jpg);
	background-repeat:no-repeat;
	margin:auto;
	background-position:bottom right;
}

#menu
{
	background-image:url(image/effet_menu.jpg);
	background-repeat:no-repeat;
	background-position:center;
	width:874px;
	height:94px;
	margin:auto;
	text-decoration:none;
}

#corp
{
	width:874px;
	max-height:2500px;
	min-height:402px;
	margin:auto;
	background-image:url(image/background_01.jpg);
	background-repeat:repeat;
	background-position:center;
}

#footer
{
	width:874px;
	height:94px;
	background-image:url(image/effet_footer.jpg);
	background-repeat:no-repeat;
	margin:auto;
}

a
{
	margin:30px;
	margin-left:40px;
	width:130px;
	float:left;
	border:none;	
}

a.a
{
	display: block; 
	width: 136px; 
	height: 48px; 
	background-image:url(image/accueil_lueur.gif);
}

a.a:hover
{
	visibility:visible;
}

a.a:hover img
{
	visibility:hidden;
}

a.b
{
	display: block; 
	width: 136px; 
	height: 48px; 
	background-image:url(image/galerie_lueur.gif);	
}

a.b:hover
{
	visibility:visible;
}

a.b:hover img
{
	visibility:hidden;
}

a.c
{
	display: block; 
	width: 115px; 
	height: 48px; 
	background-image:url(image/cv_lueur.gif);	
}

a.c:hover
{
	visibility:visible;
}

a.c:hover img
{
	visibility:hidden;
}

a.d
{
	display: block; 
	width: 120px; 
	height: 48px; 
	background-image:url(image/liens_lueur.gif);	
}

a.d:hover
{
	visibility:visible;
}

a.d:hover img
{
	visibility:hidden;
}

.info
{
	width:500Px;
	height:350px;
	margin:auto;
	color:#fff;
	font-family:Vrinda;
	text-indent:5px;
	font-size:20px;
	padding:5px;
	margin-bottom:20px;
	letter-spacing:0.0em;
}

p
{
}

.cv
{
	width:89.5%;
	font-size:medium;
	color:#fff;
	font-family:Vrinda;
	margin-left:25px;
	margin-right:25px;
	clear:right;
	border-right:dotted #99ccdf 1px;
	border-top:dotted #99ccdf 1px;
}

.cvv
{
	display:block;
	float:right;
	width:350px;
	border:dotted red 1px;
	border-bottom:0Px;
	border-left:0px;
	font-size:medium;
	color:#fff;
	font-family:Vrinda;
	margin-left:25px;
	margin-right:25px;
}

.cvvv
{
	width:350px;
	border:dotted blue 1px;
	border-bottom:0Px;
	border-left:0px;
	font-size:medium;
	color:#fff;
	font-family:Vrinda;
	margin-left:25px;
	margin-right:25px;
}

.cvvvv
{
	float:right;
	clear:right;
	width:350px;
	border:dotted yellow 1px;
	border-bottom:0Px;
	border-left:0px;
	font-size:medium;
	color:#fff;
	font-family:Vrinda;	
	margin-right:25px;
}

.cvvvvv
{
	clear:left;
	width:350Px;
	border:dotted orange 1px;
	border-left:0px;
	font-size:medium;
	color:#fff;
	font-family:Vrinda;
	margin-left:25px;
	margin-right:25px;
	border-bottom:0px;
	margin-top:10px;
}

.ident
{
	width:350Px;
	border:dotted purple 1px;
	border-left:0px;
	font-size:medium;
	color:#fff;
	font-family:Vrinda;
	margin-left:25px;
	margin-right:25px;
	border-bottom:0px;
	margin-bottom:10px;	
	
}

.typo
{
	text-indent:5px;
	color:#006666;
	font-family:Bebas;
}

div#galerie
{
	width: 780px ;
	background: #1f2324;
	border: px solid #dcb ;
	padding-top: 10px ;
	padding-bottom: 10px ;
	margin:auto;
	text-align: center ;
	font: 0.9em Georgia, serif ;
}

ul#galerie_mini
{
	margin: 0px ;
	padding:0px;
	list-style-type: none ;
}

ul#galerie_mini li
{
	float: left ;
}

ul#galerie_mini li a img
{
	margin: 2px 1px ;
	border: 1px solid #dcb ;
	min-width:35px;
	max-width:75px;
	min-height:75px;
	max-height:75px;
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt
{
	font: italic 2.5em/1.5em Georgia, serif ;
	color: #dcb ;
}

dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{
	border: 1px solid #dcb ;
}

Modifié par ShimA (04 Aug 2008 - 22:29)
Bonsoir ShimA

A priori c'est ici que cela se joue :

a
{
	margin:30px;
	margin-left:40px;
	width:130px;
	float:left;
	border:none;	
}


En ciblant plus précisemment les liens du menu que tu sembles vouloir viser avec ces propriétés, de cette manière par exemple :

[#blue]#menu [/#]a
{
	margin:30px;
	margin-left:40px;
	width:130px;
	float:left;
	border:none;	
}

Tu obtiens des vignettes beaucoup moins espacées Smiley lol

A toi de définir ensuite l'aspect que tu souhaites avoir pour ces vignettes
Par exemple :

#galerie_mini a {
margin:5px;
}


Cdt,
Sylvain
Au passage, tu as les même "title" et "alt" sur toutes tes images, je suppose que c'est provisoire et que tu modifieras cela ultérieurement, mais dans le doute Smiley cligne

Et une petite inversion sur ces images :
<li>
<a title="[b]Titre de la photo 9[/b]" href="[#blue]galerie/oriental.jpg[/#]">
<img alt="[b]Le titre de la photo 9[/b]" src="[#red]thumbnails/dodoche_beta_1.1.jpg[/#]"/>
</a>
</li>
<li>
<a title="[b]Titre de la photo 9[/b]" href="[#red]galerie/dodoche_beta_1.1.jpg[/#]">
<img alt="[b]Le titre de la photo 9[/b]" src="[#blue]thumbnails/oriental.jpg[/#]"/>
</a>
</li>


Cdt,
Sylvain
eh bhe, ca parait logique quand on a la solution mais on pense pas chercher la ou il faut quand on ne l'a pas...

En tout cas merci beaucoup ca marche a la perfection Smiley smile

et j'ai appris a preciser les div par la meme occaz ^^
bye

ps: oui ct provisoire et j'ai suivi ton conseil pour la structuration des alt et title
Modifié par ShimA (12 Mar 2008 - 00:49)
Sujet clos
Aller à