• imprimer
  • aide

Forum de discussions « XHTML - HTML - CSS »

Retrouvez les publications relatives à ces discussions dans nos rubriques CSS, HTML, XHTML.

positionnement CSS + HTML

liste des forums liste des discussions Participer à la discussion

Photo de alpad Message publié le dimanche 14 février 2010 - 23h04 par alpad.
Bonjour à tous,

Je rencontre un problème dans le positionnement d'une DIV qui est rebelle, je ne comprend pas pourquoi elle est décalée :(

Quelqu'un pourrait il m'expliquer :) :)

voici la page html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>site</title>

<link href="css/home.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="header">HEADER</div>

<div id="banner">BANNER</div>




<div id=div1>
DIV1
</div>

<div id=div2>
DIV2
</div>



<div class="footer">FOOTER</div>

</body>
</html>

Et voici le CSS associé :

.header{

background-color: #666;
width: 900px;
height: 50px;
}

div#banner{

background-color: #999;
width: 900px;
height: 100px;
}

div#div2 {
/*background-image: url(images/concepthorizontal.gif);*/
/*background-repeat: no-repeat;*/
font-family: Verdana, sans-serif;
font-size: small;
text-align: center;
background-color: #EEE;
position: absolute;
width: 450px;
top: 150px;
height:500px;
left:450px;
color: black;
}

div#div1 {
/*background-image: url(images/concepthorizontal.gif);*/
/*background-repeat: no-repeat;*/
font-family: Verdana, sans-serif;
font-size: small;
text-align: center;
background-color: #AAA;
width: 450px;
height:500px;
top: 150px;
color: black;
}

.footer{

font-family: Verdana, sans-serif;
font-size: small;
text-align: center;
color: white;
background-color: #555;
width: 900px;
height: 20px;
top: 650px;
}

Merci beaucoup d'avance

A.
Photo de nours312 Message publié le dimanche 14 février 2010 - 23h14 par nours312. modérateur nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
de quel div parles tu ?
sous quel navigateur ?
qu'est ce qui ne fonctionne pas ?
peut on voir la page en ligne ?
Photo de alpad Message publié le dimanche 14 février 2010 - 23h27 par alpad.
Alors il s'agit de la div2 qui est decallé

je vais mettre la page en ligne http://cnote.free.fr/

C'est sur n'importe quel navigateur.
Photo de boulaneige Message publié le lundi 15 février 2010 - 01h16 par boulaneige. modérateur Le mauvais goût a son droit autant que le bon goût [Friedrich Nietzsche] - http://www.boulaneige.com
Salut,

En fait ta div2 est bien à 150px, c'est la 1 qu'est pas à sa place. Tu lui mets une valeur en top mais tu ne précises pas le type de positionnement.

Installe Firebug pour Firefox ;-)
Photo de nours312 Message publié le lundi 15 février 2010 - 08h26 par nours312. modérateur nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
Boulaneige recommande FF !... :o C'est fou les merveilles que nous apporte 2010 ^^
Photo de alpad Message publié le lundi 15 février 2010 - 10h38 par alpad.
Comment dois-je faire pour pouvoir avoir tout mes éléments bien aligné et centré ?

Je ne suis pas très fort en positionnement :( !!!

En fait je voudrais que le hearder le banner, les div1 et div2 et le footer soient bien alignés et centré sur la page .
Photo de coeos Message publié le vendredi 19 février 2010 - 00h21 par coeos. coeos.pro
Ce que tu peux faire et qui marche j'ai testé, c'est :
- d'enlever le position: absolute; du div 2
- mettre float:left pour div1 et div2
- mettre clear:both pour footer
Ce qui donne:


.header{

background-color: #666;
width: 900px;
height: 50px;
}

div#banner{

background-color: #999;
width: 900px;
height: 100px;
}

div#div2 {
/*background-image: url(images/concepthorizontal.gif);*/
/*background-repeat: no-repeat;*/
font-family: Verdana, sans-serif;
font-size: small;
text-align: center;
background-color: #EEE;
float:left;
width: 450px;
top: 150px;
height:500px;
left:450px;
color: black;
}

div#div1 {
/*background-image: url(images/concepthorizontal.gif);*/
/*background-repeat: no-repeat;*/
font-family: Verdana, sans-serif;
font-size: small;
float:left;
text-align: center;
background-color: #AAA;
width: 450px;
height:500px;
top: 150px;
color: black;
}

.footer{
clear:both;
font-family: Verdana, sans-serif;
font-size: small;
text-align: center;
color: white;
background-color: #555;
width: 900px;
height: 20px;
top: 650px;
}



Personnellement, je te conseil de crée un div corps qui englobe tout, tu définis la largeur de ce div corps et tu le centre, c'est beaucoup plus simple si tu veux centrer ton site
J'utilise Web developer sur FF, je te le conseil, avec cet outil on voit tout de suite pourquoi ton div2 est décalé : tu as une marge de 8px à gauche et en haut, mais ton div2 et positionné par rapport aux bords, sans ternir compte de ces 8px à gauche et en haut, d'où le décalage.
Si tu veux voir les sites que j'ai fait pour l'instant:

Aucun rapport avec le sujet // boulaneige
Photo de coeos Message publié le vendredi 19 février 2010 - 00h33 par coeos. coeos.pro
Pour centrer ton site (j'avais pas lu ton message entièrement), comme je le disais un div corps rajouté, voici l'HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>site</title>
<link href="allhtml.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="corps">
<div class="header">HEADER</div>
<div id="banner">BANNER</div>
<div id=div1>
DIV1
</div>
<div id=div2>
DIV2
</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>

Pour le css, rajoute juste à ce que j'ai au dessus :
#corps
{
width:900px;
margin-left:auto;
margin-right:auto;
}

si tu veux centrer NE PAS OUBLIER DE DONNER UNE LARGEUR : sans width fixé, ce sera pas centré
Autre chose, on met ID pour un objet UNIQUE,
CLASS pour un objet que l'on retrouve PLUSIEURS FOIS,

donc je te laisse corriger le header et le footer (aussi bien en html qu'en css), normalement les navigateurs ne font pas les difficiles, mais bon, vaut mieux prendre les bonnes habitudes le plus tôt possible
Bon courage pour la suite
Photo de coeos Message publié le vendredi 19 février 2010 - 01h14 par coeos. coeos.pro
encore une autre solution pour avoir l'ensemble centré, et en supprimant la bordure blanche en haut:

body
{margin-top:0px;} /* permet de supprimer la bande blanche au dessus du header*/
.header{
background-color: #666;
height: 50px;
}
#corps
{
width:900px; /*tu peux verifier c'est le seul div qui a une largeur, comme il contient tous les autres blocs, rien ne dépasse*/
margin-left:auto; /*les margin auto permettent de centrer le div*/
margin-right:auto;}

#banner{
background-color: #999;/*et oui pas de width et pourtant ca ne deborde pas*/
height: 100px;
}

#div2 {
/*background-image: url(images/concepthorizontal.gif);*/
/*background-repeat: no-repeat;*/
font-family: Verdana, sans-serif;
font-size: small;
text-align: center;
background-color: #EEE;
float:right; /* meme resultat qu'avec float left, de toute facon DIV1 prend 50% de la largeur, DIV2 aussi*/
width: 50%; /*prend 50% de la largeur soit 450 px*/
height:500px;
color: black;
}

#div1 {
/*background-image: url(images/concepthorizontal.gif);*/
/*background-repeat: no-repeat;*/
font-family: Verdana, sans-serif;
font-size: small;
float:left; /*par contre ici si tu met float:right, les div 1 et 2 echangent de place, quelque soit le float de div2, essaye !!!*/
text-align: center;
background-color: #AAA;
width: 50%; /* prend 50% de la largeur*/
height:500px;
color: black;
}

.footer{
clear:both; /*signifie qu'il ne veux pas etre a coté d'un float, il est revoyé à la ligne donc sous les blocs div1 et 2*/
font-family: Verdana, sans-serif;
font-size: small;
text-align: center;/*toujours pas de width*/
color: white;
background-color: #555;
height: 20px;
}

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

ACCÉS COMMUNAUTÉ

Mot de passe perdu

Rejoignez ALL HTML

Publiez vos articles, actualités, communiqués ... Donnez votre avis, partagez votre réseau, rencontrez d'autres membres et participez à la vie de la communauté.

Créer un compte

Les 5 dernières discussions