Images et mise en page ?

fredroy · Message par **fredroy** » 19 janv. 2004, 12:32

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 ?

fredroy · Message par **fredroy** » 19 janv. 2004, 15:10

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>

gaerun · Message par **gaerun** » 19 janv. 2004, 15:55

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

fredroy · Message par **fredroy** » 19 janv. 2004, 16:04

Merci beaucoup.

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

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

fredroy · Message par **fredroy** » 19 janv. 2004, 16:17

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

gaerun · Message par **gaerun** » 19 janv. 2004, 16:24

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

fredroy · Message par **fredroy** » 19 janv. 2004, 16:32

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

fredroy · Message par **fredroy** » 19 janv. 2004, 20:06

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

fredroy · Message par **fredroy** » 20 janv. 2004, 10:42

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.

Optélium · Message par **Optélium** » 20 janv. 2004, 18:19

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/

fredroy · Message par **fredroy** » 20 janv. 2004, 21:32

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 ?

Qui est en ligne ?