5372 sujets

Sémantique web et HTML

Pages :
Bonjour

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

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 Smiley eek

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 Smiley decu Smiley decu
Modifié par kiouz (16 Jul 2007 - 14:06)
Bonjour et bienvenue sur Alsacréations Smiley smile ,

Ton Doctype ne me semble pas valide. Essayes plutôt:
a écrit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Je ne cacherais pas que ta page telle n'est qu'une suite d'images sans contenu textuel. Crois-tu que ce soit la voie à suivre ?
Modifié par Igor (16 Jul 2007 - 15:12)
Je n'ai mis sur le forum que le "haut" du site, le contenu textuel étant plutôt confidentiel Smiley cligne

Comment alors mettre en forme XHTML un site créé sous Photoshop si ce n'est pas la voie à suivre ?
Modifié par kiouz (16 Jul 2007 - 14:44)
Problème trouvé, erreur dans la CSS entre . et #sur #divLignes Smiley cligne
Modifié par kiouz (16 Jul 2007 - 16:06)
J'ai crié victoire trop vite je crois ... Smiley decu Smiley decu

Sur IE, il apparait de nouveau une ligne noire, mais juste une seule au lieu de deux auparavant Smiley eek Smiley eek

D'où ca peut venir ? Je vois vraiment pas Smiley decu
Modifié par kiouz (26 Jun 2008 - 15:58)
à ta place, j'aurais fait le contraire : commencer un site via photoshop avec une decoupe automatique provoque souvent des problèmes... mieux vaut commencer le site seul et ensuite intégrer les images.

Pour ton header qui te pose probleme, plutot que de faire trois images, je pense que le plus juste serait de faire un seul bloc avec une grande image en background, et dans ce bloc ton menu, avec le titre de chaque menu en texte et non pas en image (sinon pas terrible pour l'accessibilité...)

disons un truc dans le genre :

<div class="header">
  <div class="menu">
       <a href="">Accueil</a>
       <a href="">Services</a>
       ....
  </div>
</div>


le tout avec une CSS qui va bien pour placer le texte du menu au bon endroit... avec ca tu résoud tes problemes de ligne noire, et tu gagnes un menu en texte, tu vires des <img /> qui n'ont pas lieu d'etre, bref, beaucoup mieux !
Modifié par le.troll (18 Jul 2007 - 14:04)
Ben j'ai pas fait ca pour ne pas avoir une grosse image à charger par l'utilisateur.

Je vois pas par contre avec ta solution comment mettre la zone de menu autrement qu'en absolute et vu que je veux centrer le site, ca ne serait pas possible je crois Smiley sweatdrop

Non ?
1 grosse ou trois moyennes, je pense que ca se vaut... et même tu économise deux requetes, ca soulage d'autant ton serveur Smiley smile

pour ce qui est du menu, tu n'est pas obligé (je pense) de le mettre en absolute... tu peux lui caler une marge en haut et à gauche, non?


.menu
{
     margin-top: 30px;
     margin-left: 50px;
}
.menu a
{
     display: block;
     float: left;
     height: 40px;
     width: 40px;
}


dans l'idée c'est ca... a tester !
Modifié par le.troll (18 Jul 2007 - 14:20)
Euh j'ai pas compris ca :

.menu a{
     display: block;
     float: left;
     height: 40px;
     width: 40px;
}


Si c'est le menu, j'aurai besoin de l'image de fond du menu et des images cliquables des icones des éléments du menu. Donc il faut que je les positionne chacune dans un div ?
C'est pour ca que pour l'instant le menu est une suite d'image dont certaines (les éléments de menu) sont réactifs.

Quelle est donc selon toi la meilleure solution ? Merciiiiiiiiiii Smiley biggrin
bon alors, y'a plusieurs soluces :

1/ solution 1

dans ton image de background du header, tu incrustes les images des boutons SANS leur texte, et dans ce cas, il te suffit ensuite de "placer" tes 5 liens avec des margin, eventuellement en leur donnant des class.

mais si tu veux que tes liens soit de forme carré et recouvrent toute la surface de l'image du bouton, tu dois leur demander de s'afficher en tant que block (display: block), et dans ce cas ils doivent être flottant, sinon ils vont se ranger verticalement (float: left). Enfin tu dois leur donner la taille du bouton (width/height), donc on obtient un truc du genre :


 <a href="" class="accueil">Accueil</a>

 <a href="" class="service">Services</a>

 <a href="" class="service">Services</a>
 


.menu a
{
      display: block; 
      float: left;
      width: valeur px;
      height: valeur px;
}
.menu a.accueil 
{
    margin: 0 0 0 0px; /*mettre les bonnes valeurs a la place des 0*/
}
.menu a.service 
{
    margin: 0 0 0 0px; /*idem en ajustant les valeurs au besoin*/
}


au besoin tu modifie le texte pour qu'il ressemble a ce que tu veux, par exemple

.menu a
{
      color: #fff; 
      font: 1.2em Verdana,Arial bold;
}


bon ca c'est la premiere solution. maintenant si tu veux que les images de tes boutons changent en hover ou quand on click, il faut faire un peu differement :

2/ solution 2

cette fois ci tu mets en background image du header une image sans les boutons, puis tu crées toutes les images des boutons (toujours SANS le texte)

puis tout simplement tu rajoutes à chaque lien la bonne image en bg :


.menu a.accueil
{
   margin: 0 0 0 0px; /*mettre les bonnes valeurs a la place des 0*/
   background-image: url(../images/menu_accueil.jpg);
}


pour le reste suffit de faire comme la soluce 1.....

voial j'espère avoir été clair et pas avoir raconté trop d'inepties...
Ok je crois avoir tout compris Smiley biggrin Smiley biggrin

Je n'avais jamais trop compris cette histoire de block, j'espère que ca va marcher. Merci en tout cas, je te retiens au courant Smiley cligne
Re Bonsoir Smiley cligne

J'ai testé ta technique, elle marche parfaitement pour Firefox, mais sous IE, lorsque je spécifie le margin pour l'image d'un élément de menu, cette image se retrouve placée beaucoup plus loin sur la droite que sous Firefox !!! Smiley eek Smiley eek

D'où cela peut-il venir ?

J'ai créé un div "menu" comme ceci (je vais me rappeler de tête ce que j'ai fait car je n'ai pas le bon PC sous la main) :


<div id="header">
    <div id="menu">
        <a href="" class="accueil">Accueil</a>
        ...
    </div>
</div>


C'était bien comme cela qu'il fallait agencer la structure pour que cela marche ? Smiley ohwell
ah ! bon ben la tu est face a un bug IE... ouelcome in a world of standards.

avant toute chose, vérifie que ta DTD est correcte; au besoin consulte cet article :
édit par Igor : merci de prendre la peine de former de vrais liens et de ne pas seulement coller des url à rallonge qui déforment le forum. Genre tu reprends tous les liens que tu donnais dans cette partie de ton message que j'ai effacé
bonne lecture !
Modifié par Igor (19 Jul 2007 - 02:17)
kiouz a écrit :
Merci Igor, mais je n'ai plus le lien maintenant Smiley decu Smiley decu

De rien, il faut demander à le.troll de modifier son message.
Modifié par Igor (19 Jul 2007 - 10:04)
piouf.... ca c'est de la modération. Smiley confused Smiley eek

bon, je me souviens plus exactement des tous les liens que j'avais posté Smiley confus ... cependant :

première chose, verifier ta DTD, en lisant DTD comment choisir.

ensuite, utiliser les commentaires conditionnels pour inclure éventuellement une CSS propre à IE, pour fixer les bugs indesirables.

les autres liens concernait des articles du blog d'alsa et de blog and blues. Va fouiller un peu, tu trouveras surement ton bonheur.
Ok, merci pour ces liens Smiley cligne

Sinon, j'ai réussi à trouver une parade pour que cela fonctionne sous IE de la même manière que sous Firefox, il suffit de remplacer le "display: block;" du div menu par "display: inline;".

Par contre, il faut rajouter un "background-repeat:no-repeat;" sur les images car IE rend les zones réactives des liens très larges en hauteur Smiley eek Smiley eek

J'ai du également utilisé "line-height:118px;" pour que le texte se place en dessous de mon image (si tu as une autre idée, je suis preneur Smiley cligne ).

Le problème de mettre l'intitulé du lien en texte c'est que si l'utilisateur modifie la taille du texte, la mise en page est détruite lol !!! Mais bon, qu'est ce qu'il faut pas faire pour respecter les standards ...


Sinon, je suis obligé d'enregistrer mes images PNG en PNG-8 256 couleurs sans cache car c'est le seul mode où la transparence existe pour IE 6 Smiley confus

Du coup, les images des menus ne sont pas très beaux ... une idée ? Smiley biggrin Smiley biggrin
Modifié par kiouz (19 Jul 2007 - 16:17)
ah tu vraiment besoin de la transparence? je pense que tu peux faire des images carrées non?

on peut voir ce que ca donne?
En fait, grâce aux commentaires conditionnels, j'ai fait une CSS pour IE 6 et une CSS pour les autres navigateurs. Ainsi, j'ai mis des PNG "plus beaux" pour tout ce qui n'est pas IE 6 Smiley cligne

Faire des logos carrés limiterait le design du menu je pense. Ou alors, il faudrait que je les enregistre avec le fond de la bannière, ce qui ne serait pas très propre !!! Smiley lol Smiley lol
exact.

Petit conseil supplémentaire : fouille sur le forum pour trouver des info sur les "alt", je pense que tu pourrais améliorer ce point.

un bon article sur pompage aussi : bien utiliser le texte alternatif

autre remarque : es tu sur de ta DTD? ne serais tu pas mieux en XHTML 1.0? surtout que tu déclare du text/html ensuite.

voir blog and blues, XHTML 1.1 a ce propos.

derniere chose : il reste des height et width dans ton pied de page : enleve les et met les vite dans ta css !!
Modifié par le.troll (20 Jul 2007 - 11:15)
Pages :