28172 sujets

CSS et mise en forme, CSS3

Positionnement d'un menu dans opera

j'ai un petit souci de positionnement d'un menu qui s'affiche correctement dans ie 6 et 8 (j'ai pas pu tester sur le 7), dans chrome, dans firefox 2 et 3 mais pas dans opera (testé sur la 9 et la 10 : même pb)

j'ai un header dans lequel j'ai deux menu (un au dessus de la baderole qui sert de logo à l'entreprise et un en dessous)
j'utilise exactement la même méthode de positionnement pour les deux menus : celui du haut est correctement positionné et celui du bas est décalé d'environ 10/15 pixel vers le bas

pour placer les boutons j'utilise un margin-top: aaapx;
si je change et utilise un top: bbbpx; cela résoud le problème dans opéra mais se pose de nouveau ... dans ie6 !!!
vu qu'a mon avis il y a plus d'utilisateur d'ie6 que d'opéra j'ai laissé les marges
mais tant qu'a faire j'aimerai autant que tout soit parfait partout

donc si vous avez une idée, si vous voyez une erreur qui m'aurai echappée



ci dessous les code html et css (dans cet ordre Smiley cligne :


<!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" lang="fr">
 
	<head>
		<title>comité d'entreprise</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" media="screen, projection" type="text/css" id="css" href="style.css" />
            
         
 
<script type="text/javascript"> 
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
 
	</head>
 
<body onload="MM_preloadImages('img/B_agenda_off.png','img/B_agenda_on.png','img/B_billeterie_off.png','img/B_billeterie_on.png','img/B_ce_off.png','img/B_ce_on.png','img/B_contact_off.png','img/B_contact_on.png','img/B_infos_off.png','img/B_infos_on.png','img/B_jeunesse_off.png','img/B_jeunesse_on.png','img/B_jeunesse_off.png','img/B_jeunesse_on.png','img/B_location_off.png','img/B_location_on.png','img/B_photos_off.png','img/B_photos_on.png','img/B_sport_off.png','img/B_sport_on.png','img/B_vacances_off.png','img/B_vacances_on.png')">
 
<div id="page">

	<div id="header">
	
		
			<ul id="menu_header_haut" class="premier_menu">
 				<li id="itemA"><a href="">Photos</a></li>
				<li id="itemB"><a href="">Infos</a></li>
				<li id="itemC"><a href="">Agenda</a></li>
				<li id="itemD"><a href="">Contact</a></li>
			</ul>
	
		
	
		
		
			<ul id="menu_header_bas" class="second_menu">
 				<li id="itemE"><a href="">Sports<br />&amp;<br />Loisirs</a></li>
				<li id="itemF"><a href="">Jeunesse</a></li>
				<li id="itemG"><a href="">Vacances</a></li>
				<li id="itemH"><a href="">Billeterie<br />&amp;<br />Tarifs</a></li>
				<li id="itemI"><a href="">Location</a></li>
				<li id="itemJ"><a href="">Le Comité<br />d'entreprise</a></li>
			</ul>
	
	
	
	</div> <!-- /header -->
	
    <div id="milieu">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur bibendum sodales, augue velit cursus nunc, 
    </p>
    
   
    
    </div> <!-- /milieu -->
    
    <div id="footer">
    </div> <!-- /footer -->
	
 </div> <!-- /page -->

 </body>










body {
padding: 0;
margin: 0;
border:none;
}


#page {
position: relative;
width: 948px;
margin: 0 auto;
padding: :0;
margin-top: 10px;
border-style:solid;
border-width: 1px;
border-color: rgb(254,192,7);
}

#header {
margin: 0;
padding: 0;
height: 309px;
width: 948px;
background-image:url(img/header.png);
}





/* ****************************PREMIER MENU*********************************************** */

ul#menu_header_haut {
list-style-type: none;
}

ul#menu_header_haut li {

}

ul#menu_header_haut a {
display:block;
margin: 0;
width:110px;
height:30px;
padding-top:10px;
text-align: center;
text-decoration: none;
color: rgb(170,214,217);
font-family:Arial, Helvetica, sans-serif;
font-size: 0;
}

ul#menu_header_haut a:hover {
color: rgb(170,214,217);
}



#itemA { 
position: absolute;
padding-top: 33px;
left:275px;
width:110px;
}

#itemA a {
background-image:url(img/B_photos_off.png);
}

#itemA a:hover {
background-image:url(img/B_photos_on.png);
}


#itemB { 
position: absolute;
padding-top: 33px;
left:392px;
width:110px;
}

#itemB a {
background-image:url(img/B_infos_off.png);
}

#itemB a:hover {
background-image:url(img/B_infos_on.png);
}


#itemC { 
position: absolute;
padding-top: 33px;
left:508px;
width:110px;
}

#itemC a {
background-image:url(img/B_agenda_off.png);
}

#itemC a:hover {
background-image:url(img/B_agenda_on.png);
}


#itemD{ 
position: absolute;
padding-top: 33px;
left:625px;
width:110px;
}

#itemD a {
background-image:url(img/B_contact_off.png);
}

#itemD a:hover {
background-image:url(img/B_contact_on.png);
}


/* ****************************SECOND MENU*********************************************** */

ul#menu_header_bas {
list-style-type: none;
margin: 0;
padding: 0;
}

ul#menu_header_bas li {
}

ul#menu_header_bas a {
display:block;
margin: 0;
width:103px;
height:63px;
text-align: center;
text-decoration: none;
color: rgb(170,214,217);
font-family:Arial, Helvetica, sans-serif;
font-size: 0;
}

ul#menu_header_bas a:hover {
color: rgb(170,214,217);
}



#itemE { 
position: absolute;
margin-top: 219px;
left:182px;
width:103px;
}

#itemE a {
background-image:url(img/B_sport_off.png);
}

#itemE a:hover {
background-image:url(img/B_sport_on.png);
}


#itemF { 
position: absolute;
margin-top: 219px;
left:290px;
width:103px;
}

#itemF a {
background-image:url(img/B_jeunesse_off.png);
}

#itemF a:hover {
background-image:url(img/B_jeunesse_on.png);
}


#itemG { 
position: absolute;
margin-top: 219px;
left:396px;
width:103px;
}

#itemG a {
background-image:url(img/B_vacances_off.png);
}

#itemG a:hover {
background-image:url(img/B_vacances_on.png);
}


#itemH{ 
position: absolute;
margin-top: 219px;
left:503px;
width:103px;
}

#itemH a {
background-image:url(img/B_billeterie_off.png);
}

#itemH a:hover {
background-image:url(img/B_billeterie_on.png);
}


#itemI{ 
position: absolute;
margin-top: 219px;
left:609px;
width:103px;
}

#itemI a {
background-image:url(img/B_location_off.png);
}

#itemI a:hover {
background-image:url(img/B_location_on.png);
}


#itemJ{ 
position: absolute;
margin-top: 219px;
left:716px;
width:103px;
}

#itemJ a {
background-image:url(img/B_ce_off.png);
}

#itemJ a:hover {
background-image:url(img/B_ce_on.png);
}


/* ******************************* milieu ******************************* */

#milieu {
margin: 0;
padding: 0;
width:948px;
}

#milieu p {
margin: 5px;
padding: 5px;
}

/* ******************************* footer ******************************* */

#footer {
margin: 0;
padding: 0;
width:948px;
height:106px;
background-image:url(img/footer.png);
}
[/i][/i][/i][/i][/i][/i]
oui je sais
font-size: 0;
bug dans chrome et ie6
je cherche aussi à resoudre ce problème "proprement"

(la version "sale" que j'ai en vue pour l'instant étant de donner au texte la même couleur que le bouton...)
Modifié par scott54 (26 Jan 2010 - 21:41)
Sujet clos
Aller à