28173 sujets

CSS et mise en forme, CSS3

[CSS] Problème de position

Bonjour, après plusieurs tentatives, mon problème persiste toujours. Il s'agit d'un problème de positionnement de deux div. Je voudrais les positionner l'une en dessous l'autre sans marge mais la seconde chevauche la première, voilà mes scripts html et css :

html
<body>
<DIV id="global"></DIV>
<DIV id="bigfooter"></DIV>
</body>


et css
#global {
	BACKGROUND: url(fond.gif);
	WIDTH: 703px;
	TEXT-ALIGN: center;
	HEIGHT: auto;
	POSITION: absolute;
	LEFT: 50%;
	MARGIN-LEFT: -352px;
}
#bigfooter {
	POSITION: relative;
	HEIGHT: 200px;
	WIDTH: 703px;
	MARGIN-LEFT: auto;
	MARGIN-RIGHT: auto;
	
}


Quelqu'un pourrait-il m'aider?
Merci d'avance!
P.S. j'ai mis uniquement ce qu'il n'allait pas.
Modifié par N!GhT (06 Aug 2006 - 21:04)
Bonsoir et bienvenue à toi,
Ton premier div #global est en position absolute donc sorti
du flux courant, par conséquent les autres éléments en flux réagissent
vis à vis de lui comme s'il n'existait pas.
Tu as plusieurs solution pour pallier à cela:
Soit tu mets une marge haute au div de dessous de la hauteur de #global,
soit tu donne un padding-top de valeur équivalente au div conteneur
parent s'il existe.
Modifié par Hermann (06 Aug 2006 - 20:48)
Dsl je me suis mal exprimé dans l'énoncé. J'ai mis une hauteur pour faire des tests et j'ai recopier bêtement mais en fait le #global s'adaptent en fonction du contenu (height : auto). Je corrige de suite.

Cela fait que je ne peux pas mettre de valeur de position pour la hauteur.

Aurais-tu une autre idée s'il te plait?
Salut, le problème de ton site st celui qu'a évoqué hermann... c'est le positionement d'un élément hors du flux qui pertube la suite.

je te propose une solution, après à toi de voir si elle te convient.


* {
 padding: 0;
 margin: 0;
 border: 0;
 }

body	{
 /*pour centrer sur IE*/
 margin: 0; 
 text-align: center;
 }

 /*nouvel id qui s'applique sur une div qui englobe tout le contenu de ton site, pour le centrage des éléments*/
#cadre_principal{
 text-align: left;
 margin: auto;
 /*tu défini ta largeur de page ici*/
 width: 703px;
}

#global {
background: #545454;
text-align: center;
}

#bigfooter {
 background: #878787;
height: 200px;
}




<div id="cadre_principal">
	<div id="global"></div>
	<div id="bigfooter"></div>
</div>


Tu verras que j'ai enlevé certains éléments récurents, tel que la width qui n'est pas nécessaire dans ce cas puisque défini avant.

Voilà, j'espère que cela t'aideras et que j'ai bien répondu à ton problème.

Ciao
Modérateur
bonjour,
<edit> pas vu le post le precedant Smiley confused </edit>
tu cherche probablement a centre ton site en verticale et horizontale, alors plutot que de partir dans des css "a defaut" et a bricolé pour les differents navigateurs, voici une solution simple et efficace.


<body>
  <table>
  <tr>
  <td>
 <!-- votre page ici -->
<div id="global"></div>
<div id="bigfooter"></div>

  </td>
  </tr>
  </table> 
</body>

et comme css:

html, body, table, td{ 
height: 100%; 
width: 99%; 
border:0; 
margin:0; 
padding:0; 
} 
td { 
text-align: center;/* en complement des marge "auto" aux contenus , pour vielles version de IE */
}
/*  commentaire.
reprise de ton css legerement modifié  (preferer les minuscules dans les css et faire usage d'un doctype valide pour la page html , pour respecter les standards et avoir un rendu plus "homogene d'un navigateur a l'autre )
*/

#global {
	background-image: url(fond.gif);
	width: 703px;
	margin-left: auto;
	margin-right: auto;
}

#bigfooter {
	height: 200px;
	width: 703px;
	margin-left: auto;
	margin-right: auto;
}


les div etant par defaut des elements de type block ils reteront l'un sur l'autre, la marge "auto", va les centrés sur la page en horizontale, tandis que la cellule du tableau les centreras en verticale, valeur par defaut dans
une cellule.

++
Modifié par gcyrillus (06 Aug 2006 - 21:55)
Modérateur
rebonsoir,

a écrit :
C'est de la mise en page tableau tout ca langue langue .... pas bien ravi


oui , on le sait tous , mais dans ce cas , cela ne nuit pas au code et a "l'accessibilité" de la page , et surtout ça a l'avantage d'etre efficace, "compatible" , et d'etre mis en place aisement ..... pour juste le rendu "visuel".

pour un centrage juste horizontale , le tableau devient jute un div conteneur comme tu l'indique (en plus du body pour assurer une compatibilité des rendus css maximale (rendu visuel) avec certaines version d'opera et d'IE qui ne gere pas ou en partie seulement les regles css, et le text-align-center qui lui justement passe bien partout Smiley smile et qui va bien pour les "tres vieux IE" . )

++
Sujet clos
Aller à