28173 sujets

CSS et mise en forme, CSS3

Decalage vertical sous swf

Bonjour à tous.
Je suis en train d'essayer de faire un site full css.

Je rencontre cependant un premier soucis de décalage.
Voici deja l'adresse du site: http://www.fansyl.fr/homepage/index.php

Je vous explique mon code avant de le poster.

J'ai un div principal qui permet à mon site d'avoir une largeur fixe et un filet blanc sur les coters.
A l'interieur de cette premiere Div j'ai creer une autre div header.
Dans cette div j'ais 2 images, un swf, 3 liens et un futur menu.

Pour tester l'emplacement de mon menu qui doit etre coller juste en dessous de mon swf j'ai mis un br suite a mon appel swf, et j'ai creer une balise paragraphe que j'ai passer en inline.

Malheureusement j'ai un decalage sous mozilla pouriez vous m'expliquer?
Merci par avance.

Voila mon code xhtml:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="../css/commun.css"  type="text/css" />
<title>FANSYL</title>
</head>
<body>
<!--Bloc conteneur-->
<div id="fond_blanc">
<!--Bloc header-->
<div id="header">
<a href="index.php"><img src="../images/general/logo.jpg" alt="Logo" class="logo" /></a>
<img src="../images/general/accroche.jpg" alt="accroche" class="logo" />
<img src="../images/general/swf.jpg" alt="swf" /><br />
<p>fdsfdsfskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
</div>
</div>
</body>
</html>


Et mon code css
/*Général*/

body{
	background-image: url(../images/general/fond.jpg);
	margin: 0px;
	padding: 0px;
}

img{
	border: none;
}

#fond_blanc{
	margin-left: auto;
	margin-right: auto;
	width: 816px;
	height:300px;
	background-color: #FFFFFF;
}

/*Header*/

#header{
	width: 778px;
	margin-left: auto;
    margin-right: auto;
}

.logo{
	margin-top:28px;
	display: block;
	float: left;
}

p{
margin-top:0px;
width:100%;
height:20px;
display:inline;	
background-color:#990000;
}


Je tiens a preciser que sous ie j'ais le rendu voulu.

merci par avance

p{
margin-top:[#red]-5px[/#];
width:100%;
height:20px;
display:inline; [#red]à supprimer[/#]	
background-color:#990000;
}

Supprimes également le saut de ligne.
Tu auras a priori le même rendu sous IE6 et 7 et Firefox...

Je n'ai pas très bien compris ce que tu souhaitais faire, mais je suis persuadé que tu reviendras nous voir une fois que tu auras avancé sur ton projet ?!... Smiley cligne
Ba en fait le p moche c'etai un test pour voir si j'aurai un decalage avec mon menu qui serra de meme type (bloc).

Peux tu m'expliquer cette histoire de -5px stp?

Pourquoi firefox ne respecte pas le margin-top a 0?

A la base j'ai transformer le bloc en inline pour eviter le saut de ligne pourquoi ma theorie ne s'est pas appliquer sous firefox?

Merci beaucoup en tous cas de ta reponse.
Voici une méthodologie plus rigoureuse que celle que j'ai mis en oeuvre pour "résoudre" ton problème de positionnement css :
Un peu de lecture ?
Et puis ceci également Smiley cligne

Si un spécialiste vient à passer par ici, tu auras sans doute une explication plus technique à ton problème, quoiqu'il en soit, il faudra que tu y mettes également du tien, ne serait-ce que dans l'effort que tu voudras bien faire concernant l'écriture de tes messages par respect pour les personnes qui ne pourront qu'entendre les mots que tu écris Smiley cligne mais également en te documentant ( tu es au bon endroit !!! ) sur les standards du web, par exemple pour la déclaration de tes images:
a écrit :
Il est obligatoire d'indiquer une description de votre image, en guise de texte alternatif pour les navigateurs texte, ou si pour une raison quelconque l'image ne peut pas être téléchargée ; le texte alternatif sert, en particulier, pour les non-voyants qui disposent de logiciels pour lire du texte à haute voix, mais n'ont rien pour décrire des images. Ce texte doit être court et informatif. On l'indique avec l'attribut alt, si l'image ne joue aucun rôle sémantique (c'est-à-dire si elle n'est là que pour décorer), on indique alt="".

"accroche" ou "swf" ce n'est pas très parlant pour un navigateur texte, et si tes images sont indisponibles, voilà à quoi va ressembler ton site :

upload/12813-fansyl.jpg

Bref, inspires-toi de ce qui ce fait par ici (standard, accessibilité,etc...) ça ne pourra que t'aider Smiley cligne
Sujet clos
Aller à