28172 sujets

CSS et mise en forme, CSS3

Positionnement css décalage de 3px avec Opera

Bonsoir à tous.
La page que je développe actuellement se postionne parfaitement sous Mozilla, IE7 et 8, Chrome et Safari mais j'ai un petit souci sous Opera :
Le menu situé en bas de page laisse apparaître une marge de 3 pixels en dessous.
J'ai consulté plusieurs forums mais je ne parviens pas à régler le problème.
La page est visible ici :http://www.cdesign-web.com/samuelle/data/actu.php

Voici le css :
@charset "utf-8";
/* CSS Document */

body 
	{
	background-color:#6B2B07;
	background-image:url(../../images/degrade.jpg);
	background-repeat:repeat-x;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	}
#paveleft
	{
	background-image:url(../../images/frame.png);
	background-repeat:no-repeat;
	position:absolute;
	bottom:400px;
	left:400px;
	margin:0;
	padding:10px;
	height:455px;
	min-height:455px;
	}
#actu
	{
	background-image:url(../../images/bgactu.jpg);
	background-repeat:no-repeat;
	margin:-314px auto 0 -503px;
	padding:0;
	height:628px;
	min-height:628px;
	width:1006px;
	position:absolute;
	top:50%;
	left:50%;
	}	
#footer
	{
	background-image:url(../../images/bgfoot.png);
	background-repeat:no-repeat;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	padding:0;
	margin:0;
	height:94px;
	min-height:94px;
	}


et le code html :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Actualité</title>
<link href="../system/css/style.css" rel="stylesheet" type="text/css" />
<?php include("../system/includes/headmenu.php") ?>
</head>

<body>
<div id="actu">
<div id="footer">
<img src="../images/facebook.png" alt="Facebook" />
<img src="../images/myspace.png" alt="MySpace" />
<?php include("../system/includes/bodymenu.php") ?>
</div>
</div>
</body>
</html>


Merci à ceux qui voudront bien me donner un petit coup de main !
Bonsoir,
Effectivement il y a 3 pixels (voir 4) en bas de ton menu. En bas de page tu as mis une include <?php include("../system/includes/bodymenu.php") ?> qui produit une fois générée : <a href="http://www.dhtml-menu-builder.com" style="display:none;visibility:hidden;">Blabalabla</a> le problème vient peut-être du fait que :

display: none => ça n'affiche rien, ça n'influence pas la mise en page (visuellement c'est comme ci ça n'existait pas)
visibility: hidden => ça n'affiche rien mais ça influe sur la mise en page, l'objet "hidden" est remplacé par un espace vide.

Il se peut que cette double volonté de masquer ton lien ne soit pas une bonne idée, ou soit mal perçue par Opera. Enlève l'indication visibility: hidden pour voir… parce que je ne vois rien d'autre de bizarre.

édit : en intervertissant l'ordre d'apparition "visibility:hidden;display:none;" ça pourrait peut être aussi corriger ce petit défaut. Mais le mieux à mon sens est de virer le "visbility".
L'ordre dans lequel on liste les indications est important :
<p style="color: blue;color: red">salut</p>

"salut" va (devrait) être de couleur rouge car la seconde indication élimine la première.
De même :
<p style="display:none;visibility:hidden;>j'ai vu l'homme invisible</p>

Au premier argument tu demandes que <p> n'existe pas et aussitôt après tu lui redonnes une sorte d'existence.

Enfin, tu me diras si ça marche, j'espère.
Modifié par Aureance (13 Dec 2009 - 01:26)
bonjour,

c'est clair cela fait peur , les 4px a coté ne sont pas mechants du tout Smiley smile .

Ce type de menu peut etre simplement monté avec une technique dite de "sprite css" , technique utilisé a la base dans les programmes et transposé au web.

Attention a ne pas rendre les menus muet non plus Smiley smile .

@font-face peut-etre une solution pour mettre les images en fond avec la technique des "sprites" tout en gardant le texte en dur dans le menus.

ah ! @font-face peut avoir une incidence positive sur l'accessibilté et les desirs des graphistes ...

GC
Sujet clos
Aller à