France Hardware : Forums de discussion - Découvrez notre nouveau comparateur d'offres Internet
Retrouvez les prix près de chez vous :  
Index du forum | Liste des membres | Liste des groupes | Inscription | F-A-Q | Recherche
Pseudo :    Password :     
29 512 membres enregistrés - 2 069 327 posts - 122 028 topics
Index des forums FH  | Index des forums DegroupNews
      Programmation
           Langages Web
                comment mettre mon pied de page en bas
66 connectés(record : 2799 le 29 May 2016 - 15 h 34)

Vous devez vous connecter pour répondre au topic.
comment mettre mon pied de page en bas

javaphp


Messages : 8
Inscrit le 25/11/10
Ville : dardilly
Non connecté
  Posté le 16 December 2010 - 23 h 35 m 44 s
Salut a tous :)

j'ai un souci avec ma structure de page , je n'arrive pas à le fixer en bas le footer, il chevauche les autre blocs.

voici 3 bloc:

le bloc de gauche qui correspond a des articles principaux, le bloc de droite qui est aligné a des articles principaux qui est fait un sidebar un menu extensible.
ces 2 bloc sont dans un contenaire.


et en fin le dernier bloc qui me pose problème qui se trouve tout en bas de la page.
voici le html de la stucture
    Code     
 1. <!-- en haut le script de la page de l'entête -->
 2. 
 3. 
 4. <div id="article_menu">
 5. 
 6.    <p id="droite">
 7.        je suis le bloc de gauche, contenu principal
 8.    </p>
 9. 
10.    <span id=gauche"><!-- ici jai essayer de metre un p mais mon ide me dit qu'il y a une erreur -->
11.        <ul>
12.           <li>je suis un menu de gauche</li>
13.           <li>je suis un menu de gauche</li>
14.             .............
15.           <li>je suis le 11ème menu la hauteur de ce bloc est long</li>
16.        </ul>
17.   </span>
18. </div>
19. 
20. 
21. <br class="nettoyage"/>
22. 
23. 
24. <div id="footer">
25. <a> je suis le pied de page</a>
26. </div>
27. 
voici le css :
    Code     
 1. br .nettoyage
 2. {
 3. clear:both;
 4. }
 5. 
 6. #article_menu
 7. {
 8. width:100%;
 9. height:auto;
10. }
11. #gauche
12. {
13. float:left
14. width:800px;
15. height:auto;
16. }
17. 
18. #droite
19. {
20. float:right;
21. width:100px;
22. height:auto;
23. }
24. 
25. #footer
26. {
27. background color:black;
28. height:50px;
29. }
30. 


j'ai testé sous ie6,les positions des 3 blocs sont comme je le voulais par contre sous firefox
le footer chevauche le menu latteral disont qu'il se touve au millieux de l'écran pas tout en bas du bloc du menu lateral (on va dire que le menu lateral est plus long en hauteur que le bloc de droite et celui-ci ne pousse pas le footer tout en bas).

comment je peu arriver a faire en sorte que le footer soit bien en dessous de l'un des deux bloc droite ou gauche qui a la hauteur le plus long ?? j'ai peut être pas opter la meilleur solution,

merci pour la réponses :)




Message édité 7 fois, la dernière par javaphp le 16 December 2010 - 23 h 47.


grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 17 December 2010 - 15 h 20 m 00 s
hello,

normal :)
donc ok pour le conteneur "article_menu", mais les enfants doivent être des blocs, hors le span est une balise inline.
donc il faut créer soit 2 div, soit 2 p, et le tout en float: left
ensuite tu fais un clear:both pour virer le float.
tu fermes ton container
tu poses ton footer.

dans ta css, ya pas mal d'erreurs de syntaxe :
ligne 1 : pas d'espace entre "br" et ".nettoyage", soit tu mets que ".nettoyage", soit tu mets "br.nettoyage" bien que perso je mettrais br.clr car c'est plus court :)
ligne 8 et 9 : le width 100% ne sert a rien, une balise bloc utilise par défaut toute la largeur. le height: auto ne sert pas non plus, je pense plutôt que tu voulais utiliser un overflow: auto pour gerer le fond sous les 2 colonnes ;)
ligne 15 et 22 : pareil, pourquoi height auto ?? les conteneurs blocs s'auto étendent si tu ne spécifies pas la hauteur
ligne 22 : idem
ligne 27 : soit tu met un tiret entre background et color, soit tu mets que background qui suffit amplement ;)

voila :)

bon courage mister ;)




:firefox: :ol:

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 17 December 2010 - 15 h 20 m 26 s
sinon... plus de grille ?



:firefox: :ol:

javaphp


Messages : 8
Inscrit le 25/11/10
Ville : dardilly
Non connecté
  Posté le 17 December 2010 - 21 h 39 m 17 s
merci grabber :)

je n'utilise pas de grille cette fois ci car je pense que j'aurais du mal avec mon theme qui se compose de deux blocs d'images qui se collent comme un puzzle.

je vais te montrer mon schema de projet ce sera le plus simple pour comprendre ce que je souhaite faire:



donc j'ai 4 blocs horizontal parent:

-le header a 3 blocs enfants (le logo a gauche,au milieu la banière et enfin a droite la décoration)
-le menu horizontal 2 blocs enfants (qui je suis , me contacter etc...) et enfin a droite la décoration)
-le bloc principal 3 blocs enfants(article du site +decoration vertical+ menu des catégories)
-le footer 1 bloc enfant

le menu horizontal doit être aussi bien positionner avec sont bloc de décoration car c'est une suite de la bande de couleur, si je la position mal, l'image de la bande sera cassée.

pour moi si j'utilise une grille j'aurais du mal a faire en sorte que mon image en deux partie (le cercle violet qui est une image) soit correctement positionné à cause des goutières.

la partie header + menu horizontal tu aurais fait comment ?

moi j'ai utiliser comme position relative pour les parents et absolut pour les enfants. par contre lorsque je met la partie bloc principal pour j'ai été obligé de mettre une marge au dessu de la hauteur header+menu horizontal.

j'ai peut être utiliser une mauvais méthode ou qu'il y a plus simple.


Message édité 19 fois, la dernière par javaphp le 18 December 2010 - 00 h 07.


javaphp


Messages : 8
Inscrit le 25/11/10
Ville : dardilly
Non connecté
  Posté le 17 December 2010 - 23 h 49 m 17 s
"j'ai fait un autre poste pour que cela soit plus lisible"
(excuse moi les couleurs utliser sur le css ne correspond pas au schema que j'ai dessiner)

j'ai donc retravailler mon exemple sans mes grosses bêtises pour la partie princpal:
    Code     
 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 3.     <head>
 4.         <title>Exemple de CSS dans le header</title>
 5.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 6.         <style type="text/css">
 7. 
 8.             br.clr
 9.             {
10.                 clear:both;
11.             }
12. 
13.             #article_menu
14.             {
15.                 /* est t'il utlile de fixer un width:1200px ? car droite +deco vertical+ gauche 1200px */
16.                 background:gray;
17.             }
18. 
19. 
20.             #gauche
21.             {
22.                margin:240px 0 0 0;/*pour faire descendre le bloc sinon il est superposé au header*/
23.                 width:800px;
24.                 background:red;
25.                 float:left;
26.             }
27.             
28.            #deco
29.             {
30.                margin:240px 0 0 0;/*pour faire descendre le bloc sinon il est superposé au header*/
31.                 flaot:right;
32.                 width:100px;
33. 
34.              }
35.             #droite
36.             {
37.                margin:240px 0 0 0;/*pour faire descendre le bloc sinon il est superposé au header*/
38.                 float:right;
39.                 width:300px;
40.                 background: orange;
41.                 float:left;
42.             }
43. 
44.             #footer
45.             {
46.                 width:1200px;
47.                 height:50px;
48.                 background:blue;
49.             }
50.         </style>
    Code     
 1.     </head>
 2.     <body>
 3.         <div id="article_menu">
 4. 
 5.             <div id="gauche">
 6.                 <h1>    je suis le bloc de gauche, contenu principal</h1>
 7.             </div>
 8. 
 9.             <div id="deco"> 
10.                je suis vertical
11.             </div>
12. 
13.             <div id="droite"><!-- ici jai essayer de metre un p mais mon ide me dit qu'il y a une erreur -->
14.                 <ul>
15.                     <li>je suis un menu de gauche</li>
16.                     <li>je suis un menu de gauche</li>
17.                                  <li>je suis un menu de gauche</li>
18.                     <li>je suis un menu de gauche</li>
19.                     .............
20.                     <li>je suis le 11ème menu la hauteur de ce bloc est long</li>
21.                 </ul>
22.             </div>
23.         </div>
24. 
25. 
26.         <br class="clr"/>
27. 
28. 
29.         <div id="footer">
30.             <a> je suis le pied de page</a>
31.         </div>
32.     </body>
33. </html>


ce srcipt fonctionne quelle que soit la hauteur de droite ou gauche le footer reste en bas et ne chevauche plus

je ne sais pas pourquoi mais je m'obstinais de mettre un float a gauche et un autre a droite pas les deux a gauche. je n'avais pas songé a cette solution.




Je pensais mettre "height:auto" car je pensais que cela allait résoudre mon souci de faire pousser le footer en bas.


mais en fait dans quelle cas on a besoin de mettre float a droite ??


Message édité 2 fois, la dernière par javaphp le 17 December 2010 - 23 h 56.


Woofy
Totalement inutile, complètement indispensable

Messages : 31 539
Inscrit le 11/01/02
Ville : Lyon
Non connecté
  Posté le 18 December 2010 - 12 h 17 m 28 s
En fait, pour les float, soit tu veux tout empiler en partant de la gauche, soit tout empiler en partant de la droite. Grabber dit moi si je me plante.
En gros, ton float va coller ton bloc sur la gauche, sur le prochain bloc (ou le bord de l'écran). Donc lorsque tu veux mettre 3 colonnes, tu va avoir un bloc collé sur la gauche de l'écran, un bloc collé sur le bloc de gauche, et un bloc collé sur le bloc du milieu.
Il faut ensuite jouer avec les largeur pour avoir ce que tu veux, étant donner que si tu ne les spécifie pas, elles sont en automatique. Par exemple, une largeur fixe pour la colonne de gauche, une largeur fixe pour la colonne de droite, et la colonne du milieu prend ce qui reste. Si tu met en pourcentages, c'est encore plus simple vu que la somme des 3 doit faire 100%.
Donc c'est pour ça, lorsque tu utilise un float, il faut qu'ils soient tous dans la même direction pour le groupe de bloc qui sont collés les un contre les autres.

Je ne sais pas si j'ai été clair ! :D




javaphp


Messages : 8
Inscrit le 25/11/10
Ville : dardilly
Non connecté
  Posté le 19 December 2010 - 18 h 31 m 34 s
merci woofy , je vais reéssayer de revenire avec blue print, j'ai peu que à cause des goutières horizontal et vertical ca me gâche les images qui sont morceler en plusieurs morceaux, je vais essayer de jouer avec les position relatives négative pour supprimer ces zones.




grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 20 December 2010 - 15 h 50 m 24 s
chat-lu :)

desole je suis (encore) en plein demenagement, j'ai pas suivi depuis mon dernier post.

alors alors... ben kes tu branles ? t'as pas trouve plus complexe comme layout :lol:

enfin bon, c'est comme ca qu'on progresse :)

alors juste une parenthese sur les float, comme l'a dit woofy, c'est soit a gauche, soit a droite, ... soit les deux !
exemple :
2 blocs de 200 dans un layout de 900.
- si les 2 blocs sont en float: left, tu vas avoir 1 bloc de 200 puis a sa droite un autre bloc de 200, puis 500 de blanc
- si les 2 blocs sont en float: right, tu vas avoir un blanc de 500 puis un 1er bloc de 200 puis un second bloc de 200
- si tu as 1 bloc en left et l'autre en right, alors tu auras un bloc de 200, 500 de blanc et 200 colle a droite

voila voila.

ensuite pour la grille, je pense que tu devrais repartir dessus, et je vais essayer d'expliquer simplement pourquoi...
la grille est une aide, pas une absolue nécessité, elle te permet de caler certains blocs mais tu n'es pas du tout oblige de l'utiliser pour tout. d'autre part, chaque span-x peut être recoupe en "sous-span-x".

pour l'exemple je me base sur blueprint (qui est enfin passe en version 1.0...) :jap:

donc dans ton cas, voici ce que je ferais :
- un div class=container pour le header et le menu ensemble
- un div class=container pour le contenu
- un div class=container pour le footer


commençons par le header :
donc tu as une image a droite qui chevauche a la fois le header et le menu, donc cette image, on va l'appliquer en background du bloc global "header+ menu" genre comme ca :
    Code     
1. background: url(toto.png) no-repeat top right;

le fait de l'utiliser en background t'evite les soucis de calage d'un bloc ;)
ensuite donc il te reste au final a faire 2 blocs (1 pour le logo et 1 pour la banniere).
donc tu vas faire un "span-6" par exemple pour le logo et un "span-10 last" pour la banniere. l'image etant deja positionnee en background on s'en tape :)
ensuite, comme tu as fait un "last" alors tu reviens a la ligne, et la tu vas creer un "span-24 last" pour faire ton menu dedans.

ensuite le bloc principal contenu de page.
soit ta deco est un truc qui se repete sur la hauteur, auquel cas faut que tu te demerdes pour l'utiliser en background. typiquement, imaginons que la deco du milieu fasse 100px de large, ben tu prends ton photoshop (ou autre), tu ouvres ton image du decor qui va se repeter en hauteur, et tu l'etends en largeur pour atteindre les 950 de la grille, tu laisses tout le fond en transparent. au final, tu te retrouves avec une image de 950 de large en fond transparent, avec juste ton bout d'image au niveau des 2/3.
tu prends cette image ets tu la colles en background du container, de fait il te reste plus qu'a gerer les 2 colonnes avec la grille, genre span-16 (avec un append-2 par exemple pour ne pas ecrire dans la deco) et un span-6 pour la partie droite (24-16-2=6)
soit ta deco se repete pas et la faut que tu precises exactement ou tu veux en venir pour que je t'aide plus.

ensuite la footer : bah un span-24 last classique et tu mets ce que tu veux dedans. l'intérêt de la grille est que tu vas pouvoir faire de belles colonnes.

comprends tu ?



:firefox: :ol:

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 20 December 2010 - 16 h 04 m 45 s
en HTML et sous blueprint :


    Code html    
 1. 
 2. <div class="container" id="full_header">
 3.   <!-- 1ere ligne -->
 4.   <div class="span-8">logo</div>
 5.   <div class="span-8 last">banniere</div>
 6.   <!-- 2eme ligne -->
 7.   <div class="span-16 last">menu</div>
 8. </div>
 9. 
10. <div class="container" id="partie_centrale">
11.   <!-- 1ere solution -->
12.   <div class="span-15">contenu</div>
13.   <div class="span-1">deco</div>
14.   <div class="span-8 last">menu categorie</div>
15.   <!-- 2eme solution -->
16.   <div class="span-15 append-1">contenu</div>
17.   <div class="span-8 last">menu categorie</div>
18. </div>
19. 
20. <div class="container" id="footer">
21.   <div class="span-8">footer col 1</div>
22.   <div class="span-8">footer col 1</div>
23.   <div class="span-8 last">footer col 1</div>
24. </div>
25. 
26. 
voila pour la structure ! les 2 solutions proposes pour le centre dépendent de si tu fais un background de 950 (2eme solution) ou si tu fais le background dans une seule colonne (1ere solution). ensuite on oublie pas la css :
    Code html    
1. #full_header { background: url(toto.png) no-repeat top right; }



pour mieux t'y retrouver, je te conseille de partir de ça, j'ai pas teste mais ça me semble correct a 1ere vue... ensuite, met des id sur les différentes parties, ça te permettra d'appliquer tes css d'une part, et tu en auras besoin par exemple si tu utilises jquery derrière pour recalculer les hauteur de tes colonnes et éviter d'avoir dans un même bloc des colonnes de tailles différentes. a noter que tu peux aussi pour cela prendre le bloc parent, calculer les hauteurs des blocs enfants et d'étendre tous les blocs enfants a la hauteur max... ça dépend comment tu le sens, passer par le parent évite d'ajouter des ids de tous les cotes mais cela demande forcement une bonne connaissance de la manipulation du dom, avec les id c'est plus évident disons...

ca te convient ?

n'hesites pas si tu ne comprends pas ou s'il y a des erreurs, j'ai tout tape a la volée donc bon...

a+

oliv



:firefox: :ol:

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 20 December 2010 - 16 h 09 m 03 s
complement d'info...
je suis pas sur de m'être bien exprime en ce qui concerne blueprint.
par défaut un "container" est un "span-24" (last implicite), du coup tu peux scinder ta page en X containers suivant tes besoins, aucun problème.
ensuite l'utilisation de last dit juste qu'il n'y a plus de bloc flottant derrière. c'est un peu comme si tu faisais un <br style="clear: both" />. le last te permet donc le retour a la ligne, si tu as des soucis avec lui ajoute un clear both comme dit juste avant.

le "append-1" permet de laisser un ou plusieurs blocs vide a droite du bloc courant, donc ici j'en laisse 1, un append-2 en laissera 2 etc...

sinon le reste je pense que tu as pige ;)



:firefox: :ol:

javaphp


Messages : 8
Inscrit le 25/11/10
Ville : dardilly
Non connecté
  Posté le 20 December 2010 - 18 h 37 m 09 s
merci , j'ai donc repris blue print, et fait ce que tu m'a conseiller
    Code     
 1. <div class="container" id="full_header">
 2. 
 3.     <div class="span-7" id="logo">
 4.         je suis le logo
 5.     </div>
 6. 
 7.     <div class="span-9 last" id="carrousel">
 8.         je suis le carrousel
 9.     </div>
10. 
11. 
12.     <div class="span-24" id="menu_horizontal">
13.         <ul id="menu_qui">
14.             <li>partie1</li>
15.             <li>partie 2</li>
16.             <li>partie 3.</li>
17.         </ul>
18. 
19.     </div>
20. </div><!-- fin full header -->
21. 
j'ai crée une image de 950px X 250px (200 pour la hauteur du log et 50 pour la hauteur du menu horizontal) c'est comme tu me l'a dit ca se place au pixel prêt ! :) maintenant je suis coincé sur la partie sidebare :( j'ai un problème avec un un alignement des categories. sur la sidebare je souhaite afficher une image (qui tournera avec jquery quand on passe dessus, c'est le carré jaune) donc voici la partie central :
    Code     
 1. <div class="container" id="partie_central">
 2. 
 3.     <div class="span-17" id="article">
 4. je suis la partie article
 5. </div><!-- fin article -->
 6. 
 7. <div class="span-7 last" id="sidebar">
 8.            je suis la partie sidebare
 9. </div><!-- fin partie central -->
10. 
voici ce qu'il y dans la partie sidebar
    Code     
 1.     <ul id="categorie">
 2. 
 3.         <li class="cat-item cat-item-6">
 4.             <a class="deco_sidebar"><img class="tourne" src="wp-content/themes/modele/image/tourne.png"/></a>
 5.             <a class="categorie_menu" href="http://localhost/transmission-mecanique/?cat=6" title="Voir tous les articles classés dans Bandes">Bandes</a>
 6.   
 7.         </li>
 8. 
 9.         <li class="cat-item cat-item-5">
10.              <a class="deco_sidebar"><img class="tourne" src="wp-content/themes/modele/image/tourne.png"/></a>
11.             <a   class="categorie_menu" href="http://localhost/transmission-mecanique/?cat=5" title="Voir tous les articles classés">classe</a>
12.         </li>
13. 
14.       etc ...
15. 
16.     </ul>
17. 
ici ma partie class deco_sidebar (partie jaune) n'est pas aligné avec la partie categorie_menu ( affichage les categories en gris) qui est l'affiche et le lien de la catégrorie qu'on veut regarder. voici ce que j'ai tenter avec le css:
    Code     
 1. 
 2. #partie_central /* les article + les sidebar*/
 3. {
 4.     padding:0px;
 5.     margin:0 auto 0 auto;
 6. 
 7. }
 8. 
 9. #article
10. {
11.     background:gray;
12. }
13. 
14. 
15. #sidebar
16. {
17. 
18. 
19. }
20. 
21. 
22. li.cat-item
23. {
24.     margin:10px 0 0 0;
25.     background:black;
26.     list-style: none;
27. }
28. 
29. 
30. 
31. .deco_sidebar
32. {
33.     display: block;
34.     background:blue;
35.     width:65px;
36.     float:left;
37. }
38. 
39. 
40. .categorie_menu /*affichage categorie */
41. {
42.     text-transform: uppercase; /* mettre tous les categories en majuscule */
43.     display: block;
44.     background:bisque;
45.     text-decoration: none;
46.     width:150px;
47.     float:left;
48. }
49. 


magré que je fasse un float left sur le deco_sidebar et categorie_menu, l'image et le texte ne sont pas aligné.
on dirait que malgré que je leurs mis en display bloc avec des dimensions, l'imge se comporte comme un inline, l'affichage des categories pouss au dessous du carré jaune
je sais pas si j'ai bien expliquer mon problème.



Message édité 8 fois, la dernière par javaphp le 20 December 2010 - 22 h 30.


grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 21 December 2010 - 10 h 13 m 35 s
ok donc tu as réussi le haut si je comprends bien, ainsi que l'article, super.

passons a la sidebar :)

donc tu as bien fait de créer un div span pour le conteneur, et tu as encore bien fait de créer un ul pour tes catégories en dessous.
pour commencer, il te faut placer "du fixe" avant d'interagir avec jquery sinon tu vas te faire chier. on positionne toujours le statique et ensuite on dynamise, ce qui reste logique vu que ce n'est que de la transformation du dom depuis des elements existants :jap:

deja ce que je vois c'est que les classes de tes li ne vont pas, il y a confusion entre "class" et "id".
pour rappel, on utilise une classe pour un ensemble d'éléments qui ont la même structure, donc ici les li, donc quand tu ecris "li class=blabla" ça c'est bon.
par contre on utilise des id lorsque l'on souhaite identifier un élément particulier et unique. donc ici, au lieu d'avoir li class="toto toto2" puis li class="toto toto3", on devrait avoir cela :
    Code     
1. <li class="cat-item" id="cat-item-6">...</li>
2. <!-- et pour les suivants... -->
3. <li class="cat-item" id="cat-item-7">...</li>
mais cette méthode est un peu archaïque, il est plus optimise de minimiser le nombre de classes utilisées, pour cela tu peux te référer au conteneur ul ;) comme ça :
    Code     
1. <li id="cat-item-7">...</li>
de cette façon, tu peux toujours accéder en direct à chaque li via son id, mais pour accéder à tous les li (donc actuellement représentés par ta classe devenue inutile), tu feras cela en css puis en jquery :
    Code     
1. <!-- en css -->
2. ul#categorie li { bla bla bla }
3. <!-- en jquery -->
4. $('#categorie li').....
on se rend bien compte ici de l'inutilité de la classe puisqu'on joue sur l'héritage du parent ;) imaginons qu'on souhaite optimiser encore plus ! on remonte d'un niveau et on tombe sur un id ! donc allez on refait la même :)
    Code     
1. <!-- en css -->
2. #sidebare ul li { bla bla bla }
3. <!-- en jquery -->
4. $('#sidebare ul li').....
Attention ! cela n'est valable que si tu n'as qu'une seule liste dans le container... forcément, sinon cette notation s'appliquera à toutes les listes du conteneur ;) Mais là encore, on pourra jouer avec la pseudo classe :first-child reconnue en css et en jquery pour palier au problème et n'appliquer le code que sur la première liste (par exemple, mais ça peut être last-child pour la dernière ou nth-child pour une particulière...) ensuite on attaque le markup html de ta liste, moi je ferais cela (je test pas, tu regardes et t'adaptes au besoin...)
    Code     
 1. <div class="span-7 last" id="sidebar">
 2.   <ul>
 3.     <li id="cat-6">
 4.       <a href="lien6.php" class="side_image"><img src="toto.png" width="100" height="100" alt="" /></a>
 5.       <a href="lien6.php">nom cat 6</a>
 6.     </li>
 7.     <li id="cat-7">
 8.       <a href="lien7.php" class="side_image"><img src="toto.png" width="100" height="100" alt="" /></a>
 9.       <a href="lien7.php">nom cat 7</a>
10.     </li>
11.   </ul>
12. </div>
13. 
14. <style type="text/css">
15. /* on reset le css de la liste pour virer les paddings, marges et la puce */
16. #sidebar ul, #sidebar ul li {
17.   margin: 0;
18.   padding: 0;
19.   list-style: none;
20. }
21. /* on style notre li / attention a la marge, on la met tjr en bottom et pas en top, sinon sur la 1ere tu as une marge en haut qui n'est pas forcement souhaitable pour l'alignement */
22. #sidebar ul li {
23.   display: block;
24.   margin: 0 0 10px 0;
25. }
26. /* on va gérer le float, pour cela on commence par créer le lien image en inline-block */
27. a.side_image {
28.   display: inline-block;
29.   width: 100px; /* taille de la miniature */
30.   height: 100px; /* idem */
31.   margin: 0 10px 0 0; /* marge a droite de l'image */
32. }
33. </style>


je ne met rien d'autre car normalement le inline-block te permet de gérer implicitement le float (je crois que la il n'est pas nécessaire, a verif), le lien est bien un bloc mais il garde un comportement inline. le second lien va donc se mettre a cote.
si ca chie, ou si tu as des problèmes d'espacement vertical, alors je te conseille de plutôt créer tous les liens en inline-block en remplaçant dans la css ci-dessus "a.side_image" par "#sidebar ul li a", par contre tu devras virer le width et le height ;)

essayes de faire comme ça et redis moi :jap:

si tu as des questions je suis par là :)

a+



edit : j'avais oublie une quote dans le code jquery :)


Message édité 1 fois, la dernière par grabber le 21 December 2010 - 10 h 15.

:firefox: :ol:

javaphp


Messages : 8
Inscrit le 25/11/10
Ville : dardilly
Non connecté
  Posté le 21 December 2010 - 21 h 35 m 04 s
je te remercie infiniment grabber :), ca commence à ressembler a ce que je souhaite faire, par contre j'ai un os sur l'alignement du texte voici un rendu du sidebar sous firefox et ie6 ( :nrv: ce fichu ie6 )

    Code     
1. 
j'ai vonlontairement mis des couleurs laide en fond pour voir le défaut. voici le html
    Code     
 1. 
 2.     <ul>
 3.        
 4.         <li cat-item-6">
 5.    
 6.             <a class="side_image"><img class="tourne" src="tourne.png"/></a>
 7.             <a class="categorie_menu" href="cat1=" title="cat1">cat 1</a>
 8.   
 9.         </li>
10. 
11.         <li cat-item-5">
12.              <a class="side_image"><img class="tourne" src="tourne.png"/></a>
13.              <a class="categorie_menu" href="cat2" title="cat2"</a>texte long de chez lon ..</a>
14.         </li>
15. </ul>
et le css
    Code     
 1. /* on reset le css de la liste pour virer les paddings, marges et la puce */
 2. #sidebar ul, #sidebar u li
 3. {
 4.    margin:0;
 5.    padding:0;
 6.    list-style: none;
 7. 
 8. }
 9. 
10. #sidebar ul li
11. {
12.     display: block;
13.     margin: 0 0 10px 0;
14.     background: orange;
15. }
16. 
17. 
18. /* on va gérer le float, pour cela on commence par créer le lien image en inline-block */
19. 
20. a.side_image
21. {
22. 
23.     display: inline-block;
24.     width:70px;
25.     height:70px;
26.     margin: 0 0 0  0;/*marge a droite de l'image*/
27.     padding:10px 0 0 0;
28.     background: blue;
29. }
30. 
31. .categorie_menu  /* tentative d'aligner verticalement le texte */
32. {
33.     font-size: 1.4em;
34.     float: right;
35.     background:red;
36. }
j'ai donc résussi à centrer l'image qui est un pigon mais je n'arrive pas a centrer corretement le texte. si j'enlève le float right de .categorie_menu, le text est aligné en bas du bloc mais je n'arrive pas a le centrer verticalement avec un position relative ou une marge.
    Code     
1. a.categorie_menu
2. {
3.     position: relative;
4.     top:10px;
5.     font-size: 1.4em;
6.     background:red;
7. }
je me suis peut être mal prix pour center l'image, si j'enlève le inline-bloc du coté de ie6, c'est chamboulé (inline-block je ne connaisais pas) lorsque j'aurai bine placé tous les élements je commencerai à testé mon animation. au faite si j'écris cela
    Code     
1. a.categorie_menu
on pointe sur la même chose que
    Code     
1. .categorie_menu


entre les 2 la différence se voit uniquement si on se sert du dom avec jquery ?


Message édité 11 fois, la dernière par javaphp le 21 December 2010 - 21 h 59.


grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 23 December 2010 - 09 h 42 m 30 s
salut,

alors déjà ton code du lien est faux dans le 1er bloc de code que tu as mis. mais c'est pas trop le problème d'alignement, le remettre en ordre ne fera pas de mal mais ne résoudra pas le problème.
pas facile le diag, il me faudrait une page ou se trouve le code pour voir tes blocs. pour moi le float right n'est pas nécessaire, c'est lui qui doit faire merder, le comportement en inline-block fait en gros comme un float left. par contre, ce qui me choque c'est que le texte se retrouve en dessous de l'image, on dirait que ton bloc image fait toute la largeur du li et que du coup l'autre bloc se retrouve logiquement en dessous. après est ce une bizarrerie d'IE6 ??? who knows ?

alors bon :
- IE6 n'est plus supporté nulle part donc j'aurais tendance a dire que si ça marche sur le 7 laisses tomber IE6, mais bon...
- donc essayes dans IE 7 8 et 9 voire safari et chrome pour faire un état des lieux. si le problème est juste sur IE6 alors on va essayer une bidouille. tu vas faire une css conditionnelle pour IE6 uniquement et tu vas coller...


STOP ! je crois que je sais !
les liens... on a fait un inline-block pour l'image mais pas pour le texte !
donc :
    Code     
1. #sidebar ul li a { display: inline-block; }


vires le display inline block de a.side_image vu qu'on le définit avec le bout que je viens de te filer (met ce bout au dessus de a.side_image dans ta css). normalement ça devrait régler le problème. pour faire cela commente a.categorie_menu car le float ne devrait plus être nécessaire, tu ajusteras ensuite. le position relative ne sert a rien non plus, c'est son comportement par défaut.


sinon pour en revenir au hack IE6, tu peux tenter la marge negative si tes blocs "li" font tous la même hauteur.
un truc genre : margin-top: -100px ou alors : margin: -100px 0 100px 0
ca tu l'appliques sur le 2eme lien, celui ou tu as ton texte.



dernier point pour ta dernière question :
a.categorie_menu et .categorie_menu ne sont pas vraiment la même chose... enfin pas tout a fait...
dans l'absolu oui, mais on pourrait très bien avoir des liens avec la classe categorie_menu et aussi des paragraphes par exemple, donc ça :
a.categorie_menu
p.categorie_menu
dans ce cas, la css appliquée a .categorie_menu serait appliquée sur les liens et les paragraphes ;)

dans l'absolu, c'est un peu con de mettre une même classe sur des éléments différents sauf besoin précis mais bon voila, c'est pour l'explication.

apres, concernant ta dernière phrase, j'éclaircis un peu :
- le DOM est la structure de ta page
- jquery ne fait que manipuler le DOM, donc ici ce n'est que du css, jquery ou pas, cela ne change donc rien.

globalement, d'abord on positionne, puis on manipule, mais c'est évident que pour manipuler, la page doit déjà être béton sinon ça part en couille de toux les cotes.

et dsl de pas être revenu hier je déménageais !!!

++



:firefox: :ol:

javaphp


Messages : 8
Inscrit le 25/11/10
Ville : dardilly
Non connecté
  Posté le 23 December 2010 - 23 h 13 m 45 s
Prends ton temps pour démanager i:) et de me répondre; et passe de bonnes fêtes :)

    Code     
1. sinon pour en revenir au hack IE6, tu peux tenter la marge negative si tes blocs "li" font tous la même hauteur.
2. un truc genre : margin-top: -100px ou alors : margin: -100px 0 100px 0
j'ai donc essayer de crées 2 css pour faire un margin-top. voici ce que ca donne je remet script html
    Code     
 1. <ul>
 2.    
 3.         <li id="cat-item-5">
 4.             <a><img class="tourne"themes/modele/image/tourne.png"/></a>
 5.             <a class="text" href="http://localhost/test/?cat=6" title="Voir tous les articles classés dans Bandes ">
 6. menu cour
 7. 
 8.        </a>
 9.     </li>
10. 
11.         <li id="cat-item-6">
12.             <a><img class="tourne" src="themes/modele/image/tourne.png"/></a>
13.             <a class="text" href="http://localhost/test/?cat=6" title="Voir tous les articles classés dans Bandes ">
14. menu un peu long
15. 
16.        </a>
17.     </li>
18. 
19. 
20. </ul>
21. 
voici le css par defaut
    Code     
 1. css général
 2. 
 3. #sidebar ul
 4. {
 5.     padding: 0;
 6.     margin: 0;
 7.     list-style: none;
 8. 
 9. }
10. 
11. #sidebar ul li
12. {
13.     margin:0 0 1em 0;
14.     display: inline-block;
15.     padding:0;
16.     height: 50px;
17.     width: 260px;
18.     background: url('image/fleche.png') no-repeat 0px -30px; /*placement de la flèche orange afin qu'il soit caché*/
19. 
20. }
21. 
22. #sidebar ul li a img  /*image du pigon*/
23. {
24. 
25.     display: inline-block;
26. }
27. 
28. #sidebar ul li a.text/*texte de la categorie */
29. {
30. float:right;
31. position: relative; /*alignement du texte avec un top -15px */
32. top:15px;
33. text-transform: uppercase;
34. }
voici ce que ca donne sous ie7 et firefox j'ai donc cree un deuxième css (bug_ie.css) et ajouter à la fin de head.
    Code     
1.                         <!--[if IE]>
2.             <link rel="stylesheet" href="/themes/modele/bug_ie.css" media="screen, projection">
3.             <![endif]-->
et voici le css
    Code     
 1. /*bug_ie.css*/
 2. 
 3. #sidebar ul li a.text/*texte de la categorie */
 4. {
 5.     display: inline;
 6.     background:greenyellow;
 7.     margin:-55px  0 0; /*faut monter le texte pour qu'il soit aligner */
 8.     padding:0 5px 0 0;/* mettre un petite expace a la fin du texte sinon on ne vois plus la dernière lettre */
 9.     font-size: 14px;
10. }
donc j'ai un peu près aligner comme je voulais le texte avec une position relative avec firefox (sinon c'est pas aligner verticalement même avec vertical-align="middle") et des margin negatif. maintenant avec jquery j'aimerais lorsque je survole "#sidebar ul li" faire tourner le pigon, ici pas de souci ca fonctionne a merveille sur ie7 (j'ai laisser tomber ie6, je mettrais un message que ce navigateur est trop vieux tampis pour les bug de transparence même si je peux corriger avec le png 8bit mais c'est pas beau) et firefox. En meme temps j'aimerais que la flèche orange de déplace vers la droite toujours lorsque je pointes le menu, et lorsque je sort j'aimerai que la flèche revient au début. cette flèche orange est une image en background de "#sidebar ul li". j'ai récuperer ce plugin: http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html voici le script jquery que je lui ai appliquer:
    Code     
 1.     <script type="text/javascript">
 2. $(document).ready(function () {
 3. 
 4.     $('.tourne').rotate({
 5.         maxAngle: 90,  
 6.         minAngle: -55
 7.     });
 8. 
 9.     $('#sidebar li').hover(function () {
10.         $(this).find('.tourne').rotateAnimation(85);
11.         $(this).animate({
12.             backgroundPosition: '50px 0px'/* a gauche horizonal a droite en hauteur */
13.         });
14.     }, function () {
15.         $(this).find('.tourne').rotateAnimation(-35);
16.         $(this).animate({
17.             backgroundPosition: '-40px 0px' /*retour */
18.         });
19.     });
20. });
21. 
22. 
23.     </script>
24. 


ce script fonctionne parfaitement avec firefox, la fleche se déplace bien de 50 px en avant et recule de 40 px.
sur ie7 c'est une autre paire de manche

en démarrage c'est ok, lorsque je ponte sur le menu, le flèche est tout de suis mis a 50 px vers la droite mais il n'y a pas de déplacement
on dirait que que le déplacement a été très brève.

lorque que je suis en dehors du menu, mon flèche reste bloqué vers la droite, il n'y a que la rotation du pigon est fonctionne correctement

on peut faire quelque chose pour amélioré tous ça?



Message édité 17 fois, la dernière par javaphp le 25 December 2010 - 15 h 21.


javaphp


Messages : 8
Inscrit le 25/11/10
Ville : dardilly
Non connecté
  Posté le 03 January 2011 - 21 h 11 m 59 s
je te souhaite une bonne année 2011 , une bonne sante et mes meilleurs voeux :)

j'ai pu me débatouiller pour cette histoire d'incompatiblité sous ie7, j'ai triché :hot: j'ai télécharger un plugin sur le background du coup cela marche très bien
    Code     
 1. <script type="text/javascript">
 2.     $(document).ready(function () {
 3. $('#sidebar li').css({backgroundPosition: '0px 0px'}); /* initialisation de la postion de depart*/
 4. 
 5.         $('.tourne').rotate({
 6.             maxAngle: 90,
 7.             minAngle: -55
 8.         });
 9. 
10.         $('#sidebar li').mouseover(function () {
11.             $(this).find('.tourne').rotateAnimation(85);
12.         }, function () {
13.             $(this).find('.tourne').rotateAnimation(-35);
14.         });
15. 
16.         $('#sidebar li')
17.         .mouseenter(function(){
18.             $(this)
19.             .animate({backgroundPosition: '50px 0px'},1000)
20.             .animate({backgroundPosition: '0px 0px'})
21.             ;
22.         });
23. 
24. 
25.     });
26. </script>




Message édité 1 fois, la dernière par javaphp le 03 January 2011 - 21 h 12.


Page genérée en 1.1791 secondes par RahForum 2.0 | Gzip off |  Stats |  Metaforums |  RSS
© 2004 Cerbere Systems.
Prix Matériel Informatique | Informatique Lyon | Informatique Grenoble | Informatique Annecy | Informatique Marseille | Informatique Bordeaux | Forum Informatique
ADSL | Actualité ADSL | Deligo | Appareil photo | Commande Au Volant
Creative Commons
Message Boards and Forums Directory