ancres, ennemies de la mise en page ?

ancres, ennemies de la mise en page ? - HTML/CSS - Programmation

Marsh Posté le 07-01-2005 à 16:45:54    

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 !  :ouch:  
 
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 ?  :??:  

Reply

Marsh Posté le 07-01-2005 à 16:45:54   

Reply

Marsh Posté le 08-01-2005 à 00:41:48    

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

Reply

Marsh Posté le 08-01-2005 à 00:44:53    

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


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 08-01-2005 à 00:54:06    

Oo

Reply

Marsh Posté le 08-01-2005 à 01:02:16    

Reply

Marsh Posté le 08-01-2005 à 01:17:44    

:)

Reply

Marsh Posté le 08-01-2005 à 10:02:21    

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


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 08-01-2005 à 11:15:50    

Gravastar a écrit :


display:block inline;


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.)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 08-01-2005 à 11:43:20    

'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

Reply

Marsh Posté le 08-01-2005 à 11:52:07    

FlorentG a écrit :

'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;" ???


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 08-01-2005 à 11:52:07   

Reply

Marsh Posté le 08-01-2005 à 12:47:49    

SIBELIUS a écrit :

"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 [:zebra33] )


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 08-01-2005 à 13:58:15    

Masklinn a écrit :

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 [:zebra33] )


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


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 08-01-2005 à 15:44:30    

SIBELIUS a écrit :

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 :D )


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 09-01-2005 à 17:34:05    

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...

Reply

Marsh Posté le 09-01-2005 à 17:45:08    

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

Reply

Marsh Posté le 09-01-2005 à 17:45:24    

Gravastar a écrit :

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.


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


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 09-01-2005 à 17:50:39    

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

Reply

Marsh Posté le 09-01-2005 à 19:40:28    

Gravastar a écrit :

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?
 
 :pfff:


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 09-01-2005 à 20:06:22    

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. :kaola:
 
c pas beau de snober les newbies... vilain pas beau.

Reply

Marsh Posté le 09-01-2005 à 20:18:26    

Gravastar a écrit :

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


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


Message édité par antp le 09-01-2005 à 20:19:02

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 09-01-2005 à 20:22:50    

antp a écrit :

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


 
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  :pt1cable:  

Reply

Marsh Posté le 09-01-2005 à 20:37:15    

antp a écrit :

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


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.


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 09-01-2005 à 21:53:51    

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...


Message édité par gm_superstar le 09-01-2005 à 21:54:36

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 09-01-2005 à 22:33:47    

gm_superstar a écrit :

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  :sweat:  
 
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é).

Reply

Marsh Posté le 09-01-2005 à 23:57:38    

Gravastar a écrit :

- le coup de l'accessibilité... je comprends meme pas  :sweat:


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


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 10-01-2005 à 00:25:15    

Gravastar a écrit :

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.


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

Gravastar a écrit :


- le doctype... ben jamais utilisé, je me renseignerai


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

Gravastar a écrit :


- 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é


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

Gravastar a écrit :


- le coup de l'accessibilité... je comprends meme pas  :sweat:  


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)
 

Gravastar a écrit :


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é).


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)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 10-01-2005 à 11:18:34    

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.

Reply

Marsh Posté le 10-01-2005 à 11:29:48    

Gravastar a écrit :

Pour ce qui est du site de Sibelius, je ne sais pas trop où le trouver.


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


---------------
planuldep | Association pêche à la Sempé
Reply

Marsh Posté le 10-01-2005 à 11:32:03    

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.


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 10-01-2005 à 14:33:31    

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

Reply

Marsh Posté le 10-01-2005 à 14:36:59    

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 [:arod]

Reply

Marsh Posté le 11-01-2005 à 10:58:46    

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

Reply

Marsh Posté le 11-01-2005 à 11:09:12    

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


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 11-01-2005 à 11:29:50    

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.

Reply

Marsh Posté le 11-01-2005 à 14:09:11    

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

Reply

Marsh Posté le 11-01-2005 à 14:16:35    

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à ?


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 11-01-2005 à 14:20:48    

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

Reply

Marsh Posté le 11-01-2005 à 14:26:38    

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


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 11-01-2005 à 14:31:33    

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.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed