28219 sujets

CSS et mise en forme, CSS3

Gros Problème de positionnement de div

Hi all,

Je suis en train de réalisé un nouveau style pour un site web, mais je n'arrive pas à positionné certain div, notamment un menu déroulant en javascript mais aussi le div container.

Dans le div du menu, les sous menus ne s'affiche pas bien, il s'affiche en dessous du div "container" (voir screen header1), quand on réduit (voir screen header2) le menu se décale et passe sur les drapeaux de langue. On peut aussi voir que tout le bloque container se décale.

Comment faire pour que le bloque de container ne se décale pas lorsque la page est réduite, et que les sous menus s'affiche au-dessu du bloc container ?

De plus sur les screen footer1 et footer2 on peut voir que l'image (gribouilli blanc) se décale comme le bloc container, et que les liens se décale eux aussi.

Comment faire pour que tout cela reste fixe lors d'une réduction de fenêtre ?

Merci pour vos réponses !!
upload/5108-header.jpg upload/5108-header2.jpg upload/5108-footer1.jpg upload/5108-footer2.jpg
Bonjour,

Sans code HTML et CSS, sans page en ligne pour visualiser le problème, et avec uniquement des captures d'écran difficilement compréhensibles... je doute que quiconque ici ait la capacité de t'aider.

Si le site est confidentiel, il est toujours possible de créer une page de test reproduisant le problème et de la soumettre pour examen. C'est d'ailleurs un bon exercice pédagogique. Smiley cligne
Oui Smiley confused

Le site est effectivement confidentiel, mais je suis pressé par le temps Smiley ohwell

Pour le code il est long :x mais je vais quand même l'ajouté Smiley ravi

Code du haut de page (menu - logo - langue)

#header{
	position: relative;
	background-color: black;
	color: white;
	height: 170px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 30px;
	}
	
#logoWi{
	position: absolute;
	left:50%;
	width: 90px;
	height: 90px;
	margin-left: -45px;
	margin-bottom: 20px;
	}

/*Drapeau */
#Lang{
	position: absolute;
	text-align: center;
	top: 160px;
	left: 0px;
	right: auto;
	margin-bottom: 5px;
	}
	
#Lang img{
	width: 20px;
	height: 15px;
	border-style: none;
	}
	
#Lang a{
	border:0;
	text-decoration: none;
	}
	
/* Liste */
/* CSS issu des tutoriels  http://css.alsacreations.com  */

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu {
	position:absolute;
	top: 130px;
	left: 50%;
	right: 50%;
	margin-left: -300px;
	margin-right: -300px;
	text-align: center;
}

#menu dl {
	float: left;
	margin: 0;
}

#menu dt {
	font-size: 20px;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #000;
	color: white;
	padding-left: 10px;
}

#menu dd {
	border: 1px solid white;
}

#menu li {
	/*position:absolute;*/
	text-align: center;
	background: #000;
	color: white;
	padding-left: 2px;
	padding-right: 2px;
}

#menu li a{
	color: white;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}

#menu li a:hover{
	background: #eee;
	color: black;
}
	
#menu dt a {
	color: white;
	text-decoration: none;
}

#menu dt a:hover {
	background: black;
}

Modifié par mLk (05 Feb 2007 - 12:43)
"Container" soit la partie blanche

#container{
	position: relative;	
	background: white;
	width: auto;
	color: black;
	top:0px;
	margin-left:10px;
	margin-right: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
	}
	
.global{
	position: relative;
	top: 0px;
	left: 260px;
	right:10px;
	margin-right: 0px;
	width: 400px;
	padding-left: 15px;
	}
	
.contact_int{
	top: 40px;
	left: 0px;
	position: absolute;
	width: 250px;
	margin-left: 10px;
	margin-bottom: 20px;
	}

Modifié par mLk (05 Feb 2007 - 12:42)
Footer (liens - logo - liens)


#footer{
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
	}
	
.url_foot1{
	text-align: center;
	}
.url_foot1 a{
	text-decoration: none;
	color: #fff;
	}
.url_foot1 a:hover{
	text-decoration: underline;
	color: #fff;
	}
#footer img{
	position: relative;
	left: 50%;
	margin-left: -125px;
	width: 250px;
	height:40px;
	}
Code Html


<body>
<div id="header"> 
  <div id="logo"> 
    <p><img src="logo.png" alt="logo" /></p>
  </div>
  <div id="Lang"> 
    <p> <a href="#" title="English"><img src="FLAGUK.GIF" alt="English" /></a> <a href="#" title="Français"><img src="FLAGFR.GIF" alt="France" /></a> 
      <a href="#" title="deutch"><img src="FLAGDE.GIF" alt="Allemagne" /></a> <a href="#" title="Espagnol"><img src="FLAGES.GIF" alt="Espagne" /></a> 
    </p>
  </div>
  <div id="menu"> 
    <dl>
      <dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Special 
        Offers</a></dt> 
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu1');">France</dt>
      <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"> 
        <ul>
          <li><a href="#">Cote D'azur</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu2');">Espagne</dt>
      <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');"> 
        <ul>
          <li><a href="#">Barcelone</a></li>
          <li><a href="#">Valence</a></li>
          <li><a href="#">Baleares</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu3');">Corse</dt> 
      <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');"> 
        <ul>
          <li><a href="#">Corse</a></li>
          <li><a href="#">Ouest Corse</a></li>
          <li><a href="#">Est Corse</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu4');">Caraïbes</dt> 
      <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');"> 
        <ul>
          <li><a href="#">Martinique</a></li>
          <li><a href="#">Guadeloupe</a></li>
          <li><a href="#">Bahamas</a></li>
        </ul>
      </dd>
    </dl>
  </div>
</div>
<div id="container"> 
  <div class="global">
    <div align="center"> 
      <p</p>
      <p></p>
    </div>
  </div>
  <div class="contact_int"> 
    <?php include("contact_int.php"); ?>
  </div>
</div>
<div id="footer"> 
  <p class="url_foot1"><a href="#" title="#">SPECIAL OFFERS</a> - <a href="#" title="#">BROKERAGE</a> 
    - <a href="#" title="#">ABOUT US</a> - <a href="#" title="#">TRAVEL AGENTS</a> 
    - <a href="#" title="#">CORPORATE</a> - <a href="#" title="#">SITE MAP</a> 
    - <a href="#" title="#">CONTACT US</a> - <a href="#" title="#">BOOKING REQUEST</a> 
  </p>
  <p><img src="logoFoot.png" alt="logoFoot" /></p>
  <p class="url_foot1"><a href="#" title="#">LONDON</a> - <a href="#" title="#">PARIS</a> 
    - <a href="#" title="#">FORT LAUDERALE</a> - <a href="#" title="#">SAN FRANCISCO</a> 
    - <a href="#" title="#">BARCELONA</a> - <a href="#" title="#">GENEVA</a> - 
    <a href="#" title="#">KARLSRUHE</a> - <a href="#" title="#">WEST INDIES</a> 
  </p>
</div>
</body>


Alors j'espère que ça vous aidera, moi j'y arrive toujours pas, ces histoires de position (absolute, relative, etc) c'est compliqué Smiley fache surtout quand derriere il y a incompatibilités avec ie/safari/firefox Smiley sweatdrop et autres ...

Merci pour vos réponses !!

Désolé pour la séparation, en une seule fois, ça n'a pas voulu Smiley confused
Bonjour,
Bon par télépathie, englobe tout le contenu de ton site dans un div conteneur que tu centres avec margin auto confére lui la propriété position: relative; Places ton menu et donne lui (ou au sous menu) la position: absolute.
Désolé si je suis à côté de la plaque mais , j'ai des pertes de synchro avec ma connexion télépathique ...
Sujet clos
Aller à