probleme css /ie site [résolu ]

KewlCat · le 2 mars 2008

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

... au lieu de faire un logo à fond transparent, et d'éviter de te faire chier à le caler au pixel près pour tous les navigateurs sinon on va voir un gros décalage moche, tu veux dire ?

Pas certain que ça soit si " :-D " que ça....

julien88 · le 2 mars 2008

Merci pour ton aide toujours aussi précieuse, attentionnée et gentille kewlcat

KewlCat · le 2 mars 2008

Au cas où tu aurais mal compris le sens de mon intervention, ça voulait dire qu'au lieu d'avoir un même détail (le dégradé) sur plusieurs éléments de ta page (ton logo et le fond de ta "bannière") et de perdre du temps à les "caler", tu devrais plutôt faire un logo transparent et déléguer l'affichage du dégradé à un unique élément (puisque, visuellement, ça ne sera qu'une unique zone en haut de ta page)...

Plus généralement, ça revient à penser le design de ta page non pas comme d'habitude en "mosaïque" avec des éléments mis côte à côte, mais comme des couches successives. Ca facilite grandement le développement et ça allège sacrément les feuilles de style...

Après, tu crois ce que tu veux. Si tu n'as pas envie de lire mes conseils, ce n'est pas mon problème.

julien88 · le 2 mars 2008

Salut ,

Ce n'est pas sa le problème, mais c'est que à chaque fois que tu me parle, j'ai l'impression que tu me provoque ....peut être à cause le problème de la configuration et plusieurs autres fois ou tu répondu méchament ?

Peut être n'est ce pas se que tu essaie de faire passer dans tes messages mais en tout cas c'est se que je ressent...

Et je n'ai surtout pas envie que tu me ferme encore un sujet car mon premier but sur se forum c'est d'apprendre et surtout pas me faire taper sur les doigt alors "."

a+

ps : même pour un modo, dire "bonjour" sa fait pas de mal , et après on se plaint que les gens ne le font pas...mais ils en faut qui montrent l'exemple...

Modifié le 2 mars 2008 par julien88

Dylav · le 2 mars 2008

Internet Explorer

Le problème des deux colones de droite qui passent en dessous, c'est parce qu'elles ne trouvent pas la place de rester à côté de celle de gauche. Si ça marche sous FF et pas sour IE, c'est sans doute à cause des marges, qui ne sont pas interprétées de la même façon par les deux navigateurs. On avait parlé des marges extérieures, pour lesquelles je crois t'avoir indiqué de les mettre à zéro (qui n'est pas la valeur par défaut) avec margin:0; dans tous les blocs <div>. Le plus élégant serait d'ailleurs de la remonter dans la définition générale qui existe déjà tout en haut de ta feuille de style. Vu que ça ne semble pas suffire, on va insister en le faisant également pour les marges intérieures, avec padding:0;

div {
 text-align:center;  /* alignement du texte au milieu */
 margin:0;		   /* marges extérieures à zéro	 */
 padding:0;		  /* marges intérieures à zéro	 */
}

Ce qui ne t'empêchera pas ensuite, pour certains blocs, de demander une marge spécifique (qui primera sur la marge "toutes div", puisqu'elle sera exprimée après).

Le logo

Je vois que tu corresponds avec KewlCat à ce sujet.

La double bordure

C'est bien normal, puisque les deux blocs sont l'un au-dessus de l'autre, avec chacun sa bordure. La solution ? Enlever la bordure-haute du bloc d'en-dessous (ou la bordure-basse du bloc d'au-dessus). Pour cela, tu ajoutes, pour le bloc concerné, et en-dessous de border:, un autre attribut border-top-width:0;

--edit--

Pour les marges, je pense que le problème vient des seules marges extérieures, mais que tu as dû oublier une déclaration à zéro. Remonte effectivement le margin:0; tout en haut de la feuille de style et fais un essai.

Par ailleurs, je n'ai plus tout à fait les yeux en face des trous, mais j'ai l'impression que tu as tout remanié différemment en matière de blocs, et je n'arrive pas à m'assurer qu'ils sont correctement imbriqués et tous bien fermés. Je reprendrai ça demain à tête reposée...

Modifié le 2 mars 2008 par dylav

julien88 · le 2 mars 2008

J'ai l'impression que tu as tout remanié différemment en matière de blocs, et je n'arrive pas à m'assurer qu'ils sont correctement imbriqués et tous bien fermés. Je reprendrai ça demain à tête reposée...

En effet, c'est vraiment le bazar dans mon code, je te comprend, j'ai fait 300000 blocs (façon de parler) pour seulement faire quelques véritables blocs visibles ....c'est pour cela qu'il faudra que je revoie mon site pour le rendre plus "lite" car autrement j'aurais du mal à le modifier par la suite...

ps: j'ai appliqué se que tu m'a dit m'ai rien n'a changé [avec les margin ... mais aussi avec les border (surement à cause de moi)]....

merci beaucoup

Dylav · le 3 mars 2008

Bonjour Julien,

Il est clair que, pour moi, ça va beaucoup mieux le matin, pour réfléchir !

Bon, l'essentiel du problème, c'est que tu demandes, pour le milieu de page, à ce que le bloc gauche menu + le bloc centre-droit contenu occupent 180px + 100% de la largeur : ça fait beaucoup, non ?

J'ai fait pas mal d'aménagements et de nettoyage, et je te propose la page HTML et la feuille de style CSS ci-dessous. Compare-les soigneusement à tes codes actuels, et n'hésite pas à me demander ce que tu ne comprends pas. Quelques points principaux :

Pour la partie centrale, je suis revenu à 3 colonnes qui s'adossent les unes aux autres. Leurs largeurs sont exprimées en %, avec un total de 99% (à cause d'IE qui pète les plombs à 100%).
J'ai rapatrié les balises <font> dans la feuille de style (regarde form).
J'ai rapatrié l'image de fond du body dans la feuille de style (regarde body).
J'ai enlevé, comme je te l'indiquais précédemment, la double bordure dans les blocs droit et gauche (regarde border-top-width:0; trois fois).
J'ai ramené explicitement les 3 colonnes centrales à la même hauteur de 900px.

J'ai peut-être fait quelques autres trucs. Regarde soigneusement, parce qu'il serait sympa (pour l'avenir de ta page) que tu aies tout compris

<!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="styles.css">
<title>Tutoland</title>
</head>
<body>
<div id="page">
 <div id="bandeau"><br><h1>TUTOLAND</h1></div>
 <div id="mipage">
   <div id="menu">
     <div id="menu_haut">
       <br><br>Login
       <form method="post" action="login.php">
         <br><br>login:
         <br><input size=13 type="text" name="pseudo_membre">
         <br><br>pass:
         <br><input size=13 type="password" name="passe_membre">
         <br><br><input type="submit" name="Submit" value="Se connecter">
       </form>
     </div>
     <div id="menu_bas">
       <br><br><strong>Tutos</strong>
       <br><br>Pour acceder aux tutoriels simples et détaillés de Tutoland,
       <br> vous devez d'abord vous inscrire
       <br>en cliquant sur inscription dans la case login ci dessus
     </div>
   </div>
   <div id="contenu">
     Bienvenue
   </div>
   <div id="bloc_gauche">
     <div id="bloc_heure"><!-- heure php !-->
       <br><br><br><strong>Bienvenue sur Tutoland
       <br><br>Date et Heure</strong>
       <br><br>Nous sommes le
       <br> 02-03-2008 et il est actuellement
       <br> 19:39
     </div>
     <div id="bloc_meteo">
       <br><br><br><strong>Méteo</strong>
       <br><br>Méteo
       <br>dans les vosges :
       <br><br><img src="http://perso0.free.fr/cgi-bin/meteo.pl?dep=88">
     </div>
     <div id="bloc_news">
       <br><br><strong>News</strong>
       <br><br>Nouvelle révision du site
       <br><br>Nouveau design
       <br><br>Nouvelles fonctionnalitées
     </div>
   </div>
 </div>
 <div id="pied_page">
   <br>© Tutoland-Entertainment rev3
 </div>
</div>
</body>
</html>

body {
 font-family: Arial, "sans serif";     /* nom de la police pour toute la page */
 background: url(fichiers/font.png) fixed;  /* image fond de la page */
 }
form {
 font-size:12px;                /* taille police dans le formulaire */
 }
div {
 text-align:center;         /* alignement du texte au milieu */
 margin:0;                  /* marges extérieures à zéro */
 }
div#bandeau {                            /*banniere*/
 width:100%;                                     /* 100% de page (qui elle fait 80% de la page) */
 height:130px;                        /* hauteur banniere */
 background: url(fichiers/fontban.png) repeat top center;  /* image font de la banniere */
 background-color: #ffffff;  /* couleur de font blanche*/
 }
div#menu {                            /* menu haut + menu bas*/
 float:left;                                                 /* alignement a gauche du menu haut et bas */
 width:22%;                                                /* largeur de menu haut et bas */
 height:900px;                                /*changer cette ligne + menu  pour  changer la hauteur de la page */
 background-color:#ffffff;                  /* couleur de font blanche*/
 }
div#menu_haut { 
 border:1px solid #BFBFBF;                                   /* menu haut = bloc login */
 font-weight:bold;
 width:100%;                                                 /* pour changer largeur menu haut et bas aller dans width de "menu"*/
 height:25%;                                                 /* moitié de la hauteur du bloc general "menu" */
 background:url(fichiers/fontcorp.png) repeat  ;        /* couleur de font */
 }
div#menu_bas {
 background:url(fichiers/fontcorp.png) repeat  ;
 border:1px solid #BFBFBF;                  /*menu bas = bloc tuto*/
 border-top-width:0;        /* pas de bordure haut */
 width:100%;                                                 /* pour changer largeur menu haut et bas aller dans width de "menu"*/
 height:75%;                                                 /* moitié de la hauteur du bloc general "menu" */
 background-color:#ffffff;                                   /* couleur de font blanche*/
 }
div#contenu {                                                      /* bloc texte + news */
 float:left;                                                 /* alignement à gauche*/
 width:59%;                        /* largeur bloc central*/
 height:900px;                          /*changer cette ligne + menu  pour  changer la hauteur de la page */
 background:url(fichiers/fontcorp.png) repeat  ;        /* couleur de font */
 }
div#bloc_gauche { 
 background:url(fichiers/fontcorp.png) repeat  ;             /* bloc meteo + bloc news + bloc heure*/
 float:left;                                                 /* alignement à gauche*/
 width:18%;                        /* largeur bloc news*/
 height:900px;                          /*changer cette ligne + menu  pour  changer la hauteur de la page */
 background-color:#ffffff;                  /* couleur de font blanche*/
 }
div#pied_page {
 background: url(fichiers/fontban.png) repeat top center;
 border:1px solid #BFBFBF;
 clear:both;
 width:100%;
 height:50px;
 background-color:#33FF99;
 }
div#page {
 margin-left:auto;
 margin-right:auto;
 width:80%;
 height:100%;
 }
div#mipage {
 margin-left:auto;
 margin-right:auto;
 width:100%;
 }
div#bloc_heure {
 background: url(fichiers/fontcorp.png) repeat top center;
 border:1px solid #BFBFBF;
 width:100%;
 height:33%;
 }
div#bloc_meteo {
 background: url(fichiers/fontcorp.png) repeat top center;
 border:1px solid #BFBFBF;
 border-top-width:0;        /* pas de bordure haut */
 width:100%;
 height:33%;
 }
div#bloc_news {
 background: url(fichiers/fontcorp.png) repeat top center;
 border:1px solid #BFBFBF;
 border-top-width:0;        /* pas de bordure haut */
 width:100%;
 height:34%;
 }

P.S.: si tu veux, on pourra reparler de ton logo.

julien88 · le 3 mars 2008

Salut dylav,

Merci pour ton code, il semblerais que mon problème avec internet explorer soit réglé mais il reste tout de même quelques problèmes pas très graves mais qui gâchent tout l'esthétique ...

Problèmes firefox ( 2 pb ) :

<----- Pas de bordure ?

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

<----- bloc décalé, surement dû au 99% ?

/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\

Problèmes internet explorer ( 3pb ) :

<----- pareil que sur firefox, pourquoi il n'y à pas de bordure ?

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

<----- Bloc décalé et pourquoi le bloc n'empiète pas sur la pied de page comme sur firefox ?

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

<----- le bouton d'envoi se cache dans la bordure ^^

/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\

Voila, j'ai remis le site avec les changements en ligne, toujours à la même adresse , merci encore pour ton aide

ps : pour le logo, que me conseille tu ?

Dylav · le 4 mars 2008

Bonjour Julien,

J'ai tout repris au niveau de la feuille de style, pour éviter les écueils d'ajustement rencontrés. En fait, ils s'expliquent très facilement par le fait que les bordures semblent comptées en dehors de la taille du bloc, ce qui fausse tout en fonction du nombre de bordures !

Pour cela, nous traçons les bordures de façon plus globale,

* une bordure globale autour du bloc mipage complet,

* des bordures gauche et droite autour du bloc central contenu,

* des bordures basses pour les blocs menu_haut, bloc_heure et bloc_meteo.

Au passage, j'ai remonté le remplissage fontcorp.png au niveau du bloc global mipage, et il n'y a plus de "raccords". Ce qui donne beaucoup moins de définitions à poser, et un résultat impeccable ! A un détail près, que ton œil exercé ne manquera pas de découvrir : les bordures basses de bloc_heure et bloc_meteo ne vont pas jusqu'au bout à droite, c'est dû à la largeur globale interne des 3 colonnes de mipage, de 99% seulement à cause d'IE. Je crains qu'il ne faille faire avec : il arrive un moment où les divergences entre navigateurs doivent t'amener à arrêter la recherche de la perfection du résultat...

Autre détail : à cause d'IE, j'ai également été obligé de limiter la hauteur de menu_bas à 70% (ce qui donne un total de seulement 95% pour la colonne de gauche) : sinon, cette colonne devenait plus haute que les autres (ne me demande pas pourquoi, je ne me l'explique pas. Conséquence, les bordures de contenu ne descendaient pas jusqu'en bas) !

Voici la nouvelle feuille de style, finalement moins compliquée qu'avant (n'enlève pas la description body, s'il te plaît, elle contient la définition de la police et l'image de fond à appliquer à toute la page) :

body {
font-family: Arial, "sans serif";     /* nom de la police pour toute la page */
background: url(fichiers/font.png) fixed;  /* image fond de la page */
}
form {
font-size:12px; /* taille police dans le formulaire */
}
div {
text-align:center; /* alignement du texte au milieu */
margin:0; /* marges extérieures à zéro */
}
div#bandeau { /*banniere*/
width:100%; /* 100% de page (qui elle fait 80% de la page) */
height:130px; /* hauteur banniere */
background: url(fichiers/fontban.png) repeat top center; /* image font de la banniere */
background-color: #ffffff; /* couleur de font blanche*/
}
div#menu { /* menu haut + menu bas*/
float:left; /* alignement a gauche du menu haut et bas */
width:22%; /* largeur de menu haut et bas */
height:100%; /*changer cette ligne + menu pour changer la hauteur de la page */
}
div#menu_haut {
border-bottom:1px solid #BFBFBF; /* menu haut = bloc login */
font-weight:bold;
width:100%; /* pour changer largeur menu haut et bas aller dans width de "menu"*/
height:25%; /* moitié de la hauteur du bloc general "menu" */
}
div#menu_bas {
width:100%; /* pour changer largeur menu haut et bas aller dans width de "menu"*/
height:70%; /* moitié de la hauteur du bloc general "menu" */
}
div#contenu { /* bloc texte + news */
float:left; /* alignement à gauche*/
width:59%; /* largeur bloc central*/
height:100%; /*changer cette ligne + menu pour changer la hauteur de la page */
border-right:1px solid #BFBFBF; /* contenu : border droit */
border-left:1px solid #BFBFBF; /* contenu : border gauche */
}
div#bloc_gauche {
background:url(fichiers/fontcorp.png) repeat ; /* bloc meteo + bloc news + bloc heure*/
float:left; /* alignement à gauche*/
width:18%; /* largeur bloc news*/
height:100%; /*changer cette ligne + menu pour changer la hauteur de la page */
background-color:#ffffff; /* couleur de font blanche*/
}
div#pied_page {
background: url(fichiers/fontban.png) repeat top center;
border:1px solid #BFBFBF;
border-top-width:0; /* pas de bordure haut */
clear:both;
width:100%;
height:50px;
background-color:#33FF99;
}
div#page {
margin-left:auto;
margin-right:auto;
width:80%;
height:100%;
}
div#mipage {
width:100%;
border:1px solid #BFBFBF;
height:900px;
background: url(fichiers/fontcorp.png) repeat top center; /* image font de la banniere */
}
div#bloc_heure {
border-bottom:1px solid #BFBFBF;
width:100%;
height:33%;
}
div#bloc_meteo {
border-bottom:1px solid #BFBFBF;
width:100%;
height:33%;
}
div#bloc_news {
width:100%;
height:33%;
}

Et il nous reste le problème du logo. J'ai une idée, mais pas le temps de la développer maintenant. Patience...

julien88 · le 4 mars 2008

Bonsoir dylav,

J'ai donc remis le site en ligne, pour le problème des lignes se n'est pas très grave par contre il reste quelques problèmes...

Sous ie, il n'y à qu'un seul problème mais assez étrange :

Le bouton "Se connecter" se met sous la barre, pourquoi ?

/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\

Sous firefox, il reste deux problèmes :

Le bouton pour se connecter reste en dessous de la barre comme sur ie mais, je ne sais pas pourquoi, tout le texte de la page s'aligne à gauche, pourtant dans la feuille de style c'est bien marqué "text-align:center;" ?

/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\

merci encore

Modifié le 4 mars 2008 par julien88

Connexion

Pas encore inscrit ?

probleme css /ie site [résolu ]

Messages recommandés

KewlCat

Lien vers le commentaire

Partager sur d’autres sites

julien88

Lien vers le commentaire

Partager sur d’autres sites

KewlCat

Lien vers le commentaire

Partager sur d’autres sites

julien88

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

julien88

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

julien88

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

julien88

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer