[Résolu][merci Sopo]Probleme de taille de div

Question

nebil

7 Aug 2006 à 20:37

Bonjour a tous , j'ai un probleme qui doit surement etre bien connu ,
c'est la difference des dimensions des div sur IE et FF ,
pour savoir de quoi on parle voila l'adresse de la page
sur IE c'est bon mais sur firefox c'est une galére

la partie rouge c'est le contener

du coup mon bandeau jaune qui et sous le contener et qui doit etre en bas de page comme sur IE
reste au milieu du site sur FF .
je met le code


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Acceuil</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>

<div id="contener">
<div id="bandeau">


<div id="logo"></div>
<div id="pub">la pub Ici</div>
<div id="bandeau_avion"></div>
<div id="bandeau_bas" ></div>

</div>   <!-- ferme div bandeau -->

<div id="menu">

<div  id="compagnie">
<img src="images/menu_compagnie.gif"  alt=""/>
<img src="images/menu_avion.gif"  alt=""/><a href="#">Pr&eacute;sentation de la compagnie</a>
<img src="images/menu_avion.gif"  alt=""class="retrait"/><a href="#">Nos escales internationales</a>
</div>

<div id="produit">
<img src="images/menu_produit.gif"  alt=""/>
<img src="images/menu_avion.gif"  alt=""/><a href="#">Les appareils</a><br />
<img src="images/menu_avion.gif"  alt=""class="retrait"/><a href="#">Les services a bord</a><br />
<img src="images/menu_avion.gif"  alt=""/><a href="#">Les divertissements a bord</a><br />
<img src="images/menu_avion.gif"  alt=""class="retrait"/><a href="#">Le duty free a bord</a>
</div>

<div id="information">
<img src="images/menu_info.gif"  alt=""/>
<img src="images/menu_avion.gif"  alt=""/><a href="#">Formalité</a><br />
<img src="images/menu_avion.gif"  alt=""class="retrait"/><a href="#">Guide du voyageur</a><br />
<img src="images/menu_avion.gif"  alt=""/><a href="#">Nos partenaires en Angola</a><br />
</div>

<div id="decouvrir">
<img src="images/menu_decouvrir.gif"  alt=""/>
<img src="images/menu_avion.gif"  alt=""/><a href="#">Information pratique sur <br />
<span class="retrait_angola" >L'Angola</span></a>
</div>

<div id="photo_menu">
<img src="images/menu_photo.gif"  alt="" align="absbottom"/>
</div>



</div> <!-- ferme div menu -->

<div id="centre">
<h3>La Compagnie</h3><hr />
<img src="images/avion_centre.gif"  alt=""class="avion_centre"/>

<div id="droite_avion">L'ère des mises en page avec tableaux imbriqués est révolue, ce n'est pas un secret ni un scoop.
L'utilisation des "calques" associés aux styles CSS devient le nouveau courant d'intégration et de mise en forme des documents.Cette nouvelle "mode" apporte son lot de fanatismes et surtout d'incompréhensions .
</div><!-- ferme div droite avion -->
<div id="centre_bas">
    Pour résumer, les gens se disent : "chouette, je vire les tableaux et je
    remplace par des divs". Ensuite ils se retrouvent avec autant de divs qu'ils
    avaient de cellules de tableaux et se disent : les "calques" / CSS c'est
    nul, ça sert à rien
    ! Bienvenue sur le site des tutoriels Alsacr&eacute;ations, consacr&eacute; aux
    Standards du Web et plus particuli&egrave;rement aux feuilles de style CSS.
     <p>Les
    styles CSS sont un compl&eacute;ment du langage HTML (ou XHTML) prevu pour
    g&eacute;rer toute la mise en forme de la page. Cela va de l'esth&eacute;tique
    (couleurs, typographie) &agrave; la fonctionnalit&eacute; (positionnement,
    structure, navigation).
</div>
  
<div id="pub2">Pub 2 ici</div>

</div><!-- ferme div centre -->



<div id="droite"></div><!-- ferme div centre -->

<div id="bas_page">ssss</div>
</div>  <!-- ferme div contener -->

</body>
</html>


html , body {
font:Arial, Helvetica, sans-serif;
font-size:13px;
width:955px;
height:100%;
margin-top:0px;
margin-left: 0px;
}

#contener{
background-color:#FF0000;
width:955px;

margin-left:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
margin-top: 0px;
}
/*////////////////////////////////////////////////////////////////
//   Le bandeau 												//
////////////////////////////////////////////////////////////////*/
#bandeau{
width:955px;
height:139px;
background-color:#CCCCCC;
float:left;
}
#logo{
background-image:url(images/bandeau_logo.gif);
background-repeat:no-repeat;
width:254px;
height:139px;
display:block;
float:left;
}
#pub{
background-color:#CCCC66;
width:468px;
height:70px;
float:left;
}
#bandeau_bas{
background-image:url(images/bandeau_bas.gif);
background-repeat:repeat-x;
width:468px;
height:69px;
float:left;
}
#bandeau_avion{
background-image:url(images/bandeau_avion.gif);
background-repeat:no-repeat;
width:233px;
height:139px;
float:right;
}
/*////////////////////////////////////////////////////////////////
//   Le Menu													//
////////////////////////////////////////////////////////////////*/

#menu{
background-color:#009999;               /*#fff5ec;*/
width:199px;

float:left;
text-align:left;
line-height:18px;
border-top:#FFFFFF solid 4px;
}
#compagnie{
width:190px;
height:auto;
}
#produit{
width:190px;
height:auto;
margin-top:5px;
}
#information{
width:190px;
height:auto;
margin-top:5px;
}
#decouvrir{
width:190px;
height:auto;
margin-top:5px;
}
.retrait_angola{
margin-left:23px;
}
#photo_menu{
width:190px;
height:98px;
margin-top:10px;
margin-bottom:0px;


}
a:link {
text-decoration:none;
color: #656565;
}
a:visited {
text-decoration:none;
color: #656565;
}
a:active {
text-decoration:none;
color: #656565;
}
a:hover {
text-decoration:none;
color: #EE2225;
}

/*////////////////////////////////////////////////////////////////
//   Le Centre													//
////////////////////////////////////////////////////////////////*/

#centre{
display:block;
width:435px;
height:350px;
background-color:#009966;
float:left;
margin-top:4px;
margin-left:10px;
}
#droite{
width:300px;
height:385px;
background-color:#333399;
float:left;
margin-top:4px;
margin-left:5px;
}
h3{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#c74047;
margin-top:0px;
margin-bottom:0px;
float:left;
padding-left:30px;
margin-bottom:1px;
}

hr{
clear:both;
color:#fca049;
background-color:#fca049;;
margin-top:-7px;
height:3px;

}
.avion_centre{
float:left;
margin-left:17px;
margin-top:0px;
}
#droite_avion{
display:block;
width:250px;
height:120px;
background-color:#FFFFFF;
text-align:justify;
float:right;
margin-left:0px;
}
#centre_bas{
display:block;
clear:inherit;
background-color:#0033CC;
width:422px;
height:150px;
float:right;
margin-top:5px;
margin-left:5px;
text-align:justify;
}
#pub2{
display:block;
clear:inherit;
background-color:#000000;
width:422px;
height:70px;
float:right;
margin-top:5px;
margin-left:5px;
}
/*////////////////////////////////////////////////////////////////
//   Le bas de page												//
////////////////////////////////////////////////////////////////*/
#bas_page
{
clear:both;
background-color:#FFFF00;
width:955px;
height:30px;
margin-top:0px;
left: 0px;
top: 538px;
}

Modifié par nebil (08 Aug 2006 - 09:46)

Felipe

Administrateur

7 Aug 2006 à 20:41

Bonjour,

ton lien est cassé. Mode d'emploi rapide sur ce forum:
- soit ton lien est assez court et commence par http:// (c'est le cas ici), pas la peine de faire quoi que ce soit
- soit il est long ou bien tu veux un texte: tu cliques une 1ère fois sur le bouton lien, tu mets l'URL derrière un '=' mais avant le crochet fermant, puis tu tapes le texte, puis tu recliques une 2ème fois sur le bouton lien pour fermer la balise [ /url] (sans l'espace bien sûr)

Felipe

EDIt: j'ai rien dit Smiley lol

Modifié par Felipe (07 Aug 2006 - 20:42)

Thomas D.

7 Aug 2006 à 20:48

Salut.

En l'occurence, c'est plutôt Firefox qui a raison Smiley ohwell

Le bandeau fait 139px de haut, le "centre" 350px et le bas 30px, total, sans les marges et paddings éventuels : 519px.

Dans un conteneur de 470px de haut, forcément, ça déborde. Mais comme IE interprète height comme un min-height, il laisse couler.

Par ailleurs, il n'est pas nécessaire d'imposer une hauteur au conteneur, il suffit d'appliquer un clear: both; au pied de page pour l'obliger à passer sous les colonnes flottantes, entrainant avec lui le conteneur.

nebil

7 Aug 2006 à 20:54

bon le contener fait maintenant 530px de haut
sur la bas_page j'ai appliquer un clear:both;

mais sa change pas grand chose si j'applique aucune hauteur au contener
on le vois plus .

Thomas D.

7 Aug 2006 à 20:56

oups, au temps pour moi ! Il faut déplacer le pied de page à l'intérieur du conteneur.

nebil

7 Aug 2006 à 20:59

c'est pareil , (je met au fur et a mesure a jour le code affiché sur mon premier message)

Thomas D.

7 Aug 2006 à 21:07

En supprimant la hauteur sur #menu et sur #contener, ça devrait fonctionner.

rem : on écrit Accueil, pas Acceuil Smiley cligne

nebil

7 Aug 2006 à 21:11

super , hauteur sur menu et contener mis a la benne et c'est bon , mais pourquoi au fait ? Smiley cligne

bon ba je continue , pourquoi la div centre la verte n'est pas de la meme taille sur les deux navigateurs
Modifié par nebil (07 Aug 2006 - 21:14)

Thomas D.

7 Aug 2006 à 21:17

Le clear: both; oblige le pied de page à s'afficher sous les flottants.

En supprimant les hauteurs imposées, on laisse le conteneur et les colonnes libres de s'adapter à leur contenu. Ce qui, dans le cas d'un site web, est bien plus naturel que d'essayer de fixer des hauteurs.

Même si tu avais indiqué les bonnes hauteurs pour obtenir la mise en page que tu voulais, elle n'aurait pas résisté à l'agrandissement de la police de caractères, par exemple.

Il ne faut pas vouloir tout controller, ça ennuie les utilisateurs et ça apporte des tas de soucis au webmaster Smiley lol

*

* Oui je sais, c'est un peu partisan, comme affirmation Smiley smile

Thomas D.

7 Aug 2006 à 21:18

nebil a écrit :

bon ba je continue , pourquoi la div centre la verte n'est pas de la meme taille sur les deux navigateurs

Mmmh, au hasard, parce que tu as imposé une hauteur ?

Par ailleurs, il y a deux petites erreurs dans ton code d'après le validateur, un attribut qui n'existe pas et un paragraphe pas fermé. A corriger avant de pouvoir travailler correctement sur la mise en page. Smiley edit

Modifié par Sopo (07 Aug 2006 - 21:21)

nebil

7 Aug 2006 à 21:21

bon bon ta raison pas de pb ,du coup j'ai aussi enlever la hauteur sur la div verte et la bleu ,celle-ci a disparue puisqu'elle a pas de contenue , mais la verte et toujours diffrente sur les deux navi , une descend bien jusqu'au en bas l'autre et un peu timide !!
Modifié par nebil (07 Aug 2006 - 21:23)

Thomas D.

7 Aug 2006 à 21:24

Re-oups, j'ai foiré mon édit Smiley confused

La différence de hauteur est a priori due aux valeurs par défaut des navigateurs (police plus grande dans IE, marges et padding différents ...)

nebil

7 Aug 2006 à 21:26

donc on peut rien y faire , par exemple ma div noir qui va recevoir une pub sera sur IE toujours plus proche de mon bas de page que sur FF ,
sa fait comme une presentation legerement differente !!

Thomas D.

7 Aug 2006 à 21:31

Tu peux appliquer des styles légèrement différents pour IE via les commentaires conditionnels, mais est-ce vraiment nécessaire ?

nebil

7 Aug 2006 à 21:35

Ho c'est histoire de comprendre , histoire de faire avance le truc dans ma petite tete , en tout cas merci a toi , parceque j'ai apris qq chose aujourd'hui en plus ,mais vous allez surement me revoir car je pense que j'ai pas fini de rencontré des problemes .

A++

Thomas D.

7 Aug 2006 à 23:03

Ravi d'avoir pu t'être utile ...

Si ce problème-ci est résolu, pense à éditer le titre de ton message (FAQ) pour signaler qu'il est [Résolu] Smiley cligne

Bonne continuation.

Sujet clos