[CSS] a:hover - menu - overflow - imbrication - div - dl - dd - dt

a:hover - menu - overflow - imbrication - div - dl - dd - dt [CSS] - HTML/CSS - Programmation

Marsh Posté le 14-10-2005 à 10:25:25    

Merci à ces 3 forumeurs pour leurs explications et leur grande générosité à aider : gatsusat, FlorentG, mechkurt (et merci aux quelques autres qui sont intevenus de ci de là)
 
Ce topic parle essentiellement de CSS
 
Je vais tenter de retracer ici les grands axes de leurs explications :
 

  • Définir une second type de lien a et a:hover : page 1
  • Mise en place d'un menu CSS (avec un peu de JS tout de même) : page 1 et page 2
  • La notion de dimension em pour garder des tailles relatives (à la place de px où pt dans certains cas) : page 2
  • L'overflow (intégrer du texte dans une boite avec ascenseur dans une page Web) à la place des frame/iframe obsolètes : page 2
  • Entête et Pied de page dans une seule page php (pour simplifier la mise en page et les mises à jour) : page 2
  • Arrêter d'utiliser systématiquement des <table> pour les mises en pages, mixer du div et des dl, dd, dt :  page 3
  • Différence entres classes et id (bloc) - Imbrication de div : page 3


A suivre ...
 
_____________________
Sujet initial de mon topic
_____________________
 
Bonjour à tous,
 
J'aimerais avoir deux types de lien a et a hover dans la même feuille et les appeler comme bon me semble selon les liens de ma page, est ce possible ?
 
est qu'un truc du genre
 
   a{font-family:Verdana;font-size:10pt;text-decoration:none;background-color:#D1E9F7;color:#000000;}
   a:hover{font-family:Verdana;font-size:10pt;text-decoration:none;background-color:#FAF5FA;color:#000000;}
 
   a.2{font-family:Verdana;font-size:10pt;text-decoration:none;background-color:#D1E9F7;color:#000000;}
   a.2:hover{font-family:Verdana;font-size:10pt;text-decoration:none;background-color:#FAF5FA;color:#000000;}
 
 
fonctionnerait :??:
 
'rki :jap:


Message édité par DrWatson le 25-10-2005 à 15:28:31

---------------
.:: Feed-Back  ::. Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie.
Reply

Marsh Posté le 14-10-2005 à 10:25:25   

Reply

Marsh Posté le 14-10-2005 à 10:29:18    

EN CSS à partir du moment ou tu as defini des propriétés sur un élément, ca ne sert à rien de les réécrires. puisque le A:hover aura par defaut les propriétés du a
 
idem pour le a.2 qui aura deja par defaut les propriétés du A
 

Code :
  1. a{
  2. font-family:Verdana;
  3. font-size:10pt;
  4. text-decoration:none;
  5. background-color:#D1E9F7;
  6. color:#000000;
  7. }
  8. a:hover{
  9. background-color:#FAF5FA;
  10. }
  11. a.lien2{background:red}
  12. a.lien2:hover{background:blue}


et ensuite dans tes liens tu as juste à faire ceci :  
<a href="" class="lien2">
les noms de classe ne commencent pas par des chiffres. et eviter les noms super court comme tu l'a fait


Message édité par gatsusat le 14-10-2005 à 10:29:35

---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 14-10-2005 à 10:44:27    

Merci bien !
 
Oui pour les noms, là c'était pour l'exemple, je met toujours des mots pour comprendre de quoi il s'agit (si tu voulais dire ça par "pas de nom court" )
 
merci encore :)


---------------
.:: Feed-Back  ::. Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie.
Reply

Marsh Posté le 14-10-2005 à 10:51:35    

et je vire mes déclarations en doublon, c'est bon à savoir :)


---------------
.:: Feed-Back  ::. Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie.
Reply

Marsh Posté le 14-10-2005 à 10:55:36    

ben nom court : 2
nom long : b2
 
lol
koi ke il vaut mieux etre un peu plus explicite :
un truc important ca sera : class="important"
et non pas class="rouge", si tu avais l'intention de le mettre en rouge


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 14-10-2005 à 11:11:06    

lol
 
yes :)
 
 
j'ai un gros pépin parce que mes liens sont dans du javascript
 
 
<font class='Menu'>[</font><a href="javascript:void(0);" onclick="return overlib('<li><a href=\'accueil.php\' class='lien2'> Page de démarrage</a></li><li><a href=\'news.php\' class='lien2'> Voir toutes les news</a></li><li><a href=\'identification.htm\' class='lien2'> Identification</a></li>', STICKY, CAPTION, 'ACCUEIL', CENTER, TIMEOUT, 3000);" onmouseout="nd();"><font class='Menu'>ACCUEIL</font></a><font class='Menu'>]</font>
 
du coup mon js ne marche plus :/
 
http://isislafurette.free.fr avant quant on cliquait sur un élément du menu, un petit sous menu s'ouvrait


---------------
.:: Feed-Back  ::. Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie.
Reply

Marsh Posté le 14-10-2005 à 11:15:40    

mais c'est koua ce caca ?
c'est koi tes font class="menu" ?
font ca existe plus
tu style via A boudiou
 
et puis un menu c'est pas comme ca, c'est plus comme ca :
http://css.alsacreations.com/Const [...] us-en-CSS/
http://css.alsacreations.com/Galeries-de-menus-en-CSS


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 14-10-2005 à 11:48:38    

ben j'avais besoin de changer la taille de la police pour mon menu et ça marche pourtant <font class='menu'>
 
pourquoi ça n'existe pas  
 
avant j'avais des images et des rolleover mais ça me prenait la tête quand je voulais changer les couleurs de ma feuille de style, alors je suis passé au texte, mais avant de me "compliquer" le menu, je commençais par du symple


---------------
.:: Feed-Back  ::. Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie.
Reply

Marsh Posté le 14-10-2005 à 11:49:45    

j'ai remis comme avant, regarde ce que me donne le javascript


---------------
.:: Feed-Back  ::. Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie.
Reply

Marsh Posté le 14-10-2005 à 12:00:08    

tu lis et tu regardes les liens que je t'ai donné, ou sinon je me fache.
 


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 14-10-2005 à 12:00:08   

Reply

Marsh Posté le 14-10-2005 à 12:21:59    

[:xx_xx]  
 
je vais lire mais je ne jette pas mon java script car j'ai mis une plombe à le mettre en place :o


---------------
.:: Feed-Back  ::. Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie.
Reply

Marsh Posté le 14-10-2005 à 12:22:23    

de toute façon c'est bookmarqué car j'approfondi de jour en jour les css


---------------
.:: Feed-Back  ::. Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie.
Reply

Marsh Posté le 14-10-2005 à 13:11:13    

ton javascript il est tout pourri et même pas accessible, une merde sans nom koi


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 14-10-2005 à 15:59:29    

stoi pourri :o t'insulte un peu trop rapidement, serais tu dieu tout puissant ?  [:kryten]  , il est accessible ici => http://isislafurette.free.fr/scripts/overlib.js et tape overlib dans google, sa bibliothèque de fonctions est super bien foutue


Message édité par DrWatson le 14-10-2005 à 16:00:23
Reply

Marsh Posté le 14-10-2005 à 16:21:25    

accessible ca vaut pas dire que les sources sont caché, de tout facon cacher des sources javascript :heink: ...
ca veut dire que si l'utilisateur a le javascript desactivé (comme environ 10% des gens) il ne pourra pas naviguer sur ton site...

Message cité 1 fois
Message édité par mechkurt le 14-10-2005 à 16:22:04

---------------
D3
Reply

Marsh Posté le 14-10-2005 à 16:26:00    

jvais checker ton menu pour  voir de plus pres, je croyais ke CT un menu entierement généré par JS


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 14-10-2005 à 16:28:06    

ton menu est bien innacessible, en desactivant le JS, on a plus accès à koi ke ce soit. LE JS de nos jours
et non pas comme 95% des gens font, est intrusif.
 
en gros le JS attaque le code HTML et lui rajoute des fonctionnalités.


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 14-10-2005 à 17:01:04    

L'overlib ? Loooooool :D
 
Edit : FlorentG ! FlorentG ! Y a quelqu'un pour toi !

Message cité 1 fois
Message édité par Roane le 14-10-2005 à 17:01:39

---------------
http://www.alsacreations.com, http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net. A ne surtout pas prendre en exemple : http://www.worldinternet.be
Reply

Marsh Posté le 14-10-2005 à 17:23:18    

mechkurt a écrit :

accessible ca vaut pas dire que les sources sont caché, de tout facon cacher des sources javascript :heink: ...
ca veut dire que si l'utilisateur a le javascript desactivé (comme environ 10% des gens) il ne pourra pas naviguer sur ton site...


 
 
j'avais pas pensé à ça, de toute façon tout faire en css ça me branche bien et les liens que gatsusat m'a donné vont bien m'aider :)


---------------
.:: Feed-Back  ::. Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie.
Reply

Marsh Posté le 14-10-2005 à 17:24:03    

Roane a écrit :

L'overlib ? Loooooool :D
 
Edit : FlorentG ! FlorentG ! Y a quelqu'un pour toi !


 
 
explique stp, c'est quoi le souci avec overlib :??: ça a l'air lourd mais ça tourne impec et on a le choix entre plein d'options  :??:


---------------
.:: Feed-Back  ::. Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie.
Reply

Marsh Posté le 14-10-2005 à 17:24:57    

gatsusat a écrit :

ton menu est bien innacessible, en desactivant le JS, on a plus accès à koi ke ce soit. LE JS de nos jours
et non pas comme 95% des gens font, est intrusif.
 
en gros le JS attaque le code HTML et lui rajoute des fonctionnalités.


 
 
merci pour les explications, en attendant de mettre mieux en place, je rajouterais une petite note comme quoi il est nécessaire d'activer js dans son navigateur :)


---------------
.:: Feed-Back  ::. Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie.
Reply

Marsh Posté le 14-10-2005 à 17:34:11    

vive le css!


---------------
D3
Reply

Marsh Posté le 14-10-2005 à 17:39:28    

DrWatson a écrit :

merci pour les explications, en attendant de mettre mieux en place, je rajouterais une petite note comme quoi il est nécessaire d'activer js dans son navigateur :)


 
Nan il n'est pas nécessaire, le JS c'est une merde inventée pour faire Chier !
 
Bocou de pro ici désactive le JS pour naviguer. Moi c'est tout autre, j'ai des raccourcis rapides pour le desactiver.  
 
un site qui nécessite le JS pour fonctionner, c'est un site malconcu


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 14-10-2005 à 17:47:30    

n'étant pas webmaster de formation, je suis déjà content de manier un peu le php+mysql+css, maîtriser le html, et me dépatouiller en graphisme un minimum. J'en apprend tous les jours quand j'en ai le courage et la motivation :)
 
mon prochain but ce sera de me passer de ma iframe mais je sais pas encore comment faire, tout comme là www.trance-goa.com j'ai encore de la frame :/


---------------
.:: Feed-Back  ::. Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie.
Reply

Marsh Posté le 14-10-2005 à 22:03:54    

j'ai regardé les deux liens et bcp de menus utilisent du js :lol:

Reply

Marsh Posté le 14-10-2005 à 22:04:59    

par exemple j'ai besoin de sous menus alors celui ci m'irait très bien : http://css.alsacreations.com/modelesmenus/hd1.htm#
 
j'ai fais afficher le code source et là :
 
<dl>  
  <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
   <dd style="display: none;" id="smenu4">
    <ul>
     <li><a href="#">Sous-Menu 4.1</a></li>
     <li><a href="#">Sous-Menu 4.2</a></li>
     <li><a href="#">Sous-Menu 4.3</a></li>
 
    </ul>
   </dd>
 </dl>

Reply

Marsh Posté le 14-10-2005 à 23:56:00    

DrWatson a écrit :

j'ai regardé les deux liens et bcp de menus utilisent du js :lol:


 
 
Normal des Menu CCS 100% ne marche que sous FF.
IE respectant à fond les normes W3C :lol:  :lol:  
 
 
Bientôt , bientôt...

Reply

Marsh Posté le 15-10-2005 à 05:09:41    

là ce n'est pas la meilleure méthode.
 
tiens un exemple de mmenu en JS ET CSS
http://gatsu.ftp.free.fr/html/Exem [...] cence.html
 
c'est représenté suos forme d'arborescence, mais je peut très bien mettre le menu à l'horizontale.
 
un conseil, evite de prendre le code de cette page car :
-Il y a un paquet de lignes que tu pourais peut etre pas comprendre au niveau du Js, mais j'ai super commenté la chose.
-Le code JS, est du code intrusif, il se debrouille tout seul pour rajouter les fonctionnalités.
-Ca fait bloat et faut que j'optimise le bousin
-C'est encore en version béta et j'ai fait ca juste pour m'occuper et le fun


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 15-10-2005 à 13:09:39    

xtof_83 a écrit :

Normal des Menu CCS 100% ne marche que sous FF.
IE respectant à fond les normes W3C :lol:  :lol:  
 
 
Bientôt , bientôt...


 
 
j'ai hate, parce que j'en ai trouvé un chouette rien qu'en css mais ie ne l'affiche pas du tout, et malheureusement on doit encore faire avec vu que cela représente la majorité. Bon autrement dit, autant garder mon menu js actuel :/

Reply

Marsh Posté le 15-10-2005 à 13:11:58    

@gatsusat : oui mais comme y'a du js de toute façon, cela revient au même que je garde mon menu actuel non :??: parce que là j'étais prêt à me défonser pour un truc 100% css mais je suis deg que ça passe pas sous ie. Savez vous si ie7 sera déjà plus "normalisé" ?

Reply

Marsh Posté le 15-10-2005 à 13:14:25    

question con : dans votre code source vous mettez toujours \n à la fin de chaque ligne pour avoir un code sourse aussi clair quand on l'affiche ?

Reply

Marsh Posté le 15-10-2005 à 13:45:43    

finalement mon menu en js fonctionne bien avec un class='lien2', j'avais juste oublié de mettre des \ avant chaque ' :)

Reply

Marsh Posté le 15-10-2005 à 14:06:56    

tu as regardé le code source ?
 
ce n'est en aucun cas du HTML généré à partir du Javascript.
 
là tu as la page telle qu'elle apparait, j'ai montré 3 exemples du menu.
 
1 menu avec JS et CSS
1 menu avec CSS seulement SANS JS
et un menu sans rien
dans les 3 cas c'est le meme code HTML
sauf que pour le premier je lui applique des CSS et du JS (via un id sur le menu)
le deuxieme seulement les CSS
et le troisieme, rien du tout


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 16-10-2005 à 01:25:36    

oui j'ai regardé et le seul qui pourrait m'interesser est le premier

Reply

Marsh Posté le 16-10-2005 à 09:18:13    

Ce que gatsusat essaie de t'expliquer, c'est que son menu fonctionne avec ou sans JS, et avec ou sans CSS. C'est donc un bon menu.
 
Le tien, il ne fonctionne pas du tout sans JS. Ca c'est carrément moins bon d'un coup :)


---------------
http://www.alsacreations.com, http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net. A ne surtout pas prendre en exemple : http://www.worldinternet.be
Reply

Marsh Posté le 16-10-2005 à 10:49:07    

salut,
 
je vais te donner la réponse sans discuter  ;)  
 
dans ta feuille de style tu mais ça

Citation :


#seconde-hover a:hover { color: #6EAD00; text-decoration: none; }


 
puis dans page  
 
tu fais <div align="center" id="seconde-hover">TON TEXTE ICI</div> .
 
ce n'est pas obligé de prendre la balise div !
 
tu peux prendre la balise que tu veux puis a l'interieur de la balise  
 
tu mets  <ta balise id="seconde-hover">  ;)  
 
voila  
 
 

Reply

Marsh Posté le 16-10-2005 à 13:03:09    

Roane a écrit :

Ce que gatsusat essaie de t'expliquer, c'est que son menu fonctionne avec ou sans JS, et avec ou sans CSS. C'est donc un bon menu.
 
Le tien, il ne fonctionne pas du tout sans JS. Ca c'est carrément moins bon d'un coup :)


 
 
merci pour la traduction, effectivement j'avais pas capté

Reply

Marsh Posté le 16-10-2005 à 13:04:33    

mansour, un peu compliqué comparé à la réponse donnée par gatsusat (deuxième post ;) ) mais je garde ça sous le coude pour tester merci

Reply

Marsh Posté le 16-10-2005 à 13:12:32    

Dans mon menu ie je ne trouve pas la désactivation du javascript, j'ai trouvé pour les applets java mais ça n'a aucun rapport. Je n'ai pas encore regardé dans firefox

Reply

Marsh Posté le 17-10-2005 à 11:40:39    

DrWatson a écrit :

explique stp, c'est quoi le souci avec overlib :??: ça a l'air lourd mais ça tourne impec et on a le choix entre plein d'options  :??:


44ko monstrueux pour un truc qui s'affiche pas sans JS et qui est configurable que-dalle en fait :D
 
Tu fait ton machin en HTML normal, que tu fais figurer dans ta page. Pis 10 lignes de JS pour gérer ça [:spamafote] Donc on peut faire 100x mieux facilement :(

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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