probleme css /ie site [résolu ]

[julien88]

Bonjour à tous,

 

Je suis débutant en programmation (pure=code),

 

Je fait un site afin de m'entrainer un peu (pour passer à php après , j'attend mon livre ) mais là je bloque sur un problème qui semble venir de internet explorer puisque mon site fonctionne parfaitement sur firefox (en 19"non wide en tous cas ) et aussi je pense qu'il y a des problèmes selon la taille de l'écran (moi j'ai un 19"normal et sur le 15" la page n'est pas pareille) .

 

Lien du site : ***

 

Le problème, c'est que je ne sais pas comment faire pour adapter ma bannière (images en général ) à la taille de l'écran du visiteur et faire que mes css sois réglés en pourcentage pour le vertical( pour s'adapter à l'ecran, car lorsque je met par exemple : "height:100%; " le cadre ne prend a peine que 20pixels en hauteur .

 

Voila à quoi doit ressembler le site normalement :

 

merci d'avance

 

ps : si il y a besoin je suis près à donner mes fichiers ( c'est pas des sources fiables et cachées ^^)

Modifié le 21 février 2010 par julien88

[Dylav]

Bonsoir Julien,

 

Effectivement, tu as un problème général de positionnement de bandeau haut (en tout cas pour la définition d'écran 1024x768 qui est la mienne), et un problème particulier avec Internet Explorer, qui semble sérieusement déraper dans l'affichage des blocs de ta page.

 

J'ai sorti l'environnement de ta page (fichier / enregistrer sous). Je vais étudier ça, mais je ne te promets pas une réponse dès ce soir, il est déjà bien tard.

 

Je peux en tout cas te donner un élément de réponse : on ne peut pas exprimer la hauteur d'un bloc en pourcentage. Le navigateur lui donnerait la hauteur nécessitée par son contenu. En particulier, pour un bloc dont tu ne définis qu'une image de fond, la hauteur sera nulle, car l'image de fond n'est pas considérée comme un contenu, et le bloc est donc vide.

[Dylav]

Bonjour Julien,

 

Commençons par la structure de ta page. Tu as un peu tout mélangé, les blocs s'enchevêtrent mal, et c'est la raison principale de tes ennuis.

 

Verticalement, 3 blocs, repérés par les id bandeau, hauteur et pied_page.

 

Bandeau : 2 blocs flottants, logo à gauche, logodroite à droite, et une image au milieu.

La meilleure solution, à mon avis, est de mettre l'image ban.jpg en image de fond centrée horizontalement (URL relative par rapport à l'emplacement de la feuille de style). En largeur 1280, l'image sera complète. Pour les largeurs inférieures, les bords seront tronqués (en 1024 par exemple, on ne voit plus les deux spots latéraux).

 

Hauteur : 3 blocs flottants, formant 3 colonnes, menu, contenu et news.

La meilleure solution est de déclarer les colonnes flottant à gauche, elles s'adosseront les unes aux autres. Largeur 20% pour les deux extrêmes, 60% pour la centrale (si par hasard IE te faisait des misères en mettant la colonne de droite sous les autres, réduis la largeur de la colonne centrale à 58% par exemple, ou précise margin:0 sur les 3 colonnes).

Pour ce bloc hauteur, le contenu actuel de tes colonnes est tel que tu peux te contenter d'une hauteur de 540 pixels.

 

Tu trouveras ci-dessous la nouvelle version de ta feuille style.css respectant les conditions ci-dessus, et le squelette de la page index.html après résolution php (telle que je la récupère). Pour les images, vérifie les URL (je ne peux retourner à ta page, ton site est bloqué par mon proxy).

 

/* fichier css*/
div {
text-align:center;
}
div#bandeau {                    /*banniere*/
width:100%;
border-style:none
float:left;
text-align:left;
margin-left: 0;
text-align:left;
border-left-color: #FFFFFF;
border-style:none;
height:100px;
background: url(ban.jpg) no-repeat top center;
}
div#hauteur {                    /* hauteur milieu page [ menu (log) + contenu + bloc news (heure + meteo + news ) ] */
 width:100%;
height:540px;
}
div#pied_page {                  /* pied de la page*/
clear:both;
width:100%;
height:50px;
background-color:#33FF99;
}
div#menu {                       /*menu droite*/ 
float:left;
width:20%;
height:100%;
background-color:#FF6699;
}
div#contenu {                    /*contenu de la page*/
float:left;
width:60%;
height:100%;
background-color:#FFCC00;
}
div#bloc_news {                  /*colonne droite*/
float:left;
width:20%;
height:100%;
background-color:#FF3300;
}
div#logo {                       /* case  en haut  à gauche*/
   float:left;
width:20%;
height:100%;
background-color:#0FF0FF;
}
div#logodroite {                 /*case en haut a droite */
   border-left-color: #FFFFFF;
   border[ -left ]-width = 0px ; 
   margin-left: 0;
   text-align:left;
   border-style:none;
   float:right;
   width:20%;
height:100px;
background-color:#FFFFFF;
}
div#log {                        /* bloc de login */
   width:100%;
height:150px;
background-color:#FF9FF0;
}   
div#heure {                      /* bloc heure et date*/
   width:100%;

border-style:none;
height:150px;
background-color:#FFFFFF;
}
div#meteo {                      /*bloc meteo */
   width:100%;
height:150px;
background-color:#FF9FF0;
}
div#news2 {                      /* bloc de news (site) */
   width:100%;
height:150px;
background-color:#F9F5FF;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
                                                    "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="index_fichiers/style.css">
<meta name="author" content="Xxxxxxxxx Julien">
<title>Tutoland</title>
</head>
<body>
<div id="bandeau"><!-- debut banniere -->
 <div id="logo"><img src="logo.jpg" align="left"></div>
 <div id="logodroite"><img src="logo2.jpg" align="right"></div>
 <!--pas d'image "ban", elle est dans la feuille de style-->
</div><!--fin banniere-->
<div id="hauteur"><!-- debut hauteur contenu + colonne droite + colonne gauche -->
<div id="menu"><font color="#ffffff">          <!-- debut col gauche -->
 <div id="log"><font color="#ffffff">
   <hr><strong>Login</strong></font>
 </div>
 <hr><strong>Liens</strong></font>
</div>                                         <!-- fin col gauche -->
<div id="contenu">                             <!-- debut col centrale -->
 <strong><br>Bienvenue sur Tutoland,
 <br>Site en cours de construction ....</strong>
 <br><br><img src="cons.jpg">
</div>                                         <!-- fin col centrale -->
<div id="bloc_news">                           <!--début bloc news (col droite)-->
 <div id="heure">                             <!--debut heure-->
   <font color="#ffffff"><hr>
   <strong>Date et Heure</strong> <br><br>Nous sommes le <br> 17-02-2008 et il est <br> 22:58 </font><hr>
 </div>                                       <!--fin heure php-->
 <div id="meteo">                             <!--debut meteo-->
   <font color="#ffffff"><strong>Méteo</strong><br>
   <br><img src="meteo.gif"></font><hr>
 </div>                                       <!--fin meteo-->
 <div id="news2">                             <!--debut news2-->
   <font color="#ffffff"><strong>News</strong>
   <br><br>Nouvelle version du site Tutoland !<br>
   <br>Plus belle!<br>Plus simple d'emploie!<br> et plus rapide!
   </font><hr>
 </div>                                       <!--fin news2-->
</div>                                         <!--fin bloc news-->
</div>                                         <!--fin bloc hauteur-->
<div id="pied_page"><font color="#ffffff">
© Tutoland-Entertainment <br> Version:1.1</font>
</div>
</body></html>

Je pense qu'avec ça, ta page devrait beaucoup mieux se comporter, tant sous FireFox que sous Internet Explorer. Et probablement même avec les autres navigateurs...

 

Nota : ainsi rédigée, ta page n'est pas encore parfaite. Il y reste en effet des clauses de style qui devraient être rapatriées dans la feuille de style : par exemple, les instructions <font color="#xxxxxx"> qui s'écrivent color:xxxxxx en CSS).

[julien88]

Salut dylav,

 

Merci beaucoup pour l'aide que tu m'apportes

Je vais essayer d'appliquer ton code à ma page et je redonne des nouvelles après...

 

Amicalement...

 

juju

 

------------------------------------------------------------------------------------------------------

 

Salut,

 

Voila, j'ai appliqué le code à la page et sa à l'air de marcher ( j'ai juste eu un petit problème avec la bannière que j'ai du agrandi un peu en largeur ) , merci pour ton aide

Par contre, pourrais tu m'expliquer se que tu à changé plus en détail pour que je ne reproduise pas la même erreur ?

 

merci d'avance

Modifié le 18 février 2008 par julien88

[Dylav]

Ce que je t'ai fait modifier ? En fait, pas grand-chose...

 

Premièrement, le principe du bandeau haut, où les deux images d'arrondis coulissent sur les bords en fonction de la largeur de l'écran, tu l'avais déjà mis en place. La nouveauté, c'est que ta bannière est devenue image de fond, ce qui permet justement un parfait ajustement du bandeau à la taille de l'écran de ton visiteur. Sinon, dès que la somme des trois largeurs d'images dépassait la largeur d'écran, la bannière sautait en-dessous, destructurant l'aspect de ta page.

 

Deuxièmement, le principe des 3 colonnes qui flottent à gauche : la 1ère s'adosse au bord gauche du bloc conteneur (hauteur), la 2nde s'adosse à la 1ère, et la 3ème à la 2nde. En donnant leur largeur en % de celle du conteneur, on le remplit parfaitement quelle que soit cette largeur.

 

Troisièmement, tu avais commis quelques erreurs de limites de blocs (les </div>), de telle sorte qu'il y avait une confusion entre colonnes, qui détériorait leur présentation.

 

En final, pour vérifier que tout va bien, tu lances ta page, puis tu réduis la largeur de la fenêtre de ton navigateur pour t'assurer que tout coulisse parfaitement sans se désorganiser. Sur ton écran 1280x1024, si tu réduis la largeur d'environ 1/6ème, tu verras la page comme avec un 1024x768. Si tu réduis d'un tiers, tu auras une vision 800x600 (il n'en existe plus beaucoup, mais il faut encore penser à eux) !

 

Si c'est OK avec FF et avec IE, tu as de fortes chances de satisfaire tous tes visiteurs...

[julien88]

Salut,

 

Merci beaucoup pour ton aide dylav même si se site est surtout fait pour m'entrainer

 

Pour la techniques des images sur les bord de la bannière qui bougent , je ne savais même pas que c'était un principe, coup de chance

 

Je vais maintenant essayer de faire des espaces de connections en php, sa va être autre chose ^^

 

Autrement, je voudrais faire que mon contenu (tuto) ne change que au centre de ma page (dans le contenu), comment faire avec php ?

 

Est-ce que mon site s'affiche bien pour un écran 22',24' ou 30 ' par exemple ou il y a du vide dans les css ?

 

merci encore

[Dylav]

Taille et définition d'écran

 

Lorsque tu parles d'affichage sur des écrans de 22, 24 ou 30 pouces de diagonale, tu fais une confusion entre taille physique et définition de l'écran. Ce qui importe pour la programmation de ta page, c'est la largeur de la fenêtre en pixels. Ainsi, sauf si la technologie de l'écran l'interdit, tu pourrais très bien utiliser un écran de 22 pouces avec une définition 800x600. Remarque, ça ferait de gros pixels ! Inversement, mon 17 pouces accepte des définitions 800x600 (c'est en particulier chez moi le défaut en mode sans échec), 1024x768 (la définition que j'ai choisie pour mes œils délicats ) ou 1280x1024 (plus ou moins standard pour cette taille d' écran).

 

Ton site sur grand écran

 

Rien de plus simple, pour tester l'apparence de ta page sur un écran de grande taille. Ajoute dans ta feuille de style une clause de largeur au body (corps de l'écran).

body {width:2000px}

Comme tu déclares que l'ensemble de tes 3 colonnes doit occuper 100% de la largeur, elles s'empressent de le faire... En revanche, tu découvres un problème avec ton bandeau haut. Comme les images ne couvrent plus la totalité de la largeur des blocs qui les contiennent, tu vas devoir déclarer que la couleur de fond de ces blocs (bandeau, logo et logodroite) est le noir (#000000).

 

Structure standard de page

 

Si je comprends bien, tu voudrais que toutes tes pages se présentent de la même façon, c'est-à-dire un bloc principal contenu encadré d'un bandeau haut, d'un pied de page, et de deux colonnes d'information et de navigation. Je vois deux solutions,

• soit tu utilises la technique des frames (cadres, en français, qui permet de ne décrire qu'une fois les fameux 4 blocs encadrants), néanmoins déconseillée car elle tombe en désuétude et risque un jour ou l'autre de ne plus être maintenue,
  
• soit tu répètes toute la structure pour chaque page. Ça paraît lourd mais, grâce à PHP, que je ne connais pas bien, on doit pouvoir le réaliser avec des includes qui évitent la lourdeur de la répétition de la description, et celle de la fastidieuse modification en série lorsque tu veux en changer le contenu.
  

[julien88]

Bonjour,

 

J'ai fait une nouvelle version du site, toujours à la même adresse :

 

***

 

Malheureusement, je suis sûr que se n'est pas grave mais ma page se comporte encore bizarrement avec internet explorer, et bizarrement aussi, le texte est plus gros que sur Firefox et les blocs ont bougés ....

 

Pourtant j'ai cherché avec se que tu ma dit auparavant dylav

 

merci d'avance

 

ps : quand j'essaie de mettre mon logo dans le bloc de la bannière où il est écrit TUTOLAND, mon bloc disparait, est-ce normal ?

Modifié le 21 février 2010 par julien88

[Dylav]

Bonsoir Julien !

 

Police démesurée

Devant une telle situation, tu dois d'abord te demander si tu n'as pas oublié de fermer une balise mettant en jeu la taille de la police. Dans ton cas, toute la page semble écrite avec la même taille*. Donc, en partant du haut, on trouve tout de suite le coupable :

<div id="bandeau"><br><h1>TUTOLAND<h1></div>

Au lieu de fermer ta balise titre <h1>, tu en ouvres une seconde…

FireFox, sympa, a rectifié l'erreur comme il a pu :

<div id="bandeau"><br><h1>TUTOLAND</h1><h1></h1></div>

mais pas Internet Explorer :

<DIV id=bandeau><BR>
<H1>TUTOLAND
<H1></DIV>

Dans cette histoire, deux choses m'étonnent,

• alors qu'on est habitué à la permissivité d'IE, on remarque ici que c'est FF qui applique un correctif, et pas IE,
  
• l'erreur se trouvait dans un bloc <div>, et je ne m'attendais pas à ce qu'elle s'étende en dehors de ce bloc !
  

Bannière et logo

Par quelle méthode veux-tu installer ton logo ? En image de fond du bloc #bandeau ? Cela va te poser un problème, car tu utilises déjà l'attribut background-image pour installer une image répétitive unie pour la couleur de fond… ce qui est d'ailleurs inutilement compliqué, puisqu'il te suffirait d'utiliser background-color:#DCD0A7, libérant ainsi background-image pour ton logo, soit, en écriture condensée,

background:#DCD0A7 url(fichiers/tonlogo.jpg) fixed no-repeat top left;

__________

* sauf login: et pass: dans le bloc menu_haut. Et pour cause : tout le contenu de ce bloc est une horreur, avec à nouveau une <table> pour le mettre en forme (totalement inutile), et des balises <font> qui sont à proscrire…

[julien88]

Salut dylav,

 

Encore merci pour ton aide, j'ai déjà appliqué quelques choses comme le changement de <h1> et des tables du formulaire (que j'avais eu quelques part ), je pense qu'il va falloir que j'allège un peu mon code pour après pouvoir mettre une partie membres avec des tutos... en php sans que sa bouge de trop .... je ne sais pas se que tu en pense ?

 

Pour le Titre, qu'elle erreur de boulet ! J'avais même pas remarqué :P

 

De toute manière le titre "TUTOLAND", est là pour remplacer éphémèrement mon "logo.png" que je n'ai pas réussi à mettre encore :

 

 

Bien sur, je vais l'améliorer, comme tu peut le voir le dégradé en dessous du font de la bannière est le même que sur le logo, pour faire croire que le logo fait partie de la bannière

 

Je voudrais mettre se logo aligné à gauche comme une image normale car mon font de bannière est déjà pris par une image, tu na peut être pas remarqué mais ce n'est pas une image à couleur unie, il y a un effet de fondu en dessous :

 

 

Le problème, c'est que je n'arrive pas à le mettre car à chaque fois que je le met, ma partie bannière disparais...

 

Voila, peut être il ya un autre moyen de faire de beaux effets du genre fondu... ou est-ce bien ?

 

l'erreur se trouvait dans un bloc <div>, et je ne m'attendais pas à ce qu'elle s'étende en dehors de ce bloc !

 

Je n'est pas compris se que tu à voulu dire, c'est à cause de cela ( les div ) que ma page sous internet explorer est déformée, comment la remettre en place ?

 

merci d'avance, ton aide est précieuse

 

ps : pouvez vous me dire comment apparais le site chez vous ? Car chez moi, il est plutôt coloré (beige-orange) sur mon ordinateur et apparait plutôt gris sur l'ordinateur de ma mère... comment s'adapter aux couleurs d'écran de tous le monde ?

 

pps : Comment fondre les deux lignes de ces deux blocs en une seule ?

 

 

a+

Modifié le 2 mars 2008 par julien88