28220 sujets

CSS et mise en forme, CSS3

Centrage photos !

Salut tous Smiley cligne
Bon j'ai suivis ce tutos --> là Et tout ce passe comme je le souhaite,hors-mis le centrage de la photos qui ne se fait pas, qqun me donné un conseil,je donne le code html/css.
Donc je cherche a centrer la photos.
<!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">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>"Photos"</title>
  <style type="text/css">
/*Document CSS site Perso*/
body { margin: 0px;
padding: 0px;
font-family: comic sans ms;
font-size: 0.8em;
background-image: url(Firefox_wallpaper.jpg);
}
#contenu { position: absolute; width: 100%;
background-color: transparent;
}
#header { font-family: Dingbats;
text-align: center;
font-style: normal;
font-size: xx-large;
height: 50px;
background-color: transparent;
color: rgb(0, 0, 0);
font-weight: normal;
}
.centrale { border-style: solid;
border-width: 1px;
background-repeat: no-repeat;
background-position: center;
position: relative;
opacity: 1;
background-color: transparent;
overflow: auto;
margin-right: 150px;
height: 650px;
width: auto;
margin-top: 5em;
margin-left: 150px;
}
/*****************************************/
/* Formatage des menus haut type Acceuil */
/*****************************************/
.liens_haut { position: absolute;
width: 60%;
height: 25px;
margin-top: 25px;
margin-left: 150px;
}
.liens_haut a { border: 1px solid gray;
background: transparent none repeat scroll 0% 50%;
display: block;
text-align: center;
text-decoration: none;
color: rgb(0, 0, 0);
position: relative;
font-family: comic sans ms;
height: 20px;
line-height: 20px;
margin-top: 1px;
width: 100px;
margin-right: 10px;
margin-bottom: 0pt;
}
.liens_haut a:hover { border: 1px outset gray;
background: transparent none repeat scroll 0% 50%;
color: rgb(153, 51, 0);
}
.liens_haut a:active { border: 1px solid gray;
background: gray none repeat scroll 0% 50%;
color: rgb(255, 255, 255);
}
.liens_haut ul { list-style-type: none;
width: 100%;
}
.liens_haut li { float: left;
}
/***************************************************/
/* Formatage du cadre en haut à gauche type Acceuil*/
/***************************************************/
.cadre_gauche { border: 1px solid rgb(204, 204, 204);
position: absolute;
background-color: transparent;
margin-top: 5em;
width: 70px;
margin-left: 40px;
}
.cadre_gauche a { border: 1px solid rgb(204, 204, 204);
display: block;
line-height: 20px;
margin-bottom: 5px;
width: 60px;
margin-left: 4px;
height: 20px;
}
.cadre_gauche a:hover { border: 1px outset gray;
background: transparent none repeat scroll 0% 50%;
color: rgb(153, 51, 0);
}
.cadre_gauche_acceuil { border-color: rgb(204, 204, 204);
border-width: 1px;
position: absolute;
background-color: transparent;
margin-top: 5em;
margin-left: 28px;
width: 90px;
}
.cadre_gauche_acceuil a { border: 1px solid rgb(204, 204, 204);
display: block;
line-height: 20px;
height: 20px;
width: 90px;
margin-bottom: 10px;
}
.cadre_gauche_acceuil a:hover { border: 1px outset gray;
background: transparent none repeat scroll 0% 50%;
color: rgb(153, 51, 0);
}
/***************************************************/
/* Formatage du cadre en bas à gauche type Acceuil*/
/***************************************************/
.cadre_gauche_bas { border-style: none;
position: absolute;
background-color: transparent;
text-align: center;
height: 100px;
width: 140px;
margin-top: 500px;
margin-left: 5px;
}
.cadre_gauche_bas a:hover { border-style: none;
background-color: transparent;
color: rgb(153, 51, 0);
}
/***************************/
/*Formatage du pied de page*/
/***************************/
#pied { border-color: rgb(192, 192, 192);
border-width: 0.3px;
height: 50px;
background-color: transparent;
}
#pied a { font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
color: rgb(255, 204, 0);
}
#pied p { font-style: italic;
font-weight: normal;
text-align: left;
line-height: 25px;
}
/***********************************************/
/*Mise en forme a l'interieur de la partie body*/
/***********************************************/
.p1 { margin: 0pt 0pt 20px;
font-weight: bold;
text-decoration: none;
line-height: normal;
font-size: large;
}
ul, li { margin: 0pt;
padding: 0pt;
list-style-type: none;
line-height: 30px;
text-align: center;
}
a:link { text-decoration: none;
color: rgb(0, 0, 0);
}
a:visited { text-decoration: none;
color: rgb(153, 153, 153);
}
a:hover { text-decoration: none;
cursor: crosshair;
background-color: rgb(255, 255, 255);
color: rgb(102, 51, 102);
}
a img { border: 0pt none ;
}
/***********************/
/*Style des Paragraphes*/
/***********************/
h1 { text-align: center;
font-size: xx-large;
}
h2 {text-align: center;}
h3 { text-align: center;}
h4 {}
/***************************************************************/
/*Mise en forme spécifique des galerie photos de la page Photos*/
/***************************************************************/
div#galerie { border: 1px solid rgb(221, 204, 187);
background: rgb(238, 238, 221) none repeat scroll 0% 50%;
text-align: center;
font-family: Georgia,serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 0.9em;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
top: 50%;
left: 50%;
position: absolute;
width: 600px;
margin-left: -300px;
height: 450px;
margin-top: -225px;
}
dl#photo { margin: 0pt;
clear: both;
}
dl#photo dt { font-family: Georgia,serif;
font-style: italic;
font-variant: normal;
font-weight: normal;
font-size: 2.5em;
line-height: 1.5em;
font-size-adjust: none;
font-stretch: normal;
color: rgb(221, 204, 187);
}
#photo dd dl { margin: 0pt;
}
#photo img dl { border: 1px solid rgb(221, 204, 187);
}
.liens_haut_galerie_photos { border-style: none;
position: absolute;
margin-left: 150px;
margin-top: 1px;
height: 56px;
width: 75%;
}
.liens_haut_galerie_photos a { border: 1px solid rgb(204, 204, 204);
display: block;
line-height: 20px;
height: 58px;
margin-bottom: 4px;
width: 60px;
}
.liens_haut_galerie_photos a:hover { border: 1px outset gray;
background: transparent none repeat scroll 0% 50%;
color: rgb(153, 51, 0);
}
.liens_haut_galerie_photos a:active { border: 1px solid gray;
background: gray none repeat scroll 0% 50%;
color: rgb(255, 255, 255);
}
#galerie_mini_haut ul li { float: left;
}
#galerie_mini_haut ul li a img { border: 1px solid rgb(221, 204, 187);
margin: 2px 1px;
height: 50px;
width: 50px;
}
.cadre_gauche_galerie_mini_photos { border-color: rgb(204, 204, 204);
border-width: 1px;
position: absolute;
background-color: transparent;
margin-top: 5em;
width: 70px;
margin-left: 75px;
}
.cadre_gauche_galerie_mini_photos a { border: 1px solid rgb(204, 204, 204);
display: block;
line-height: 20px;
height: 60px;
margin-bottom: 5px;
width: 60px;
margin-left: 4px;
}
.cadre_gauche_galerie_mini_photos a:hover { border: 1px outset gray;
background: transparent none repeat scroll 0% 50%;
color: rgb(153, 51, 0);
}
#galerie_mini_gauche ul { margin: 0pt;
padding: 0pt;
list-style-type: none;
}
#galerie_mini_gauche ul li { float: left;
}
#galerie_mini_gauche ul li a img { border: 1px solid rgb(221, 204, 187);
margin: 4px 1px 2px;
width: 50px;
height: 50px;
}
  </style>
  <script type="text/javascript" src="script.js" />
</head>
<body>
<div class="contenu">
<div id="header">Quelques
photos...!</div>
<div class="liens_haut_galerie_photos">
<div id="galerie_mini_haut">
<ul>
  <li><a href="600_400.jpg" title="Les Amoureux...!"><img
 style="border: 0px solid ;" src="50_50.jpg"
 alt="Les Amoureux ....." /></a></li>
  <li><a href="img2.jpg" title="Titre de la photo 2"><img
 src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
  <li><a href="img3.jpg" title="Titre de la photo 3"><img
 src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
  <li><a href="img4.jpg" title="Titre de la photo 4"><img
 src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
  <li><a href="img5.jpg" title="Titre de la photo 5"><img
 src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
  <li><a href="img6.jpg" title="Titre de la photo 6"><img
 src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
  <li><a href="images/photo3.png" title="Titre de la photo 3"><img
 src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
  <li><a href="images/photo4.png" title="Titre de la photo 4"><img
 src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
  <li><a href="images/photo5.png" title="Titre de la photo 5"><img
 src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
  <li><a href="images/photo6.png" title="Titre de la photo 6"><img
 src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
  <li><a href="images/photo3.png" title="Titre de la photo 3"><img
 src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
  <li><a href="images/photo4.png" title="Titre de la photo 4"><img
 src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
  <li><a href="images/photo5.png" title="Titre de la photo 5"><img
 src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
  <li><a href="images/photo6.png" title="Titre de la photo 6"><img
 src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
</ul>
</div>
</div>
<div class="cadre_gauche_galerie_mini_photos">
<div id="galerie_mini_gauche">
<ul>
  <li><a href="acceuil3.html">Acceuil</a></li>
  <li><a href="alycandiesmini005.png" title="Titre de la photo 1"><img
 src="alycandiesmini005.png" alt="Le titre de la photo 1" />
    </a></li>
  <li><a href="images/photo2.png" title="Titre de la photo 2"><img
 src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
  <li><a href="images/photo3.png" title="Titre de la photo 3"><img
 src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
  <li><a href="images/photo4.png" title="Titre de la photo 4"><img
 src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
  <li><a href="images/photo5.png" title="Titre de la photo 5"><img
 src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
  <li><a href="images/photo6.png" title="Titre de la photo 6"><img
 src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
</ul>
</div>
</div>
<div class="centrale">
<h1></h1>
<div id="galerie">
<dl id="photo">
  <dt>Titre
de la photo 1</dt>
  <dd><img id="big_pict" src="images/photo1.png"
 alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
</div>
<div id="pied">
<p>Ce site est
valide | <a href="http://validator.w3.org/check?uri=referer">XHTML.1
</a>|
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
| &nbsp;&copy;
Copyright--&gt;Anyone 2004-2005 |
<br />
</p>
</div>
</div>
</body>
</html>

Merci de votre aide Smiley smile
Modifié par Express (02 Oct 2005 - 12:15)
Administrateur
Hello Express Smiley smile

Attention à deux choses :
1- tes URL sont mal affichées. Merci de relire l'Aide du forum pour les afficher correctement
2- Lorsque tu affiches un code kilométrique, il ne faut pas trop t'attendre à ce que les gens soient très enclin à décrypter tout ça. Le mieux (pour toi) serait de montrer directement un exemple en ligne.

Bonne chance Smiley cligne

PS : as-tu bien suivi le tutoriel sur le centrage des éléments ?
Modifié par Raphael (02 Oct 2005 - 12:03)
Salut.
pour centrer un element il faut les dimensions width au moins et mettre les margins right ey left en aoto
Une question raphi:

Pour que l'url ne soit pas vue sur un moteur de recherche, comment procède-t-on?

J'avais signalé ce genre de problème sur media box en t'ecrivant un message privé...jamais eu de réponse lol mais pas grave, tu dois en recevoir bcp!
Administrateur
Oryo a écrit :
Pour que l'url ne soit pas vue sur un moteur de recherche, comment procède-t-on?
Tu veux dire pour que l'url ne soit pas active ?
Ceci devrait répondre à ta question Smiley smile
http://forum.alsacreations.com/faq/#item29

Oryo a écrit :
J'avais signalé ce genre de problème sur media box en t'ecrivant un message privé...jamais eu de réponse lol mais pas grave, tu dois en recevoir bcp!

Ah non Smiley decu Je n'ai rien reçu sinon j'aurai répondu. Mais sur MB je ne sais pas.
Merci pour le lien.
En effet, je pense assez important de ne pas montrer l'url directement sinon il peut être répertorié dans google ou un autre moteur de recherche.

Imaginons que je fasse un site pour un client de la société ds laquelle je travaille,et je demande un avis sur le graphisme ds un forum.
Tout le monde est négatif.
Si le client ou des personnes désireuses de voir le site du client, en tapant des mots clés, tombent sur la page d'un forum ou il n'y a que des critiques négatives, ben ca le fait pas... Smiley biggol
Sujet clos
Aller à