Problème d'aligement de block DIV [Résolu]

[rigolman]

Bonjour,

J'ai un petit soucis, j'essaie desesperement d'aligner 3 bloc d'images mais même avec un display inline ça ne fonctionne pas.

Les deux premières images sont bien en ligne mais la troisième revient à la ligne. Y a -til une histoire de with minimum à intégrer quelque part ?

Merci par avance pour vos lumières,
Alex

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
.image_top {
   position: relative;
   width: 100%; /* for IE 6 */
}
 
h3 {
   position: absolute;
   top: 75px;
   left: 0;
   width: 100%;
}
 
h3 span {
   color: white;
   font: bold 14px/35px Helvetica, Sans-Serif;
   letter-spacing: -1px;
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px;
}
h3 span.spacer {
   padding:0 5px;
}
</style>

Code :

1
2
3
4
    <div class="image_top">
     <a href="<?php echo $guid; ?>" title="<?php echo $post_title; ?>"><img src="<?php echo $thumb; ?>" width=270 height=170 border="0" /></a>
    <h3><span><?php echo $post_title; ?>...<span class='spacer'></span><br /><span class='spacer'></span>Lire la suite</span></h3>
      </div>

[NoSmoking]

Bonjour,
avec le code HTML généré, cela n'aurait été que mieux...
question c'est quoi ce <br /> qui se promène

Code :

<h3><span><?php echo $post_title; ?>...<span class='spacer'></span><br /><span class='spacer'></span>Lire la suite</span></h3>

[rigolman]

Bonjour No Smoking !

Désolé, j'ai oublié de le fournir, le voici ci-dessous, ainsi que deux capture d'écrans :
- la première correspond à ce que j'obtiens en ne mettant pas le display:inline, et l'autre avec le display:inline, tout est alors cassé...

LE code HTML ci-dessous est celui avec le display inline

J'ai aussi tenté de remplacer les div par des SPAN mais rien n'y fait...

Concernant le <BR /> il sert a afficher le "Lire la suite" le second text afficher sur l'image...

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="image_top">
     <a href="http://www.socialcooking.fr/son-metier-devenir-la-femme-la-plus-grosse-du-monde.html" title="Son métier : devenir la femme la p"><img src="http://www.socialcooking.fr/wp-content/uploads/2011/07/Donna-Simpson-world-guinness-book-270x170.jpg" width=270 height=170 border="0" /></a>
 
    <h3><span>Son métier : devenir la femme la p...<span class='spacer'></span><br /><span class='spacer'></span>Lire la suite</span></h3>
      </div>          
 
 
 
 
 
    <div class="image_top">
     <a href="http://www.socialcooking.fr/escapade-a-barcelone-tapas-fruits-soleil-etc.html" title="Escapade à Barcelone : tapas, frui"><img src="http://www.socialcooking.fr/wp-content/uploads/2011/06/smoothie-la-boqueria-270x170.jpg" width=270 height=170 border="0" /></a>
    <h3><span>Escapade à Barcelone : tapas, frui...<span class='spacer'></span><br /><span class='spacer'></span>Lire la suite</span></h3>
      </div>          
 
 
 
 
 
    <div class="image_top">
     <a href="http://www.socialcooking.fr/endocannabinoides-la-marijuana-chimique-du-corps-humain-qui-rend-les-aliments-gras-irresistibles.html" title="Endocannabinoïdes : La Marijuana c"><img src="http://www.socialcooking.fr/wp-content/uploads/2011/07/Chips-Marijuana-270x170.jpg" width=270 height=170 border="0" /></a>
 
    <h3><span>Endocannabinoïdes : La Marijuana c...<span class='spacer'></span><br /><span class='spacer'></span>Lire la suite</span></h3>
      </div>

[rigolman]

En fait, j'ai l'impression que ma SideBAr de droite, pose probleme car quand je met que deux image elle sont bien lune a coté de lautre, mais quand j'en met trois, tout est cassé... et c'est justement la que la troisieme photo devrait se trouver au dessus de la sidebar...

[NoSmoking]

je dois admettre que j'ai du mal à saisir quel est ton problème.

...j'ai l'impression que ma SideBAr de droite,...

qu'est la sideBar ???

LE code HTML ci-dessous est celui avec le display inline

display inline sur quel élément ??? comme cela

Code :

1
2
3
4
5
.image_top {
   position: relative;
   display : inline;
   width: 100%; /* for IE 6 */
}

remarque :
sémantiquement les balises H3 servent à définir un titre de niveau 3, tu peux les remplacer par des DIV.

[rigolman]

Re bonjour

J'y ai passé toute la journée mais j'y suis enfin arrivé ! C'était a cause du "conteneur" général, j'ai placé mon code plus haut dans le HTML et ça a réglé le probleme...

Merci à toi en tout cas,

Alex.