Aller au contenu

madamepoussin

Membre
 Afficher le profil  Parcourir son contenu

  • Compteur de contenus

    1

  • Inscrit(e) le

  • Dernière visite

Réputation sur la communauté

0 Neutre
  1. madamepoussin
    Bonjour, J'ai perdu une journée à essayer de trouver la solution....je me permets donc de vous solliciter, car je désespère.. Mon problème, c'est que je réalise actuellement un site simple avec un conteneur principal, qui comprend un div pour mon logo, puis un conteneur qui comprend 2 div : mon menu et une lightbox (je précise que elle je l'ai mise dans un tableau, et donc elle est centrée et ne bouge pas), pour faire défiler de simples images... Le problème, est qu'à chaque fois que je fais varier l'ouverture de la page de mon navigateur, les div se balladent jusqu'à se chevaucher ! J'ai tout essayé, les absolute, fixed, fixed sans left et top, ajouter une table à mon menu, etc...rien à faire la lightbox ne bouge pas, par contre tout le reste oui ...que puis-je faire ? (je ne parle pas de safari, qui quand j'affiche mon site, ne tient même pas compte du css, mon site s'affiche en brut...) Je viens de prendre connaissance du html et du css il y a 5 jours...donc ne vous étonnez pas s'il y a des abbérations... Je suis vraiment coincée, merci d'avance pour votre aide voici le css: _AT_charset "utf-8"; body { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-size:12px; margin:auto; background:url(../images/bg.jpg); background-repeat:repeat-x; background-attachment:scroll; text-align:left; overflow:auto; } /*********************/ /* LOGO */ #en_tete { position:relative; margin-left:20%; margin-top:3%; top:auto; } /* MENU*/ a:link { color:#FFFFFF; text-decoration:none; } a:visited { color:#FFFFFF; text-decoration: none; } a:active { color:#FFFFFF; text-decoration: none; } a:hover { color:#000000; text-decoration: none; } a { border:none; } /*********************/ /* BODYCONTENEUR */ div#bodyconteneur { min-width:700px; width:auto; background:#FF0000; } /* CONTENEUR */ div#conteneur { float:left; position: absolute; margin: auto; /* mon block est centré avec "auto" */ background-image:url(../images/bgaccueil.png) ; background-repeat:no-repeat; width: 500px; height: 360px; color:#FFFFFF; top:0; bottom:0; left:0; right:0; } div#menu { position:absolute; margin:auto; width:5OOpx; height:390px; top:0; bottom:0; left:20%; right:0; float:none } /* div#bienvenue { position:absolute; left: 530px; top: 120px; background-image:url(../images/bgaccueil.png); background-repeat: no-repeat; width: 480px; height: 280px; } */ p /*J'ai justifié mon texte central et mis une marge padding interne donc ! */ { text-align: justify; padding: 20px; font: Arial, Helvetica, sans-serif; } /*********************/ /* PIED DE PAGE*/ div#pied_de_page /* cette div englobe mes 2 div texte et background */ { position: fixed; bottom: 0%; width: 100%; height: 20px; padding: 3px; text-align: left; background: url(../images/footer.png); background-repeat: repeat-x; } div#textbottom /*j'ai rajouté une div pour pouvoir déplacer mon texte de copyright ! */ { position: fixed; bottom: 0%; height: 50px; padding: 3px; text-align: left; } .gris /*couleur du footer ! */ { color: #bbb7b7; } table /* tableau créé pour insérer les images de la lightbox et les disposer ! */ { position:absolute; width: 400px; height: 200px; margin:50px; left:0; top:0; } .contour { border:none; } .clear { clear:both; } ------------------------------------- voici le html : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>xxxxxxxxxxx</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/home.css" rel="stylesheet" type="text/css" title="Design" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" /> <style type="text/css"> <!-- pour ne pas mettre de bordures autour des images --> a img { border: none; } </style> </head> <body> <!-- BODYCONTENEUR--> <div id="bodycontener" > <!-- EN TËTE --> <div id="en_tete"> <img src="images/logo.png" alt="Logo" width="155" height="143" /></div> <!-- MENU --> <div id="menu" > <div id="element_menu"> <div class="menu_section"> <h2 class="h2"><a href="index.html">Accueil</a></h2> </div> <div class="menu_section"> <h2 class="h2"><a href="monparcours.html">Parcours</a></h2> </div> <div class="menu_section"> <h2 class="h2"><a href="Portfolio.html">Portfolio</a></h2> </div> <div class="menu_section"> <h2 class="h2"><a href="art.html">Art</a></h2> </div> <div class="menu_section"> <h2 class="h2"><a href="contact.html">Contact</a></h2> </div> </div> </div> <div class="clear"></div> <!-- CONTENEUR --> <div id ="conteneur"> <p> Bienvenue ! </p> </div> </div> <div id="conteneur"> <a href="images/enfant.jpg" rel="lightbox" title="Pastel Sec format A4 </br> réalisé sur papier à grain pour pastel.">enfant.jpg</a> <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a> </div> --> <!-- PIED DE PAGE --> <div id="pied_de_page"> <div id="textbottom"> <p class= "gris">Copyright "xxxxxxxxxxx" 2010, tous droits réservés</p> </div> </div> </body> </html>
×
×
  • Créer...