FORUM MP | Xhtml/Css : Pb d'espaces entre Div avec images

COMMUNAUTE MP

Identifiez vous ...

DOMAINE MP

Bavardages

Langages Généraux

Langages Web

Langages DotNet

Autres langages

Dev. Jeux Video

Sécurité

Sys. Exploitation

Graphismes

Logiciels

Réseaux

Bases de données

Méthodologies

Emplois High-tech

Aide juridique

Articles juridiques

FORUM

CHAT MP IRC

Votre pseudo ...

Serv: irc.irc-land.org

Chan: #MoteurProg

PARTICIPER

Plus de 3500 emplois.

Visiteur MP

Pb d'espaces entre Div avec images
	Forum : XHTML/CSS Sous Catégorie : Aucune Type du sujet : Sujet Normale FAQ : FAQ XHTML/CSS
		SUIVI PAR MAIL INACTIF
		SUJET NON RESOLU
		SUJET ACTIF
		N'APPARTIENT PAS A LA FAQ

FORUM XHTML/CSS
	Page précedente	Page suivante

kiouz
Nouveau membre

Inscrit : 04/01/2007
Messages : 2

#138459 Posté le 16/07/07 à 14:46

Bonjour

Je ne vous cache pas que vous êtes ici ma dernière chance car j'ai beau parcourir le Net, rien ne marche

J'ai créé un gabarit de site sous Photoshop. J'ai exporté les images et rebidouillé les div générés par Toshop car c'était tout mis en absolute (je veux mon site centré).

J'ai placé 3 div horizontaux avec mes images dedans. Le problème est que j'ai des espaces entre ces lignes d'images ...

J'ai tout essayé :

- display:block; au niveau de ces div (toutes mes images se retrouvent alors à la verticale ...)
- vertical-align: middle; (ca ne change rien)
- définir une height dans ces div qui correspond à la taille des images. (rien non plus)
- mettre chaque image dans un div ou un span. (rajoute un espace entre chaque image d'une ligne ...)
- des <br /> en fin de div (avec ou sans, ca revient au même)

Mon code marche en Transitional mais dès que je passe en Strict, les lignes d'espace vide apparaissent ...Et c'est même Firefox qui affiche mal, IE trouve ca tout à fait correct

Voici la partie de XHTML et la CSS qui correspond :

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Site</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body background="images/FondSite.png"> <div id="divGeneral"> <div class="divLignes"> <a href="index.php"><img src="images/imageSite_01.jpg" width="169" height="133" alt="" /></a><img src="images/imageSite_02.jpg" width="655" height="133" alt="" /><img src="images/imageSite_03.jpg" width="127" height="133" alt="" /><br /> </div> <div class="divLignes"> <img src="images/imageSite_04.jpg" width="169" height="82" alt="" /><img src="images/imageSite_05.jpg" width="30" height="82" alt="" /><a href="index.php"><img src="images/imageSite_06.jpg" width="70" height="82" alt="Accueil" /></a><img src="images/imageSite_07.jpg" width="52" height="82" alt="" /><a href="index.php?page=services"><img src="images/imageSite_08.jpg" width="71" height="82" alt="Services" /></a><img src="images/imageSite_09.jpg" width="45" height="82" alt="" /><a href="index.php?page=realisations"><img src="images/imageSite_10.jpg" width="97" height="82" alt="Réalisations" /></a><img src="images/imageSite_11.jpg" width="46" height="82" alt="" /><a href="index.php?page=contact"><img src="images/imageSite_12.jpg" width="74" height="82" alt="Contact" /></a><img src="images/imageSite_13.jpg" width="26" height="82" alt="" /><a href="index.php?page=client"><img src="images/imageSite_14.jpg" width="121" height="82" alt="Espace Client" /></a><img src="images/imageSite_15.jpg" width="23" height="82" alt="" /><img src="images/imageSite_16.jpg" width="127" height="82" alt="" /><br /> </div> <div class="divLignes"> <img src="images/imageSite_17.jpg" width="169" height="81" alt="" /><img src="images/imageSite_18.jpg" width="655" height="81" alt="" /><img src="images/imageSite_19.jpg" width="127" height="81" alt="" /><br /> </div> </div> </body> </html>

body{ margin:0px; padding:0px; width:100%; font-family:Verdana, Arial, Helvetica, sans-serif; color:#ffffff; font-size:11px; background-color: #14a5d5; /*background-image: url("../images/FondSite.png")*/ background-repeat:repeat-x; } /* Structure */ #divGeneral { margin-left: auto; margin-right: auto; width:951px; height:650px; } #divLignes { display: block; vertical-align: middle; } #contenu{ width:79%; float:left; } #basCentre{ float:left; } #cadre{ width:18%; background-image: url(../images/cadre.jpg); background-repeat:no-repeat; float:right; line-height:20px; padding:10px; margin-top:250px; }

Merci pour votre aide car le site doit être rapidement mis en ligne et je désepère un peu

HAUT DE PAGE

Publicité

Inscrit : X
Messages : X

#Aucun

HAUT DE PAGE

BertProd
Membre MP

Inscrit : 07/06/2006
Messages : 161

#138466 Posté le 16/07/07 à 16:48

Salut,

Je suis pas expert en XHTML/CSS mais voici ce que je ferais :

.divLignes { margin: 0; border : 0; }

Explications :

Il me semble qu'il faut mettre un point "." devant divLignes et pas un "#" car c'est une class CSS non unique ...

display: block; <<< c'est pas utile puisque les div sont par défaut des blocks
vertical-align: middle; <<< ça c'est pour les tableaux donc pas utile non plus

margin: 0; <<< permet de supprimer toutes les marges extérieures

border: 0; <<< (pas forcement utile mais pratique dans ton cas) permet de supprimer toutes les bordures de la div

Si tu as d'autres problèmes n'hésite pas à poser des questions et j'étudirais cela de plus prêt.

A+
__________________________
Nous pouvons choisir notre avenir !

HAUT DE PAGE

PAGE : [1]

.: Site Web développé par Julien Pichot et l'équipe MPWG avec www.evolvia-web.com :.