Images et mise en page ?

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
fredroy
Salamandre
Messages : 40
Inscription : 07 janv. 2004, 03:12

Images et mise en page ?

Message par fredroy »

Bonjour,

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

Code : Tout sélectionner

 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
Salamandre
Messages : 40
Inscription : 07 janv. 2004, 03:12

Message par fredroy »

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
Salamandre
Messages : 28
Inscription : 02 nov. 2003, 00:05

Message par gaerun »

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
Dernière modification par gaerun le 08 mai 2006, 09:51, modifié 1 fois.
fredroy
Salamandre
Messages : 40
Inscription : 07 janv. 2004, 03:12

Message par fredroy »

Merci beaucoup.

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

Cela fonctionne parfaitement sous Mozilla mais pas sous IE. Raison ?
Dernière modification par fredroy le 19 janv. 2004, 16:22, modifié 1 fois.
fredroy
Salamandre
Messages : 40
Inscription : 07 janv. 2004, 03:12

Message par fredroy »

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
Salamandre
Messages : 28
Inscription : 02 nov. 2003, 00:05

Message par gaerun »

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
Dernière modification par gaerun le 19 janv. 2004, 16:33, modifié 1 fois.
fredroy
Salamandre
Messages : 40
Inscription : 07 janv. 2004, 03:12

Message par fredroy »

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
Salamandre
Messages : 40
Inscription : 07 janv. 2004, 03:12

Message par fredroy »

:( je n'arrive pas à resoudre le problème avec IE quelqu'un a-t-il une idée ?
fredroy
Salamandre
Messages : 40
Inscription : 07 janv. 2004, 03:12

Message par fredroy »

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
Gecko
Messages : 57
Inscription : 13 nov. 2003, 20:38

Re: Images et mise en page ?

Message par Optélium »

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
Salamandre
Messages : 40
Inscription : 07 janv. 2004, 03:12

Message par fredroy »

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 :wink:
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 4 invités