28221 sujets

CSS et mise en forme, CSS3

[resolu] Superposition de <div> IE vs FF1.0

Bonsoir à toutes et tous,

Débutant en css, je rencontre de sérieux soucis avec IE 6.
J'ai crée une CSS qui roule nickel sous FF 1.0, par contre sous IE, panique à bord !!! Smiley decu

Mon petit soucis (gros soucis ?) :

Un bloc pricipal qui englobe tout le monde.

J'ai un bloc central qui doit prendre toute la largeur.

Par dessus ce bloc central, je positionne un autre bloc, sur la droite, qui contient le menu.

Avec IE, le bloc central se décale vers le bas.
J'ai tenté avec float, des absolute et autres, rien n'y fait...
J'en appel donc à votre aide, car IE me fait perdre patience.

Dans le code ci dessous, c'est "bloc-centre" et "colonne-droite" qui me pose problème.


Voici le code de la CSS : 


#bloc-centre {
	body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0px;
}

#home{
	margin: auto;
	width:750px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCCCCC;
}
.header {
	height: 100px;
	width: 750px;
	margin: auto;
}

/* la colonne de droite */
#colonne-droite {
	float:right;
	width:150px;
	height:auto;
	margin-top: -15px;
	margin-right:0px;
	background-color: #FFFFFF;
}


div#cadre {
padding-top: 25px;
background: url(../images/inteface/shape1.jpg) no-repeat left top;
}
div#bloccadre {
background: url(../images/inteface/bas.jpg) no-repeat left bottom;
padding-bottom: 25px;
}

/* la colonne centrale */
#bloc-centre {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	width: 730px;
	margin-top:10px;
	margin-left:5px;
	margin-bottom:1px;
	min-height: 700px;
}

/* le pied de page */
#footer {
	position: fixe;
	height: 30px;
	width: 750px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999999;
	background-color:  #F7F7F7;
}


En revanche, je ne peux pas vous proposer de lien pour voir ca en ligne pour le moment. Le site n'est pas encore posé.

Merci d'avance aux âmes charitables qui m'apporterons quelques réponses salvatrices.
Modifié par damix (25 Feb 2005 - 14:06)
Bonsoir, et bienvenue.

Comme c'est ton premier post ici je t'invite à lire l'aide et le règlement du forum histoire de bien te familiariser aux coutumes locales, tu peux ensuite passer te présenter dans le bar en utilisant le post des présentations.

Enfin n'oublie pas d'utiliser la fonction "recherche" avant d'ouvrir un nouveau sujet, des fois qu'une réponse à un problème similaire au tiens ai déjà été donné.


Pour revenir à ton problème actuel, il est assez délicat de t'aider puisque tu ne donne pas d'exemple du code HTML correspondant à te feuille de style. Impossible dans ce cas de deviner comment tu as imbriqué tes balises ou si tu as commis des erreurs de syntaxe.

Ce qui me viens directement à l'esprit en voyant ta CSS : tu ouvre une propriété "#bloc-centre {" mais tu as oublié de la fermer (il manque le "}" de fin).

Aussi j'aimerais bien comprendre ce qui te pousse à mettre un bloc englobant tout le contenu du site et qui occupent l'integralité de la largeur pour ensuite faire un second bloc, lui avec une largeur fixe (750px) et qui englobe aussi le contenu du site? Là, à mon avis tu as un bloc de trop, tu devrais supprimer celui qui se trouve à l'exterieur.
bonjour Smiley smile

Merci de ta réponse.
En plus, j'avais pas posté au bon endroit Smiley confus
J'ai bien tenté hier d'utiliser la recherche, mais je n'aie rien trouvé avec les termes que j'ai saisie. Peut être n'ai je pas utilisé les bons.
(Et peut être n'ai je pas regardé au bon endroit.... )
J'ai alors parcouru quelques pages du fora, sans plus de succès.

Sinon, pour ma CSS, je ne sais plus ou j'ai lu ça, mais il me semble bien qu'il est "conseillé" d'avoir un bloc qui englobe tout les autres. Cependant il est possible que j'utilise mal tout ceci.

Voici un copie de mon code html : 




<? require ('data/menu2.php'); ?>
<!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" />
<title>test</title>
<link href="/css/css1.css" rel="stylesheet" type="text/css" />
</head>

<body>

<? $name=$_SERVER['HTTP_HOST']; ?>


<div id="home">

	<div class="header"><img src="image.php" /></div>
	<div id="navigation"><p><? echo $name ; ?> </p></div>
	
<div id="colonne-droite">
	<div id="cadre">
		<? menu() ?>
		<div id="bloccadre">
			<br />
		</div>
	</div>

</div><!-- fin de la colonne de droite -->

<div id="bloc-centre">
<?php include('inc.detail.php'); ?>
</div>




</div><!-- fin de la balise home -->
<div id="footer">  <p class="texte-footer">&copy; monmodele.com 2004-2005  </p>
</div>	
</body>
</html>

Modifié par damix (24 Feb 2005 - 08:52)
Sujet clos
Aller à