Fixer définitivement mon menu et mon conteneur (les centrer)

madamepoussin · 14 Août 2010

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

Je suis vraiment coincée, merci d'avance pour votre aide :wub:

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>

**Dadou** · 14 Août 2010

Il va falloir revoir pas mal de chose, les bases en premier lieu : en HTML, un id doit être unique, pourquoi à tu deux div d'id "conteneur". J'ai vu aussi dans ton code, un 500px écrit avec des O au lieu de 0

pilotis · 15 Août 2010

Et puis tu définis div#bodyconteneur en css mais tu emploies div id="bodycontener" dans ton html.

Connexion

Fixer définitivement mon menu et mon conteneur (les centrer)

Sujets conseillés

madamepoussin

Dadou

pilotis

Veuillez vous connecter pour commenter

Parcourir

Activité