28172 sujets

CSS et mise en forme, CSS3

Problème div dépassement

Bonjour à toutes et à tous,

Je suis actuellement sur la création d'un petit site et je me retrouve face à un problème.
Je possède une div appelée divcontainer laquelle contient une autre div appellée divmainleft.

Mon problème c'est que lorsque je spécifie à divmainleft, une hauteur de 100%, celle ci dépasse de sont container à savoir divcontainer. J'ai déjà essayé des solutions telles que overflow:hidden, mais il faut que tout ce qu'il y a dans divmainleft soit visible !

Voilà mon code CSS :

@charset "utf-8";
/* CSS Document */
html {
height:100%;
margin-bottom:10px;
margin-top:10px;
padding:0px;
}
body {
	background-image: url(Pictures/background.png);
	height:100%;
	padding:0px;
	margin:0px;	
}
.maindiv
{
border:1px solid #FFFFFF;
border-left-color:#FFFFFF;
width:950px;
margin-left:auto;
margin-right:auto;
height:100% ;
background-color:#333333;

}
.bannerdiv
{
background-color:#000000;
width:100%;
height : 150px;
border-bottom: 1px solid #FFFFFF;
}
.bannerdivextendleft
{
float:left;
margin-top:10px;
width :400px;
height:100px;
margin-left:10px;
margin-right:10px;
}
.bannerdivextendright
{

width :200px;
height:150px;
float:right;
}
.divmainleft
{
float:left;
background-color:#404040;
width:69%;

}
.divmainright
{
background-color:#404040;
width:30%;
float:right;
}
.bannermenu
{
height:40px;
width:100%;
border-bottom:1px solid #FFFFFF;
background-image:url(Pictures/Blocker.png);
background-repeat:repeat-x;


}


et 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=utf-8" />
<title>AmazingEve</title>
<link href="base.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="maindiv">
 
  <div class="bannerdiv">
   	  	<div class="bannerdivextendleft">
	    <img src="Pictures/AElogo1.png" width="400" height="100" /></div>
        <div class="bannerdivextendright">
	    <img src="Pictures/AElogo2.png" width="200" height="150" /></div>
  </div>
  <div class="bannermenu"><img src="Pictures/Menuaccueil.png" width="120" height="40" /><img src="Pictures/Menusoiree.png" width="120" height="40" /><img src="Pictures/Menuprofil.png" width="120" height="40" /><img src="Pictures/Menuconnexion.png" width="150" height="40" />
  </div>
  
		<div class="divmainleft">test
		</div>
        <div class="divmainright">test</div>
</div>



</body>
</html>


Merci de votre aide !

Cordialement,

Terra
Modifié par Terra (16 Jul 2009 - 22:08)
Siouplaît !

J'ai vraiment besoin d'aide car je n'y arrive pas du tout !

Je vous poste ci dessous un lien veres une images pour mieux comprendre mon problème
[EDIT Laurie-Anne : Image trop grande] http://pechabou-escrime-club.fr/Sans%20titre.JPG

Les divmainleft et divmainright sont en gris clair et dépassent de leur conteneur !
Modifié par Laurie-Anne (17 Jul 2009 - 10:22)
Je suis désolé mais aucune de ces techniques que j'avais déjà lues ne fonctionne c'est pour cela que j'en appelle à votre aide !
Le code que tu nous montre, ne présente aucune des techniques.

Pourrais-tu nous montrer une page en ligne ou le code que tu as utilisé pour mettre en place l'un ou les deux techniques ?
Voilà un exemple ci dessous avec un hr class="spacer"

<!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=utf-8" />
<title>AmazingEve</title>
<link href="base.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="maindiv">
 
  <div class="bannerdiv">
   	  	<div class="bannerdivextendleft">
	    <img src="Pictures/AElogo1.png" width="400" height="100" /></div>
        <div class="bannerdivextendright">
	    <img src="Pictures/AElogo2.png" width="200" height="150" /></div>
  </div>
  <div class="bannermenu"><img src="Pictures/Menuaccueil.png" width="120" height="40" /><img src="Pictures/Menusoiree.png" width="120" height="40" /><img src="Pictures/Menuprofil.png" width="120" height="40" /><img src="Pictures/Menuconnexion.png" width="150" height="40" /></div>
  
  <div class="divmainleft">test		</div>
  <div class="divmainright">tezt</div>
<hr class="spacer"> 

</div>
<div class="divfooter">test</div>


</body>
</html>



@charset "utf-8";
/* CSS Document */
html {
margin:0px;
padding:0px;
height:100%;
margin-bottom:10px;
margin-top:10px;
}
body {
background-image: url(Pictures/background.png);
height:100%;
padding:0px; 
margin:0px;

}
.maindiv
{
border:1px solid #FFFFFF;
width:950px;
margin-left:auto;
margin-right:auto;
height:100%;
background-color:#333333;
}

.bannerdiv
{
background-color:#000000;
width:100%;
height : 150px;
border-bottom: 1px solid #FFFFFF;
}
.bannerdivextendleft
{
float:left;
margin-top:10px;
width :400px;
height:100px;
margin-left:10px;
margin-right:10px;
}
.bannerdivextendright
{

width :200px;
height:150px;
float:right;
}
.divmainleft
{
background-color:#404040;
width:69%;
float:left;
height:100%;

}
.divmainright
{
background-color:#404040;
width:30%;
float:right;
height:100%;
}
.bannermenu
{
height:40px;
width:100%;
border-bottom:1px solid #FFFFFF;
background-image:url(Pictures/Blocker.png);
background-repeat:repeat-x;
}
.divfooter
{
border:1px solid #FFFFFF;
margin-left:auto;
margin-right:auto;
background-image:url(Pictures/Blocker.png);
background-repeat:repeat-x;
height:40px;
width:950px;
margin-top:5px;
}
.spacer {
clear: both;
}


Et au final j'ai le même rendu que sur la copie d'écran ! Hormis le fait que j'ai un jolie barre de séparation sur le bas de mes divs !
Modifié par Terra (17 Jul 2009 - 10:47)
Nan ça reste à l'identique, en revanche je crois que c'est un problème plus complexe, car lorsque je met une div class spacer, mon footer du bas remonte tout en haut de la page...

Bref je suis perdu
est ce que tu pourrais me mettre un screenshot que je vois si c'est ce que je veux avoir ?

Merci beaucoup je teste sur firefox actuellement... je vais voir sur IE7
Modifié par Terra (17 Jul 2009 - 10:56)
Sujet clos
Aller à