28220 sujets

CSS et mise en forme, CSS3

Bonjour,j'avais deja posté ce post dans le forum débutant mais comme je n'ai aut aucune reponse je me dit qu'il faut peut etre que je change de forum et que j'aille vers des gens plus experimentés...donc voici mon messsage:


Bonjour , j'ai un petit probleme avec mon code, j'ai crée un menu avec des tableaux et des cellules, un roolover en CSS, et a chaque survol d'une cellule je fais apparaitre un petite boite de texte sur la droite en face de la cellule corespondante.
Mon code marche bien sur ie et firefox mais sur netscape j'ai un petit souci, lorsque mon texte dans la boite apparait a droite de mon menu, il agrandit automatiquement en hauteur la cellule du menu sur la gauche,ce que je voudrait eviter...
Je sens que le probleme doit etre dans les CSS avec les commandes:
position: relative ou absolute ou encore display:block qui doivent me foutre la merde. Mais j'arrive pas a comprendre les nuances entre ces instructions.Est ce que qq'un pourrait m'expliquer en gros ce que veut dire,a quoi ca sert et comment bien les utiliser??

Sinon, je vous laisse mon code source, si jamais vous pouvez me dire ou est ce que je me suis planté,je vous serez trés reconnaisant.

<html><head> 
<style> 
table tr td a{text-decoration: none;color:black;position: relative;display:block;font-weight:normal;width:100%} 

table tr td a:hover{text-decoration: none;color:navy;display:block;font-weight:bold;width:100%;background-image: url(Photos/rolloverfond.jpg);} 

.menugauche {border-style:solid; border-width:0px; border-color:black; width:180px; height:100%;float:left;} 

.boiteg {width:170px;height:auto;background-image:url(Photos/contenuboite.jpg);border: solid 2px black;position:relative;top:-3px;left:-3px;} 


/*Définitions des boites explicatives des menus*/ 
a{display: block;position: relative} 
a:hover {border-bottom: 0px;} 
a span {display:none ;text-decoration:none ;color:black} 
a.class1:hover span {display: block; position: absolute; 
top: 0px; left: 173px;width: 100px;height:auto; 
background-image:url(Photos/contenuboite.jpg); 
border:inset;padding: 4px;text-align:center} 

</style> 

</head> 

<body background="Photos/fondsite.jpg"> 
<div class="menugauche"> 
<div class="boiteg"> 
<table width="100%" cellpadding="0" cellspacing="0"> 
<tr><td><img src="Photos/Une_recette_secrete.gif" alt="coucou"></td></tr> 
<tr><td><a href="liens/menu1_1.html" class="class1">La crêpe dentelle<span>Salut c'est moi</span></a></td></tr> 
<tr><td><a href="liens/menu1_2.html" class="class1">Le secret de son origine<span>bon est ce que ca marche?</span></a></td></tr> 
<tr><td><a href="liens/menu1_3.html"class="class1">Technique de fabrication<span>Ca serait cool</span></a></td></tr> 
</table> 
</div></div> 
</body></html> 


merci de votre aide

Voici ce que ca donne avec internet exploer et netscape(en image j'ai mis la site complet,mais j'ai allégé le code que je vous ait donné ci dessus.
upload/4479-1.JPG upload/4479-2.JPG
Bonjour, je renouvelle ma question et j'en profite pour que ce post soit placé un peu moins au fond de ce forum...
Je suis toujours a la recherche d'un element de reponse...
Sinon au pire je vais peut etre changer de facon de proceder...est ce mieux de faire un menu a partir des listes a puces? (<ul><li>...).
Est-ce adaptable aux effets que je je souhaite faire?c'est a dire faire un rollover sur mon menu en changeant la couleur de fond et la police et rajouter une boite de texte qui apparait lors du survol de l'element du menu?
Merci de vos reponses...
C'est encore moi...je sens que je vais m'attirrer les foudres se l'administrateur...mais bon y'a vraiment personne qui saurait me repondre a mes questions?ou tout au moins des elements de reponse,ou des pistes de solutions???
Merci de votre attention...
Salut,

Quelques remarques :

- Tu devrais mettre un DOCTYPE, on ne sait jamais...
- Tes règles CSS ne sont pas très bien ordonnées
- Quel est l'apport du tableau ? Apparemment il ne sert à rien.
- Effectivement, on a l'impression que Netscape voit les span en position relative.

Essaye de mettre le "position:absolute" dans la règle de ton "a span", c'est peut-être tout simplement un problème de logique dans l'interprétation de tes règles CSS par Netscape (je n'ai pas Netscape désolé) ?

Bonne chance sinon Smiley cligne et n'hésite pas à aller lire les tutoriels si le positionnement te perturbe.
Bonjour, merci tout d'abord pour ta reponse.
-pour le doctype ca ne fait pas de difference, la j'ai simplifié a fond mon fichier mais dans mon original le doctype est présent mais ca ne marche pas non plus.
-J'ai essayé ce que tu m'as dit avec position:absolute dans mon a span mais ca ne change rien non plus...
-Sinon pour le fait d'avoir mis des tableaux c'est surement pas indispensable mais ca me parraissait plus logique comme ca...
-Et je suis d'accord avec toi il doit y avoir un pb de logique dans mon CSS mais bon dieu j'arrive pas a resoudre ce pb ou ce conflit...

Je suis donc toujours a la recherche d'idées...
Par curiosité, c'est quoi les versions utilisées :
- d'internet explorer ?
- de Netscape ?

Et aussi, pour quelle plateforme
- Windows ?
- Mac ?
(je pense qu'on peut éliminer Linux vu qu'il n'y a pas d'Internet Explorer pour linux...)

Si c'est une ancienne version de Netscape et pas la version 8 (sortie il y a quelques mois), je pense que le meilleur moyen de résoudre le problème est de simplement désinstaller Netscape et de ne plus jamais l'utiliser Smiley lol

Franchement, Netscape est un logiciel mort, qui de plus est doté d'un certain nombre de bugs qui lui sont spécifiques, et qui pourraient expliquer ce problème (bug de rendu, mauvaise implémentation des standards). Internet Explorer 6 pour Windows (je ne parle même pas de IE 5 pour Mac, dont même Microsoft demande aux gens de ne plus l'utiliser !) est déjà assez bugué pour qu'on aille chercher les bugs de Netscape !

À titre informatif :
Utilisation des navigateurs web en France :
- Internet Explorer 6 : 70-80 %
- Mozilla Firefox : 10-15 %
- Safari : 2-3 %
- Opera : 1-2 %
Et tout le reste est en dessous... à part peut-être IE 5 pour Windows et IE 5 pour Mac, qui à eux deux arrivent peut-être dans les 3-5 %...

Netscape : 0,01 % ???

Le "mieux" est sans doute de travailler avec Internet Explorer 6 (windows) et Mozilla Firefox ou un autre navigateur web respectueux des standards. Ce qui passe bien dans Firefox passera bien dans les autres navigateurs Mozilla, dans Safari, dans Opera, dans Konqueror, etc. À quelques exceptions près, bien sûr : il y en a toujours un petit peu !
Modifié par mpop (27 Dec 2005 - 03:05)
Deuxième commentaire : sur l'aspect général du site.

Loin de moi l'idée de jeter la pierre à qui que ce soit, mais plutôt que de fignoler des fonctionalités pas toujours super utiles (rollover javascript avec un texte qui s'affiche... sympa mais pas indispensable), il faudrait peut-être s'occuper du plus pressant : faire un site lisible !

Si je m'occupais de ce site, je referai les pages à neuf, pour obtenir :
- un design plus épuré, plus lisible. Ne pas avoir peur des choses trop "simples", elles sont généralement plus efficaces (y compris commercialement parlant !) qu'un design mal pensé, maladroit, bricolé. Ne pas avoir peur du texte noir sur fond blanc, par exemple, si c'est pour éviter les caractères italiques - très peu lisibles sur écran avec une résolution à 72 points par pouce, alors que l'impression sur imprimante de bureau donne du 300 points par pouce, et que l'impression professionelle donne du 1200 points par pouce ou plus ! - sur fond d'image. Les images de fond, lorsqu'elles viennent se placer sous le texte, nuisent également à la lisibilité. Au moins un petit peu.
- une organisation des contenus plus simple. Moins d'items dans le menu de navigation. Un peu moins de contenu principal dans la page... aller directement à l'essentiel.

Mais je suppose que les choix de mise en page sont aussi des choix personnels, esthétiques. Malgré tout, il y a des choses qui font que "ça ne marche pas" : on cherche où cliquer dans la page pendant de longues secondes, on bute sur du contenu peu lisible, etc.

S'il n'y a qu'un conseil à retenir : faites simple. N'essayez pas d'en mettre plein la vue, de proposer plein de gadgets (à coup de javascript), si vous ne maîtrisez pas ces techniques. D'ailleurs, même si on les maîtrise on tâchera des les utiliser avec parcimonie.
pour satisfaire ta curiosité, j'ai fait mes tests sous:
internet explorer 6.0
Netscape 7.0
mozilla firefox 1.0.7
Et j'ai fait mes tests sous windows.
D'ailleurs si mon site fonctionne bien sous windows?il se peut que ca fonctionne mal sous linux? je pensais que ca n'allait rien changé...
De plus je pensais que netscape était davantage utilisé que ce que tu sembles dire...
Sinon,j'essaie de limiter un maximum le javascript car je ne le maitrises pas trés bien.Mais je pense quand meme que quelques effet a coup de CSS ou autre sont qd memes sympa et montre un minimum de sérieux dans la construction d'un site,surtout quand c'est a but comercial.
Mais bon c'est mon tout premier site et j'ai encore beaucoup de choses a apprendre...Au fur et a mesure ca viendra.
Mais qu'est ce qu'ils sont chiants ces navigateurs a ne respecter les standarts que quand ils en ont envies...
Raphael a écrit :

Tu dois parler de Netscape 4 uniquement, parce que Netscape 7 par exemple est quand-même un peu mieux loti.


Netscape 7 : 0,4 % et ça tombe...
Pour Netscape 8, je me trompe où il utilise alternativment le moteur d'IE et Gecko ?... il va être sympa celui-là, pff...

Mais au début je m'étonnais surtout de voir comme plateformes principales de test Internet Explorer (bon ça c'est normal) et Nescape (!). On peut bien sûr tester sous Netscape, et 0,4% (plus en Allemagne ai-je entendu dire) des utilisateurs ce n'est pas négligeable, mais il faut avoir le temps et les moyens de tester sur les navigateurs au 10e rang. Dans l'absolu c'est bien, mais en pratique c'est pas évident ! D'où l'idée de se "contenter", à contrecoeur, de IE et d'un navigateur respectueux des standards. En espérant que les différents navigateurs plutôt respectueux des standards n'aient pas de différences entre eux trop critiques...

averell22 a écrit :
Et j'ai fait mes tests sous windows.
D'ailleurs si mon site fonctionne bien sous windows? il se peut que ca fonctionne mal sous linux? je pensais que ca n'allait rien changé...

Ce n'est pas une question de plateforme, mais plutôt de navigateur.
Un site fait pour Internet Explorer fonctionnera mal sous Linux... vu qu'il n'y a pas IE sous Linux Smiley lol
Un site fait pour IE 5 sous Windows sera différent sous IE 5 pour Mac (ce n'est pas le même logiciel, malgré les numéros de version proches !).
Par contre le rendu entre Mozilla Firefox 1.5 pour windows, Mozilla Firefox 1.5 pour Mac OS X et Mozilla Firefox 1.5 pour linux sera le même. Il s'agit du même logiciel (adapté à chaque OS, mais le moteur de rendu et la quasi-totalité des fonctionnalités ne bouge pas d'un poil).
Bonjour,

Il peut y avoir des différences de rendu dans FF selon l'OS (idem pour Opera, d'ailleurs) . Même si le moteur et les implémentations CSS sont identiques, d'autres facteurs interviennent : par exemple, disponibilité d'une police de caractère (le vieux coup de la Verdana sous linux) qui peut être très gênante en cas de dimensionnement de boîtes en em, ou possibilité de stylage des contrôles de formulaires et autres éléments liés à l'OS...

Sinon, il est prudent de développer en se basant sur deux navigateurs conformes, et non sur un seul. Même si les implémentations convergent, il reste des différences et des bugs qui peuvent fausser le rendu et finalement faire perdre du temps à rectifier par la suite. Peu importe le couple retenu.

Enfin, concernant les anciennes versions : il faut savoir renoncer au rendu CSS dans les versions "anciennes", en utilisant les filtres disponibles (syntaxes d'importation de feuilles de style, par exemple). Voir éventuellement leur adresser uniquement des styles minimaux. Et laisser l'utilisateur assumer certaines versions non filtrables, telle NS7.0, les premiers Mozilla, les Opera 5, 6 et 7, même si parfois il n'a pas personnellement le choix de son navigateur.

Enfin, au rang des "versions anciennes" à priver de CSS évoluée, un pas reste difficile à franchir pour beaucoup de décideurs : y ranger IE5 Mac et IE5.0 Windows. Voir, parfois, IE 5.5 Windows, ou même IE6.0 pour certaines fonctionnalités d'applications Web...
Laurent Denis a écrit :
Il peut y avoir des différences de rendu dans FF selon l'OS (idem pour Opera, d'ailleurs) . Même si le moteur et les implémentations CSS sont identiques, d'autres facteurs interviennent : par exemple, disponibilité d'une police de caractère (le vieux coup de la Verdana sous linux) qui peut être très gênante en cas de dimensionnement de boîtes en em, ou possibilité de stylage des contrôles de formulaires et autres éléments liés à l'OS...

True enough... je n'y avais pas vraiment pensé, en particulier le cas des contrôles de formulaires. Pour les polices je suis plutôt au courant (linux inside), mais je ne les inclue pas dans le "rendu du navigateur". Mais c'est sur qu'il faut s'en préoccuper.

Il me semble qu'il y a une police assez présente dans les systèmes linux qui est proche du Verdana : le "Bitstream Vera Sans" (je l'ai par défaut sous Mandriva et Ubuntu, me semble-t-il...).

Laurent Denis a écrit :
Sinon, il est prudent de développer en se basant sur deux navigateurs conformes, et non sur un seul. Même si les implémentations convergent, il reste des différences et des bugs qui peuvent fausser le rendu et finalement faire perdre du temps à rectifier par la suite.

+1
C'est très très vrai.