Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» Questions générales et questions de débutants
» Mon tout petit site réclame vos lumières braves gens !
Auteur
Mathieub
# 04 Jul 2009 - 13:14:03
Citer
33 Posts
 Salutations
Je suis nouveau, je me suis enfin décidé à m'inscrire sur ce très bon site smile

Bien donc, comme le titre l'indique, une question existentielle torture mon petit esprit malade.
En grand amateur (dans le sens gros "newb") j'ai fais mon petit site et le menu pose problème.
J'envisage de le refaire et je suis tombé, sur le site, sur un sujet qui parle donc de menus "tout html" versus "images css" (pour le hover, 'voyez de quoi je parle ?).

Donc, je pense refaire le menu avec la méthode des "portes coulissantes" que je ne conaissais pas, mais l'article sus mentionné (oui je parle bien parfois) m'indique que ce n'est pas conseillé de faire ca tout en css.

Ma question est donc, n'y a-t-il pas un moyen de faire ca "correctement" en passant par autre chose que du javascript (que je ne connais pas du tout et que j'aimerai éviter d'utiliser dans le cas présent) ?
(j'envisage d'apprendre PHP dans un avenir proche, peut-être en php ?)

La bête et son menu bancal:
www.pensera.webou.net

Vos remarques, avis et critiques (constructives hein... sinon je pleure et je l'dis à ma maman lol ) sont les bienvenues.
Merci bien cligne

Ps : Désolé si j'utilise pas les bons termes, j'apprends j'apprends biggrin

www.pensera.webou.net 
^
Heyoan
# 04 Jul 2009 - 13:49:08
Citer
Modérateur
8101 Posts
 Hello Mathieub et bienvenue, smile

Mathieub a écrit :
Ma question est donc, n'y a-t-il pas un moyen de faire ca "correctement" en passant par autre chose que du javascript (que je ne connais pas du tout et que j'aimerai éviter d'utiliser dans le cas présent) ?
(j'envisage d'apprendre PHP dans un avenir proche, peut-être en php ?)
En fait c'est assez simple : il faut que le libellé soit présent dans le code HTML pour qu'il soit accessible à tous et à tout type d'UA (soit sous forme de texte, soit dans l'attribut alt d'une image). Donc soit le hover ne modifie que l'arrière-plan auquel cas tu peux utiliser la technique des portes coulissantes puisqu'il ne s'agit que de présentation (CSS), soit le texte est contenu dans l'image (et donc accessible via le alt) et c'est l'image que tu souhaites remplacer auquel cas tu dois utiliser JavaScript. En l'occurrence PHP ne te servira à rien puisqu'il s'agit d'un langage serveur et qu'il est donc exécuté avant l'affichage de ta page web, contrairement à JavaScript qui est un langage client (il existe d'ailleurs une foultitude de scripts prêts à l'emploi via Google).

PS : pour ce qui est des avis et critiques il existe un salon exprès pour ça. cligne
Modifié par Heyoan (04 Jul 2009 - 13:50)
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
Mathieub
# 07 Jul 2009 - 17:43:34
Citer
33 Posts
 Bonjour Heyoan, merci ô grand Modérateur ravi
C'est bien ce que je pensais, je crois que je vais tout faire en css, même si bon c'est pas très correcte... c'est que mon 1er "vrai" site, j'y réfléchirais un peu avant la prochaine fois.


a écrit :
PS : pour ce qui est des avis et critiques il existe un salon exprès pour ça.

D'accord, je bosse sur la chose et dès que c'est terminé, je posterai un message pour avoir vos avis.
www.pensera.webou.net 
^
Mathieub
# 13 Jul 2009 - 21:54:55
Citer
33 Posts
 Je suis en train de retravailler mon menu, bien sur ca ne fonctionne pas sous ie ohwell
En attendant de trouver l'origine du problème, je suis tombé la dessus :

http://www.css4design.com/blog/utiliser-les-portes-coulissantes-pour-realiser-un-effet-de-zoom-au-passage-de-la-souris#comment-41

Ca fonctionne ? J'avais essayé un truc un peu comme ca en attendant, mais sans succès (mais je crois que je m'y était mal pris...)

...bon je garde ca sous le coude au cas ou mes nerfs lâcheraient avant d'avoir trouver ce qui cloche... j'y retourne.

EDIT: (j'edite mon post pour éviter de "triple poster", ca fait caca sinon lol )

Bien, drapeau blanc, la crise de nerfs est proche... HELP!

Donc, je refais le menu avec la technique des portes coulissantes, ca marche impec... mais qu'avec firefox/Opera!!! Ce maudit Ie veut ma peau! (la version 7 en tout cas).

Je ne comprends pas ce qui cloche... j'ai l'impression que ca viens de mon site, de la manière (certe un peu chaotique) dont il est fait... j'espère me tromper.

Mais si je regarde mes deux feuilles de style, je ne vois pas où ca pourrai gêner bawling
Si quelqu'un avait le courage de mettre les mains dedans, j'apprécierai...

Je colle un p'tit bout histoire de, mais je doute que le problème soit là (dsl si c'est un peu brouillon, j'ai changé, rechangé, rerechangé des trucs au fur et à mesure):

<div id="Fond_menu">           <!--Image sous les boutons du menu-->                                          

<ul id="menu">  <!--Menu - DEBUT -->                           

<li id="menu_bouton_accueil">  <a href="index.html">  </a> </li>   <!--Rubrique Menu01 "Accueil"-->

<li id="menu_bouton_photoshop"> <a href="photoshop.html">  </a> </li>   <!--Rubrique Menu02 "Photoshop"-->

<li id="menu_bouton_photos">  <a href="photos.html">  </a> </li>   <!--Rubrique Menu03 "Photos"-->

<li id="menu_bouton_sites">    <a href="sites.html">  </a> </li>   <!--Rubrique Menu04 "Sites"-->

<li id="menu_bouton_contact">  <a href="contact.php">  </a> </li>   <!--Rubrique Menu05 "Contact"-->

</ul>           <!--MENU - FIN-->                                        

</div>


Feuille de style pour firefox/opera


#Fond_menu {

position: absolute;

background-image: url(images_design/Fond_menu.jpg);

margin: 0px;

margin-left: 54px;

padding: 0px;

width: 115px;

height: 486px;

}



#menu {

padding: 0px;

padding-top: 10px;

margin: 0px;

list-style-type: none;

}







/* ACCUEIl ----*/

#menu_bouton_accueil a{

display: block;

margin: 0px;

padding: 0px;

width: 115px;

height: 75px;

background: url(images_design/menu/accueil.jpg) no-repeat right top;

}



#menu_bouton_accueil a:hover{ 

display: block;

margin: 0px;

padding: 0px;

width: 115px;

height: 75px;

background: url(images_design/menu/accueil.jpg)no-repeat left top;

}



Feuille de style ie7


#Fond_menu {

background-image: url(images_design/Fond_menu.jpg);

margin: 0px;

margin-left: 54px;

padding: 0px;

width: 115px;

height: 486px;

}

#menu {

padding: 0px;

padding-top: 10px;

margin: 0px;

list-style-type: none;

}







/* ACCUEIl ----*/

#menu_bouton_accueil a{

display: block;

margin: 0px;

padding: 0px;

width: 115px;

height: 75px;

background: url(images_design/menu/accueil.jpg) no-repeat right top;

}



#menu_bouton_accueil a:hover { 

display: block;

width: 115px;

height: 75px;

background: url(images_design/menu/accueil.jpg) no-repeat left top;

}


Je remet le lien vers le site pour les courageux aventurier(e)s, au cas où.
http://pensera.webou.net
Modifié par Mathieub (13 Jul 2009 - 22:41)
www.pensera.webou.net 
^
Mathieub
# 17 Jul 2009 - 14:16:06
Citer
33 Posts
 Un p'tit up.
Personne pour donner un coup de main ? bawling
Dites moi s'il manque des infos pour résoudre le problème.

EDIT: Ok c'est bon, "On n'est jamais mieux servi que par soi-même" ^^. J'ai effacé tout le menu et tout retapé, il devait y avoir une méchante faute sournoise là dedans (mes excuses à IE, pardon à la famille, tout ça).

Petit question, c'est convenable si je met le texte des rubriques du menu en gif ou png (avec transparence) et les Alt qui vont bien. Couplé avec un fond en css, ca devrait le faire je pense, nan? C'est correc' murf ?

J'ai également commencé de voir comme se fait un flux RSS, ca n'a pas l'air si compliqué (bon ca servira pas à grand chose sur ce site, mais faut bien que j'experimente ^^).

Ca doit pas interesser grand monde ce que je raconte mais bon... je mettrais tout ca dans mon flux quand il sera fait langue
Modifié par Mathieub (17 Jul 2009 - 22:44)
www.pensera.webou.net 
^
Le sujet est clos.
Aller à