28220 sujets

CSS et mise en forme, CSS3

[réglé] IE float et espace

Bonjour Smiley smile
J'ai un petit problème : je veux faire une page composée d'une image en haut à gauche, une en haut à droite, une au centre en haut, un contenu au milieu, une image en bas à droite, une autre en bas à gauche et enfin une image au centre-bas de la page. Mon soucis est que sous Firefox et Opéra (j'ai pas beaucoup d'autres navigateurs Smiley cligne ), le résultat est tel que je le veux, c'est à dire ainsi :
(||)(||||||||||||||||||||||||)(||)
Contenu assez consistant
Mais pas forcement
(||)(||||||||||||||||||||||||)(||)

Toutes les images se collent, tandis que sous IE on voit à peu près ça :

(||) (||||||||||||||||||||||||) (||)
Contenu assez consistant
Mais pas forcement
(||) (||||||||||||||||||||||||) (||)

Mon code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Titre [smile]</title>
</head>

<body>

<div class="Parchemin">
  <div id="HG"></div>
  <div id="HD"></div>
  <div id="HC"></div>

  <div class="Contenu">
	
	je dis blablablablablabla et j'arrete pas :<br />
	Blablablablablablablablablablablablablablablablablablablablablablablablablablablabla
	
  </div>

<div id="BG"></div>
<div id="BD"></div>
<div id="BC"></div>
</div>

</body>
</html>


Et mon CSS :
body {
	margin: 0;
	padding: 2.5em 5em 2.5em 5em;
	font-family: Verdana, "Book Antiqua", Tahoma, serif;
	font-size: 13px;
	text-align: center;
	background-color: #FFF;
}

img { border: 0; }

.Parchemin {
	margin-left: auto;
	margin-right: auto;
}

#HG {
	width: 79px;
	height: 48px;
	background: transparent url('parche-HG.png') no-repeat left;
	float: left;
}

#HC {
	height: 50px;
	background: transparent url('parche-C.gif') repeat-x left;
	margin: 0 82px 0 79px;
}


#HD {
	width: 82px;
	height: 50px;
	background: transparent url('parche-HD.png') no-repeat right;
	float: right;
}


#BG {
	width: 83px;
	height: 48px;
	background: transparent url('parche-BG.png') no-repeat left;
	float: left;
}


#BC {
	height: 50px;
	background: transparent url('parche-C.gif') repeat-x left;
	margin: 0 83px;
}


#BD {
	width: 83px;
	height: 50px;
	background: transparent url('parche-BD.png') no-repeat right;
	float: right;
}


J'ai pas mis la page en ligne, il est en local, alors je vous laisse seulement ceci, désolé.

Merci de bien vouloir m'aider, et merci pour avoir lu mon topic Smiley langue
Modifié par BrenX (23 Nov 2005 - 21:58)
Bonjour BrenX et bienvenue sur ce forum. Smiley smile

Tu es victime du IE Three Pixel Text-Jog (en).

La façon la plus propre de contourner ce bug est d'imbriquer tes flottants dans le <div> du centre en ajustant sa largeur en conséquence et en enlevant les marges gauche et droite. Fixer le centre sur background-position: center top;


<div id="HC">
	<div id="HG"></div>
	<div id="HD"></div>
</div>

Ou bien, appliquer le background du centre sur un conteneur global incluant les <div> gauche, centre et droite.

Ou bien, utiliser le positionnement absolu, dans lequel cas il te faudra tout de même utiliser un conteneur global pour centrer la page.

Sans un lien vers la page ou sans les images utilisées ici, difficile d'en dire plus.
Modifié par Stephan (23 Nov 2005 - 20:51)
Merci de l'accueil Smiley smile
Ca fait un peu de temps que je cherche mes solutions sur ce forum, mais c'est la première fois que je n'en trouvais pas, alors me suis inscris ^^
Bon j'ai mis en ligne, si l'on peut dire, la page. C'est ici : http://fubb.no-ip.org/Histoire/
L'embétant c'est que si j'utilise ce que tu me dis mon image au "centre" se voit à l'extérieur de mes images droites et gauches. Je pourrai mettre un morceau blanc, mettre un cache, ou autre, mais j'aimerai faire un site sans magouille, sinon je crois que j'aurai vite fait opté pour les tables Smiley decu
Mais ton post me fait plaisir, je croyais vraiment que j'avais un truc bête et que je devrai le voir, j'ai tourné mes divs et mes styles dans tous les sens que je connais (ils sont pas nombreux quand meme ^^) ... sans résultat.
Si il n'y aucune solution autre que la position absolu, je la prendrai, j'y avais vaguement pensé, mais ton post m'a fait réfléchir, et vu comment je me servirai de ces images, l'absolu est utilisable Smiley ravi

Merci encore Smiley smile
La méthode que je t'ai proposée fonctionne très bien.

Imbriquer les flottants dans le <div> centre :

<div id="HC">
	<div id="HG"></div>
	<div id="HD"></div>
</div>

Et enlever les marges dans le CSS :

#HC {
	height: 50px;
	background: transparent url('parche-C.gif') repeat-x center;
	/* margin: 0 82px 0 79px; */
}

Attention aux guillemets simples dans les url. IE/Mac ne sait pas voir les images appelées entre guillemets simples. Les guillemets étant inutiles ici, mieux vaut ne pas en mettre du tout.

La Chatte Noire a écrit :

Problems with background images

1. IE Mac cannot see background images that are linked to a stylesheet using the following code: selector {background: #ccc url('myimage.gif')}. Note the single quotemark in the url. More in the hiding and linking section.

La Chatte Noire (en)
Modifié par Stephan (23 Nov 2005 - 21:32)
En fait ta méthode fonctionnerait si mon image n'était pas transparente, j'avais déjà tenté, mais bien mon preoblème c'est que du coup l'image du centre se voit derrière les images, si je met du blanc, ok ce sera joli et tout, sauf quand j'appliquerai une couleur à l'arrière plan du contenu ...
Et j'ai dit un peu au dessus que je voulais pas changer ou plutot bidouiller mes images, parce qu'après je vais peut-être mettre une couleur de fond.
Enfin merci beaucoup mais je vais tenter la position absolue, ta seconde proposition, si jamais j'arrive à m'y faire j'édite avec le réglé en plus Smiley smile
Merci de ton attention en tout cas Smiley cligne

EDIT : J'avais oublié que la position absolue est impossible à avoir sur un bas de page qui change selon chacun de ses contenus ^^
Bon j'ai donc opté pour ta solution de mettre les divs gauche et droite dans celle du centre, et donc j'ai refait vite fait mes images ... Dommage, mais on peut pas obliger tout le monde à utiliser un navigateur un peu plus sur les normes Smiley cligne
Merci beaucoup d'avoir passé un peu de temps sur mon problème, et merci de m'avoir informer de ce bug et des guillemets simples, j'commençais à me faire du soucis ^^
Modifié par BrenX (23 Nov 2005 - 21:57)
Sujet clos
Aller à