28220 sujets

CSS et mise en forme, CSS3

[résolu]Probleme de conteneur

bonjours a tous

Voila j'ai un petit probleme concernant un conteneur qui ne veut pas s'agrandir en fonction du texte a l'interieur
voici un lien plus explicatif http://www.comicway.net/NEW/

Comme vous pouvez le voir, le fond ne s'allonge pas... Smiley decu


Voici mon code css:

body {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	background:#4E7D3E;
}


#conteneur {
	position: absolute;
	width: 740px;
	left: 50%;
	margin-left: -375px;
	background-color:#D0F4F1;

}

#header {
	width:733px;
	height:124px;
	margin: auto;
	background-color: #FF0000;
}

/* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit {
height: 5px; width: 5px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#hautgauche {
background: url(images/haut_gauche.gif);
}
#hautdroit {
float: right;
background: url(images/haut_droit.gif);
}
#basgauche {
background: url(images/bas_gauche.gif);
}
#basdroit {
float: right;
background: url(images/bas_droit.gif);
}

#pub{
	width:468px;
	height:60px;
	margin-right: 10px;
	margin-top: 10px;
	float: right;
}

#menu
{
	position: absolute;
	left:0;
	width: 150px;
}
#milieu
{
	margin-left: 150px;
}
.menu {

	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 100%;
	text-align: left;
	color: #0E5856;
	font-weight: bold;
}
ul,li {
	list-style-type: none;
	margin: 0;
	padding:0;
	line-height: 20px;
	margin-left: 5px;
}
h1 {
	color: #FFFFFF;
	background-color: #21CAC6;
	padding-left: 10px;
	font-size: 15pt;
	letter-spacing: 2px;
	margin-right: 5px;
}


code html

<div id="conteneur">
	<div id="hautdroit"></div><div id="hautgauche"></div>
		<div id="header"><div id="pub"><img src="images/pub.gif" width="468" height="60" /></div>
		</div>
		<div id="menu">
					<h1>Menu</h1>
					<ul class="menu">
						<li>Menu 1</li>
						<li>Menu 2</li>
						<li>Menu 3</li>
					
						<li>Menu 4</li>
						<li>Menu 5</li>
					</ul>
		</div>
		<div id="milieu">
			<h1>Titre du centre </h1>
			ICI on met les jeux,...
		</div>	
	
	
	
	<div id="basdroit"></div><div id="basgauche"></div>	

</div>

Modifié par comicway (27 Mar 2005 - 20:13)
Ca marche pour le conteneur, parcontre les 2 images (basgauche et bas droite ne se deplacent pas au bas du conteneur...)
Voila poue le CSS
body {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background:#4E7D3E;
}


#conteneur {
position: absolute;
width: 740px;
left: 50%;
margin-left: -375px;
background-color:#D0F4F1;

}

#header {
width:733px;
height:124px;
margin: auto;
background-color: #FF0000;
}

/* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basdroit, #basgauche {
height: 5px; width: 5px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#hautgauche {
background: url(images/haut_gauche.gif);
}
#hautdroit {
float: right;
background: url(images/haut_droit.gif);
}
#basgauche {
float:left;
background: url(images/bas_gauche.gif);
}
#basdroit {
float: right;
background: url(images/bas_droit.gif);
}

#pub{
width:468px;
height:60px;
margin-right: 10px;
margin-top: 10px;
float: right;
}

#menu
{
float:left;

width: 150px;
}
#milieu
{
margin-left: 150px;
}
.menu {

font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
text-align: left;
color: #0E5856;
font-weight: bold;
}
ul,li {
list-style-type: none;
margin: 0;
padding:0;
line-height: 20px;
margin-left: 5px;
}
h1 {
color: #FFFFFF;
background-color: #21CAC6;
padding-left: 10px;
font-size: 15pt;
letter-spacing: 2px;
margin-right: 5px;
}
et le html
<div id="conteneur">
	<div id="hautdroit" ></div> <div id="hautgauche"></div>
	
	<div id="header">
		<div id="pub"><img src="images/pub.gif" width="468" height="60" /></div>
	</div>
	
	<div id="menu">
		<h1>Menu</h1>
		<ul class="menu">
		<li>Menu 1</li>
		<li>Menu 2</li>
		<li>Menu 3</li>
		
		<li>Menu 4</li>
		<li>Menu 5</li>
		</ul>
	</div>
	
	<div id="milieu" style="background-color:#00FF00; ">
		<h1>Titre du centre </h1>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
		ICI on met les jeux,...<br>
	</div> 
	<div style="clear:both; "></div>
	<div id="basgauche" style="background-color:#FF0000; "></div> <div id="basdroit" ></div>

</div>
Sujet clos
Aller à