lapîn

Merci pour ton aide Beatnykk alors ma page est en ligne ICI après plein plein d'essai avec le z-index voici le dernier (qui marche tjs pas) : (précision : ma page est composée d'un div "haut" - bandeau du haut -, puis d'un div "contenu", qui contient un div "menu", un div "titrecontenu", un div "frame" à côté d'un div "diaporama". Un div "pied" fini la page contenu ds un div conteneur. ça va toujours ? ) j'essaie déjà de faire passer mes sous-menus pardessus le titrecontenu mais j'arrive pas... les css : .titrecontenu { float: left; width: 798px; height: 30px; margin-top: 20px; text-align: center; z-index: 5; } #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7 { float: left; display: none; /* par défaut, les sous-menus ne seront pas affichés */ font-size: 8px; padding: 5px 0 5px 0; width: 100px; z-index: 1; } .smenu a { margin: 0 2px; width: 100px; height: 20px; display: block; text-align: center; border: 1px solid #ccc; text-decoration: none; color: #000; background: #fff; z-index: 1; } .smenu a:hover { background: #66CC66; border: 1px solid #ccc; z-index: 1 } .smenu a:active { background: #66CC66; border: 1px solid gray; color: #fff; z-index: 1; } .smenu li { float: left; font-size: 10px; z-index: 1; } .smenu { font-size: 10px; z-index: 1; } j'ai déjà fait plein d'essai en utilisant le z-index ds les divs menu notamment. sinon un extrait de mon code html <div class="divcontenu"> <div class="menu"> <ul> <li> <a onmouseover="montre('smenu1');" onmouseout="cache('smenu1');" href="">Présentation</a> <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');"> <li><span class="smenu"><a href="">en détails...</a></span></li> <li><span class="smenu"><a href="">situation</a></span></li> <li><span class="smenu"><a href="">aux alentours</a></span></li> <li><span class="smenu"><a href="">voie verte</a></span></li> </ul> </li> <li> .... ... ... </div> <div class="titrecontenu"> <img src="images/titre_05.gif" alt="situation" /> </div> voilà ! merci a+

merci Monique et Beatnykk et bonjour bon bah jvais chercher "l'erreur" mais je comprends vraiment pas trop : ça changer rien quand j'ajoute ds mes css des propriétés z-index... mas css sans z-index (oui c'est un peu le bordel peut-être ) body { margin: 0; background-color: #fff; text-align: center; } .conteneur { width: 798px; height: 589px; margin-left: auto; margin-right: auto; text-align: left; } .haut { float: left; width: 798px; height: 120px; background-image: url('images/maquette_01.jpg'); } .divcontenu { float: left; width: 798px; height: 426px; background-image: url('images/maquette_02.gif'); } .titrecontenu { float: left; width: 798px; height: 30px; margin-top: 20px; text-align: center; } .frame { float: left; height: 313px; width: 520px; margin-left: 20px; margin-top: 10px; overflow: auto; } .diaporama { float: right; height: 313px; width: 180px; margin-right: 8px; margin-top: 0px; } .pied { float: left; width: 798px; height: 43px; background-image: url('images/maquette_03.gif'); } ul, li { margin: 0; padding: 0; list-style-type: none; font-family: arial, helvetica, sans-serif; font-size: 10px; font-weight: normal; } .menu { margin-top: 25px; margin-left: 34px; width: 764px; height: 24px; font-size: 14px; font-family: arial, helvetica, sans-serif; } .menu a { margin: 0 2px; width: 100px; height: 20px; display: block; text-align: center; border: 1px solid gray; text-decoration: none; color: #fff; background: #339933; } .menu a:hover { background: #66cc66; border: 1px solid #ccc; color: #ff3300; } .menu a:active { background: #66CC66; border: 1px solid #ccc; color: #fff; } .menu li { float: left; font-family: arial, helvetica, sans-serif; font-size: 14px; } #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7 { float: left; display: none; /* par défaut, les sous-menus ne seront pas affichés */ font-size: 8px; padding: 5px 0 5px 0; width: 100px; } .smenu a { margin: 0 2px; width: 100px; height: 20px; display: block; text-align: center; border: 1px solid #ccc; text-decoration: none; color: #000; background: #fff; } .smenu a:hover { background: #66CC66; border: 1px solid #ccc; } .smenu a:active { background: #66CC66; border: 1px solid gray; color: #fff; } .smenu li { float: left; font-size: 10px; } .smenu { font-size: 10px; z-index: 1; } .stylecontenu { font-size: 12px; font-family: arial, helvetica, sans-serif; } .stylemenu { font-size: 12px; font-family: arial, helvetica, sans-serif; } merci de votre aide en tout cas et a+ lapin

oui mais mes divs sont en float, et z-index n'existe pas en float. j'essaie donc de les "convertir" en "position:relative" mais c'est pas très glorieux

bonjour donc ça y est mon code est propre (sauf les scripts ajoutés par club-internet après la balise html pour les stats et ouvrir une popup mais de toute façon le site ne sera pas hébergé là donc on peut considérer que le code est propre) mais mon problème demeure : quand un calque de sous-menu apparait il pousse le calque en dessous au lieu de "passer par dessus". donc apparemment il faut que j'attribue des valeurs de z-index aux divs concernés mais comme mes dics ne sont pas en absolu, comment faire? jvais continuer à chercher mais si qqn a une idée, merci de m'aider. merci et a+ lapîn

merci monique j'ai un peu restructuré mon code mais il me reste plein d'erreurs ds mes listes et je comprends pas trop. je vais me replonger dedans après les fêtes et essayer de résoudre ce problème. sinon, j'ai validé ma css qui est "bonne" bonnes fêtes et merci. a+

Bonjour , j'ai avancé dans la création de mon site "tout en css" (et je progresse ) mais j'ai un petit problème : quand les sous menus de mes menus s'affichent au passage de la souris (merci au très bon turorial de alsacréations pour le menu), ceux-ci "rentrent" dans le bloc en dessous et le pousse VISIBLE ICI. j'ai cherché à résoudre ce problème et je crois que je dois utiliser le "z-index" pour autoriser "l'empilement" des blocs. mais par contre je crois comprendre qu'il faut que mes blocs soient placés en absolute pour utiliser le z-index mais moi ils sont en flottant. comment faire? merci pour vos réponses. sinon : gros problème sur opera : ni mes sous menus, ni ma scollbar ne s'affichent.. merci pour votre aide, bonne soirée, bonne année a+ lapin

Bonjour, merci Monique et Fruge pour votre aide précieuse le background-attachment: fixed; marche parfaitement. par contre ce bloc est un peu grand donc je vais le couper en haut et à gauche et mettre leurs arrières plans pour que ma partie scrollable soit un peu plus courte. sinon Monique pour mes boutons, ce qui me gêne c'est "Les techniques décrites ci-après fonctionnent avec les navigateurs modernes (MSIE 5.x, Netscape 6 et 7, Mozilla 1.x, Opéra 7). Avec Opéra 5.x et 6.x les images de fond ne seront pas chargées". comme je souhaite utiliser une police un peu orginale pour les boutons, le texte du bouton sera une image donc si cette image ne s'affiche pas, j'aurai plus du tout de menu... donc je réfléchis à une solution . en tout cas merci pour votre aide, a+ lapin

salut Fruge merci pour ton aide. je suis en train de tester ça, mais maintenant mon background ne se répète plus mais défile avec ma scollbar en effet jferai ptet mieux d'aller me coucher! merci et a+ lapin

Bonsoir, ça y est jme suis mis à essayer de faire un site conforme aux standards et j'aurais besoin d'un ptit peu d'aide svp. Alors, voilà mon premier résultat est ICI (oui ça bug un peu de partout je sais... riez pas trop svp!). Mais ça montre une idée de ce que je veux obtenir (sauf que au niveau des menus, les sous menus ne s'afficheront qu'au passage de la souris sur les menus qui eux-mêmes au passage de la souris se transformeront en blanc). Pour le contenu : problème : mon fond défile avec la scrollbar... au début j'avais mis ce fond en arrière plan ds le css mais résultat il se répétait. Donc ce qu'il faut que je fasse je pense c'est superposer 2 blocs mais ça n'est possible qu'avec la position fixed apparement et je ne sais pas comment l'utiliser... sinon, pour mon menu, il est très découpé mais c'est parce que je veux que chaque sous menu soit une image interactive. Et quand j'insère les différentes images de ce menu, j'ai une « marge » entre chaque image mais si je mets toutes les insertions sur la même ligne dans le code, je n'ai plus ce problème... je comprends pas. Le problème c'est que j'ai peur que mon site soit trop lourd. Donc voilà j'espère que mes explications ne sont pas trop confuses et si vous pouvez m'aidez un ptit peu je vous serai très réconnaissant et n'hésitez pas à me faire part de vos remarques! Merci beaucoup a+ mon fichier css : body { margin: 0; background-color: #fff; text-align: center; } .conteneur { width: 798px; margin-left: auto; margin-right: auto; text-align: left; } .haut { float: left; width: 798px; height: 120px; background-image: url('images/div_01.jpg'); } .menu { float: left; width: 134px; height: 400px; background-color: #99ff99; } .frame { float: left; width: 664px; height: 446px; overflow: auto; } .pied { float: left; width: 798px; height: 23px; background-image: url('images/div_16.gif'); } .image { border: 0; margin: 0; et le code de ma page : <html> <head> <title>Document sans titre</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="conteneur"> <div class="haut"> <img src="images/div_01.jpg" class="image" alt="image" /></div> <div class="menu"> <img src="images/div_02.gif" class="image" alt="image" /><img src="images/div_04.gif" class="image" alt="image" /><img src="images/div_05.gif" class="image" alt="image" /><img src="images/div_06.gif" class="image" alt="image" /><img src="images/div_07.gif" class="image" alt="image" /><img src="images/div_08.gif" class="image" alt="image" /><img src="images/div_09.gif" class="image" alt="image" /><img src="images/div_10.gif" class="image" alt="image" /><img src="images/div_11.gif" class="image" alt="image" /><img src="images/div_12.gif" class="image" alt="image" /><img src="images/div_13.gif" class="image" alt="image" /><img src="images/div_14.gif" class="image" alt="image" /><img src="images/div_15.gif" class="image" alt="image" /> </div> <div class="frame"> <img src="images/div_03.gif"> <p> contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu </p> <p> contenu</p> <p> contenu</p><p> contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu </p> <p> contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu </p> </div> <div class="pied"></div> </div> </body> </html> merci!

merci sibelius pour les conseils, je vais m'y mettre sérieusement. merci pour les compliments collègue vannetais ça fait plaisir et le prochain festival c'est en juillet 2004! ps bzhcool : ça a rien à voir mais ce soir jbois un verre ds ta ville au "tandem" que je fréquente assez svt ! a+

ah oué ok, je savais pas ça. jme fatiguais à découper en plein plein de petites tranches alors que en fait ça allège pas du tout le site. bon à savoir a+ et merci.

bonjour monique ben par exemple : http://aucoindubois.free.Fr (il est un peu lourd et chez free mais justement jvais le refaire ) : c'est un tableau avec une image dans chaque cellule et le texte ds des calques. le problème aussi, c'est que je crois que sur certains navigs t'as pas la scrollbar du calque quand y a beaucoup de texte (la page http://aucoindubois.free.fr/petite_scene.htm est de ce type là par ex). ça fait 2 bonnes heures que je lis les tutoriaux de alsacreations.com, jsuis plutôt convaincu par les css et comprends bien mieux les "div" mais pour moi par exemple, si je fais le site "au coin du bois" selon cette méthode, il faudra que je mette chaque image ds un div en fait, ce qui me parait pas très facile. sinon faut que je fasse des plus grandes images, comme ça y a moins de calques mais du coup elles seront moins bien optimisées... j'ai pas encore tout compris mais ça avance! merci de ton aide et a+

rebonjour après quelques recherches, en fait, je crois qu'il faut que je revoie tout : j'ai l'habitude de faire une maquette sur phoshop, de la découper en tranche, d'optimiser chacune de celles ci et d'enregistrer pour le web en html et images. ensuite sous un logiciel wisiwig, j'obtient donc un joli tableau et je mets donc mon contenu "pardessus" ds des calques en les mettant en "auto" pour avoir une scrollbar. il ne faut pas faire comme ça? faut tout faire avec des calques? merci de me donner votre avis et le problème c'est que je ne comprends toujours pas comment centrer ma page et avoir mes calques placés parfaitement. pfffffff... compliqué tout ça. merci a+ lapin

Merci beaucoup Sibelius, jvais tester de ce pas. merci a+

Bonjour tout le monde donc moi aussi j'ai quelques problèmes avec les calques et essaie de mieux comprendre leur utilisation. Normalement en ferrant à gauche mon site et en mettant les marges à 0, mes calques sont à peu près bien placés. mais bon je voudrais progresser un peu , utiliser les calques en centrant mon site et mieux comprendre. j'ai compris qu'il faut placer les calques par rapport à un "conteneur" mais ce que je ne comprends pas c'est comment définir le conteneur. Par ex, si j'ai un site en 800*600 que je souhaite centrer (parce que bon c'est moche quand t'es en 1024 un site en 800*600 ferré à gauche..) et mon texte est intégré dans des calques, je le défini comment le conteneur : c'est un grand calque invisible qui fait 800*600 et je mets donc les autres calques dedans en utilisant les marges pour les positionner? merci beaucoup de m'aider jsuis un peu perdu mais jsens que jsuis pas loin! lapin qui comprend rien