lapîn Posté 28 Décembre 2003 Partager Posté 28 Décembre 2003 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! Lien vers le commentaire Partager sur d’autres sites More sharing options...
Fruge Posté 28 Décembre 2003 Partager Posté 28 Décembre 2003 Salut Lapîn, 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. Si tu veux empecher le fond (background-image) de se répéter, le plus simple serait peut-être de spécifier : background-repeat : no-repeat Pour mémoire : 'background-repeat' Valeur : repeat | repeat-x | repeat-y | no-repeat | inherit Initiale : repeat S'applique à : tous les éléments Héritée : non Pourcentage : sans objet Médias : visuel Quand on spécifie une image d'arrière-plan, cette propriété indique si l'image est répétée (apposée) et la manière de la répétition. La mosaïque de fond résultante correspond aux aires de contenu, d'espacement et de bordure de la boîte de l'élément en question. Les significations des valeurs sont : repeat L'image se répète à la fois horizontalement et verticalement ; repeat-x L'image ne se répète qu'horizontalement ; repeat-y L'image ne se répète que verticalement ; no-repeat L'image ne se répète pas : un seul exemplaire de celle-ci est dessiné. Bonne nuit Fruge. Lien vers le commentaire Partager sur d’autres sites More sharing options...
lapîn Posté 29 Décembre 2003 Auteur Partager Posté 29 Décembre 2003 Bonne nuit 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Monique Posté 29 Décembre 2003 Partager Posté 29 Décembre 2003 Bonjour lapîn, Trop tard pour examiner plus longtemps ton code Pour que l'image de fond ne défile pas : background-attachment: fixed; Tu as pris une bonne décision Bon courage Lien vers le commentaire Partager sur d’autres sites More sharing options...
Fruge Posté 29 Décembre 2003 Partager Posté 29 Décembre 2003 Salut, 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 C'est tres exactement ce que je me suis dit en me reveillant ce matin (il y a un quart d'heure )... mais je viens de voir que Monique avait déjà corrigé le tir : avec le background-attachment: fixed;, ca devrait être OK (tiens nous au courant ). A plus, Fruge. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Monique Posté 29 Décembre 2003 Partager Posté 29 Décembre 2003 Bonjour lapîn, Pour ton menu, tu peux placer tes images en fond à l'aide de css : a:link { background-image: url(image1.gif);}a:hover { background-image: url(image2.gif);} Explications détaillées : Boutons CSS Lien vers le commentaire Partager sur d’autres sites More sharing options...
lapîn Posté 29 Décembre 2003 Auteur Partager Posté 29 Décembre 2003 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant