28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Encore un problème sans doute basique, mais qui résiste à toute tentative de résolution : sur cette page ( http://www.k-pi.com/v3/galerie.php?choix=cars-bikes&selected=cars ), sous Firefox, subsiste un décalage de 1 pixel entre le fond du contenu et l'image juste au-dessus du footer.

Vous pouvez trouver la feuille CSS ici : http://www.k-pi.com/v3/styles.css (je peux aussi poster la feuille CSs si besoin est, mais ça fait pas mal de lignes quand même).

Je suis preneur de toute solution possible Smiley smile
Merci d'avance.
Modifié par PotatoezJunky (06 Mar 2005 - 00:26)
juste pour te signaler qu'une balise IMG est du tyle INLINE Smiley lol dont il réagit en tant que tel avec une marge. Essaye de le transformer en BLOCK :

display: block;
Anthony, merci, c'est corrigé (mais ça ne résoud pas le problème, hélas).

Julien L a écrit :
http://forum.alsacreations.com/topic.php?fid=1&tid=2241&p=1

Merci également, Julien L, mais le lien que tu me donnes fournit une solution pour IE... or c'est sous Firefox que j'ai cet espace gênant Smiley cligne
C'est peut-être en fin de page ton <div> dans un <p> qui ne convient pas à Firefox.

Si tu pouvais passer ta page au Validator W3C avant de la soumettre... Avec une page non valide tu peux t'attendre à des perturbations d'un navigateur à l'autre.
nadya a écrit :
C'est peut-être en fin de page ton <div> dans un <p> qui ne convient pas à Firefox.

>>> ??? En fin de page, y a pas de <div> dans un <p>, du moins, pas au niveau de la perturbation constatée :
</div>
  	<img class="image" src="design-californie/bas-photos-californie.jpg" width="760" height="19" alt="Photos de Californie, paysages, villes, véhicules et autres photos des USA." /> 
  <div id="pied">&copy;K-Pi 2003-2005 - Conception &amp; r&eacute;alisation : 
    <a href="http://www.grafimages.com" target="_blank">Grafimages</a> - Tous 
    droits r&eacute;serv&eacute;s.</div>
</div>
</body>
</html>


nadya a écrit :
Si tu pouvais passer ta page au Validator W3C avant de la soumettre... Avec une page non valide tu peux t'attendre à des perturbations d'un navigateur à l'autre.

>>> C'est vrai, et je vais le faire, mais je subodore un problème CSS relativement simple, mais pour moi insasissable, zsuis pas certain que ça soit un problème de validité du code Smiley cligne
Juste au dessus :

<p>
	  <div class="flottante"><a href="details.php?photo=http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/motos-bikes-001.jpg&selected=cars"><img src="http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/vignettes/motos-bikes-001.jpg" border="0"></a></div><div class="flottante"><a href="details.php?photo=http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/motos-bikes-002.jpg&selected=cars"><img src="http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/vignettes/motos-bikes-002.jpg" border="0"></a></div><div class="flottante"><a href="details.php?photo=http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/motos-bikes-003.jpg&selected=cars"><img src="http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/vignettes/motos-bikes-003.jpg" border="0"></a></div><div class="flottante"><a href="details.php?photo=http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/motos-bikes-004.jpg&selected=cars"><img src="http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/vignettes/motos-bikes-004.jpg" border="0"></a></div><div class="flottante"><a href="details.php?photo=http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/motos-bikes-005.jpg&selected=cars"><img src="http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/vignettes/motos-bikes-005.jpg" border="0"></a></div><div class="flottante"><a href="details.php?photo=http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/motos-bikes-006.jpg&selected=cars"><img src="http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/vignettes/motos-bikes-006.jpg" border="0"></a></div><div class="flottante"><a href="details.php?photo=http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/motos-bikes-007.jpg&selected=cars"><img src="http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/vignettes/motos-bikes-007.jpg" border="0"></a></div><div class="flottante"><a href="details.php?photo=http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/motos-bikes-008.jpg&selected=cars"><img src="http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/vignettes/motos-bikes-008.jpg" border="0"></a></div><div class="flottante"><a href="details.php?photo=http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/motos-bikes-009.jpg&selected=cars"><img src="http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/vignettes/motos-bikes-009.jpg" border="0"></a></div><div class="flottante"><a href="details.php?photo=http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/motos-bikes-010.jpg&selected=cars"><img src="http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/vignettes/motos-bikes-010.jpg" border="0"></a></div><div class="flottante"><a href="details.php?photo=http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/motos-bikes-011.jpg&selected=cars"><img src="http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/vignettes/motos-bikes-011.jpg" border="0"></a></div><div class="flottante"><a href="details.php?photo=http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/motos-bikes-012.jpg&selected=cars"><img src="http://www.photosdecalifornie.com/photos-de-californie/cars-bikes/vignettes/motos-bikes-012.jpg" border="0"></a></div>	
	  </p>
bonjour,

j'ai lu ce post et celui la: http://forum.alsacreations.com/topic.php?fid=4&tid=2285

j'ai moi aussi une marge sous mon image du header (qui en genre de bannière) mon image est encadrée par une bordure fine mais dans le bas de l'image il y a un espace entre la bordure du bas et l'image

lorsqu'on utilise
img {
  display: block;
}


c'est dans le css mais ds la page html que doit on mettre comme code
la ou il y a l'image ? moi j'ai en ce moment:

 <div id="contenu">

<div id="header">
<img src="header2.jpg" alt="Kh-W">


     </div>

           <div id="haut">
           <ul class="menuhaut">

<li><a href="index.html.html">Accueil</a> :: </li>
<li><a href="fondecran.html">Fonds d'écran</a> :: </li>

</ul>


Merci pour votre aide
c'est ok j'ai trouvé le moyen pour la marge. il me semble que cela venait des code html.
donc j'ai fait comme ça

CSS:
#header { 
padding:110px; 
margin-top: 0; 
border: 1px solid #000000; 
background-image: url(image.jpg);
background-repeat: no-repeat;
display: block;}


et en HTML:
<div id="header">
     </div>


sans plus, ça peut aller maintenant c'est plus joli qu'avant!!