Problème d'alignement avec les css
Problème d'alignement avec les css - Web design - Graphisme
Marsh Posté le 04-03-2005 à 15:39:47
Pourquoi est-ce que tu met chaque image dans un <div> ????????????????
Marsh Posté le 04-03-2005 à 15:59:58
pour pouvoir mettre un espace entre chacune d'elle. Il faut faire autrement ??? si je ne mets pas de div, est ce que je sais mettre de l'espace entre chaque image?
Marsh Posté le 04-03-2005 à 16:02:50
Ben oui, avec une margin 
Tu sais, on peut appliquer du CSS à tous les éléments, pas qu'aux <div>. Aussi, <div> et là pour grouper et structurer un document 
Marsh Posté le 04-03-2005 à 16:22:30
ok donc j'enlève mes div et je mets direct les margin aux images ...
Merci beaucoup
Marsh Posté le 04-03-2005 à 16:30:40
J'ai fait les changement, j'ai enlevé les div de chaque image et j'ai ajouté une class dans chaque balise img.
Mais j'ai toujours un problème et je ne comprends pas pourquoi !
http://users.skynet.be/Brouwers.Alex/newsite/test.htm
Voila ce que j'obtiens, je ne comprends pas pourquoi quand les images passes à la 2eme ligne, elles ne se mettent pas à gauche. Quelqu'un connait-il la raison???
Marsh Posté le 04-03-2005 à 16:37:30
T'as pas besoin de mettre une class Applique le style comme ça :
Code :
|
Ca s'appliquera à toute les balises <img /> dans l'élement qui a pour id 'travaux' 
Sinon, donne un peu plus de marge à tes images
Marsh Posté le 04-03-2005 à 16:47:04
J'ai fait les changement que tu m'a conseillé, en laissant les marge comme elles étaient, rien ne change. Donc j'ai agrandit mes marges, alors les images s'aligne comme il faut sauf que j'ai 3 lignes alors que j'aimerais en avoir que 2. Ca doit être une betise mais je ne vois pas pourquoi ça foire
Marsh Posté le 04-03-2005 à 16:59:43
Oui ca quand meme je sais que si je diminue mes marges, mes images se rapprocheront mais alors je retombe sur le problème que j'avais précédemment : sur la 2ème ligne, les images ne se mettent pas à gauche
http://users.skynet.be/Brouwers.Alex/newsite/test.htm
Marsh Posté le 04-03-2005 à 17:03:27
Ah oui en fait, t'as pas besoin de mettre float: left. <img> est une balise inline
Marsh Posté le 04-03-2005 à 17:07:34
Ah ok merci beaucoup !!! Ca marche !!!
Juste pour info, ca veut dire quoi une balise inline ???
Marsh Posté le 05-03-2005 à 13:31:55
Tu as les balises inlines : strong, em, del, img, span, etc. qui ne provoquent pas de retour à la ligne
La balise div est une balise "block" car entraine un retour à la ligne.
Cette propriété est modifiable par le CSS.
Sujets relatifs:
- Probleme de contour sur Illustrator CS
- probleme
- Probleme de screenshot avec windows media
- Problème de navigation avec le css sous dreamwaver.
- Problème de macro VBA sur Catia V5
- probleme impression
- Problème d'installation de solidworks
- Probleme insertion image sous xpress
- Problème avec affiche .eps
- flashMX; problème d'alignement de texte
Marsh Posté le 04-03-2005 à 15:37:31
Bonjour à tous,
je suis en train d'essayer de faire mon site en css mais j'ai un problème d'alignement d'image.
Voilà ce que j'obtiens :
http://users.skynet.be/Brouwers.Alex/newsite/test.htm
Alors que j'aimerais avoir 5 images sur la 1er ligne et 4 sur la deuxième.
Voici le code de la page html :
<body>
<div id="travaux">
<div class="image"><img src="image/travaux/vignette/souris.jpg" border="0"></div>
<div class="image"><img src="image/travaux/vignette/photo_montage01.jpg" border="0"></div>
<div class="image"><img src="image/travaux/vignette/logorm.jpg" border="0"></div>
<div class="image"><img src="image/travaux/vignette/babouin.jpg" border="0"></div>
<div class="image"><img src="image/travaux/vignette/packaging_souris.jpg" border="0"></div>
<div class="image"><img src="image/travaux/vignette/globe.jpg" border="0"></div>
<div class="image"><img src="image/travaux/vignette/elephant.jpg" border="0"></div>
<div class="image"><img src="image/travaux/vignette/carte_noel.jpg" border="0"></div>
<div class="image"><img src="image/travaux/vignette/interdit.jpg" border="0"></div>
</div>
</body>
et voici le code de ma feuille de style :
#travaux{
margin-left: 180px;
width:740px;
}
.image{
width:125px;
float:left;
margin-top: 15px;
margin-right: 10px;
margin-left: 10px;
}
Quelqu'un voit il ce que je pourrait faire pour aligner comme il faut les images ???
Merci d'avance pour votre réponse