Probleme de positionnement

Bonsoir,

J'ai une nouvelle fois besoin de votre aide malheureusement je n'arrive pas a comprendre cette erreur, c'est vraiment dur le css °°

Enfin soit, voici mon problème :

J'ai un div header qui regroupe plusieurs div dont le div classement :

 <div id="header">
   
		<div id="zemanga">
		</div>
		
		<div id="classement">
		</div>
		
		<div id="entete">
		</div>
		
		<div id="statistique">
		</div>

		<div id="publicite">
		</div>
		
		<div id="extensible1">
		</div>
		
	</div>

#header
{
width:1000px;
height: 364px;
margin:auto;
}

#classement
{
height: 263px;
width: 258px;
background: url("../images/design/classement.png") no-repeat;
position: relative;
bottom: 263px;
left: 293px;
}

Cependant lorsque je veux "placer le contenu" ( sur le screen ci dessus le contenu sont les images apparentes mal placées ) de mes div, je me suis dit je vais utiliser la propriété padding-top: 50px par exemple.

http://img246.imageshack.us/img246/7359/sanstitre1ln9.jpg

Or j'obtiens ceci =s

http://img136.imageshack.us/img136/4933/sanstitre2iw7.jpg

Merci d'avance

bonjour

je me demande si tu utilises le positionnement relatif à bon escient ?

est-ce bien ce que tu veux : remonter le bloc #classement de 263px et le déporter vers la droite de 293px par rapport à la position qu'il occuperait naturellement ?

ben en fait je souhaiterai qu'il soit l'un a coté de l'autre, je peux eventuellement tenter le positionnement absolu mais je n'arrive plus a centrer le design °°

Heu... il n'y a pas que positionnement relatif et absolu, hein. Il y a aussi le positionnement statique, qui est celui qu'on utilise dans 90% des cas.

Je crois qu'une révision s'impose:

Initiation au positionnement CSS sur Openweb :
1. flux et position relative
2. position float
3. position absolue et fixe

Ne pas oublier d'apprendre à se servir correctement de padding et margin, et d'engranger deux-trois notions importantes comme le modèle de boite CSS, le dépassement des flottants, et la fusion des marges.

j'ai relu les tutoriaux ci-dessus et j'ai obtenu ceci ^^

CSS

body
{
	width: 1000px;
	margin-top: 0px; 
    margin-bottom: 0px;
	margin: auto;
	background-color: #7f6f89;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 73%;
	color: #6b585a;
}

a img
{
border: none;
}

a:link
{
	color: #6b585a;
	text-decoration: none;
	font-weight: normal;
	cursor: pointer;
	word-spacing: normal;
	white-space: normal;
}

a:active /* Au moment du clic*/
{
	text-decoration: none;
	font-weight: normal;
	cursor: pointer;
	word-spacing: normal;
	white-space: normal;
}

a:visited /* Quand le lien est déja visité*/
{
	color: #6b585a;
	text-decoration: none;
	font-weight: normal;
	cursor: pointer;
	word-spacing: normal;
	white-space: normal;
}

a:hover /* Quand la souris est sur le lien*/
{
	color: #700000;
	text-decoration: none;
	font-weight: bold;
	cursor: pointer;
	word-spacing: normal;
	white-space: normal;
}

#header
{
width: 1000px;
height: 364px;
}

#zemanga
{
height: 263px;
width: 293px;
background: url("../images/design/zemanga.png") no-repeat;
position: absolute;
}

#classement
{
height: 263px;
width: 258px;
background: url("../images/design/classement.png") no-repeat;
position: absolute;
left: 297px;
padding-top: 33px;
padding-left: 55px;
}

#entete
{
height: 263px;
width: 449px;
background: url("../images/design/entete.png") no-repeat;
position:absolute;
left: 555px;
}

#statistique
{
height: 100px;
width: 292px;
background: url("../images/design/statistique.png") no-repeat;
position: absolute;
top: 263px;
}

#publicite
{
height: 100px;
width: 708px;
background: url("../images/design/publicite.png") no-repeat;
position:absolute;
top: 263px;
left: 296px;
}

#extensible1
{
height: 1px;
width: 1000px;
background: url("../images/design/extensible1.png") repeat-y;
position: absolute;
top: 363px;
}

#menu
{
width: 255px;
height: 782px;
top: 364px;
}

#navigation
{
height: 227px;
width: 255px;
background: url("../images/design/navigation.png") no-repeat;
position: absolute;
top: 364px;
padding-top: 15px;
padding-left: 53px;
}

#multimedia
{
height: 224px;
width: 255px;
background: url("../images/design/multimedia.png") no-repeat;
position: absolute;
top: 591px;
padding-top: 15px;
padding-left: 53px;
}

#chat
{
height: 331px;
width: 255px;
background: url("../images/design/chat.png") no-repeat;
position: absolute;
top: 815px;
}

#contenu
{
width: 745px;
}

#content
{
height: 760px;
width: 745px;
background: url("../images/design/content.png") no-repeat;
position: absolute;
top: 364px;
left: 259px;
}

#extensible2
{
height: 2px;
width: 745px;
background: url("../images/design/extensible2.png") repeat-y;
position: absolute;
top: 1124px;
left: 259px;
}

#extensible3
{
height: 20px;
width: 745px;
background: url("../images/design/extensible3.png") no-repeat;
position: absolute;
top: 1126px;
left: 259px;
}

#footer
{
width: 1000px;
height: 55px;
}

#partenaire
{
height: 55px;
width: 1000px;
background: url("../images/design/partenaire.png") no-repeat;
position: absolute;
top: 1146px;
padding-top: 20px;
}

XHTML:

<body>
   
   <div id="header">
   
		<div id="zemanga">
		</div>
		
		<div id="classement">
		</div>
		
		<div id="entete">
		</div>
		
		<div id="statistique">
		</div>
		
		<div id="publicite">
		</div>
		
		<div id="extensible1">
		</div>

	</div>
	
	<div id="menu">
	
		<div id="navigation">
		</div>
		
		<div id="multimedia">
		</div>
		
		<div id="chat">
		</div>
		
	</div>
		
	<div id="contenu">
		
		<div id="content">
		</div>
		
		<div id="extensible2">
		</div>
		
		<div id="extensible3">
		</div>
		
	</div>
	
	<div id="footer">
	
		<div id="partenaire">
		</div>
	
	</div>
	
   </body>

Actuellement apparement cela s'affiche correctement et on obtiens ceci
ICI

Cependant je n'ai pas trouver d'autres moyens que d'utiliser les propriétés padding pour "placer" le contenu de chacun de mes div et j'ai l'impression que mon codage est "moche" ( pas l'impression que je vais pouvoir palcer le contenu du div zemanga,chat, content comme cela...), si quelqu'un pouvais me donner quelques directives

PS: et lorsque j'utilise la propriété padding pour deplacer le contenu de mon div partenaire, ma page s'aggrandi et j'ai une marge qui apparait =s
Modifié par Sidji (20 Feb 2008 - 19:46)

travaille avec du contenu, c'est beaucoup plus facile pour se rendre compte, voir comment ça se met, corriger, etc.

ouais je m'acharne a essayer diverses facons possibles en CSS mais ils semble que la première solution ci dessus soit la mieu codé xD, je vais essayer el positionement fixe