18073 sujets

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

[RESOLU]Aligner horizontal images avec textes au dessus centrés

Bonsoir,

Je n'ai malheureusement pas eu le temps de regarder en détail, mais as-tu eu l'idée de "jouer" sur les "margin", "text-indent" et "float" ?

Ici un petit code à chaud (je n'ai pas eu le temps de vérifier, navré) : 


body { height: 1050px; width: 1050px; }
#img1, #img2 { width: 500px; height: 450px; }
#img1 { float: right; }
#img2 { margin: 270; float: left; }
.txt1 { text-indent: 250px; } /* la moitié de la première image */
.txt2 { text-indent: 750px; } /* la moitié de la seconde image + la première image + marge etc... */

Et pour continuer : 

<p><span id="txt1" class="txt1">Texte 1</span><img src="../img1.gif" id="img1" alt="texte alternatif"><span id="txt2">Texte 2</span><img src="../img2.gif" id="img2" alt="texte alternatif"></p>
...
J'espère avoir pu te mettre sur une voie correcte (tant au niveau code que "sémantique").
Malheureusement j'ai commis une grosse erreur, je me suis surestimé... Et de plus la piste indiquée n'est pas correcte... Erreur de ma part.

Vois m'en navré.
Bonjour,

Je ne suis pas certain d'avoir bien saisi quel était l'effet recherché, mais vous me semblez bien compliqués, tous deux Smiley cligne

Est-ce qu'il ne s'agirait pas simplement de quelque-chose comme :
<style type="text/css">
<!-- 
.conteneur p {
text-align: center;
float: left;
margin: 0 25px;
}
-->
</style>
</head>
<body>
<div class="conteneur">
  <p>Carte de visite restaurant<br />
    <img width="316" height="193" src="http://img371.imageshack.us/img371/4260/carteresto1931hg.jpg"  alt="..." /></p>
  <p>Carte de visite Taxi<br />
    <img width="300" height="193" src="http://img371.imageshack.us/img371/4260/carteresto1931hg.jpg"  alt="..." /></p>
</div>


Eventuellement, remplacer le <br /> HTML par un display: block CSS sur les images, pour plus d'évolutivité du code (mais un rendu sans CSS moins heureux)...
Modifié par Laurent Denis (02 Dec 2005 - 07:16)
Salut à tous,

> L.Denis : avec ta methode ça marche mais la troisieme image passe à la ligne, je voudrais en aligner 3, y'a la place. Le texte est bien centré au dessus des images sinon.
Juste ce que je ne comprend pas c'est que dans le CSS le nom est
"conteneur p"et ds l'html il est appelé <div class="conteneur">,
là je suis pas.
J'ai éssayé avec une liste et du CSS même resultat et j'ai peur de finir par réussir et que ce soit pas validable.

zzzazzz> Merci, efffectivement sur une de tes page j'ai piqué le code, nétaient alignés que 2 images, j'en ai rajouté une et après avoir brassé bcp de vent bah je suis arrivé a rien.

Groumphy>Merci quand même.

Smiley bawling
Modifié par Hum (05 Dec 2005 - 21:06)
Bonsoir

Hum a écrit :

Juste ce que je ne comprend pas c'est que dans le CSS le nom est
"conteneur p"et ds l'html il est appelé <div class="conteneur">,
là je suis pas.


Pas de panique tout est normal.
Dans ce cas de figure il y a un <p> dans ton .conteneur
donc .conteneur p{} influence le paragraphe qui se trouve dans .conteneur.

Commande le très honorable livre de Raphaël Goetter ,
CSS 2 : Pratique du design web
un petit pas pour le web un grand pas pour le css Smiley cligne
ça te fera un très bon cadeaux de Noël à commander. Smiley smile

@+
OK, on m'a aidé : mon conteneur n'était pas assez large par rapport a ce que je voulais mettre dedans...ducoup ce qui débordait passait à la ligne...
Ca fonctionne maintenant.
Merci
#conteneur {
    width: 1100px;
    height: 200px;
    border: 0px ;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    float: left;
    margin-left: 10px;
    padding: 0;
    text-align: center;
}
p {
    margin: 5px;
    padding: 0;
}
img {
    display: block;
    margin: 0;
} 


<div id="conteneur">
<ul>
    <li><p>Restaurant</p><img src="http://img371.imageshack.us/img371/4260/carteresto1931hg.jpg" alt="" width="316" height="193" /></li>
    <li><p>Taxi driver</p><img src="http://img491.imageshack.us/img491/2687/taxi9sn.jpg" alt=""" width="300" height="193" /></li>
    <li><p>comment</p><img src="http://img458.imageshack.us/img458/8792/carte39fy.jpg" width="300" height="193" /></li>
     <li><p>comment</p><img src="http://img371.imageshack.us/img371/4260/carteresto1931hg.jpg" alt="" width="316" height="193" /></li>
    </ul>
</div>

Modifié par Hum (07 Dec 2005 - 06:56)
Sujet clos
Aller à