bonjour tout le monde,
 
Après avec effectué le découpage du design de mon site et l'avoir mis en page, je suis passé à l'étape ou je transforme certaines images en ancres... grossière erreur apparemment : sous IE ça m'insère un petit espace en-dessous des ancres, et sous firefox ça part carrément en sucette !    
 
voici une partie du code fautif :  
 
/** pour la partie CSS */
[...]
a.top_back {
   display:block inline;
   height: 23px;
   width: 21px;
   vertical-align: top;
   background-image: url(./services/top_back.gif);
  }
[...]
/** pour la partie HTML */
[...]
<div id="content">
 <div class="image" name="top_bar"><img id="top_middle" src="./services/top_middle.gif"><a href="#" class="top_back"></a><a href="#" class="top_next"></a><a href="#" class="top_home"></a><a href="#" class="contact"></a><a href="#" class="terms"></a></div>
 <div class="image"><img name="top_right_text" src="./services/top_right_text.gif"></div>
[...]
 
le petit espace amusant apparaît entre les 2 div "image".
 
Est-ce qu'il faut que je refasse toute ma mise en page ou y a-t-il une autre solution ?    

je crois que les ancres n'on des probleme que avec les div

c'est quoi l'intérêt d'un a vide et d'un href vide ?

Oo

?

pareil qu'antp, j'arrive pas a comprendre le but de ce code, on peut pas avoir la page?

Où as-tu trouvé cette valeur ??
 
La propriété Display admet 18 valeurs : inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none et inherit.
 
Officiellement, Internet Explorer 6 reconnaît 7 valeurs pour Display : block, none, inline, inline-block, list-item, table-header-group et table-footer-group. Si cette restriction est comblée dans les futures version de IE, de belles choses sont à prévoir.
 
(A noter que IE accepte une valeur qui n'est pas dans les standards CSS2 mais uniquement dans un CSS 2.1 à l'état de draft, 'inline-block' : Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, space permitting.)

'inline-block' fait partie de la spé CSS 2.1, http://www.w3.org/TR/CSS21/visuren.html#display-prop . D'ailleurs je crois bien que 'inline-block' pose problème sous Gecko

"inline-bloc" oui tout à fait (voir le post précédent)... mais "display:block inline;" ???

display: block inline; n'existe pas et sera interprété comme "display: block;" selon mes souvenirs (je m'étais fait reprendre une fois sur ce genre de trucs )

Oui, c'est ce que je pense aussi : seul la première valeur sera interprétée... ou alors aucune des deux.

uniquement la première
(jigsaw ca poutre )

pour répondre à antp ce sont des ancres qui sont destinées à recevoir des liens véritables... mais les pages en question n'existe pas encore... comme ça je vois le comportement de l'ancre sur la mise en page.
 
pour le "display: block inline;" il me semble que sans le inline, il y a un passage à la ligne... par contre je n'ai pas essayé d'enlever le block.
 
vala vala, sinon je n'ai toujours pas réussi à résoudre mon problème de mise en page...

pour les ceusses qui voudraient m'aider et qui auraient envie de voir ce que ca donne (argh) : http://danosaure.free.fr/services.html

 
je m'en doutais pour les href, mais c'est bizarre de ne rien avoir entre les <a> et </a>

c'est parce que ce sont des boutons et que les images des boutons sont en image de fond sur le CSS

...
 
et si quelqu'un arrive sur ton site avec un navigateur textuel, audio ou braille il se passe quoi? il peut aller se faire mettre?
 
 

Je fais que débuter et ce n'est certainement pas une version définitive du site puisqu'il va falloir que je passe en PHP après... il devrait y avoir moyen de mettre des alternants je suppose.
 
c pas beau de snober les newbies... vilain pas beau.

 
Et tu trouves pas ça un peu tordu comme système ?

 
sans plus, j'ai vu ca dans un certain nombre de tutoriels pour faire des boutons rollovers en CSS... moi je me suis pas posé bcp plus de questions c'est vrai    

ca marche bien pour faire des rollovers et autres trucs à la con du style en CSS, mais habituellement on ajoute un <span> à l'intérieur qui contient du texte qu'on affiche pas grâce aux CSS (un peu de padding et overflow:hidden, ou display:none mais je préfère l'overflow, au final ca fait comme <img alt> mais en inversé), ce qui fait que le surf avec un navigateur ne gérant pas les CSS ou un nav textuel ne pose pas de problème.

Beaucoup d'erreurs de compréhension des CSS dans cette page.
 
- Le cas du "display: inline block" effectivement
- Des vertical-align qui ne servent à rien
- Des horreurs du style : "float: top"
- Des DIV en inline ou des A en inline alors qu'ils le sont déjà
- Un tableau
- Pas de DOCTYPE
- des "name"
- Et bien sûr une aucune accessibilité
 
 
Bref, avant de te donner une réponse, il faut que tu précises clairement ce que tu veux comme rendu final et quels moyens tu comptes utiliser pour y arriver (mise en page full-CSS, site full-image, site respectueux des standards...).
Car pour l'instant on a du mal à voir où tu veux aller (tu mélanges allègrement des vieilles techniques de mise en page avec des nouvelles) donc forcément ça coince...

 
Ouaip, je me doute qu'il y a des erreurs de compréhension des CSS, je commence tout juste :  
 
- le display inline block, est sans doute une horreur, je vais enlever  
  le block.
 
- les vertical-align c'était des essais en désespoir de cause pour faire
  remonter mes images pour qu'il n'y ait pas d'espace intempestif (et
  ca marche pas, je sais faut enlever dans ce cas-la)
 
- float: top; ... ben idem, c le desespoir
 
- les inline pour les A... ben il me semblait bien que les ancres
  etaient des blocs en ligne, mais ils avaient pas ce comportement sur
  mon IE. Peut etre que ma mauvaise comprehension des CSS est  
  contagieuse et que mon ordinateur est contaminé.
 
- le doctype... ben jamais utilisé, je me renseignerai
 
- les names... oui, mais quand j'avais commence a faire de l'HTML (il y  
  a tres longtemps, du temps des dinosaures) c'est ce que j'avais appris
  Bon c pas une tres bonne excuse mais c'est tout ce que j'ai trouvé
 
- le coup de l'accessibilité... je comprends meme pas    
 
Donc ce que je voudrais c'est transposer la maquette qui m'a été fournie  
en full-CSS (si possible) et en respectant les standards quand je les aurais assimilés (c'est pas gagné).

Le principe de l'accessibilité, c'est que n'importe qui puisse voir (accéder à) l'information (sans nécessairement les froufrous, les images toussa, mais ait accès à l'info) sans considération de son OS (Windows, Unix, Mac, PalmOS, ...), de son navigateur (IE, Opera, Netscape, mais aussi un navigateur textuel en console comme Lynx, un navigateur aural ou un nav. braille) ou de ses moyens de saisie (pas de souris, pas de clavier, ...)
 
tiens, une petite intro à l'accessibilité (en anglais) sur Accessify

Et le inline aussi. Un <a> est inline par défaut...

http://incongru.webdynamit.net/DOCTYPE
http://incongru.webdynamit.net/QuelleVersion

Remplace simplemement par des id, si tu en as l'utilité...

Le principe, c'est que ton site doit être lisible avec n'importe quel navigateur. Attention je dis pas "avoir un rendu parfait" je dis "lisible". Et avec ton site, si je le visite avec un navigateur texte, je verrai rien car il n'y a que des images. L'information (l'essentiel d'un site web) n'est pas accessible.
 
Bref il faut toujours donner un moyen alternatif d'accéder à l'information si on fait des choix assez osés de présentation. (cas du rollover dans ton menu, comme dit plus haut, il faut quand même mettre le texte de l'image dans un SPAN, quite à le cacher ensuite)
 

Déjà commence, par faire une mise en page simple avec 2 colonnes à l'aide de DIV, et tu rempliras ensuite au fur et à mesure (il y a des modèles de mise en page qui sont très bien sur le site de Sibelius je crois)

et ma petite question du début pour les ancres... parce qu'on a beau me dire que ça marche du tonnerre en enlevant le "display: inline-block;", chez moi ça ne marche pas... sous IE comme sous firefox, quand j'enleve le display, les boutons disparaissent. De meme quand je mets "display:block;" ça me fait des saut de ligne (sûrement le block qui fait ça, mais sinon le bouton ne s'affiche pas). Enfin, lorsque je mets le "inline-block", sous IE ça fait presque ce que je veux (à part le petit saut de ligne entre les boutons et les images qui suivent), et sous firefox, il fait comme quand il n'y a pas de display.
 
Alors je m'y prends sans doute de travers, mais je ne comprends pas comment il faut que je fasse. Pour ce qui est du site de Sibelius, je ne sais pas trop où le trouver.

 
http://www.alsacreations.com/articles/

alsacreation est vraiement une référence en la matière, et pour commencer, tu peux aussi ragarder CSSZengarden (http://www.csszengarden.com/) qui est vraiment pas mal pour voir les possiblités du CSS.

Merci tout le monde !
 
J'ai suivi les conseils que j'ai trouvé dans ce site et la mise en page sous firefox est presque bonne (y'a un bouton qui refuse obstinément de s'afficher)... même problème avec une interprétation légèrement différente sous IE.
 
Si quelqu'un voit comment je devrais faire pour afficher le bouton "book", j'aimerais assez qu'il m'en fasse part.
 
http://danosaure.free.fr/acs_home.html

ah oui, si vous pouvez aussi me dire où j'ai merdé pour les javascript, ca me ferait bien plaisir de savoir : sous firefox, le menu deroulant est en CSS et il fonctionne bien... sous IE il faut les javascript, et ca marche po

bon, je remonte le topic dans l'espoir qu'on me reponde.
 
 
edit : s'il ne faut pas faire ce genre de chose qu'on me le fasse savoir

à la lecture du code source, il me vient une question... pkoi n'a tu pas externalisé ta mise en forme dans un fichier.css ?

ben parce que j'ai fait ca au fur et a mesure et qu'au depart je n'y ai pas pense... ca finira sans doute par arriver.

pour ceux qui seraient interesses pour me repondre, mon projet de site a emmenage a l'adresse suivante :  
www.airport-car-services.com

pourquoi tu as mis la partie centrale dans un div puis dans une table qui contient elle même 3 div ?
 
je vois pas trop l'intérêt de la table là ?

Bof, en fait, ca vient d'une astuce que j'ai vu pour centrer la page sous IE. Je ne sais pas si ca vaut mieux de mettre un DIV a la place du TABLE... pour le moment ca marche

c'est pas nécessaire la table :
http://openweb.eu.org/articles/initiation_centrage/

Mouais, je verrai si je peux faire quelque chose dans le genre, mais j'ai pas mal d'autres choses qui ne fonctionnent pas encore à mettre en route.  
En tout cas, remarque bien notée, et merci.