28173 sujets
CSS et mise en forme, CSS3
Oui désolé faut que je prenne l'habitude.
a essayer le menu sur firefox,
Modifié par kouiny (18 Nov 2006 - 11:17)
a essayer le menu sur firefox,
a écrit :
BODY {
scrollbar-face-color: #A0D0FF;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #E7F3FF;
scrollbar-3dlight-color: #E7F3FF;
scrollbar-darkshadow-color: #89B1DA;
scrollbar-track-color: #A0D0FF;
scrollbar-arrow-color: #000000;
background-color:#660000;
background-repeat:no-repeat;
margin: 0;
text-align: center;
}
.texte { font-family: Verdana; font-size: 10px; color: #343F64; text-decoration: none}
.titre { font-family: Verdana; font-size: 12px; color: #343F64; text-decoration: none}
.texte2 { font-family: Verdana; font-size: 10px; color: #FFFFFF; text-decoration: none}
.lien { font-family: Verdana; font-size: 10px; color: #000000; text-decoration: underline}
a.lien:hover
{
text-decoration: none;
}
.texteb { font-family: Verdana; font-size: 9px; color: #000000; text-decoration: none}
.input { color:#000000; font-family: Verdana; border: solid 1px #1D9AAE; background-color:#CCF8FF; font-size:10px; font-weight: none; width : 100px}
#head1 { background-image:url(images/111.png); width: 790px; height: 70px; margin-left: auto; margin-right: auto;}
#head2 { background: url(images/211.png); width: 790px; height: 22px; margin-left: auto; margin-right: auto;}
#head3 { background-color: #ffffff; width: 790px; height: 800px;}
#menu1{
position: absolute;
left: 169px;
top: 133px;
width: 174px;
height: 76px;
}
.map1 { float: left; width : 152px; height: 0px; margin-left: 90px; margin-top: 0px}
.map2 { float: left; width : 152px; height: 0px; margin-left: 0px; margin-top: 0px}
.map3 { float: left; width : 152px; height: 0px; margin-left: 0px; margin-top: 0px}
.map4 { float: left; width : 152px; height: 0px; margin-left: 0px; margin-top: 0px}
.fond1 { background: url(images/25.gif); width : 170px; height: 50px;}
.fond2 { background: url(images/18.jpg); width : 171px; height: 27px;}
.big1 { font-size: 11px; text-align: center}
.big11 { color: #FFCC00; font-family: Verdana}
.big2 { font-size: 11px; text-align: center}
.big22 { color: #66CC99; font-family: Verdana}
.big3 { font-size: 11px; text-align: center}
.big33 { color: #666666; font-family: Verdana}
a écrit :
<body>
<div id="head1"></div>
<div id="head2">
<a class="map2" href="/forum" title="tout savoir"></a>
<a class="map3" href="http://www.pourtoutsavoir.com/forum/privat.php" title="messagerie"></a>
<a class="map4" href="http://www.pourtoutsavoir.com/forum/faq.php" title="la faq"></a></div>
Modifié par kouiny (18 Nov 2006 - 11:17)
Bon, cette fois j'ai été voir ... 
Actuellement, il n'y a RIEN dans tes liens... donc c'est assez logique qu'on ne puisse pas cliquer dessus !
Donc, tu devrais essayer (j'ai pas fait le test, c'est juste une idée...) de mettre au moins un espace (avec ou   ) pour voir ce que ça donne.
Pendant que tu y es, donne-leur une hauteur qui correspond à la hauteur de ton bandeau graphique, ça fera pas de mal (ben, oui, pourquoi "height: 0px" ?)
(Remarque : arrête de parler de "liens flottants", stp, ça ne veut rien dire (et peut prêter à confusion). Ces liens ne "flottent" absolument pas ! )
Modifié par Mpok (27 Aug 2006 - 22:45)
Actuellement, il n'y a RIEN dans tes liens... donc c'est assez logique qu'on ne puisse pas cliquer dessus !
Donc, tu devrais essayer (j'ai pas fait le test, c'est juste une idée...) de mettre au moins un espace (avec ou   ) pour voir ce que ça donne.
Pendant que tu y es, donne-leur une hauteur qui correspond à la hauteur de ton bandeau graphique, ça fera pas de mal (ben, oui, pourquoi "height: 0px" ?)
(Remarque : arrête de parler de "liens flottants", stp, ça ne veut rien dire (et peut prêter à confusion). Ces liens ne "flottent" absolument pas ! )
Modifié par Mpok (27 Aug 2006 - 22:45)
C'est bien beau de régler son site en 1024px de large, mais on est pas tous à cette larger d'écran ...
En 1200px, sous IE, ça donne ça :
[img=http://img125.imageshack.us/img125/7835/bugiefb6.th.jpg]
P.S. : ne te fie pas à l'icône Firefox en haut à gauche de la capture d'écran, c'est bien sous le moteur d'IE que la page s'affiche. J'utilise l'extension IE Tab qui permet d'ouvrir IE dans un onglet de Firefox
En 1200px, sous IE, ça donne ça :
[img=http://img125.imageshack.us/img125/7835/bugiefb6.th.jpg]
![[img=http://img125.imageshack.us/img125/7835/bugiefb6.th.jpg]](http://img125.imageshack.us/my.php?image=bugiefb6.jpg){kind=link}
P.S. : ne te fie pas à l'icône Firefox en haut à gauche de la capture d'écran, c'est bien sous le moteur d'IE que la page s'affiche. J'utilise l'extension IE Tab qui permet d'ouvrir IE dans un onglet de Firefox
Lol... Moi aussi je parle de ceux-là !!! 
Et je le répète les "liens flottants" (on se demande sur quoi...) CA N'EXISTE PAS !
La propriété css "float" permet de sortir un contenu (div, lien ou quoi que ce soit) du flux normal de la page en le plaçant soit à gauche soit à droite du reste du flux.
L'expression en français semble vouloir signifier que les liens "flottent", ce qui est FAUX ! Donc à déconseiller...
Tu as essayé de mettre une hauteur sur ces .map ?
Et je le répète les "liens flottants" (on se demande sur quoi...) CA N'EXISTE PAS !
La propriété css "float" permet de sortir un contenu (div, lien ou quoi que ce soit) du flux normal de la page en le plaçant soit à gauche soit à droite du reste du flux.
L'expression en français semble vouloir signifier que les liens "flottent", ce qui est FAUX ! Donc à déconseiller...
Tu as essayé de mettre une hauteur sur ces .map ?
Ah si, ça s'est beaucoup arrangé, maintenant les liens sont à la bonne place et de la bonne taille (sauf le premier, je sais pas pourquoi il recouvre toute la gauche jusqu'à "tout savoir").
Bon, les liens messagerie et faq devraient fonctionner... mais ils ne fonctionnent pas...
C'est probablement parce qu'ils sont situés sous l'image.
Mais j'avoue que je ne sais pas résoudre ce pbm (peut-être un "z-index" mais je n'y crois pas trop...)
Bon, j'ai pas trop le temps maintenant, je reviendrai demain voir si tu as résolu le pbm tout seul...
Bon, les liens messagerie et faq devraient fonctionner... mais ils ne fonctionnent pas...
C'est probablement parce qu'ils sont situés sous l'image.
Mais j'avoue que je ne sais pas résoudre ce pbm (peut-être un "z-index" mais je n'y crois pas trop...)
Bon, j'ai pas trop le temps maintenant, je reviendrai demain voir si tu as résolu le pbm tout seul...
Bonsoir,
Ahem.
Pour l'instant, ce ne sont pas des liens. Ce sont choses, des apparences de liens, qui en auront un peu le comportement une fois l'erreur CSS corrigée (elle n'a rien de compliqué)... mais un lien ne peut pas être fait sans avoir un contenu réel entre les balises <a> et </a>. C'est totalement non accessible, aberrant du point de vue du référencement, et c'est une confusion complète entre structure et présentation.
Avant de poursuivre: remettre des images HTML <img alt="..."> dans ces liens.
Et à tout prendre, remettre également les images de contenus des autres div, même s'il n'y a pas de lien.
C'est le monde à l'envers, ma parole !
Modifié par Laurent Denis (27 Aug 2006 - 23:30)
Ahem.
<div id="head1"></div>
<div id="head2">
<a class="map2" href="http://www.pourtoutsavoir.com/forum" title="tout savoir"></a>
<a class="map3" href="http://www.pourtoutsavoir.com/forum/privat.php" title="messagerie"></a>
<a class="map4" href="http://www.pourtoutsavoir.com/forum/faq.php" title="la faq"></a></div>
<div id="head3"></div>Pour l'instant, ce ne sont pas des liens. Ce sont choses, des apparences de liens, qui en auront un peu le comportement une fois l'erreur CSS corrigée (elle n'a rien de compliqué)... mais un lien ne peut pas être fait sans avoir un contenu réel entre les balises <a> et </a>. C'est totalement non accessible, aberrant du point de vue du référencement, et c'est une confusion complète entre structure et présentation.
Avant de poursuivre: remettre des images HTML <img alt="..."> dans ces liens.
Et à tout prendre, remettre également les images de contenus des autres div, même s'il n'y a pas de lien.
C'est le monde à l'envers, ma parole !
Modifié par Laurent Denis (27 Aug 2006 - 23:30)
Pas pour le référencement, pas seulement... Tes liens n'ont pas de contenu. Tout ce que l'on peut en faire, c'est cliquer dessus quand la page est affichée dans un navigateur graphique avec CSS activée. Ce qui signifie qu'il n'y pas de lien pour:
- les lecteurs d'écran
- les navigateurs textes
- les utilisateurs de navigateurs graphiques désactivant CSS
- les utilisateurs (en bas débit par exemple) ayant désactivé les images
- des utilisateurs de navigateurs graphique... utilisant le clavier
- les traducteurs en ligne
- les mobiles
- et n'importe quel autre robot ou navigateur ou outil d'aide ne tenant pas compte des images d'arrière-plan CSS.
Pour les robots d'indexation de moteur de recherche, il y a bien une url, mais pas de mot-clé qui s'y attache...
CSS et les arrière-plan CSS sont là pour gérer des images de décoration, qui ne véhiculent pas d'information utile à l'accès au document. Pas pour simuler des images de contenu, qui ont une fonction dans la navigation. Ici, on se sert de CSS exactement à l'inverse de son rôle et toute la démarche des Standards.
Quitte à faire cela, autant revenir 10 ans en arrière: le DHTML de papa des années 90 était plus rationnel et plus accessible.
Au fait: où avez-vous, les uns ou les autres, pêché cette idée saugrenue de liens vides ? Sur le site du Zéro ? Si un tutoriel d'Alsa ? Ailleurs ?
Modifié par Laurent Denis (28 Aug 2006 - 00:21)
- les lecteurs d'écran
- les navigateurs textes
- les utilisateurs de navigateurs graphiques désactivant CSS
- les utilisateurs (en bas débit par exemple) ayant désactivé les images
- des utilisateurs de navigateurs graphique... utilisant le clavier
- les traducteurs en ligne
- les mobiles
- et n'importe quel autre robot ou navigateur ou outil d'aide ne tenant pas compte des images d'arrière-plan CSS.
Pour les robots d'indexation de moteur de recherche, il y a bien une url, mais pas de mot-clé qui s'y attache...
CSS et les arrière-plan CSS sont là pour gérer des images de décoration, qui ne véhiculent pas d'information utile à l'accès au document. Pas pour simuler des images de contenu, qui ont une fonction dans la navigation. Ici, on se sert de CSS exactement à l'inverse de son rôle et toute la démarche des Standards.
Quitte à faire cela, autant revenir 10 ans en arrière: le DHTML de papa des années 90 était plus rationnel et plus accessible.
Au fait: où avez-vous, les uns ou les autres, pêché cette idée saugrenue de liens vides ? Sur le site du Zéro ? Si un tutoriel d'Alsa ? Ailleurs ?
Modifié par Laurent Denis (28 Aug 2006 - 00:21)
Salut
Tu ne dois pas mettre les images dans le code HTML uniquement pour le référencement, mais avant tout parce qu'elles représentent une partie du contenu de ta page. Elles portent une information importante, qui est (ou en tous cas devrait être) la destination vers laquelle le lien conduit.
Et en tant que contenu, ces images doivent se trouver à l'intérieur du code html, via la balise <img src="..." alt="..." />.
Les images de fond placées dans les CSS ne peuvent être que purement décoratives. Autrement dit, ta page doit rester fonctionnelle et compréhensible, même si on désactive les styles !
<edit>grillé, y'avait longtemps
</edit>
Modifié par Sopo (28 Aug 2006 - 00:20)
Tu ne dois pas mettre les images dans le code HTML uniquement pour le référencement, mais avant tout parce qu'elles représentent une partie du contenu de ta page. Elles portent une information importante, qui est (ou en tous cas devrait être) la destination vers laquelle le lien conduit.
Et en tant que contenu, ces images doivent se trouver à l'intérieur du code html, via la balise <img src="..." alt="..." />.
Les images de fond placées dans les CSS ne peuvent être que purement décoratives. Autrement dit, ta page doit rester fonctionnelle et compréhensible, même si on désactive les styles !
<edit>grillé, y'avait longtemps
</edit> Modifié par Sopo (28 Aug 2006 - 00:20)
<edit> oups, grillée .....tiens il y avait encore du monde 
</edit>
:)
bonsoir,
visualise ta page sans css , ou avec un navigateur comme 'lynx".
Tu verras ce que google (entre autre) voit , grosso-modo.
C'est a dire que tes lien n'existent pas (illisiblent) pour les moteur de recherche ou tout autre media qui "regarde" ta page sans css (idem si l'affichage des images est "desactivé") ....
il t'est proposé de mettre l'image de fond dans les balises de liens (a la place de l'avoir en fond) , de cette façon si le css est desactivé il reste encore l'image visible , comprehensible et cliquable .
En reinseignant l'attribut alt de l'image , tu as la un texte alternatif qui s'affiche a la place de l'image si elle n'est pas telechargé par le navigateur et qui rend encore lisible le lien ("referençable " par google par exemple).
++
Modifié par gcyrillus (28 Aug 2006 - 00:32)
</edit>:)
bonsoir,
visualise ta page sans css , ou avec un navigateur comme 'lynx".
Tu verras ce que google (entre autre) voit , grosso-modo.
C'est a dire que tes lien n'existent pas (illisiblent) pour les moteur de recherche ou tout autre media qui "regarde" ta page sans css (idem si l'affichage des images est "desactivé") ....
il t'est proposé de mettre l'image de fond dans les balises de liens (a la place de l'avoir en fond) , de cette façon si le css est desactivé il reste encore l'image visible , comprehensible et cliquable .
En reinseignant l'attribut alt de l'image , tu as la un texte alternatif qui s'affiche a la place de l'image si elle n'est pas telechargé par le navigateur et qui rend encore lisible le lien ("referençable " par google par exemple).
++
Modifié par gcyrillus (28 Aug 2006 - 00:32)
a écrit :
Au fait: où avez-vous, les uns ou les autres, pêché cette idée saugrenue de liens vides ? Sur le site du Zéro ? Si un tutoriel d'Alsa ? Ailleurs ?
Je ne sais plus, il y avait un exemple qui suivait, lorsque la souris allait sur certaines zone de l'image, elle grandissait.
Dés que je retrouve, je vous tiens au courant, on m'avait dit que c'était une bonne solution pour mon cas, mais aprement on ma mal informé.
