28172 sujets

CSS et mise en forme, CSS3

Onglets ne suivant pas les redimensionnements sous IE

Bonjour,
Je suis toujours sur le même site et j'ai encore et toujours des problemes Smiley confus . Là, je pense qu'il s'agit de mon code css, comme vous pouvez le voir dans ce lien. Je ne comprend pas pourquoi mon menu (en rouge) ne se met pas au dessous de mon logo et du titre?
J'ai bien essayé avec clear: both, mais sous IE, il y a un énorme décalage de plusieurs pixels entre les deux div par la suite.

Si vous avez une idée, je suis preneur. Smiley decu
Modifié par mackean (24 Sep 2008 - 16:17)
Bon, j'ai contourné le probleme de la balise DIV. Mais maintenant, mon plus gros soucis c'est que mes onglets ne suivent pas le redimensionement sous IE, il sont fixes Smiley bawling .
voici le lien: lien.

et voici le code:

<body>
<div id="all">
<div id="hautdepage"></div>

<div id="menu1">
<ul id="menu">
	<li><a href="#" class="news"><span></span></a></li>
  <li><a href="#" class="portfolio"><span></span></a></li>
    <li><a href="#" class="services"><span></span></a></li>
    <li><a href="#" class="contact"><span></span></a></li>    
</ul>
</div>

 </div>

</body>


body
{
   width: 980px;
   margin: auto;
   margin-top:0px;
   background:url(images/fond.png) repeat-x;
}

#all{
width:980px;
}

#hautdepage{
background:url(images/accueiltest2.png) no-repeat center;
background-position:50px;
width:980px;
height:89px;
}

#menu{
margin-top:0px;
width:980px;
padding-left:304px;
}

ul#menu{
background:url(images/fond_menu.png) no-repeat;
width:980px;
height:36px;
list-style:none;
}

ul#menu li {
float:left;

}

ul#menu li a {
background:url(images/onglets.png) no-repeat scroll top left;
height:36px;
display:block;
position:relative;
}

ul#menu li a.news {
width:89px;
}

ul#menu li a.portfolio {
width:87px;
background-position:-89px 0px;
}

ul#menu li a.services {
width:87px;
background-position:-176px 0px;
}

ul#menu li a.contact {
width:87px;
background-position:-263px 0px;
}

ul#menu li a span {
background:url(images/onglets.png) no-repeat scroll bottom left;
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:100;
}

ul#menu li a.news span {
background-position:0px -36px;
}

ul#menu li a.portfolio span {
background-position:-89px -36px;
}

ul#menu li a.services span {
background-position:-176px -36px;
}

ul#menu li a.contact span {
background-position:-263px -36px;
}


une idée? Smiley decu
Bonjour,

Ne pas utiliser l'élément BODY pour donner une largeur à un site et pour centrer le contenu avec les marges automatiques. L'élément BODY est traité comme un élément à part par la plupart des navigateurs, avec des conséquences plus ou moins importantes selon les navigateurs.

Tu as un div#all sous la main, autant l'utiliser.
je pense que cela vient du padding que j'ai mis au menu. Mon soucis est que je ne sais pas comment centrer mon menu (id=menu ou mes puces li). dans mon code qui suit mes puces sont collées a gauches.


<body>
<div id="all">

<div id="hautdepage"></div>


<div id="menu">
<LI><A class=news href="#"><SPAN></SPAN></A></LI>
<LI><A class=portfolio href="#"><SPAN></SPAN></A></LI>
<LI><A class=services href="#"><SPAN></SPAN></A></LI>
<LI><A class=contact href="#"><SPAN></SPAN></A></LI>
</div>




</div>
</body>



body{
margin:0;
background:url(images/fond.png) repeat-x;
}

A:active {
	outline: none
}
A:focus {
	-moz-outline-style: none
}

#all{
margin:0 auto;
width:980px;}

#hautdepage{
background:url(images/baniere.png) no-repeat center;
width:980px;
height:89px;}

div#menu{
background:url(images/fond_menu.png) no-repeat;
height:36px;
width:980px;
list-style-type:none;}

li{
list-style-type:none;}

div#menu li {
	float: left;
}

div#menu li a{
display:block;
background:url(images/onglets.png) no-repeat;
height:36px;}


div#menu li a.news{
width:89px;}
Sujet clos
Aller à