IE n'aime pas mon CSS

Question

thibaud25

4 Mar 2008 à 17:27

Bonjour à tous

Voici le site qui pose problème sous IE mais pas sous mozilla. Je ne voit pas comment améliorer mon code pour l'optimiser sur les deux.

Le site

Mon CSS:


body {
background-color: #D8D8D8;
background-image: url(images/fond.gif);
background-repeat: repeat-x;
}

div#container
{
	margin: auto;
	width: 1003px;
}

div#header img
{
	float:left;
}

div#menu img
{
	float:left;
}

div#bordDroit
{
	position: absolute;
	margin-top: 93px;
	margin-left: 996px;
}

div#menu1
{
	position: absolute;
	margin-top: 110px;
	margin-left: 15px;
}

div#menu1 a
{
	text-decoration: none;
	color: black;
}

div#menu1 a:hover 
{
	text-decoration: none;
	color: black;
	border-bottom: 2px solid red;
}


div#contenu
{
	position: absolute;
	margin-top: 178px;
	margin-left: 7px;
	width: 989px;
	height: 461px;
	background-color: white;
}

Mon HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >





   <head>



       <title>AkrogAmes Boutique en ligne de produits Hight Tech</title>

       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <link rel="stylesheet" media="screen" type="text/css" title="style" href="design.css" />



   </head>





   <body>


<div id="container">
	<div id="header">
		<img src="images/index_01.gif" border="0">
		<img src="images/index_02.gif" border="0">
		<img src="images/index_03.gif" border="0">
		<img src="images/index_04.gif" border="0">
	</div>

	<div id="menu">
		<img src="images/index_05.gif" border="0">
		<img src="images/index_06.gif" border="0" alt="Accueil">
		<img src="images/index_07.gif" border="0" alt="">
		<img src="images/index_08.gif" border="0" alt="">
		<img src="images/index_09.gif" border="0" alt="">
		<img src="images/index_10.gif" border="0" alt="">
		<img src="images/index_11.gif" border="0" alt="">
		<img src="images/index_12.gif" border="0" alt="">
		<img src="images/index_13.gif" border="0" alt="">
		<img src="images/index_14.gif" border="0" alt="Création de site web">
		<img src="images/index_16.gif" border="0" alt="Hebergement">

		<img src="images/index_20.gif" border="0">
	</div>

	<div id="menu1">
		<a href="index.php">Accueil</a>
	</div>

	<div id="bordDroit">
	<!-- La il y a un probleme je crois... -->
		<img src="images/index_15.gif" border="0">
	</div>

	<!--La div corps pour mettre du grand texte-->
	<div id="contenu">
		test contenu
	</div>

	<div id="footer">
		<img src="images/index_22.gif" border="0">
	</div>


</div>

</body>
</html>

Si vous pouviez annoncer clairement mes erreurs que je puisse les modifier.

Amicalement Thibaud
Modifié par thibaud25 (04 Mar 2008 - 17:27)

ghost

4 Mar 2008 à 17:41

Salut,

A mon avis un défaut de positionnement de tes blocs...
Pourquoi ces positionnements en absolute?
La majorité d'entre eux ne sont pas nécessaires Smiley cligne

Revois (vois?) les bases de positionnement là
Modifié par ghost (04 Mar 2008 - 17:41)

thibaud25

4 Mar 2008 à 17:44

coucou,

merci d'avoir répondu. Pourquoi tu trouve que mon positionnement en absolute est mauvais ?
J'ai toujours utilisé le positionnement absolu. Peut être à tort mais cela me permet de pouvoir les placer au pixel près...

Enfin tu voudrais que j'utilise le positionnement absolu ?

Arf grr le CSS...cela allait plus vite avec des tableaux ....

Je suis perdu avec toutes ces balises CSS

verdan

4 Mar 2008 à 17:57

bonjour

ajoute dans le css :


div#header{overflow:auto;}
div#menu{overflow:auto;}

pour "terminer" tes flottants

évite les position:absolute, utilise le positionnement naturel pour les div suivantes.
exemple:


div#bordDroit
{
text-align:right;
margin-top: 100px;/*ce que tu veux*/
}
div#contenu
{
width: 989px;
margin:auto;
height: 461px;
background-color: white;
}

crebindiou

4 Mar 2008 à 18:06

J'ai lu sur le site de W3C concernant les CSS que l'attribut float doit obligatoirement être associé à un attribut width. ça peut peut-être t'aider.
Et on m'a donné aussi une petite astuce : toutes tes div en absolute doivent être contenues dans une div en position:relative. Sinon ça ne fonctionne pas partout...
Par contre, moi sous ie6, j'ai eu des problèmes d'affichage à cause d'une surcharge de float:left visiblement pas nécessaires : le contenu de la div ne s'affichait simplement pas, même si je voyais qu'il était là à cause du changement de curseur de la souris au survol des liens.
Modifié par crebindiou (04 Mar 2008 - 18:08)

ghost

4 Mar 2008 à 18:39

Re,

Le problème n'est pas de ne pas utiliser absolute mais de l'utiliser correctement et à bon escient.
En l'occurrence de positionner un conteneur englobant ta page en position relative servant de référent. Déjà ça limiterait la casse, ensuite je trouve un peu aléatoire de positionner des blocs "importants" en absolute.
Ton bloc contenu, fait height: 461px. Question: si son contenu devient plus long que ce passe t'il? si j'augmente la taille de la police de caractère ?

Voilou, de laisser le maximum de bloc dans le flux c'est toujours plus simple!! Smiley cligne

A priori sauf erreur, aucun positionnement en absolute n'est nécessaire pour ta mise en page mais c'est une erreur que l'on à tous commis au début Smiley biggrin

Modifié par ghost (04 Mar 2008 - 18:53)

thibaud25

4 Mar 2008 à 21:22

re bonsoir, merci de votre aide.
Bon j'ai essayé de supprimer les position absolute mais c'est pire qu'avant sous mozilla j'ose pas regarder sous IE Smiley biggrin

Le site bugué

Comme vous pouvez le voir c'est encore pire, un bout de design sur la droite avec le menu descendu. Il y a aussi tus les corps de page descendu ...

Enfin bref l'horreur et je ne comprend pas trop le CSS j'ai toujours été habitué au tableau il y a 8 ans(déjà... Smiley sweatdrop

je suis vieux) de cela.
donc voilà je souhaite que vous m'aidiez juste pour le design car là j'accroche plus... je veux bien vus écoutez faire des efforts certainements mais guidé moi.

Je vous repasse le CSS modifié:


body {
background-color: #D8D8D8;
background-image: url(images/fond.gif);
background-repeat: repeat-x;
}

div#container
{
	margin: auto;
	width: 1003px;
}


div#header
{
overflow:auto;
}

div#menu
{
overflow:auto;
}

div#header img
{
	float:left;
}

div#menu img
{
	float:left;
}

div#bordDroit
{
	text-align:right;
	margin-top: 93px;
}

div#menu1
{
	position: absolute;
	margin-top: 110px;
	margin-left: 15px;
}

div#menu1 a
{
	text-decoration: none;
	color: black;
}

div#menu1 a:hover 
{
	text-decoration: none;
	color: black;
	border-bottom: 2px solid red;
}


div#contenu
{
	width: 989px;
	margin:auto;
	height: 461px;
	background-color: white;
}

Merci à tous

verdan

4 Mar 2008 à 21:47

ton div#menu1 est encore en absolute, enlève cela.

sinon, maintenant que j'ai vu les images, je pense qu'il y a un problème de largeur : tes div#header et #menu ne sont pas assez larges pour contenir toutes les images donc ça "passe à la ligne" . Il faut que tu aies au moins comme largeur la somme de toutes les largeurs des images qui doivent être sur la même ligne.

et la largeur de ton contenu est mal calculée par rapport à ton image de footer

pour #bord_droit je n'avais pas réalisé non plus ce que c'était, il faudrait mettre l'image en float-right, de manière à ce que l'image ne crée pas une div de ahuteur équivalente...
Modifié par verdan (04 Mar 2008 - 22:02)

thibaud25

4 Mar 2008 à 21:55

tu dis: "ton div#menu1 est encore en absolute, enlève cela."

Mais je fais comment alors pour le placer à l'endroit précis sur l'image que je veux...?

et pour les DIV menu et header il n'y a pas de width:


div#header
{
overflow:auto;
}

div#menu
{
overflow:auto;
}

Je suis désolé d'être lourd mais j'essaye de me convertir au CSS car les tableaux c'est moche à la longue...

verdan

4 Mar 2008 à 22:09

non, il n'y a pas de width : comme ils se trouvent dans container , ils ont par défaut la taille de container càd 1003 px or pour la 2ème ligne il en faut 1124 !

ça va être fort large pour les résolutions ordinaires...

thibaud25

4 Mar 2008 à 22:13

Re, mr verdan,

Hum j'ai modifié mais cela ne marche toujours pas...

PS: Tu peux allez voir tes MP stp je voudrais te parler.

Merci de votre aide mais je suis long à comprendre.

Sujet clos

CSS et mise en forme, CSS3

IE n'aime pas mon CSS