28172 sujets

CSS et mise en forme, CSS3

Allignement div en possition absolue

Bonjour,
j'ai un menu déroulant en css et je n'arrive pas a le centré.
J'ai suivis les explications de la page
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
mais le menu refuse de se centrer.

La page de test est visible ici : http://www.move-france.fr/index1.php

Voici mon code source (désolé pour les choses inutiles) :


<?php
$starttime = explode(' ', microtime());
$starttime = $starttime[1] + $starttime[0];

header( 'content-type: text/html; charset=utf-8' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" type="image/x-icon" href="http://electropica.free.fr/images/icone.ico" />
<link rel="icon" type="image/png" href="http://electropica.free.fr/images/icone.png" />
<meta name="verify-v1" content="owk6p6k6Qxq/BcTPpglQNbSWOaNRZc7WR+g49BtLCm0=" />
<meta name="y_key" content="ddb1e01017d082e7" />
<meta name="TITLE" content="m.o.v.e France - SITE NON OFFICIEL" />
<meta name="DESCRIPTION" content="Site Non-Officiel Francophone du groupe japonais m.o.v.e" />
<meta name="KEYWORDS" content="move,france,humanizer,blazability,lady,butterfly,yuri,motsu,kimura,t-kimura,electropica,avex,paroles,lyrics,vidéos,clips,MV,biographie,biography,discographie,discography,unofficial,non-officiel,&#12512;&#12540;&#12532;,&#12512;&#12540;&#12502;,&#12416;&#12540;&#12358;&#12443;,&#12416;&#12540;&#12406;,&#12422;&#12426;,&#12518;&#12522;,&#12418;&#12388;,&#12514;&#12484;,&#12365;&#12416;&#12425;,&#12461;&#12512;&#12521;,&#12456;&#12524;&#12463;&#12488;&#12525;&#12500;&#12459;,&#12456;&#12452;&#12505;&#12483;&#12463;&#12473;" />
<meta name="LANGUAGE" content="FR" />
<meta name="ROBOTS" content="All" />
<meta name="AUTHOR" content="Xander" />
<meta name="OWNER" content="webmaster@move-france.fr" />
<meta name="RATING" content="GENERAL" />
<meta name="ABSTRACT" content="Site Non-Officiel Francophone de M.O.V.E" />
<meta name="REVISIT-AFTER" content="3 DAYS" />
<title>m.o.v.e France - SITE NON OFFICIEL</title>
<style type="text/css">
<!--
body, td, th {
	color: #FFFFFF;
	font-family: Verdana;
	font-weight: bold;
}
body {
	background-color: #000000;
	background-image: url(images/top.png);
	background-repeat: no-repeat;
	background-position: top center;
	text-align: center;
	margin: 0;
}
a:link {
	color: #FFFFFF;
}
a:visited {
	color: #FFFFFF;
}
a:hover {
	color: #ffffcc;
}
a:active {
	color: #FFFFFF;
}
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#global {
	margin-left: auto;
	margin-right: auto;
	width: 1024px;
	text-align: left;
	position: relative;
}
#menu {
	position: absolute;
	top: 251px;
	width: 743px;
	right: auto;
	left: auto;
}
#menu dl {
	float: left;
	width: 7.7em;
	text-align:center
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	border: 1px;
	margin: 1px;
}
#menu dd {
	display: none;
	border: 1px;
}
#menu li {
	text-align: center;
}
#menu li a, #menu dt a {
	color: #fff;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
	color: #ffffcc;
}
#page {
	position:relative;
	width:1024px;
	height:auto;
	top: 400px;
}
#bas {
	position:relative;
	background-color:#000000;
	bottom: 0px;
	top: 450px;
	height: 520px;
	width: 1024px;
}
#basdroite {
	position:absolute;
	left : 674px;
	width:350px;
	height:340px;
	top: 0px;
}
#bascentre {
	position:absolute;
	left : 350px;
	width:324px;
	height:340px;
	top: 0px;
}
#basgauche {
	position:absolute;
	left : 0px;
	width:350px;
	height:340px;
	top: 0px;
}
#copy {
	position:absolute;
	background-color:#000000;
	left : 0px;
	width:1024px;
	height:180px;
	top: 340px;
}
#autre {
	position:absolute;
	width:45px;
	height:23px;
	top: 251px;
	left: 978px;
}
.style1 {
	font-size: 12px
}
.style2 {
	font-size: 24px
}
-->
</style>
<script type="text/javascript">
// <![CDATA[
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
// ]]>
</script>
<script type="text/javascript">
// <![CDATA[ 
function PopupCentrer(page,largeur,hauteur,options) {
var top=(screen.height-hauteur)/2;
var left=(screen.width-largeur)/2;
window.open(page,"","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);
}
// ]]>
</script>
<script type='text/javascript'>
// <![CDATA[
var xhr = null; 
function getXhr()
{
	if(window.XMLHttpRequest) { 
	xhr = new XMLHttpRequest();
	}
	else if(window.ActiveXObject) {
		try	{
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e)
		{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}	
	else {
	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	xhr = false;
	}
	return xhr;
}

function ShowPage(page)
{
var xhr = getXhr();
xhr.onreadystatechange = function()
    {
    	if(xhr.readyState == 4 && xhr.status == 200)
			{
			document.getElementById('page').innerHTML=xhr.responseText;
			}
	}
xhr.open("GET","ajax.php?page="+page,true);
xhr.send(null);
}

// ]]>
</script>
<script type="text/javascript">
// <![CDATA[
function clickIE4() {
  if (event.button==2) {
    alert(message);
    return false;
  }
}
function clickNS4(e) {
  if (document.layers||document.getElementById&&!document.all) {
    if (e.which==2||e.which==3) {
      alert(message);
      return false;
    }
  }
}
if (document.layers) {
  document.captureEvents(Event.MOUSEDOWN);
  document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById) {
  document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("return false")
// ]]>
</script>
</head>
<body onload="ShowPage(1);montre()">
<script type='text/JavaScript'>
// <![CDATA[
function bloc(){return false;}
// ]]>
</script>
<script type="text/javascript">
// <![CDATA[
function disabletext(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disabletext
document.onclick=reEnable
}
// ]]>
</script>
<script language="JavaScript" type="Text/Javascript">
var urlAddress = "http://www.move-france.fr/";
var pageName = "m.o.v.e France - SITE NON OFFICIEL";
function addToFavorites()
{
if (window.external)
{
window.external.AddFavorite(anchor.getAttribute('href'), anchor.getAttribute('title'));
}
}
</script>
<div id="global"> <a name="haut" id="haut"></a>
  <div id="menu">
    <dl>
      <dt onmouseover="javascript:montre();"> <a href="#" onclick="ShowPage(1), document.title='m.o.v.e France - SITE NON OFFICIEL'">Accueil</a></dt>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu1');">Biographie</dt>
      <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
        <ul>
          <li><a href="#" onclick="ShowPage(2), document.title='m.o.v.e France - SITE NON OFFICIEL - Biographie M.O.V.E'">m.o.v.e</a></li>
          <li><a href="#" onclick="ShowPage(3), document.title='m.o.v.e France - SITE NON OFFICIEL - Biographie Yuri'">Yuri</a></li>
          <li><a href="#" onclick="ShowPage(4), document.title='m.o.v.e France - SITE NON OFFICIEL - Biographie Motsu'">Motsu</a></li>
          <li><a href="#" onclick="ShowPage(5), document.title='m.o.v.e France - SITE NON OFFICIEL - Biographie T-kimura'">T-kimura</a></li>
          <li><a href="#" onclick="ShowPage(136), document.title='m.o.v.e France - SITE NON OFFICIEL - Biographie Autres'">Autres</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu2');">Discographie</dt>
      <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
        <ul>
          <li><a href="#" onclick="ShowPage(6), document.title='m.o.v.e France - SITE NON OFFICIEL - Discographie Albums'">Albums</a></li>
          <li><a href="#" onclick="ShowPage(7), document.title='m.o.v.e France - SITE NON OFFICIEL - Discographie Singles'">Singles</a></li>
          <li><a href="#" onclick="ShowPage(8), document.title='m.o.v.e France - SITE NON OFFICIEL - Discographie DVDs'">DVDs</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu3');">Multimedia</dt>
      <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
        <ul>
          <li><a href="#" onclick="ShowPage(9), document.title='m.o.v.e France - SITE NON OFFICIEL - Paroles'">Paroles</a></li>
          <li><a href="#" onclick="ShowPage(10), document.title='m.o.v.e France - SITE NON OFFICIEL - Videos Clips'">Clips</a></li>
          <li><a href="#" onclick="ShowPage(11), document.title='m.o.v.e France - SITE NON OFFICIEL - Videos Live'">Live</a></li>
          <li><a href="#" onclick="ShowPage(103), document.title='m.o.v.e France - SITE NON OFFICIEL - Covers'">Covers</a></li>
          <li><a href="#" onclick="ShowPage(104), document.title='m.o.v.e France - SITE NON OFFICIEL - Making Of'">Making Of</a></li>
          <li><a href="#" onclick="ShowPage(112), document.title='m.o.v.e France - SITE NON OFFICIEL - Photos'">Photos</a></li>
          <li><a href="http://journal.move-france.fr/" target="_blank">Journal</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu4');">Communauté</dt>
      <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
        <ul>
          <li><a href="http://forum.move-france.fr/" target="_blank">Forums</a></li>
          <li><a href='#' onclick='javascript:window.open("chat/index.php","AjaxChat","resizable=no,scrollbars=no,width=700,height=360");'>Chat</a></li>
          <li><a href='#' onclick='javascript:window.open("ajoutmv.php","AjoutVidéo","resizable=no,scrollbars=no,width=900,height=300");'>Ajout vidéo</a></li>
        </ul>
      </dd>
    </dl>
    <dl>
      <dt onmouseover="javascript:montre('smenu5');">Contact</dt>
      <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
        <ul>
          <li><a href="mailto:webmaster[at]move-france[dot]fr?subject=Site M.O.V.E&amp;body=Avant d'écrire votre email veuillez remplacer le [at] et le [dot] par @ et . dans la ligne du destinataire. Merci.">E-Mail</a></li>
          <li><a href='javascript [langue]opupCentrer("mail.php",550,450,"menubar=no,scrollbars=no,statusbar=no")'>Formulaire</a></li>
        </ul>
      </dd>
    </dl>
  </div>
  <div id="autre"> <a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.move-france.fr/');"> <img src="images/home.gif" alt="Page de démarrage" width="20" height="20" border="0" /></a> <a href="#" title="m.o.v.e France - SITE NON OFFICIEL" rel="sidebar" onclick="addToFavorites(this);return(false);"> <img src="images/favoris.gif" alt="Ajouter aux favoris" width="20" height="20" border="0" /></a></div>
  <div id="page"> </div>
  <div id="bas">
    <div id="basgauche">
      <div align="center">
        <object type="application/x-shockwave-flash" data="http://movefrance.chatango.com/group" width="300" height="340" id="obj_1221920555350">
          <param name="movie" value="http://movefrance.chatango.com/group">
          </param>
          <param name="wmode" value="transparent">
          </param>
          <param name="AllowScriptAccess" value="always">
          </param>
          <param name="AllowNetworking" value="all">
          </param>
          <param name="AllowFullScreen" value="true">
          </param>
          <param name="flashvars" value="cid=1221920555350&amp;a=000000&amp;b=100&amp;c=999999&amp;d=848484&amp;e=000000&amp;g=CCCCCC&amp;h=333333&amp;i=29&amp;j=CCCCCC&amp;k=666666&amp;l=333333&amp;m=000000&amp;n=CCCCCC&amp;s=1&amp;w=0">
          </param>
          <p>Il vous manque le plugin flash pour visionner l'animation.</p>
        </object>
      </div>
    </div>
    <div id="bascentre">
      <h6 align="center">
        <?php $fichier = 'compteur';
if( !file_exists($fichier) ) {
$fp = fopen($fichier, "w");
fwrite($fp, serialize(array()));
fclose($fp);
}
$argument_visites = 'visites';
$argument_requêtes = 'requêtes';
$ip = $_SERVER['REMOTE_ADDR'];
$time = date('YmdGis');
$lignes = file($fichier);
$donnees = unserialize($lignes[0]);
foreach( $donnees as $cle => $valeur )
{
if( substr($valeur, 0, 8) != substr($time, 0, 8) &&
$cle != $argument_visites &&
$cle != $argument_requêtes ) {
unset($donnees[$cle]);
}
}
$donnees[$argument_requêtes]++;
if( !$donnees[$ip] ) {
$donnees[$argument_visites]++;
$donnees[$ip] = $time;
}
$nb_visiteurs = $donnees[$argument_visites];
$nb_aujourdhui = count($donnees)-2;
$nb_requêtes = $donnees[$argument_requêtes];
$fp = fopen($fichier,"w");
fwrite($fp, serialize($donnees));
fclose($fp);
echo $nb_visiteurs." visiteurs totals<br />";
echo $nb_aujourdhui." aujourd'hui<br />";
echo $nb_requêtes." connexions totales";
?>
        <br />
      </h6>
      <div id="xiti-logo" align="center">
        <script type="text/javascript">
<!--
document.write('<a href="http://www.xiti.com/xiti.asp?s=394313" title="WebAnalytics">');
Xt_param = 's=394313&p=index';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="80" height="15" border="0" ';
Xt_i += 'src="http://logv9.xiti.com/g.xiti?'+Xt_param;
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'"></a>');
//-->
</script>
        <noscript>
        <div id="xiti-logo-noscript" align="center"> <a href="http://www.xiti.com/xiti.asp?s=394313" title="WebAnalytics" >WebAnalytics solution by <img width="80" height="15" src="http://logv9.xiti.com/g.xiti?s=394313&amp;p=index&amp;" alt="WebAnalytics" /></a></div>
        </noscript>
      </div>
      <h6 align="center"> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Felectropica.free.fr%2F" target="_blank"> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" border="0" /> </a><a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Felectropica.free.fr%2F" target="_blank"><img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="CSS Valide !" /></a></h6>
      <p align="center"><a href="http://www.pagerank.fr/rapport-indexation.fr.html?uri=www.move-france.fr/" title="Mon PageRank" target="_blank"><img src="http://www.pagerank.fr/pagerank-actuel.gif?uri=www.move-france.fr/" style="border: none;" alt="PageRank Actuel"/></a></p>
      <p align="center"><img src="images/chart.png" width="120" alt="QRCode" /></p>
    </div>
    <div id="basdroite">
      <div align="center">
        <object type="application/x-shockwave-flash" data="http://media.imeem.com/pl/NIBoSvxLbo/autoShuffle=true/" width="300" height="340">
          <param name="movie" value="http://media.imeem.com/pl/NIBoSvxLbo/autoShuffle=true/">
          </param>
          <param name="wmode" value="transparent">
          </param>
          <param name="FlashVars" value="backColor=000000&amp;primaryColor=999999&amp;secondaryColor=4d4d4d&amp;linkColor=666666">
          </param>
          <p>Il vous manque le plugin flash pour visionner l'animation.</p>
        </object>
      </div>
    </div>
    <div id="copy">
      <h5 align="center"><span class="style1">
        <?php
$mtime = explode(' ', microtime());
$totaltime = $mtime[0] + $mtime[1] - $starttime;
printf('Page chargée en %.3f secondes.', $totaltime);
?>
        </span></h5>
      <h5 align="center"><span class="style1">&copy; 2008 - M.O.V.E France</span></h5>
      <h6 align="center">
        <!-- Script Régie Gratisdomaine.com -->
        <iframe name="gratisdomaine_print" src="http://ads.gratisdomaine.com/affiche.php?ident=3236333638&amp;v=2" width="468" height="60" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>
        <script type="text/javascript" src="http://tool.gratisdomaine.com/compteur/compteur_invisible.php?ident=3236333638&amp;v=2">
  </script>
        <br />
        <a href="http://www.referencement-2000.com/">agence référencement</a></h6>
    </div>
  </div>
</div>
</body>
</html>


Merci.

PS : je prend aussi les propositions pour améliorer le code global.
Modifié par electropica (28 Jan 2009 - 12:34)
electropica a écrit :
(désolé pour les choses inutiles)


Non, avec ton code dans cet état on ne peut pas t'aider, car tu nous ajoutes le travail préalable que tu étais censé faire. Donne-nous les éléments que tu juges nécessaires à la résolution de ton problème !
Alors il n'y a que ça...

Code CSS :

body {
	text-align: center;
	margin: 0;
}

#global {
	margin-left: auto;
	margin-right: auto;
	width: 1024px;
	text-align: left;
	position: relative;
}
#menu {
	position: absolute;
	top: 251px;
	width: 743px;
	right: auto;
	left: auto;
}


Code HTML :

<div id="global">
  <div id="menu">
blablabla
    </div>
</div>

Ça ne marche pas, ça centre le coté gauche du menu, pas le menu.


Euh... c'est peut-être moi mais j'ai rien compris.
Tu peux me mettre un screenshot de ce que tu as et une image de ce que tu veux ?
La même chose sur IE que sur firefox, un menu en position absolute centré (j'ai trouvé moi même pour firefox)
http://www.move-france.fr/
Ouvrez le avec firefox et dites moi comment centrer le menu sous IE car pour le moment je suis obligé d'aligner a gauche, place la position horizontale du menu moi même et cela en changeant le code source avec des echo PHP en fonction de l'explorateur car sinon mon menu n'est pas centré sous IE avec le même code qu'il l'est sous FF.

#global {
	margin-left: auto;
	margin-right: auto;
	width: 1024px;
	text-align: left;
	position: relative;
}
#menu {
	position: absolute;
	top: 251px;
	width: 743px;
	right: 0;
	left: 0;
	margin-left: auto;
	margin-right: auto;
}


Ce code la centre très bien sous firefox mais pas du tout sous IE.
Salut Electropica,

comme je te l'ai dit, il faut utiliser les marges négatives pour un bloc en absolute.
Mais il y a, il est vrai, une erreur dans ma précédente réponse.


	margin-left : -371px; /* width divise par 2 */
Sujet clos
Aller à