Images align= left sur Fire Fox

Question

lecroquant

14 Jan 2009 à 13:55

Bonjour

Ayant décidé d'éviter les tables avec leurs tr et td je suis face un probleme de chevauchement de block
lorsque je place une image avec align=left, le bloc d'en dessous se place a droite de l'image avec Fire Fox, (avec iEx tout va bien.)
voici le contenu du fichier html:


<html>
<head>
<title>essai 11</title>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<LINK href="style11.css" type=text/css rel=stylesheet>
</head>
<body>

<div class="haut">
<img src="logo.gif" width="138" height="68" align="left">
blabla blabla blabla blabla blabla blabla 
</DIV>

<div class="gauche">
blabla blabla blabla blablablabla blabla blabla blabla blabla
</DIV>

<div class="paragr">
blablabla 
</DIV>

<div class="paragr">
blablabla 
</DIV>

</body>
</html>

et voici le CSS/


body{
background-color: #003300;
}

.haut { 
width: 100%;
text-align: center;
font-size: 30px;
padding: 2px;
background-color: #ffffff;
}

.gauche {
float: left;
width: 19%;
height: 100%;
margin-top: 8px;
padding-right: 2px;
padding-left: 2px;
background-color: #ffffff;
}

.paragr {
float: right;
width: 78%;
margin-top: 8px;
margin-left: 8px;
padding-top: 2px;
background-color : #ffffff;  
 }

la solution simple est de spécifier une hauteur pour le div .haut mais ça ne me convient pas parceque le contenu est créé "dynamiquement"

avec overflow: auto ça me place un scroll disgracieux

Connaissez vous un moyen de remédier a cela?

Sinon je retourne aux tables, les cellules ne se déplacent pas, elles Smiley smile

Merci de votre aide
Mathieu

Laurie-Anne

14 Jan 2009 à 14:42

Il faudrait ajouter un DOCTYPE.

"align=left" n'est pas valide en HTML strict. IL vaux mieux utiliser un "float: left;" dans le CSS (via une classe).

lecroquant

14 Jan 2009 à 15:48

Merci

j'ai apporté les modifs:
fichier html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>essai 11</title>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<LINK href="style11.css" type=text/css rel=stylesheet>
</head>
<body>

<div class="haut">
<img src="logo.gif" width="138" height="68" class="aligng">
blabla blabla blabla blabla blabla blabla 
</DIV>

<div class="gauche">
blabla blabla blabla blablablabla blabla blabla blabla blabla
</DIV>

<div class="paragr">
blablabla 
</DIV>

<div class="paragr">
blablabla 
</DIV>

</body>
</html>

fichier CSS:


body{
background-color: #003300;
}

.haut { 
width: 100%;
text-align: center;
font-size: 30px;
padding: 2px;
background-color: #ffffff;
}

.gauche {
float: left;
width: 19%;
height: 100%;
margin-top: 8px;
padding-right: 2px;
padding-left: 2px;
background-color: #ffffff;
}

.paragr {
float: right;
width: 78%;
margin-top: 8px;
margin-left: 8px;
padding-top: 2px;
background-color : #ffffff;  
 }

.aligng{
float: left;
}

Poour IEx c'est bon mais pour FF3 c'est pareil en pire: l'image a carrément disparu !

Mathieu

lecroquant

14 Jan 2009 à 16:03

Je viens de placer mes fichiers sur le net a cette adresse:

http://www.seegers.fr/essais/

si vous voulez constater

(j'ai retrouvé mon image)

Merci de votre aide
Mathieu

miroune

16 Jan 2009 à 18:10

Bonjour et surtout merci d'avoir placé quelques codes biens utiles pour un novice comme moi Smiley cligne

J'ai besoin de positionner 3 images sur mon site web (une à gauche, une au centre et la 3e à droite).

J'utilise le ".aligng" pour placer ma 1e image à gauche et j'ai créé un ".alignd" pour placer mon image à droite.

MAIS (car il y a un mais), ma 3e image qui devrait se placer au centre, vient en sur-impression de mon image placée à gauche Smiley fache

.

L'image de droite ne se positionne pas du tout sur le meme niveau que l'image de gauche ! (mais un peu en dessous).

Je ne sais pas quel code placer dans mon css pour que l'image se place au centre (un "float: center;" n'existe pas et de toute façon ne fonctionne pas chez moi), et que l'image de droite reste au meme niveau que les deux autres .

Auriez vous un peu d'aide à m'apporter svp ?

ci dessous mon code html

<div id="contenu">
<h2 style="text-align:center;"><img alt="Chalet classé 2 épis aux Gîtes de France" src="images/logo_gite_france_75x75_n.gif" width="67" height="68" class="aligng"/>
<img
alt="Louer votre appartement dans le chalet La Louvière à La Toussuire, en Savoie au coeur des Alpes françaises"
src="images/image_croix_chalet_90x103.GIF" width="90" height="70" />
<a href="http://www.chalet-lalouviere.net/"><img
alt="Le chalet est compatible wifi" src="images/90_wifi_n.png" width="75"
height="57" class="alignd"/></a></h2>

et le code du css

.aligng{
float: left;
}

.alignd{
float: right;
}

Modifié par miroune (16 Jan 2009 - 18:16)

lecroquant

17 Jan 2009 à 17:54

Bonjour

Tu devrais poser ton probleme dans un nouveau post car je ne suis pas un spécialiste Smiley decu

Mais, comme ça a vue de nez, si tu connais la largeur de tes images
_ ya qu'a placer la premiere avec float left et le margin-left necessaire au centrage de l'ensemble
_ la deuxieme avec float-left viendra s'appuyer sur la premiere
_ pareil pour la troisieme float-left aussi.

sans oublier les margin pour l'espacement

il doit sûrement y avoir d'autres methodes Smiley smile

Mathieu

Laurie-Anne

19 Jan 2009 à 08:46

Miroune > Pourquoi ne pas simplement mettre les images côte à côte sans CSS particulier ?

lecroquant

19 Jan 2009 à 20:45

Parce que ici c'est un forum sur les CSS
et que je ne sais pas si le grand 3w autorise la balise html: center et que je crois que c'est mieux si c'est centré non?
moi avoir trés peur du grand consortium
DE toute façons même avec center on ne peux pas centrer trois images en même temps sans utiliser des align=quelquechose.

Perso je n'aurai fais qu'une image avec les trois et utilisé center mais bon, je le dis tout doucement, brrrr

Mathieu

miroune

19 Jan 2009 à 20:53

En fait je les ai mises l'une à coté de l'autre mais dans FF3 elles sont "collées". Ce que je veux c'est que la 1ere s'affiche sur la gauche du bloc, la 2e soit au milieu et la 3 e s'affiche sur la droite, d'ou l'idée d'utiliser le ".aligng" de lecroquant qui me paraissait correspondre à mon besoin.

Je n'ai pas encore testé la manip de lecroquant avec le margin mais dès que je peux je le teste et je vous tiendrai au courant.

L'autre idée de faire une image en 3 m'ai également venue mais ne me plait pas outre mesure car en plus l'une des images devra renvoyer vers un site bien particulier
Modifié par miroune (20 Jan 2009 - 18:47)

fvsch

19 Jan 2009 à 21:36

Hello,

<p class="illus-center">
	<img src="..." alt="..." class="align-left" />
	<img src="..." alt="..." class="align-right" />
	<img src="..." alt="..." class="normal" />
</p>

À partir de ce code, on peut centrer les trois images avec un text-align: center sur le parent (le paragraphe). Ensuite, si on souhaite placer une image tout à gauche et une autre tout à droite, on peut faire flotter la première à gauche et la seconde à droite (ou l'inverse). La troisième devrait rester centrée.

Attention, pour plus de trois images on n'aura pas une répartition égale. Pour cela, il faut un conteneur en display: table-cell pour chaque image, et un conteneur en display: table; width: 100% pour l'ensemble. Ou bien un tableau directement en HTML (stylé en CSS lorsque nécessaire).

miroune

20 Jan 2009 à 20:21

Bonsoir

J'ai suivi les conseils de Florent et voila ce que j'obtiens (voir copie écran). Le probleme est que sous FF3 :
- la 3e image (celle de droite) se "décale" vers le bas et ne s'aligne pas avec les 2 autres,
- la 2e image (celle du centre) ne se positionne pas au milieu : le class="normal" que je met dans mon html ne permet pas à l'image de se placer vraiment au milieu:

Enfin j n'ai pas compris a quoi servait le <p class="illus-center"> que j'ai placé dans mon html, a quoi il fait allusion dans le css ????

J'ai vraiment besoin d'encore un peu d'aide.Merci à tous

Mon HTML :


<!-- #navigation -->

<div id="contenu">
<h2 style="text-align:center;">
<p class="illus-center">
<img alt="Chalet classé 2 épis aux Gîtes de France" src="images/logo_gite_france_75x75_n.gif" width="67" height="68" class="align-left" />
<img alt="Louer votre appartement dans le chalet La Louvière à La Toussuire, en Savoie au coeur des Alpes françaises" src="images/image_croix_chalet_90x103.GIF" width="90" height="70" class="normal" /><a href="http://www.chalet-lalouviere.net/">
<img alt="Le chalet est compatible wifi" src="images/90_wifi_n.png" width="75" height="57" class="align-right" /></a>
</p>
</h2>

Mon CSS :


/* Images */
.normal{
float: none;
}

.align-left{
float: left;
}

.align-right{
float: right;
}

Heyoan

20 Jan 2009 à 20:31

Hello miroune,

dans le code que Florent t'avait proposé les images en float étaient placées en premier. Ce n'était pas par hasard mais parce que c'est ainsi qu'il faut faire : relire les tutos sur le positionnement dans Bases et Indispensables.

Pour ce qui est du <p class="illus-center"> cela permettait de styler ce paragraphe de la manière que tu souhaitais mais c'est optionnel. Smiley cligne

Modifié par Heyoan (20 Jan 2009 - 21:47)

miroune

20 Jan 2009 à 20:37

Si si je vous assure, je fais des efforts !
j'ai déja lu les tutos mais semble t'il pas encore assez Smiley bawling

En tout cas ça fonctionne mieux comme tu me l'indique, c'est clair.

Ce post m'inspire une réflexion : "Que le chemin est long pour un amateur avant d'arriver à la plénitude du professionnel"
(non non je vous assure ce n'est pas un vieux proverbe chinois Smiley lol

)

Merci en tout cas pour votre aide (j'ai bien galéré avant d'écrire...et la réponse était "simple")

Sujet clos

CSS et mise en forme, CSS3

Images align= left sur Fire Fox