28173 sujets

CSS et mise en forme, CSS3

Positionn. image en bkg de bannnière sur FF - RESOLU

Bonjour,
Je n'ai pas trouvé sur le site de remède à mon problème :
Voici ce qui apparaît sur FF : upload/451-kashheader.gif , soit un décalage de l'image vers le bas. Il s'agit de la bannière
Voici le code CSS concerné : 
/* CSS Document */
{margin:0;padding:0}
body {
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	left: 0px;
	top: 0px;
}

div#outer {
	width: 900px;
	border: medium solid #49356A;
	margin: 5px auto;
	color: #000066;

}

div#header {
	text-align: center;
	background: url(../kashmir/images/header2.jpg) no-repeat; 100% 0 no repeat 
	width: 900px;

}

Voici aussi la partie concernée du code html : 
<body>
<div id="outer"> 
  <div id="header">
    <h2 align="right">AIDE AU CACHEMIRE</h2>
    <h5 align="right" class="Style1">S&eacute;isme
      du 8 octobre 2005 </h5>
    <h4 align="right" class="Style1 Style2">Délégation parlementaire
	  et humanitaire
	  de 4 d&eacute;put&eacute;s bruxellois </h4>
	<h4 align="right" class="Style3">au Cachemire pakistanais</h4>
	<h5 align="right" class="Style3">du 25 au 30 novembre
    2005 </h5> 
	<br />
  </div>
Comment faire pour éviter ce décalage inesthétique ?
Un grand merci à qui pourra m'aider
Modifié par vivi (10 Dec 2005 - 08:54)
essaie de rajouter * devant {margin: 0;padding: 0} par ce que la, il manque un sélécteur...
*
{
    margin: 0;
    padding: 0;
}


EDIT :

il y a aussi une erreur dans cette ligne :
background: url(../kashmir/images/header2.jpg) no-repeat; 100% 0 no repeat
Un conseil : fait valider tes css, ca peut réduire le nombre de bugs
Modifié par the_penguin (04 Dec 2005 - 13:44)
Merci, Penguin, pour les conseils. Voici les résultats :

1/ l'ajout d'un * a provoqué un effet inattendu : l'image a été réduite de moitié dans le sens de la hauteur; de même pour le "div main" qui a rétréci et auquel une barre de défilement verticale est venue s'ajouter.
2/ J'ai corrigé l'erreur dans le background : c'est : 
background: url(../kashmir/images/header2.jpg) 100% 0 no-repeat;

3/ Validation css : oubli d'un " ;" dans le "div main" - suppression de l'unité px dans le padding-top (0 au lieu de 0 px) MAIS aucune erreur dans le "div header" !
4/ Erreur signalée :
a écrit :
Line: 3
Parse error - Unrecognized : { margin:0;padding:0}
Il s'agit pourtant d'une recommandation que j'ai vue souvent ( Smiley confus
5/ Validation html : pas d'erreur.
Bref, maintenant tout est conforme mais mon problème d'image dans la bannière demeure.
La cause doit être ailleurs.
Modifié par vivi (04 Dec 2005 - 15:41)
Bonjour,

Si l'ajout de l'étoile avec ses attributs ont causé un "effet inatendu" c'est maintenant que tu vas pouvoir corriger cela en prenant chacun de tes éléments css et ajouter des attributs de taille, de padding, de marge… pour retrouver ce dont tu cherches à faire. Ainsi tu seras sûr de ton résultat. Pourquoi ? Parce que certaines balises html possèdent des attributs types différents selon les navigateurs.

Bon courage.
Merci zzzazzz.
Je vais donc reprendre le problème à zéro.
J'aimerais comprendre le rôle de l'astérisque : s'agit-il d'un "truc" pour annuler les attributs css existants (ou certains seulement) ?
C'est la première fois que j'en entends parler.
Bonjour,

L'astérisque comme pour de nombreuses applications signifie "tout". Une recherche dans windows avec "*.exe" comme critère te sortira tous les .exe. Sur Google par exemple l'astérisque signifie ceci également. Exemple : "La ville de * est la plus belle du monde". Le résultat est toujours surprenant Smiley cligne
Google et son astérisque
Merci zzzazzz.
Très intéressant ! J'ai testé et c'est parfois étonnant.

Cependant, en matière de CSS, ça ne m'explique pas pourquoi le fait d'ajouter un * annule certains attributs. Smiley confus .
J'ai trouvé la cause du décalage de l'image en background.
Il s'agissait tout simplement d'une erreur de code html : j'avais introduit un <br> après la dernière ligne du texte.
Smiley confused
Sujet clos
Aller à