28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

j'ai un petit problème de rendu sous Opera. Grosso modo, j'ai créé un menu et plus bas, je lui insère deux images. Je m'exécute et je place la première. Puis je fais mes vérifications sous les différents navigateurs (FF3, Ie8, Safari, Chrome) et seul Opera me donne un rendu différent de ma page... L'image sort du bloc où se trouve le menu et j'ai franchement pas d'idées pour remédier au problème (car seul Opera me fait des siennes). Pour placer l'image, j'avais utilisé un margin-top avec une valeur en pixel alliés à un margin-left avec de nouveau une valeur en pixel.

Bref, je vous donne le code xHtml du menu plus la feuille de style qui lui est associé (un brin bordélique je le conçois) au cas où cela peut aider quelqu'un.

 
<div id="contenu">

<div class="conteneur1">
                
                  <div class="bandeau"></div>
                  
                  	<div class="bonhomme_menu"></div>
                    
                        <div class="separation"></div>
                        
                            <ul class="menu">
                            <li class="menu_selection"><a href="#">Avancement</a></li>
                            <li class="menu_selection"><a href="#">Le Studio : Un projet</a></li>
                            <li class="menu_selection"><a href="#">A propos de moi</a></li>
                            <li class="menu_selection"><a href="#">Copyright</a></li>
                            <li class="menu_selection"><a href="#">F.A.Q.</a></li>
                            <li class="menu_selection"><a href="#">Si vous voulez m'aider</a></li>
                            <li>S'inscrire au Flux Rss :</li>
                            </ul>
                         
                                <div class="flux_twitter"></div>
                                
                                <div class="flux_rss"></div>
                               
                </div>

</div>




#contenu .conteneur1
{	
	background:url(images/fond-menu.png) repeat-x #282420;
	width:190px;
	height:690px;
	border-top:#7b7875 1px solid;
	margin-bottom:80px;
}	

#contenu .conteneur1 ul.menu a
{
	text-decoration:none;
	color:#988e84;
}	

#contenu .conteneur1 ul.menu a:hover
{
	text-decoration:none;
}	

#contenu .conteneur1 ul.menu
{
	list-style-type:none;
	list-style-position:outside;
	margin-left:10px;
	margin-top:120px;
}		

#contenu .conteneur1 ul.menu li 
{
	font-family:Arial;
	font-weight:bold;
	line-height:59px;
	font-size:small;
	color:#988e84;
	height:58px;
	width:179px;
	float:right;
	margin-bottom:10px;
	display:block;
}	

#contenu .conteneur1 ul li.menu_selection:hover
{
	background:url(images/menu-hover.png) no-repeat;
	text-indent:18px;
}	 

.conteneur1 .bandeau
{
	background:url(images/bandeau-menu.png) no-repeat;
	left:79px;
	top:193px;
	height:114px;
	width:118px;
	position:absolute;
}	
	
#contenu .conteneur1 .separation
{
	height:0px;
	width:150px;
	border-top:1px solid #62584e;
	border-bottom:1px solid #4a443c;
	position:absolute;
	left:20px;
	top:310px;
}	

#contenu .conteneur1 .bonhomme_menu
{
	background:url(images/bonhomme-menu.png) no-repeat;
	height:100px;
	width:74px;
	position:absolute;
	left:30px;
	top:205px;
}	

.flux_twitter
{
	background:url(images/flux-twitter.png) no-repeat;
	height:48px;
	width:40px;
	margin-top:590px;
}
Bonjour,

Le positionnement absolu est'il vraiment nécessaire dans ce menu ?

Pour les image, elle devraient peut-être se trouver dans le code HTML (car, je suppose qu'elle serviront de lien).
Oui c'est cela, mais je souhaiterai y mettre un effet avec la pseudo classe :hover. Pour le positionnement absolue, oui c'est nécessaire (le bandeau pour lequel je suis un peu obligé de sortir du flux pour qu'il se fixe au bord haut et droit du menu... Si je commence à jouer avec les marges j'ai peur que cela décale un peu le contenu n'importe comment).

De toute manière, j'ai déjà fait cette opération pour ma barre de navigation (c'est à dire ajouter les images via le Css en y mettant un lien dans le code html, après si c'est une bonne pratique, j'en ai aucune idée)... Il y a un moyen de faire autrement ? (on ne peut pas dire que je suis le meilleur en Css, loin de là même...).

Pour le lien de la page (pour voir un peu à quoi ça ressemble c'est >> ici << histoire de te faire une idée).