28172 sujets

CSS et mise en forme, CSS3

Div qui ne se postionne pas correctement

Bonjour à tous,

J'ai un petit soucis de positionnement avec le positionnement de mes div. Smiley bawling

J'en ai trois, l'enb tête qui fait toute la largeur de l'ecran. Le corps qui est un peu moins large, puis le pied de page qui doit lui aussi sur toute la largeur de l'écran.

Le tout est englobé dans une div qui me permet de centrer l'ensemble quelque soit la taille de l'écran.
Ce dernier est positionné de la manière suivante :
#conteneur{
	position:relative;
	width:100%;
	margin:0 auto;
	background-color:#eeeeee;
	z-index: 0;
}


L'entete de cette manière :
#entete{
	position:relative;
	margin:0 auto;
	width:940px;
	height:406px;
	top:0px;
	left:0px;
	background-image: url(../images/entete.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-color:#eeeeee;
	z-index:1;
}


Le corps 
#central {
	background:#ffffff;
	position:absolute;
	left:50%;
	top:405px;
	width:900px;
	height:400px;
	margin-left:-450px;
	z-index: 1;
}


Tout fonctionne très bien sur la plupart des navigateurs mais pas pour le pied de page :
[code=css][#piedpage{
margin:0 auto;
width:940px;
height:406px;
background-color:ff9933;
z-index:1;
}

/code]

Là sa ne fonctionne plus, il se positionne en haut de l'écran juste sous l'en tête. Smiley fache

Or j'aimerai qu'il se place en dessous du corps et se déplace au fur et à mesure que le corps s'agrandi.

Si quelqu'un peut m'aider à trouver l'erreur se serai sympa.

Merci,
Diabolo
Smiley ohwell Je suis désolé je viens de" me relire et j'ai fais un tas de fautes de frappe ! J'espère que mon message sera tout de même clair.
salut,

tu devrais mettre un lien vers la page pour que l'on voit le souci et les sources.

A+
re,

pourtant ça serait bcp plus simple pour t'aider.


sinon comme ça vite fait, j'aurai tendance à dire que c'est la propriété position : absolute; du corps (#central) qui pose problème.
essaies de mettre un margin-top : hauteur #entete + hauteur #central sur #piedpage ou alors peut être continu sur lui en position: absolute en le positionnant.

A+
Modifié par o06 (04 Jul 2011 - 13:02)
Bonjour,

Même si la page n'est pas accessible, il est possible de nous donner du code.

Un code CSS sans le HTML n'est pas interpretable.

À priori, le problème viens du positionnement (relatif et absolu) mal maitrisé et pas spécialement nécessaire.
C'est tout bon le calque central était mal paramétré j'ai réécris l'ensemble et maintenant c'est tout bon !

Merci à tous les deux, Smiley biggrin Smiley cligne
J'ai criéé victoire trop tôt car l'ensemble fonctionne sous Ie mais pas sous firefox !! Smiley rolleyes

Alors pour le code css cela donnera : 

body {
margin:0px;
padding:0px;
background-color:#eeeeee;
}

#conteneur{
	position:relative;
	width:100%;
	margin:0 auto;
	background-color:#eeeeee;
	z-index: 0;
}


.diventete{
	width:100%;
	height:405px;
	background-image: url(images/entete.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}

.divbandeau {
	position:absolute;
	top:345px;
	z-index:2;
	background-color:#FF9933;
	height:30px;
	width:100%;
	left: 2px;
	background-position: center;
	text-align: center;
}


.divcentral {
	position:relative;
	margin:0 auto;
	background:#ffffff;
	width:900px;
	z-index: 1;
}

.divpied{
	width:100%;
	height:200px;
	background-image: url(images/footer.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-color:#eeeeee;
}

div#colonne1 {
	float: left;
	width: 225px;
	padding-left:5px;
	background-image: url(images/tvertical.gif);
	background-repeat:repeat-y;
	background-position:right;
}

div#colonne2 {
	float: right;
	width: 665px;
	padding: 1px 0;
	background: burlywood;
}


Et pour le html :

<body>

<!-- début du calque contenant le site en entier -->
<div id="conteneur">

	<!-- Début du calque entête avec logo, vidéo et menu -->
    <div class="diventete">
    
    	<!-- Début du calque contenant le menu -->
	<div class="divbandeau">
	             
        </div>
    	<!-- Fin du calque contenant le menu -->
    
	</div>
	<!-- Fin du calque entête avec logo, vidéo et menu -->

	
    <!-- Début du calque central qui contient le corps de la page -->
    <div class="divcentral">
    
    <div id="colonne1">
    <p>aaa</p>
    <p>bbb</p>
    <p>ccc</p>
    <p>bbb</p>
    </div>
    
    <div id="colonne2">
    <p>ddd</p>
    <p>eee</p>
    </div>
    </div>
    <!-- Fin du calque central qui contient le corps de la page -->
	
    <!-- Début du calque pied de page -->    
    <div class="divpied"></div>
    <!-- Fin du calque pied de page -->    

</div>
<!-- Fin du calque conteneur-->
</body>
</html>


Pourquoi sa ne fronctionne plus sous firefox mystère !
Bonjour,

Deux remarques en passant:

1. Quand tu dis que ça marche sur IE, tu penses à Internet Explorer 8 et 9 et à un affichage en mode Standard, pas en mode Quirks? (Dans IE 8-9, tu peux vérifier le type de rendu utilisé en ouvrant les outils pour développeur intégré à ces versions du navigateur.) Si c'est le cas, il est effectivement bizarre que ça marche dans IE mais pas dans Firefox (ou Chrome ou Opera...).

2. Penser à oublier pour de bon la notion de "calque" qui n'existe pas en HTML ou CSS. Les DIV ne sont pas des calques. Smiley cligne
Salut fvsch,

Ol pour les calques (satané dream) je vais rectifier sa.

Pour l'affichage qui fonctionne bien c'est Ie8 mode standard, et celui qui veut pas c'est firefox c'est le 3.6 mode standard.

D'habitude c'est l'inverse, c'est internet qui pose problème.

La div pied vient se glisser sous la div central ??? Smiley eek
diabolo6771 a écrit :

c'est internet qui pose problème.


Les génies du gouvernement français travaillent à régler le problème. Smiley lol

Sur ce... je vais faire un tour dehors. Smiley lol
a écrit :
diabolo6771 a écrit :

c'est internet qui pose problème.



Les génies du gouvernement français travaillent à régler le problème.

Sur ce... je vais faire un tour dehors.


Quoi dire !

C'est internet explorer qui pose problème bien sur
C'est ce que j'ai posté en un peu plus haut, à part les instructions du header tu as l'ensemble du code.

Pour l'instant dans le header il n'y as aucune instruction de style ou autre, juste la balise title
Bon ben j'ai testé ton code et j'ai exactement le même affichage sous Firefox 3.6 et 4.0 et IE 8 et 9.
Au vu du code, je suppose qu'il peut y avoir un problème de dépassement des flottants vu que ce comportement n'a pas l'air d'être géré. On pourra lire: Empêcher les flottants de dépasser de leur conteneur.

Je suppose que ce problème ne se posera pas dans IE7, et peut-être pas dans IE8 en mode "compatibilité IE7", à cause du phénomène hasLayout qui bloque aussi le dépassement des flottants (on pourra lire: HasLayout et bugs de rendu dans Internet Explorer 6-7).

Un conseil, déjà: tester aussi dans Chrome, pas uniquement dans IE et Firefox.
Modifié par fvsch (04 Jul 2011 - 16:45)
Sujet clos
Aller à