18041 sujets

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

Galerie (demande d'avis et conseil)

bonjour a tous, je débute en CSS et xhtml et je suis entrain de créer une galerie pour une amie photographe.

j'aimerais que vous me donniez votre avis sur le travail que j'ai fait...pas esthétique (les gout et les couleurs) mais plutot technique, a savoir si cette methode respecte les normes en place...

de plus j'aimerais savoir si quelqu'un dispose d'un script maniable (genre lightbox) pour agrandir les photos de la galerie. J'ai vu dans les tutos une galerie mais je voudrais la voir s'ouvrir par dessus le reste...
(je precise j'ai pas encore mis les alt sur les images car ca je sais que ca fait parti du concept d'accessibilité

voila le code merci a tous



* {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-family: "Lucida Grande", "Lucida Console", "Lucida Sans", Arial, "Trebuchet MS";
font-size:95%;
text-decoration:none;
}

body{background-color:#444;}


#global{
width:870px;
margin:50px auto;}

.head{
height:200px;
width:840px;
background-image:url(images/banniere.jpg);
background-repeat:no-repeat;
margin:auto;}

#navbar{
width:840px;
height:35px;
background-color:#FFFFFF;
margin:0 auto;
font-size:1.3em;}

#navbar ul{
text-align:center;}

#navbar li{
margin-right:35px;
display:inline;
list-style:none;
text-align:center;
line-height:45px;}

#navbar li a{
font-variant:small-caps;
color:#000000;
text-decoration:none;}

#navbar li a:hover{
color:#FF9900;}


#menu{
float:left;}

#menu ul{
margin-top:20px;}

#menu li{
font-size:1.3em;
list-style:none;
display:block;
width:170px;
height:45px;
background-color:#CCCCCC;
color:#FFFFFF;
line-height:45px;
text-indent:3em;}

#menu li a{
display:block;
width:170px;
height:45px;
color:#FFFFFF;
text-decoration:none;}

#menu li a:hover{
color:#444;}



#first{
background-image:url(images/menus/1.png);}
#first a:hover{
background-image:url(images/menus/1hover.png)}

#last{
background-image:url(images/menus/2.png);}
#last a:hover{
background-image:url(images/menus/2hover.png);}

.middle{
background-image:url(images/menus/0.png);}
.middle a:hover{

background-image:url(images/menus/0hover.png);}

#cadre { /* taille du cadre, ? titre d'exemple */
width: 530px;
background-color: #FFF;
float:left;
}

/* propri?t?s communes ? l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit {
height: 20px; width: 20px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}

#contenu{
background-color:#FFF;
margin:5px 0px 5px 15px;
height:300px;
width:auto;
overflow: hidden;
}

/* propri?t?s sp?cifiques ? chaque coin */
#hautgauche {
background: url(images/coin_blanc/hg.png);}
#hautdroit {
float: right;
background: url(images/coin_blanc/hd.png);}
#basgauche {
background: url(images/coin_blanc/bg.png);}
#basdroit {
float: right;
background: url(images/coin_blanc/bd.png);}

img.diapo {
border-bottom:5px solid #EEE;
border-left: 5px solid #EEE;
border-right: 5px solid #EEE;
border-top: 5px solid #EEE;
margin-right:5px;
margin-bottom:18px;
margin-top:10px;}

#portefolio{
float:left;
margin-top:20px;
height:270px;
width:150px;;}



et le html 

<body>
<div class="head"></div>
<div id="navbar">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="about.html">About me</a></li>
<li><a href="presentation.html">Portefolio</a></li></ul></div>
<div id="global">


<div id="menu">
<ul>
<li id="first">		<a href="#galerie1">Galerie 1</a></li>
<li class="middle">	<a href="#galerie2">Galerie 2</a></li>
<li class="middle">	<a href="#galerie3">Galerie 3</a></li>
<li class="middle">	<a href="#galerie4">Galerie 4</a></li>
<li class="middle">	<a href="#galerie5">Galerie 5</a></li>
<li id="last">		<a href="#galerie6">Galerie 6</a></li>
</ul></div>


<div id="cadre">
	<div id="hautdroit"></div><div id="hautgauche"></div>
	<div id="contenu">
	
	<div class"galerie"><a name="galerie1">
	<img class="diapo" src="galerie/iles/island1.jpg" alt="" />
	<img class="diapo" src="galerie/iles/island2.jpg" />
	<img class="diapo" src="galerie/iles/island3.jpg" />
	</a></div>
	
	<div class "galerie"><a name="galerie2">
	<img class="diapo" src="galerie/iles/island1.jpg" alt="" />
	<img class="diapo" src="galerie/iles/island1.jpg" />
	<img class="diapo" src="galerie/iles/island1.jpg" />
	</a></div>
	
	<div class "galerie"><a name="galerie3">
	<img class="diapo" src="galerie/iles/island2.jpg" alt="" />
	<img class="diapo" src="galerie/iles/island2.jpg" />
	<img class="diapo" src="galerie/iles/island2.jpg" />
	</a></div>
	
	<div class "galerie"><a name="galerie4">
	<img class="diapo" src="galerie/iles/island1.jpg" alt="" />
	<img class="diapo" src="galerie/iles/island2.jpg" />
	<img class="diapo" src="galerie/iles/island3.jpg" />
	</a></div>
	
	<div class "galerie"><a name="galerie5">
	<img class="diapo" src="galerie/iles/island1.jpg" alt="" />
	<img class="diapo" src="galerie/iles/island2.jpg" />
	<img class="diapo" src="galerie/iles/island3.jpg" />
	</a></div>
	
	<div class "galerie"><a name="galerie6">
	<img class="diapo" src="galerie/iles/island3.jpg" alt="" />
	<img class="diapo" src="galerie/iles/island2.jpg" />
	<img class="diapo" src="galerie/iles/island3.jpg" />
	</a></div>
	


	</div>
	<div id="basdroit"></div><div id="basgauche"></div>
</div>
<div id="portefolio"><img src="images/menus/portefolio1.png" /></div>
</div>
</body>


le site est visible ici du moins sont ébauchehttp://perso.numericable.fr/cstoeckl/presentation.html

au fait bravo pour le bouquin raphael il est génial pour débuter et apprendre, une merveille, si seulement tous les bouquins de self apprentissage etait aussi clair.....y aurai pas besoin de poser de question Smiley biggrin
Modifié par stoeck (08 Jun 2007 - 12:04)
juste comme ça en passant, si tu debute c'est vraiment pas mal le design est, sans etre exceptionnel car onpeut toujours faire mieux et c'est pas bien de dire que c'est trop bien quand on commence, clair et le fond gris foncé une bonne chose pour faire ressortir les photos avec un cadre blanc.
En fait j'ai surtout un doute sur le visibility hidden...est il bien compris par les différents navigateur.?? de même les liens internes au pages ne posent-elle pas de problème pour les différents navigateur..??
Modifié par stoeck (08 Jun 2007 - 13:36)
Va voir ce site, il t'aidera beaucoup:

Lien

Par contre regarde bien au niveau des copyright mais ca doit aller normalement.

++
Sujet clos
Aller à