Geckozone

Bonjour,

J'ai merai afficher des images de la manière suivantes :

 image 1 image 2 image 3 image 4 
 image 5 image 6 image 7

Or quand je le fait les images du haut sont bien alignées mais celles que je veux placer en dessous se trouve en bas mais collée à la bordure de l'image 4.

Savez vous comment faire ('kinstruction qu'il faut utiliser) pour pouvoir aligner un certain nombre d'images horizontalement puis indiquer que d'autres images se trouveront en dessous ?

Bien, j'ai réussis pour mes images l'une en dessous de l'autre.

J'aimerai mettre une image complétement à gauche.

Celle-ci fait une taille en hauteur de 88px soit la somme de mes images sur les deux lignes.

Comment dois-je procéder :

http://www.about-django.com/include/menucss.htm

Code : Tout sélectionner

#menuhaut { width: 100%;   white-space: nowrap; background-image:url(/accueil/menupics/lignes.gif);}
#menuhaut img { border: 0;vertical-align:top }
#menuhaut a img { border-style: none; }

#menubas { width: 100%; white-space: nowrap; background-image:url(/accueil/menupics/lignebas.gif);}
#menubas img { border: 0; vertical-align:top  }
#menubas a img { border-style: none; }

Code : Tout sélectionner

<div id="menuhaut">
<a href="#"><img src="../accueil/menupics/news.gif" width="61" height="40" /></a>
<a href="#"><img src="../accueil/menupics/bio.gif" width="77" height="40" /></a>
<a href="#"><img src="../accueil/menupics/disco.gif" width="86" height="40" /></a>
</div>
<div id="menubas">
<a href="#"><img src="../accueil/menupics/videos.gif" width="62" height="48" /></a>
<a href="#"><img src="../accueil/menupics/forum.gif" width="62" height="48" /></a>
<a href="#"><img src="../accueil/menupics/contemporains.gif" width="88" height="48" /></a>
</div>

Il suffit de mettre ton image juste avant et de lui appliquer le style :

Code : Tout sélectionner

float:left;

l'image sera placee a gauche et sera entouree par la droite des elements qui la suivent.
Ca donne ca.

--
les accents avec un qwerty, c'est pas gagne

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.2) Gecko/20060427 Ubuntu/dapper Firefox/1.5.0.2

Merci beaucoup.

C'est la solution à laquelle j'ai pensé après mon message.

Cela fonctionne parfaitement sous Mozilla mais pas sous IE. Raison ?

Cela vient du DOCTYPE...

Dans ton exemple tu n'en as pas et cela fonctionne sous IE...

Avec le doctype suivant :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Cela ne fonctionne pas sous IE

Il semble que ce soit (encore) un comportement bizarre d'IE.
Essaie de rajouter le style :

Code : Tout sélectionner

display:inline;

Normalement, a partir du moment ou on est en float:left, ca devrait etre automatique (il me semble), mais apparement pas sous IE5*.
Le "hack" a l'air de resoudre le probleme (vu sur d'autres forums).

--
Il faut que j'arrete de ne pas etre sur de moi dans mes posts

Edit : ah, tiens, non, ca a pas l'air de marcher

Je rencontre se problème avec IE6...

Sans doctype IE6 se comporte comme Mozilla avec un doctype il descend le le "menuhaut" et "menubas" d'une ligne

J'ai ajouté le

Code : Tout sélectionner

display:inline;

Cela ne change rien au comportement d'IE 6

En tout cas merci beaucoup pour ton aide

je n'arrive pas à resoudre le problème avec IE quelqu'un a-t-il une idée ?

Bien, cela ne fait que 3 semaines que je me suis mis au standard mais j'ai trouvé la solution... comme quoi

Il suffit de mettre à mon menuhaut une marge gauche de 105 px et de donner à mon image gauche une position absolus top et left de 0px.

Et voilà l'affichage est correct.

fredroy a écrit :
Code : Tout sélectionner
 image 1 image 2 image 3 image 4 
 image 5 image 6 image 7

Voila qui ressemble à l'exemple 4 de OpenWeb du positionnement float, nan?
http://openweb.eu.org/articles/initiation_float/

Non

J'ai une image supplémentaire à gauche fixe et mes images de droites ne doivent pas passer les unes en dessous des autres lors d'un repositionnement de fenêtre. (d'ailleurs openweb n'a pas trouvé la solution à mon pb)

Sinon, après un nouvelle analyse, j'ai trouvé la solution...

Il fallait tout simplment retirer la valeure

Code : Tout sélectionner

width: 100%

et tout foncttionne correctement..

Comme quoi on peut secher tout le monde avec des problèmes ultra simples

Geckozone

Images et mise en page ?

Images et mise en page ?

Re: Images et mise en page ?