28220 sujets

CSS et mise en forme, CSS3

Bonjour

J'essaye de faire un site mais je me retrouve face à un probleme.

Mon site : http://mat.linuxhelps.org/

J'ai coloré les blocs pour mieu les voir.

Sous IE les blocs sont totalement disposés n'importe comment alors que sous Firefox, ils vont bien Smiley sweatdrop .


Puis mon menu de droite, il dépasse le conteneur alors que je voudrai qu'il reste dedans. Le conteneur devant s'allonger de lui meme ....


Merci de m'aider


/* Attribu de la page */
body {
 	background:#eee;
	margin:0;
	text-align:center;
}
h1 {
    font-size:140%;
    text-align:left;
}
h2	{
    font-size:100%;
    text-align:left;
}
/* le conteneur du site */
#conteneur {
	background:#fff;
  	border:1px solid #000;
	width:900px;
	height:auto;
	margin:auto;
}
/* Bannière du site */
#banniere{
	height:200px;
	background:#A7EFA3;
  	background-image:url(images/logo.jpg);
  	background-repeat:no-repeat;
 	background-position:top left;
	border-bottom:1px solid #000;
}
/* Menu de droite */
#menu{
   text-align:left;
   background-color:#CCFF99;
   width:199px;
   height:auto;
   float:right;
}
/* Centre index */
#centre{ 
  text-align:left;
  background-color:#FFFFCC;
  border-right:1px solid #000;
  width:700px;
  height:auto;
}



<body> 

<div id="conteneur">
<div id="banniere"></div>
<div id="menu">
<?php
require('menu.htm');
?>
</div>
<div id="centre">
<?php
include('news.htm');
?>
</div>
</div>

</body>


J'ai déjà chercher et lu les tutos mais je n'y arrive toujours pas ...

merci
Modifié par Ricomat (25 Mar 2005 - 17:11)
merci j'ai rajouté

hr {
  clear: both;
  visibility: hidden;
}


mais je pensé qu'il y aurai une solution moins "barbare" comme mettre autre chose que float,etc ...
Mais ca me convient quand meme Smiley smile


Par contre toujours le meme probleme pour la disposition des blocs avec IE ... Smiley ohwell


merci
Essai sans spécifier de largeur pour ton #centre et marge à droite.

Donc, enleve width: ...; et ajoute margin-right: 200px; et ça devrait rouler.
Bonjour,
Pour ton centre:
#centre{ 
  text-align:left;
  background-color:#FFFFCC;
  border-right:1px solid #000;
  width:700px;
  height:auto;
}

Tu devrais utiliser un marge à droite d'au moins la largeur de ton menu en float.

#centre{ 
  margin-right: 210px;
etc.
}


Je ne suis pas sûr de l'utilité de tous tes height: auto.

ps: un conteneur en 900px de large, je souffre un peu avec ma petite résolution Smiley cligne
Merci beaucoup de vos réponses Smiley biggrin

Je vais modifier tout ca !

Sympa d'aider des débutants Smiley smile


Pour la largeur, oui effectivement je pourrait la réduire.
J'ai un autre petit problème.

Je voudrais que mon menu de droite et le centre soit séparé par une ligne, donc j'ai mis un border-right au centre.

Mais sur le site, la ligne ne prend pas toute la hauteur du conteneur et c'est ce que je voudrai.

Comment faire pour que la ligne prennent toute la hauteur ? Y a t il une meilleure methode que de mettre un border right ?

merci Smiley smile
Modifié par Ricomat (26 Mar 2005 - 12:17)