28220 sujets

CSS et mise en forme, CSS3

Bonjour
j'ai un problème au niveau du texte, comme je l'ai dit dans le titre, il sort allègrement de son contenant et d'ailleurs il depasse de tout.
J'ai tourné et retourné le problème, fait et refait mon code et ma css et j'avoue que je n'arrive plus du tout a y voir clair, c'est pour cela que je fais appel a vous.
Donc voila mon problème ici.
Et ma css:


* 
{
margin: 0; 
padding: 0;
}


body
{
	background-color: Lime;
	
}


#global
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 780px;
	height: 800px;
	background-color: Fuchsia;
}

#header
{
	width: 780px;
	height: 178px;
	background-image: url(image/inter/gabarit_01.gif);
	background-repeat: no-repeat;
}

 ul, li 
{ 
list-style-type: none; 
margin: 0px;
padding: 0px;
}

 ul 
{
position: absolute; 
left:33px;
top: 200px;
background: transparent url(image/inter/menu.gif) top left no-repeat; 
height: 303px;
width: 180px;
}

 li 
 {
display: inline; /* correction pour IE5 et IE5.5 */
}

 li a 
{
	display: block; 
	height: 60px;
	width:180px;
	line-height:60px; 
	
}

 li a:hover 
{
background: transparent url(image/inter/menu.gif) top left no-repeat;
}

#menu1:hover 
{
background-position: 0px -303px; 
}

#menu2:hover 
{
background-position: 0px -363px;
}

#menu3:hover 
{
background-position: 0px -423px;
}

#menu4:hover 
{
background-position: 0px -483px;
}

#menu5:hover 
{
background-position: 0px -543px;
}

#contenu
{	
	position: absolute;
	top: 178px;
	left: 213px;
	background-image: url(image/inter/gabarit_03.gif);
	background-repeat: no-repeat;
	width: 567px;
	height: 396px;
	margin:0px;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-left: 25px;
	color: Black;
}

#footer
{	position:absolute;
	left:0px;
	bottom: 0px;
	background-image: url(image/inter/gabarit_10.gif);
	width: 780px;
	background-repeat: no-repeat;
	text-align: center;
	color: Gray;
	font-size: x-small;
}


Si quelqu'un a une idée (ou une corde pour me pendre, ça ira plus vite Smiley rolleyes ) ça serait gentil de m'aider.
Modifié par Why? (13 May 2005 - 14:14)
Administrateur
C'est à cause de ton padding-left: 25px; sur ton bloc #contenu

Je crois avoir lu quelque part que les paddings (left en l'occurence) décalaient le contenu hors des blocs positionnés en absolu. Je ne retrouve plus ma source mais ça me rappelle vaguement quelque chose.

Dans tous les cas, évite d'utiliser le positionnement absolu pour les éléments internes de ton document. Ces blocs peuvent être placés en flottant.
... Ou alors applique des margin aux contenus plutôt que des paddings aux conteneurs Smiley smile