Comment aligner des photo en xhtml
claudia
-
Gihef Messages postés 5165 Statut Contributeur -
Gihef Messages postés 5165 Statut Contributeur -
bonjour, je fait appel à vôtre aide, car j'ai un gros problème avec mes photo, je n'arrive pas à en aligner sans qu'elle soit décollée, à chaque fois elle ce place en dessous, et si j'enlève: <p> et </p> elle colle l'une à l'autre et il n'y as pas d'espace, comment puis-je y remédier
je suppose que ce serras le même problème avec le text?
c'est embêttant car mon site serras éssentiellement fait avec des photo et du text en dessous des photos!
y as t-il une solution?
merci d'avance.
je suppose que ce serras le même problème avec le text?
c'est embêttant car mon site serras éssentiellement fait avec des photo et du text en dessous des photos!
y as t-il une solution?
merci d'avance.
A voir également:
- Comment aligner des photo en xhtml
- Google photo - Télécharger - Albums photo
- Photo filtre 7 gratuit - Télécharger - Retouche d'image
- Partage photo en ligne gratuit - Guide
- Google maps photo maison - Guide
- Comment légender une photo - Guide
6 réponses
Bonjour,
“y as t-il une solution?”
Il y en a des tas.
Montre-nous une page.
En ligne, c'est mieux.
Le code si ce n'est pas possible.
“y as t-il une solution?”
Il y en a des tas.
Montre-nous une page.
En ligne, c'est mieux.
Le code si ce n'est pas possible.
bonsoir,
voiçi le code css:
body
{
background-image: url("fond2.gif");
background-repeat: repeat; /* Le fond ne se répètera que sur la première colonne, verticalement */
background-attachment: scroll; /*l'image de fond défile avec le texte (par défaut).*/
background-position: center; /* Le fond est aligné en haut à droite */
background-position:-30px -55px;
width: 960px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
}
a img /* Toutes les images contenues dans un lien */
{
border: none; /* Pas de bordure */
#menu
{
float: left; /* Le menu flottera à gauche */
width: 185px; /* Très important : donner une taille au menu */
}
#corps
{
margin-left:200px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
}
#pied_de_page
{
padding: 5px;
margin-left:0px
}
et voiçi le code xhtml:
<!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" xml:lang="fr" >
<head>
<title>Les émeraudes du nil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="étalon" href="fond2.css" />
</head>
<body>
<div id="en_tete">
<div class="element_en_tete">
<ul>
<p><img src="logo.gif" alt="logo" /></a></p>
</ul>
<div id="menu">
<ul>
<p><a href="acceuil2.html"><img src="acceuil1.gif" alt="acceuil" /></a></p>
<p><a href="étalon.html"><img src="étalon.gif" alt="Nôtre étalon" /></a></p>
<p><a href="femelles.html"><img src="femelles.gif" alt="Nos femelles" /></a></p>
<p><a href="chatton.html"><img src="chatton.gif" alt="Nos chattons" /></a></p>
<p><a href="persan.html"><img src="persan.gif" alt="Le Persan" /></a></p>
<p><a href="prénoms.html"><img src="prénoms.gif" alt="Prénoms 2008" /></a></p>
<p><a href="expo.html"><img src="expo.gif" alt="Expo" /></a></p>
<p><a href="explication.html"><img src="explication.gif" alt="Explication" /></a></p>
<p><a href="contact.html"><img src="contact.gif" alt="Contact" /></a></p>
<p><a href="livredor.html"><img src="livredor.gif" alt="Livre d'or" /></a></p>
<p><a href="liens.html"><img src="liens.gif" alt="Liens" /></a></p>
<p><a href="page1.html"><img src="retour.gif" alt="Retour" /></a></p>
</ul>
</div>
<div id="corps">
<ul>
<p><div style="text-align:center;"><img src="barri.gif"alt="barri" />
</div></p>
<img src="explication.gif" alt="explication" />
<img src="caractère.gif" alt="explication" />
</ul>
<ul>
<div id="pied_de_page">
<p><img src="copyright.gif" alt="copyright" /></a></p>
</div>
</ul>
</div>
</body>
</html>
j'espère que tu pourras m'aider?, je patoge dans la semoule avce les alignement!
merci
voiçi le code css:
body
{
background-image: url("fond2.gif");
background-repeat: repeat; /* Le fond ne se répètera que sur la première colonne, verticalement */
background-attachment: scroll; /*l'image de fond défile avec le texte (par défaut).*/
background-position: center; /* Le fond est aligné en haut à droite */
background-position:-30px -55px;
width: 960px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
}
a img /* Toutes les images contenues dans un lien */
{
border: none; /* Pas de bordure */
#menu
{
float: left; /* Le menu flottera à gauche */
width: 185px; /* Très important : donner une taille au menu */
}
#corps
{
margin-left:200px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
}
#pied_de_page
{
padding: 5px;
margin-left:0px
}
et voiçi le code xhtml:
<!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" xml:lang="fr" >
<head>
<title>Les émeraudes du nil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="étalon" href="fond2.css" />
</head>
<body>
<div id="en_tete">
<div class="element_en_tete">
<ul>
<p><img src="logo.gif" alt="logo" /></a></p>
</ul>
<div id="menu">
<ul>
<p><a href="acceuil2.html"><img src="acceuil1.gif" alt="acceuil" /></a></p>
<p><a href="étalon.html"><img src="étalon.gif" alt="Nôtre étalon" /></a></p>
<p><a href="femelles.html"><img src="femelles.gif" alt="Nos femelles" /></a></p>
<p><a href="chatton.html"><img src="chatton.gif" alt="Nos chattons" /></a></p>
<p><a href="persan.html"><img src="persan.gif" alt="Le Persan" /></a></p>
<p><a href="prénoms.html"><img src="prénoms.gif" alt="Prénoms 2008" /></a></p>
<p><a href="expo.html"><img src="expo.gif" alt="Expo" /></a></p>
<p><a href="explication.html"><img src="explication.gif" alt="Explication" /></a></p>
<p><a href="contact.html"><img src="contact.gif" alt="Contact" /></a></p>
<p><a href="livredor.html"><img src="livredor.gif" alt="Livre d'or" /></a></p>
<p><a href="liens.html"><img src="liens.gif" alt="Liens" /></a></p>
<p><a href="page1.html"><img src="retour.gif" alt="Retour" /></a></p>
</ul>
</div>
<div id="corps">
<ul>
<p><div style="text-align:center;"><img src="barri.gif"alt="barri" />
</div></p>
<img src="explication.gif" alt="explication" />
<img src="caractère.gif" alt="explication" />
</ul>
<ul>
<div id="pied_de_page">
<p><img src="copyright.gif" alt="copyright" /></a></p>
</div>
</ul>
</div>
</body>
</html>
j'espère que tu pourras m'aider?, je patoge dans la semoule avce les alignement!
merci
Avant de poursuivre, quelques remarques :
— il manque une “}” à la fin du “a img {”
— une <ul> doit contenir des <li> et rien d'autre, pas des <p> ni des <div>
— évite les <div> dans les <p>. Fais plutôt l'inverse
— dans ta page, des </a> se ferment sans qu'ils aient été ouverts
— “/* Très important : donner une taille au menu */”
devrait plutôt être
“/* Très important : donner une taille aux float */”
— “Nôtre” → Notre
Ai-je raison de supposer que ce sont les images de ton menu qui posent problème ?
Dans l'affirmative, peut-on avoir leurs dimensions ?
— il manque une “}” à la fin du “a img {”
— une <ul> doit contenir des <li> et rien d'autre, pas des <p> ni des <div>
— évite les <div> dans les <p>. Fais plutôt l'inverse
— dans ta page, des </a> se ferment sans qu'ils aient été ouverts
— “/* Très important : donner une taille au menu */”
devrait plutôt être
“/* Très important : donner une taille aux float */”
— “Nôtre” → Notre
Ai-je raison de supposer que ce sont les images de ton menu qui posent problème ?
Dans l'affirmative, peut-on avoir leurs dimensions ?
re-bonsoir,
non je n'avait aucun problème de menu, le problème ce trouvait dans le corps, en corrigeant ce que tu m'as conseiller est c'est résolus
j'aurrais quand même une dernière question, pour que les text sois bien aligner en dessous de chaque photo comment faut t-il faire?
merci pour ton aide
non je n'avait aucun problème de menu, le problème ce trouvait dans le corps, en corrigeant ce que tu m'as conseiller est c'est résolus
j'aurrais quand même une dernière question, pour que les text sois bien aligner en dessous de chaque photo comment faut t-il faire?
merci pour ton aide
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Éh bien, on peut te conseiller de faire ça dans des tableaux. Mais ça n'est plus trop au goût du jour. On connaît d'autres méthodes.
On peut se servir de quelques <div> et <p> couplés à quelques styles.
En l'absence d'informations précises, je vais supposer que plusieurs images doivent être mises les unes à côté des autres.
Alors, tu pourrais utiliser quelques <div> positionnées en float (autant que d'images doivent être mises côte à côte).
Dans ces <div>, des <p>. Un pour contenir les images, l'autre pour contenir le texte.
J'ai repris cette idée dans cette page.
La même mais avec quelques repères visuels.
Les dimensions sont adaptées aux images.
Le float est annulé avec le <p> défini en “clear:left;”. Le flux reprend son cours “normal”.
+ Je n'ai pas testé tout ça dans IE sur PC-IBM.
On peut se servir de quelques <div> et <p> couplés à quelques styles.
En l'absence d'informations précises, je vais supposer que plusieurs images doivent être mises les unes à côté des autres.
Alors, tu pourrais utiliser quelques <div> positionnées en float (autant que d'images doivent être mises côte à côte).
Dans ces <div>, des <p>. Un pour contenir les images, l'autre pour contenir le texte.
J'ai repris cette idée dans cette page.
La même mais avec quelques repères visuels.
Les dimensions sont adaptées aux images.
Le float est annulé avec le <p> défini en “clear:left;”. Le flux reprend son cours “normal”.
+ Je n'ai pas testé tout ça dans IE sur PC-IBM.
Et puis, pourquoi pas…
Selon le même principe, mais sans l'utilisation de float puisque ce n'est plus nécessaire, une page sur laquelle les images et texte sont les uns en dessous des autres.
Selon le même principe, mais sans l'utilisation de float puisque ce n'est plus nécessaire, une page sur laquelle les images et texte sont les uns en dessous des autres.
