[Résolu]Problème d'affichage IE et height:100%

Question

25 Jul 2006 à 14:43

Salut à tous Smiley smile

voilà donc mon premier message sur le forum Smiley biggrin

Pour commencer voilà un schéma et mes codes.

http://img84.imageshack.us/img84/8029/schemadc5.jpg

body {
margin:0px;
padding:0px;
height:100%;
background-image:url('imgs/bgd.jpg');
background-repeat:repeat-x;
background-color:#C0C6C6;
}

#entete {
background-image:url('imgs/header.jpg');
background-color:#212121;
height:92px;
width:780px;
margin-left:auto;
margin-right:auto;
}

#menu {
background-color:#D7D7D7;
height:37px;
width:780px;
margin-left:auto;
margin-right:auto;
}

#contenu {
height:350px;
background-color:#FFFFFF;
width:780px;
margin-left:auto;
margin-right:auto;
}

#centre {
margin-left:0px;
}

#news {
position:absolute;
height:200px;
width:535px;
margin-top:15px;
margin-right:245px;
background-color:#FFFFFF;
}

#articles {
background-color:#FFFFFF;
float:right;
width:245px;
color:#000000;
height:100%;
}

#conteneur_concours {
width:217px;
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
background-image:url('imgs/concours/fond_conteneur.jpg');
background-repeat:repeat-y;
background-color:#FFFFFF;
}

#titre_concours {
width:217px;
height:69px;
background-image:url('imgs/concours/titre.jpg');
background-color:#4F5458;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}

#soustitre_concours {
width:217px;
height:21px;
background-image:url('imgs/concours/fond_conteneur.jpg');
background-color:#EBEBEB;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}

#participants_concours {
width:217px;
background-image:url('imgs/concours/separateur.jpg');
background-repeat:no-repeat;
background-position:top-left;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}

#texte_concours {
width:217px;
background-image:url('imgs/concours/separateur.jpg');
background-repeat:no-repeat;
background-position:top-left;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}

#footer_concours {
width:217px;
height:13px;
background-image:url('imgs/concours/footer.jpg');
background-repeat:no-repeat;
background-position:top-left;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-top:0px;
}

#images {
background-color:#CFCFCF;
height:139px;
width:780px;
margin-left:auto;
margin-right:auto;
}

#ann_google {
width:780px;
height:68px;
margin-left:auto;
margin-right:auto;
background-image:url('imgs/ann_google.jpg');
background-color:#FFFFFF;
}

#dernieres_images {
width:780px;
height:150px;
background-image:url('imgs/last_imgs.jpg');
background-color:#CFCFCF;
margin-left:auto;
margin-right:auto;
}


#pied {
margin-bottom:0px;
padding:0px;
position:relative;
background-image:url('imgs/footer.jpg');
background-color:#EAEAEA;
height:58px;
margin-left:auto;
margin-right:auto;
width:780px;
}

<!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>Minituning :: Concours, tutoriaux, produits, découvrez tout l'univers du tuning miniature</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="menu.css"/>
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="divs.css"/>
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="imgs.css"/>
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="liens_textes.css"/>

<meta content="mshtml 6.00.2900.2912" name="generator"/>

</head>

<body>

<div id="entete">
<a href="#"><img class="logo" src="imgs/logo.jpg" alt="Minituning" /></a>
</div>

<div id="menu">
<div id="menu_accueil"><a href="#"></a></div>
<div id="menu_concours"><a href="#"></a></div>
<div id="menu_tuning"><a href="#"></a></div>
<div id="menu_magasin"><a href="#"></a></div>
<div id="menu_telechargements"><a href="#"></a></div>
<div id="menu_forum"><a href="#"></a></div>
<div id="menu_contact"><a href="#"></a></div>
<div id="menu_multimedia"><a href="#"></a></div>
</div>

<div id="contenu">

  <div id="centre">
  
  <div id="news">
  <h4>Bienvenue sur minituning</h4>
  <p>quest-ce que le minituning ? l'art de modifier des véhicules au format 1/18 si vous souhaitez apprendre le tuning miniature, des tutoriaux sont disponibles sur le forum</p>
   </div>  
   
  </div>
  
  <div id="articles">
  <div id="conteneur_concours">
  
  <div id="titre_concours"></div>
  <div id="soustitre_concours"></div>
  <div id="participants_concours"><br/><br/><br/><br/></div>
  <div id="texte_concours"><br/><br/><br/><br/></div>
  <div id="footer_concours"></div>

  </div>
  </div>
  
</div>

<div id="ann_google"></div>

<div id="dernieres_images">
<img class="last_img_left" src="imgs/205_bull313.jpg" alt="205 GTI" />
<img class="last_img_middle" src="imgs/evo_ad.jpg" alt="Lancer Evo VIII" />
<img class="last_img_right" src="imgs/rx8_ad.jpg" alt="RX-8" />
</div> 

<div id="pied"></div>  

</body>

</html>

Donc j'explique, j'ai deux petits soucis, mais qui nécéssitent d'être résolus pour l'érgonomie du site.

Le second problème, est que j'aimerais que la zone montrée par le trait bleu, s'agrandisse en fonction de la taille de l'écran, et que les annonces google, les trois images et le footer restent en bas quoi qu'il arrive. Là il n'y a pas de div au dessus de l'annonce google, je ne l'ai pas encore crée vu que je ne sais pas quels réglages effectuer ...

Désolé de ne pas mettre d'apercu en tant que page web, mais le site est encore en préparation.

En vous remerciant Smiley cligne

Modifié par antonin.design (27 Aug 2007 - 00:59)

antonin.design

25 Jul 2006 à 16:01

S'il vous plait y'a-t-il quelqu'un qui puisse m'aider ? Smiley decu

Modifié par antonin.design (25 Jul 2006 - 18:31)

antonin.design

25 Jul 2006 à 18:32

Bon dernier up ... Au cas où quelqu'un ai quand même une solution Smiley ohwell

antonin.design

25 Jul 2006 à 20:29

Ca y est ! j'ai trouvé une solution, le clear:both pour le footer, mais il me reste un petit souci, j'éspere que pour ca on pourra me répondre; Quand je met clear:both; tout est bien, le footer reste collé en bas, mais au lieu de s'afficher sur la zone visible, il force l'explorateur à un scroll vertical, il va donc un peu trop bas, comment pourrais-je régler ca ?

merci Smiley cligne

edats

25 Jul 2006 à 22:29

moi j'ai toujours eu du mal avec ie et les height=100%....

antonin.design

27 Jul 2006 à 14:24

Je remonte le message pour demander si quelqu'un avait une solution pour le second problème (en bleu sur le schéma)

Merci Smiley smile

Thomas D.

27 Jul 2006 à 14:29

Salut

Je ne comprends pas bien ce qui ne fonctionne pas ... si tu as mis un clear:both sur le footer pour l'obliger à passer sous tes colonnes, il te suffit d'insérer le contenu au dessus pour repousser le footer vers le bas au fur et à mesure Smiley confus

Je ne comprends pas ton problème ...

antonin.design

27 Jul 2006 à 14:34

Le problème est que sur certaines pages comme pages d'identification ou je ne sais quoi, le contenu n'est pas assez long, est les utilisateurs disposants d'un grande résolution ne verront pas le footer en bas de page.

C'est pour çà que je voudrais que les trois derniers blocs soient en bas du navigateur quoi qu'il arriveet que le contenu reste en haut. Et entre les deux la zone extensible serait bêtement une zone de couleur blanche, mais je ne sais pas quels réglages effectuer et surtout si c'est possible ...

Thomas D.

27 Jul 2006 à 14:43

C'est possible (puisque rien n'est impossible Smiley biggol

) mais dans ce cas précis, ton footer me semble un peu grand pour être conservé en permanence dans l'écran, il ne resterait plus de place pour le contenu, notamment pour les plus petites résolutions Smiley decu

Tu peux obliger le <div> que tu comptes placer là à s'allonger jusqu'en dessous de la colonne de droite, si jamais le contenu est plus court, en ajoutant à la fin du div, par exemple :

<p class="spacer"></p>

p.spacer {
    clear:both;
}

antonin.design

27 Jul 2006 à 15:12

Ok merci je vais essayer Smiley cligne

[EDIT] Ca marche pas ... Je crois qu'on s'est pas compris, je veux juste que quand la résolution est grande et que le contenu est faible, que le footer aille en bas et que le div qui est sous la colonne contenu et la colonne concours s'étende ...
Modifié par antonin.design (27 Jul 2006 - 15:17)

fvsch

27 Jul 2006 à 21:18

antonin.design a écrit :
[EDIT] Ca marche pas ... Je crois qu'on s'est pas compris, je veux juste que quand la résolution est grande et que le contenu est faible, que le footer aille en bas et que le div qui est sous la colonne contenu et la colonne concours s'étende ...

Bon, je bosse sur un exemple ce soir et je transmet ici.

Edit : finalement, pas le temps pour ce soir. La loi DADVSI et l'effrayante décision du conseil constitutionnel m'ont rattrappé. Ça sera donc pour plus tard.
Modifié par mpop (27 Jul 2006 - 22:54)

fvsch

30 Jul 2006 à 18:16

Finalement, le voilà ce petit exemple :
Page sur toute la hauteur de la fenêtre, avec pied de page.

À priori bien compatible tous navigateurs. Pas testé pour IE Mac, par contre.

Alan

30 Jul 2006 à 19:43

mpop a écrit :
Pas testé pour IE Mac, par contre.

A priori min-height n'aura pas d'effet n'étant pas supporté, c'est tout. L'erreur serait d'utiliser un hack à la fois lu par IE mac et windows (comme indiqué dans la FAQ...), puisque IE mac inteprète correctement la propriété height si je ne me trompe pas.
Ou alors il faut doubler le hack :

/* caché à IE mac et lu par IE win 5.x et 6 \*/
* html #page {height: 100%} 
/*  */

Modifié par Alan (30 Jul 2006 - 19:50)

fvsch

30 Jul 2006 à 20:18

Alan a écrit :
Ou alors il faut doubler le hack

Un « hack » qui sera lu par IE Win mais pas par IE Mac, c'est un commentaire conditionnel, non ?

Sujet clos

CSS et mise en forme, CSS3

[Résolu]Problème d'affichage IE et height:100%