Dylav

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...

Bûche

bûche

Avoir sa carte il doit !

Hummm... trop de monde, sur cette passerelle !

(5832) Il était temps que je place mon train, aujourd'hui (Selkirk, New York)

(5827) Bling-bling or not bling-bling ?

- « Bien dit, Nemes ! » - « Prout », dit Rion ! - « Ça pue ! » dit Cauxboy en se félicitant d'avoir transporté le porc philosophique. - « Comment trouver le moyen de ne pas tacher Cyrilcvcf ? » - « Je sais ! Il suffit de le tremper dans du pastis bien frais... » - « Bonjour les banalités... » soupira DK. Jamais contente, elle fume, elle boit, elle pète (oups!). Pire... elle ne sait pas lire, mais elle compense par son obscure chose entre ses doigts experts. Inquiet, le canard volant, dans sa cage cherchant la chose, décida avec vigueur de tripoter le machin de ses bidules tout ramollos... Mais quelle décadence ! Il a cent vingt-huit octets et 32 bits en sur-réseau ! Sans une petite fourchette, pas moyen de capter Arte, MERDE ! Et la TNT qui sans l'accès autorisé, donne peau de balle ?

porc et... pique !

Que le grand Cric me croque si cela doit arriver !

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.

Philippe, lorsque tu réponds au post juste précédent, pourquoi le répéter en citation, puisque le lecteur l'a déjà naturellement sous les yeux ? Au bouton préfère le bouton qui est juste au-dessous ! Ce serait sympa pour les molettes de souris de tous les Zébuloniens qui passent par là...

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...

5825

Salace ? Mais non, voyons, tu me racontes des… salades !

5823

Lorraine ? Alsace ! (ici, Colmar)

L'odalisque était, autrefois en Turquie, une esclave au service des femmes d'un harem. … sofa

5821

De la Madeleine, on aperçoit, au bout de la rue Royale, l' obélisque de la Concorde…

- « Bien dit, Nemes ! » - « Prout », dit Rion ! - « Ça pue ! » dit Cauxboy en se félicitant d'avoir transporté le porc philosophique. - « Comment trouver le moyen de ne pas tacher Cyrilcvcf ? » - « Je sais ! Il suffit de le tremper dans du pastis bien frais... » - « Bonjour les banalités... » soupira DK. Jamais contente, elle fume, elle boit, elle pète (oups!). Pire... elle ne sait pas lire, mais elle compense par son obscure chose entre ses doigts experts. Inquiet, le canard volant, dans sa cage cherchant la chose, décida avec vigueur de tripoter le machin de ses bidules tout ramollos... Mais quelle décadence ! Il a cent vingt-huit octets et 32 bits en sur-réseau ! Sans une petite fourchette, pas moyen de

Là… Oui, Julien, d'ailleurs je lui ai laissé la clef, il pourra jouer tout seul… Je lui ai juste demandé d'éteindre la lumière en sortant

« Winter in Michigan doesn't give a photographer much light to play with. When it happens, it can be magic. Geep 5818 and 5817 return to their train after a set-out in Durand yard, passing the legendary Durand station. » (E. Garrett, Durand Union Station, Durand, Michigan, USA, February 17, 1985)

Un tel script ne me semble pas bien difficile à aménager pour répondre à tes attentes. Si, à chaque clic, tu enregistres le couple date-visiteur, il ne te sera pas bien difficile d'en déduire le nombre de visiteurs quotidiens. Reste à identifier le visiteur ? Par son adresse IP, peut-être…

Tu me connais, DK, je fais partie des 27 du 4ème groupe, pour te signaler que les 143 de l'avant-dernier groupe pourraient s'offusquer d'avoir à lancer une discution plutôt qu'une discussion ! Le TLFI, par exemple, indique en effet (je cite) : « D'apr. FÉR. Crit. t. 1 1787, les écrivains sont partagés entre les orth. discussion et discution; auj. il n'y a plus d'hésitation et le mot a rejoint concussion, percussion, répercussion qui sont les seuls mots en écrits par 2 s et non t. » Ceci dit, la blague est excellente… (sans retenue)