Probleme des positions des <div>

Bonjour,

tout d'abord je vous affiche les fichiers sources de mes pages :
Index.html :

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Intense-Designing !</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
<link href="design.css" rel="STYLESHEET" type="text/css">
</head>
<body>
<div id="milieu">

<div id="header">

</div>

<div id="gauche">
<div class="titreblock">
<div class="textetitreblock">Navigation</div>
</div>
<div class="hautblock"> </div>
<div class="milieublock">
<div class="contenublock"><a href="#">Index</a></div><div class="traitblancblock"> </div>
<div class="contenublock"><a href="#">Membres</a></div><div class="traitblancblock"> </div>
<div class="contenublock"><a href="#">Forum</a></div><div class="traitblancblock"> </div>
<div class="contenublock"><a href="#">Downloads</a></div>
</div>
<div class="basblock2"> </div>
<div class="titreblock">
<div class="textetitreblock">Liens</div>
</div>
<div class="hautblock"> </div>
<div class="milieublock">
<div class="contenublock"><a href="#">Intense-designing</a></div><div class="traitblancblock"> </div>
<div class="contenublock"><a href="#">Google</a></div><div class="traitblancblock"> </div>
<div class="contenublock"><a href="#">Siteduzero</a></div><div class="traitblancblock"> </div>
<div class="contenublock"><a href="#">Counter-strike 1.6</a></div>
</div>
<div class="basblock"> </div>
</div>

<div id="droite">
<div class="titreblockmilieu">
<div class="textetitreblockmilieu">News</div>
<div class="hautblockmilieu"> </div>
<div class="milieublockmilieu">
<div class="news">
<div class="titrenews">Loremipsum.net</div>
<div class="contenunews">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum
</div>
<div class="liresuitenews"><a href="#">Lire la suite ...</a></div>
<div class="auteurnews">Par <a href="#">AngEl</a> le 14 juin 2006</div>
</div>

<div class="news">
<div class="titrenews">LOREMIPSUM.NET</div>
<div class="contenunews">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH EUISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT. UT WISI ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCI TATION ULLAMCORPER SUSCIPIT LOBORTIS NISL UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTEM VEL EUM IRIURE DOLOR IN HENDRERIT IN VULPUTATE VELIT ESSE MOLESTIE CONSEQUAT, VEL ILLUM DOLORE EU FEUGIAT NULLA FACILISIS AT VERO EROS ET ACCUMSAN ET IUSTO ODIO DIGNISSIM QUI BLANDIT PRAESENT LUPTATUM ZZRIL DELENIT AUGUE DUIS DOLORE TE FEUGAIT NULLA FACILISI. NAM LIBER TEMPOR CUM SOLUTA NOBIS ELEIFEND OPTION CONGUE NIHIL IMPERDIET DOMING ID QUOD MAZIM PLACERAT FACER POSSIM ASSUM. TYPI NON HABENT CLARITATEM INSITAM; EST USUS LEGENTIS IN IIS QUI FACIT EORUM CLARITATEM. INVESTIGATIONES DEMONSTRAVERUNT LECTORES LEGERE ME LIUS QUOD II LEGUNT SAEPIUS. CLARITAS EST ETIAM PROCESSUS DYNAMICUS, QUI SEQUITUR MUTATIONEM CONSUETUDIUM LECTORUM. MIRUM EST NOTARE QUAM LITTERA GOTHICA, QUAM NUNC PUTAMUS PARUM CLARAM, ANTEPOSUERIT LITTERARUM FORMAS HUMANITATIS PER SEACULA QUARTA DECIMA ET QUINTA DECIMA. EODEM MODO TYPI, QUI NUNC NOBIS VIDENTUR PARUM CLARI, FIANT SOLLEMNES IN FUTURUM.
</div>
<div class="liresuitenews"><a href="#">Lire la suite ...</a></div>
<div class="auteurnews">Par <a href="#">AngEl</a> le 14 juin 2006</div>
</div>
</div>
<div class="basblockmilieu"> </div>
</div>
</div>

<div id="footer">

</div>

</div>
</body>
</html>

Design.css :

body
{
background-color: #61698f;
width: 850px;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
}

#milieu
{
background-image: url("images/background.jpg");
}

#header
{
width: 850px;
height: 124px;
background-image: url("images/header.jpg");
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}

#footer
{
height: 68px;
background-image: url("images/footer.jpg");
}

#gauche
{
float:left;
width: 287px;
}

#droite
{
margin-left: 287px;
}

.titreblock
{
width: 287px;
height: 28px;
background-image: url("images/titreblock.jpg");
margin-top: 0px;
margin-bottom: 0px;
}

.titreblockmilieu
{
width: 563px;
height: 28px;
background-image: url("images/titrenews.jpg");
background-repeat: no-repeat;
}

.textetitreblock
{
font-family : verdana, arial, sans-serif;
font-size: 12px;
padding-top: 7px;
padding-left: 70px;
padding-right: 5px;
text-align: right;
}

.textetitreblockmilieu
{
padding-top: 7px;
padding-left: 10px;
line-height: 13px;
font-family : verdana, arial, sans-serif;
font-size: 12px;
}

.hautblock
{
font-size: 2px;
width: 287px;
height: 2px;
background-image: url("images/hautblock.jpg");
background-repeat: no-repeat;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}

.hautblockmilieu
{
margin-top: 8px;
font-size: 2px;
width: 563px;
height: 7px;
background-image: url("images/hautnews.jpg");
background-repeat: no-repeat;
}

.basblock
{
font-size: 0px;
width: 287px;
height: 3px;
background-image: url("images/basblock.jpg");
background-repeat: no-repeat;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}

.basblockmilieu
{
background-image: url("images/basnews.jpg");
font-size: 0px;
height: 10px;
}

.basblock2
{
font-size: 0px;
width: 287px;
height: 2px;
background-image: url("images/basblock.jpg");
background-repeat: no-repeat;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}

.milieublock
{
width: 218px;
background-image: url("images/backblock.jpg");
padding-left: 68px;
padding-right: 1px;
}

.milieublockmilieu
{
width: 563px;
background-image: url("images/milieunews.jpg");
}

.contenublock
{
padding-left: 2px;
padding-top: 4px;
margin-bottom: 0px;
background-color: #dedede;
height: 18px;
font-family : verdana, arial, sans-serif;
font-size: 11px;
width: 215px;
}

.contenublock a
{
color: #000000;
text-decoration: none;
}

.contenublock a:hover
{
color: #FFFFFF;
text-decoration: none;
background-color: #000000;
}

.traitblancblock
{
font-size: 0px;
height: 2px;
}

.news
{
padding: 4px;
width: 479px;
margin-left: 6px;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}

.titrenews
{
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
font-size: 13px;
font-family : verdana, arial, sans-serif;
font-weight: bold;
}

.contenunews
{
color: #000000;
font-size: 11px;
font-family : verdana, arial, sans-serif;
}

.contenunews a
{
color: #666666;
text-decoration: none;
}

.contenunews a:hover
{
text-decoration: underline;
}

.liresuitenews
{
padding-top: 10px;
padding-left: 380px;
font-size: 11px;
font-family : verdana, arial, sans-serif;
}

.liresuitenews a
{
color: #666666;
text-decoration: none;
}

.liresuitenews a:hover
{
text-decoration: underline;
}

.auteurnews
{
padding-left: 7px;
padding-top: 5px;
font-size: 11px;
font-family : verdana, arial, sans-serif;
}

.auteurnews a
{
color: #666666;
text-decoration: none;
}

.auteurnews a:hover
{
text-decoration: underline;
}

Voila, moi je ne vois pas vraiment d'érreur dans ces codes-ci de telle facon qu'a ce que cela affiche mal mon site.

Mais pourtant regardez le/les résultats (eh oui par ce que c'est différent de internet explorer à mozilla Firefox en plus).

http://angelow.network-hosting.com/Site

- Sous internet explorer : - la zone des news s'affiche en dessous de la zone des block de gauche, pourtant j'ai mis un float:left sur le div

- Sous mozilla firefox : - le footer apparait en haut du site au lieu d'en bas, j'ai bien mis l'ordre des div mais le probleme est la.
- L'image de background du site (images/background.jpg) ne s'affiche pas comme sur internet explorer jusqu'en bas :/

Voila, j'espere vraiment que quelqu'un pourra m'expliquer ou est le probleme ou m'aider

AngEl.es

14 juin 2006 à 17:11:43

17 juin 2006 à 17:21:35

sur firefox le fond ne se répete pas

Hawks

17 juin 2006 à 19:49:10

Lut

Essai d'appliquer ton image de fond à ton <body>

Ensuite, apparemment tu as un problème avec ton footer, essai de lui mettre un clear: both (sans regarder le code, j'imagine que les deux parties de ton site sont en float)

Pour finir, retravaille les tailles avec !important pour que les deux blocs puissant se mettre cote à cote sous IE

18 juin 2006 à 7:19:11

<citation nom="Hawks">Pour finir, retravaille les tailles avec !important pour que les deux blocs puissant se mettre cote à cote sous IE</citation>

Merci pour tous les autres renseignements, mais je ne vois pas ce que tu veux dire dans cette derniere phrase :/

Et pour mettre limage d'arriere plan dans le body ca va pas par ce que j'ai aligné le site au milieu et qu'il fait 850px de largeur, donc si je mets le back dans le body ca le mets tout a gauche avec un gros décallage

Merci

jp949

18 juin 2006 à 13:22:45

pour le bloc des news supprime le float et le width si tu en as donné un et mets un margin-left equivalent a la largeur du menu

18 juin 2006 à 13:34:01

Il n'y en a pas
voila le block des news

#droite
{
margin-left: 287px;
}

287px du menu a gauche

J'ai finalement mis le site de facon a pouvoir le voir parfaitement sur firefox, en méttant des ! a quelques tailles.
Mais sur internet explorer le probleme reste encore toujours le meme.

18 juin 2006 à 17:21:52

Citation : AngEl.es

<citation nom="Hawks">Pour finir, retravaille les tailles avec !important pour que les deux blocs puissant se mettre cote à cote sous IE</citation>

Merci pour tous les autres renseignements, mais je ne vois pas ce que tu veux dire dans cette derniere phrase :/

Et pour mettre limage d'arriere plan dans le body ca va pas par ce que j'ai aligné le site au milieu et qu'il fait 850px de largeur, donc si je mets le back dans le body ca le mets tout a gauche avec un gros décallage

Merci

Je t'avoue que j'ai la flemme de l'expliquer la de suite... Donc je te conseil de regarder dans "Vos tutos" et tu recherche un tuto de Thunderseb sur faire un site compatible FF/IE, il t'explique pas mal de chose dedans

Pas les memes resultats sous IE que sous firefox

Probleme des positions des <div>

Supprimer

Modérer

Signaler le message aux modérateurs