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 511 membres enregistrés - 2 069 318 posts - 122 026 topics
Index des forums FH  | Index des forums DegroupNews
      Programmation
           Langages Web
                aligner 3 éléments avec blue print
119 connectés(record : 2799 le 29 May 2016 - 15 h 34)

Vous devez vous connecter pour répondre au topic.
aligner 3 éléments avec blue print

keo
symfony2

Messages : 3 031
Inscrit le 08/11/02
Non connecté
  Posté le 21 July 2010 - 21 h 29 m 06 s
bonsoir, j'essaye de faire une entête
Pour tester si je suis bien alligner horizontalement est verticalement j'ai appliquer un css de hauteur 150 px et de différentes couleurs
voici le script
    Code     
 1. <div class="container">
 2.         <div class="span-24 last" id="haut"></div><!--espace haut -->
 3. //bloc span colorier en noir
 4. 
 5.         
 6.     <div class="span-3 last"><!-- le logo -->
 7.                 <div id="logo">logo</div>  
 8. //bloc span colorier en rouge
 9.     </div>
10.         
11.         <div class="span-19 last" id="banniere"><!-- la banniere -->
12.         labanniere
13. //bloc span colorier en vert
14.         </div>
15.         
16.         <div class="span-2 last" id="droite_banniere">
17.         la fin
18. en rouge
19. </div>
20. </div>
21. 
22. le css 
23. #haut
24. {
25. 	height:16px;
26. 	background-color:black;
27. 	border:solid 1px black;
28. }
29. 
30. #logo
31. {
32. 	height:150px;
33. 	background-color:red;
34. }
35. #banniere
36. {
37. 	height:150px;
38. 	background-color:green;
39. }
40. #droite_banniere
41. {
42. 	height:150px;
43. 	background-color:red;
44. }
45. 


j'ai 4 éléments
une bande noire qui prend toute la place des 950 px
une bande gauche +le millieu +bande droite

ce que je en comprend pas c'est que la bande droite n'est pas aligné avec la bande noire il manque quelque au moin 20px

span-3 + span 19 + span-2 correspond à 24 span ? comment les faire alligner la bande noire et le bloc rouge de droite ?
car si je met un fond sur le denier bloc bande droite, j'aurais un trou blanc

une image c'est plus parlant
http://img199.imageshack.us/img199/2720/bandep.jpg

merci de la réponses


Message édité 2 fois, la dernière par keo le 21 July 2010 - 21 h 30.

java

luigi.c
Modérateur
Je me marre !!!

Messages : 10 377
Inscrit le 22/10/03
Ville : Fontaine, Isère.
Non connecté
  Posté le 22 July 2010 - 16 h 43 m 53 s
Essaye:
    Code     
1.  <div class="span-3 last" id="droite_banniere">


Je sais c'est pas logique...




keo
symfony2

Messages : 3 031
Inscrit le 08/11/02
Non connecté
  Posté le 22 July 2010 - 17 h 43 m 47 s
merci de ta réponse , si je fait un last le bloc fin va aller a la ligne, je vais essayer de me débrouiller autrement.
j'ai mis ces 4 éléments dans un tableau ca va l'écart se réduit mais c'est pas encore parfait


Message édité 1 fois, la dernière par keo le 22 July 2010 - 17 h 45.

java

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 27 July 2010 - 16 h 41 m 32 s
n'importe quoi les jeunes...

bon alors : le LAST veut dire que tu arrêtes après ce bloc d'en mettre d'autres dans la limite des 24 blocs de ta grille.

donc si tu as 3 blocs, un de 6, un de 12 et un autre de 6, tu fais ca :

    Code     
1. 
2. <div class="span-24 last"> <!-- un container... -->
3. 
4.   <div class="span-6">colonne 1</div>
5.   <div class="span-12">colonne 2</div>
6.   <div class="span-6 last">derniere colonne</div>
7. 
8. </div>


sinon un autre truc, dans un div class=span-machin, si le div est vide, alors il faut mettre un &nbsp; dedans sinon le div n'est pas pris en compte ;)


keo > si c'est pour faire des tableaux pourris arrêtes tout de suite le css, soit tu le fais bien soit tu le fais pas.
lis la doc, c'est quand même pas complique de lire et de compter jusqu'à 24... blueprint c'est quand même super simple, pis au pire regardes la css !

basiquement, tous les span-xx sont des float, le last inclue un clear pour "casser" le flux des float, c'est aussi bête que ca :)



:firefox: :ol:

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 27 July 2010 - 16 h 46 m 08 s


Le 22 juillet 2010 - 16 h 43, luigi.c a écrit :
Essaye:
    Code     
1.  <div class="span-3 last" id="droite_banniere">


Je sais c'est pas logique...



alors la encore, n'importe quoi !!!
c'est justement TRES LOGIQUE !
la classe détermine le nombre de colonnes, mais c'est évident que si t'as 2 colonnes de même taille avec une mise en forme différente tu vas pas pouvoir gérer facilement ta css ! hormis avec des first-child last-child (ou jquery), que je ne développerai pas ici étant donne les problèmes de compatibilité inter navigateurs.
DONC OUI ca sert ! l'id va déterminer la mise en forme de chaque div indépendamment de la taille gérée par la classe.

ah ben vous m'faites une belle équipe tous les deux :lol:



:firefox: :ol:

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 27 July 2010 - 17 h 17 m 33 s
chouette un peu de pub :lol:



:firefox: :ol:

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 27 July 2010 - 17 h 19 m 54 s
et apres cette nouvelle page de pub...



:firefox: :ol:

keo
symfony2

Messages : 3 031
Inscrit le 08/11/02
Non connecté
  Posté le 28 July 2010 - 13 h 07 m 03 s
merci de ta réponse, donc il faut impérativement que j'englobe avec un div pour
24 bloc
    Code     
 1. <div>
 2. bloc 1 : 24 span last
 3. 
 4. </div>
 5. 
 6. <div>
 7. bloc 2: 12 span , il me reste 12 vide
 8. </div>
 9. 
10. <div>
11. bloc 3: 4span+10span last
12. </div>

je sais pas pourquoi je n'a pas fait cela car avec 960 je l'appliquait

a tu déja utiliser cake php? j'ai pour le moment un petit souci dessus


Message édité 3 fois, la dernière par keo le 28 July 2010 - 13 h 13.

java

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 28 July 2010 - 17 h 49 m 01 s
j'utilise pas cake désolé. et toi je pense que tu utilises trop de choses pour en maitriser une minorite, c'est dommage comme approche. resultat tu as des problemes partout !!!

sinon pour le div non j'ai juste mis un container et par defaut je le met tjr en span-24 last histoire de ne pas avoir de surprise, mais dans l'absolu ca sert a rien puisque le container de base fait 950 et qu'un div s'etend a la largeur complete de son parent si rien n'est specifie.
apres mettons que tu veuilles juste une colonne de span-12 et rie apres, tu peux tres bien ecrire span-12 last et la suite se mettra en dessous, c'est le cas par exemple si tu as une image en background sur la moitie droite de ton interface, tu vas pas vouloir ecrire dessus.

sinon si tu utilises 960 alors lache blueprint, ca fait la meme chose, c'est dommage de tout melanger. blueprint a ses fans, 960 a les siens, mais c'est kif kif.

a+



:firefox: :ol:

keo
symfony2

Messages : 3 031
Inscrit le 08/11/02
Non connecté
  Posté le 28 July 2010 - 19 h 49 m 07 s
    Code     
1. j'utilise pas cake désolé. et toi je pense que tu utilises 
2. trop de choses pour en maitriser une minorite, c'est dommage
3.  comme approche. resultat tu as des problemes partout !!!
c'est tout a fait ce que tu dis et vrai il fallait que j'essaye pour m'en rendre compte :si: j'ai essayer cake php et je trouve très rapide pour récupérer des données sans faire des requêtes avec le modèle mvc, il faut tout, tout seul pas besion de faire une requete sql. c'est facile au début mais les ennuie arrive par la suite . :roll: en le testant je pensais que j'y arriverais mais la quelque petits problème d'affichage ma bloqué dans mon élant (ça foncionne mais visuellemnt c'était pas ca) , je pense que je vais devoir tous recommencer sans ce framwork. au moins j'ai tenté a utliilser ces outils, pour tant je commençais à prendre goût, au moins je l'aurai essayé, plus on le pratique, plus on se dit que c'est facile mais plus on dit qu'on ne maitrise plus le code. plus je coderais avec cake php plus je serais prisonnier de ce framwork, il n'a pas bon de prendre le chemin le plus court(c'était trop tentant) :) j'ai bien relu ton expliquation et je ne savais par pour l'histoire d'un div avec le &nbsp(je l'ai vu plein de vois sur le bouquin mais je n'avais toujour pas compris ce que c'était) comment fait tu pour colorier les partie blanche en fin de bloc ? car mon erreur était d'utlisé les "last" pour colorier ces trous de 10 pixel à la vertical
    Code     
 1. <div class="span-24 last"> <!-- un container... -->
 2. 	<div class="span-2" id="logo" >colonne 1</div>//a droite de celle ci il y a une marge , je souhaite supprimer se vide
 3. 	<div class="span-20" id="banniere">colonne 2</div>//a droite de celle ci il y a une marge 
 4. 	<div class="span-2 last" id="fin_banniere">derniere colonne</div>//ici pas de marge
 5. 
 6. #logo
 7. {
 8. 	background-color:red;
 9. }
10. #banniere
11. {
12. 	background-color:yellow;
13. }
14. #fin_banniere
15. {
16. 	background-color:green;
17. }
18. 
19. </div>

j'ai imprimer la doc devant mes yeux mais je ne suppose que j'ai du bliglé quelque part (la feuille avec plein de table de couleurs )
(la lecture est difficle, il n' y a plus les retours de ligne sur ce post, ca s'entasse j'ai du trop écrire)




Message édité 18 fois, la dernière par keo le 28 July 2010 - 23 h 21.

java

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 29 July 2010 - 09 h 56 m 46 s
salut,

alors déjà dans le bout de code que tu files tu as emmêlé le css dans ton html, donc tout ce qui est css tu le sors et tu le met dans une balise <style></style> en dessous du dernier </div> tout en bas.

ensuite pour le nbsp, oui, si ton container est vide alors la colonne ne s'affichera pas avec sa largeur normale. il faut le savoir c'est tout :) sinon si tu veux une colonne vide, tu peux faire un truc comme cela sur la précédente (qui est elle remplie...)
<div class="span-12 append-1">toto</div>
append va ajouter une colonne vide après la colonne courante.
pour l'inverse, donc ajouter une colonne avant, utilises prepend-1


sinon pour ce que tu appelles la marge, si je comprends bien c'est l'espace de 10 pixels dont tu parles. si tel est le cas déjà on appelle cela une gouttière. et la tu ne peux officiellement pas la supprimer. en effet le système de grille vient du print, le but est d'avoir des colonnes de taille égale (ici 30px) avec une gouttière entre chaque colonne, de fait c'est une base du truc et tu dois faire avec. la gouttière est la pour scinder tes blocs entre eux. c'est grâce aux grilles que les journeaux papiers sont bien formatés sur les colonnes et que les colonnes ne se touchent pas :jap:
pour contourner ce comportement, il faudrait, au lieu de mettre une couleur de fond sur chaque partie, créer au dessus un niveau supplémentaire et donner a ce niveau une couleur de fond.
ca donnerait :

    Code     
1. <div class="span-24 last">
2.   <div class="span-22" id="container_colonne_1_et_2">
3.     <div class="span-2" id="logo">logo</div>
4.     <div class="span-20 last" id="banner">banner</div>
5.   </div>
6.   <div class=""span-2 last" id="fin">fin</div>
7. </div>


ici donc on créé un niveau supplémentaire pour englober les 2 premières colonnes.
tu dois donc mettre un background sur #container_colonne_1_et_2 et un autre pour tester sur #fin. par contre tu n'en mets plus sur #logo et #banner.

voila, j'ai pas teste mais ça devrait marcher :)

sinon pour cake et toussa, ne te mine pas quand même, c'est bien de chercher et de tester, mais effectivement, c'est comme avec jquery, les gars veulent coller des plugins de partout pour faire des choses simplissimes en js pur qui sont nettement moins gourmandes. les frameworks en général, c'est clair c'est bien, mais avant de les utiliser il faut pouvoir les comprendre afin de voir s'il est pertinent ou pas de les utiliser pour tel ou tel projet, c'est comme vouloir utiliser un tournevis plat pour une vis cruciforme, ça marche mais bon... c'est pas la solution la plus simple ;)

a+ et bon courage.



:firefox: :ol:

keo
symfony2

Messages : 3 031
Inscrit le 08/11/02
Non connecté
  Posté le 29 July 2010 - 11 h 34 m 19 s
oui c'était les gouttière qui me genais
avec une photo c'est plus parlant, voici le menu que je souhaite faire
http://www.freeimagehosting.net/uploads/eb09780554.jpg
4 bloc séparé
de 5 px



java

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 29 July 2010 - 11 h 46 m 32 s
aaaaah ok :)
bon alors dans ce cas il faut recadrer les choses pour commencer.

le truc c'est qu'une grille sert a caler ton layout, ca ne sert pas a faire des menus.

donc pour ton cas present, il faut que tu reprennes l'exemple que je t'ai donne (le dernier), et dans le container de 22, au lieu d'utiliser deux div, tu fais ton menu normalement.
en effet, tu ne peux changer les colonnes de la grille, tout est fait dans le css. certes tu pourrais generer un nouveau css en prenant taille de colonne = 35 et taille gouttière = 5 mais ce serait moche pour ton layout.
ici typiquement, faut pas te compliquer la vie, ton menu est dans un rectangle blanc avec un padding de 5 (padding = marge interne).
ensuite tu mets tes 4 boutons dedans en utilisant par exemple des <p> en float: left pour qu'ils se positionnent de gauche a droite. dans ta css, pour chaque p, tu mets une margin-right de 5px pour le decallage, ce qui en gros donne :

<div class="span-24 last">
<div class="span-22" id="menu">
<p>menu1</p>
<p>menu2</p>
<p>menu3</p>
<p>menu4</p>
<br class="clr" />
</div>
<div class=""span-2 last" id="fin">fin</div>
</div>

ensuite la css
#menu { background: #fff; padding: 5px; }
#menu p { float: left; margin-right: 5px; }
#menu p:last-child { margin-right: 0; }
.clr { clear: both; }
explication de la css :
1ere ligne : fond blanc du cadre de menu et marge interne pour que tes boutons collent pas le bord
2eme ligne : le float pour positionner de gauche a droite, et la marge a droite de chaque p
3eme ligne : suppression de la marge droite pour le dernier p
4eme ligne : config de ton br pour que les elements apres le dernier p se collent pas apres et qu'on reprenne un comportement normal.

tu comprends ?



:firefox: :ol:

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 29 July 2010 - 13 h 47 m 29 s
alors keo tu t'en sors ?



:firefox: :ol:

keo
symfony2

Messages : 3 031
Inscrit le 08/11/02
Non connecté
  Posté le 29 July 2010 - 18 h 41 m 01 s
:) merci pour l'histoire du clear:both, j'ai essayer de comprendre un peut mieux cette syle css,
le nombre de fois que je me suis planté avec les flottants :nrv: soit il allait tous seul en bas soit il restait a droite, je ne comprenais plus rien, j'aurais du l'apprendre ce clear.

j'ai essayer tant bien que mal a faire toute ma structure de ma page :

http://keokaz.fr/essai/

j'ai peux être ajouter de l'inutile, mais cette page contient un gros souci de menu,
l'encadrement des mes menus ne sont pas homogène :(
on voit que entre la bande blanche haut et le bas n'ont pas le même épaisseur,
pour avoir 4px j'avais ecrit:

    Code     
1. 	margin-right: 2px; 
2. 	margin-left:2px;
3. //si je met un margin:5px; il a le meme problème de decallage 
verticalement au extrémité la spération est trop prononcé voici le html+css(je met toujous mes css en fichier séparer
    Code     
 1. <!--[if IE]>
 2. <link rel="stylesheet" href="style/b_print/ie.css" type="text/css" media="screen, projection">
 3. <![endif]-->
 4. 
 5. <!--[if IE]>
 6. <link rel="stylesheet" href="style/b_print/ie.css" media="screen, projection">
 7. <![endif]-->
 8. 
 9. <link rel="stylesheet" type="text/css" href="style/b_print/ie.css" /> 
10. <link rel="stylesheet" type="text/css" href="sytle/b_print/print.css" /> 
11. <link rel="stylesheet" type="text/css" href="style/b_print/screen.css" /> 
12. 
13. <!-- FIN framwork blue_print framwork blue_print framwork blue_print -->
14. 
15. <link rel="stylesheet" type="text/css" href="style/mis_en_page.css" /> 
16. <head>
17. 
18. <body>
19. 	<!-- Logo + banniere -->
20. 	<div class="span-24 last" >
21. 		
22. 		<div id="page_haut">
23. 			<p class="span-2" id="logo"><img src="image/mis_en_page/logo.png"></p>
24. 			
25. 			<div class="span-22 last">
26. 				<p id="pub">la banniere</p>	
27. 			</div>
28. 			<br class="clr" />
29. 		</div>
30. 		
31. 			<!-- menu -->
32. 		<div class="span-1" id="cote">&nbsp </div>
33. 			<div class="span-22" id="menu">
34. 				<p>menu1</p>
35. 				<p>menu2</p>
36. 				<p>menu3</p>
37. 				<p>menu4</p>
38. 				<p>menu5</p>
39. 			<br class="clr" />
40. 			</div>
41. 		<div class="span-1 last" id="cote">&nbsp </div>
42. 		
43. 	<!-- la page principal + un sous menu -->
44. 	
45. 			<!-- menu -->
46. 
47. 			<div class="span-24" id="centre">
48. 
49. 					<div id="article">
50. 					<h1>test lapage test la page </h1>
51. 						<h1>test lapage test la page </h1>
52. 						<h1>test lapage test la page </h1>
53. 						<h1>test lapage test la page </h1>
54. 						<h1>test lapage test la page </h1>
55. 				</div>
56. 					<div id="wap_sous_menu">
57. 						<span id="sous_menu">sous menu</span>
58. 						<span id="sous_menu">sous menu</span>
59. 						<span id="sous_menu">sous menu</span>
60. 						<span id="sous_menu">sous menu</span>
61. 							
62. 					</div>
63. 					<br class="clr" />
64. 
65. 			</div>
66. 
67. 	
68. 	<!-- bas de la page -->
69. 	
70. 		<div class="span-24 last">
71. 			<p class="span-24" id="bas_page" ><a>--------------fin de page -----------------</a></p>
72. 		</div>	
73. 	</div>
74. </body>
    Code     
 1. /*haut de page */
 2. #page_haut
 3. {
 4. 	background-image:url('../image/mis_en_page/fondgrad.jpg');
 5. }
 6. #logo
 7. {
 8. 	height:140px;
 9. 	float:left;
10. }
11. 
12. #pub
13. {
14. 	width:780px;
15. 	margin:20px;
16. 	background:yellow;
17. 	height:110px;
18. 	
19. }
20. 
21. 
22. /*menu*/
23. #menu
24. {
25. 	background:white;
26. }
27. 
28. #cote
29. {
30. 	background:#088590;	
31. 	height:50px;
32. }
33. 
34. #menu p 
35. {
36. 
37. 	float:left; 
38. 	margin-right: 2px; 
39. 	margin-left:2px;
40. 	background:#088590;
41. 	width:170px;
42. 	height:50px;
43. }
44. 
45. 
46. #menu p:last-child 
47. {
48. 	margin-right: 0; 
49. }
50. 
51. .clr 
52. {
53. 	clear: both; 
54. }
55. 
56. 
57. /*article + sous menu */
58. #centre  
59. {
60. 	background:#73c2c9;
61. }
62. 
63. #article
64. {
65. 	float:left;
66. 	margin-left:20px;
67. 	margin-top:20px;
68. 	margin-bottom:20px;
69. 	width:790px;
70. 	height:auto;
71. 	background:white;
72. }
73. 
74. /*sous menu */
75. #wrap_sous_menu
76. {
77. 	width:110px;
78. 	border:1px solid #088590;
79. }
80. #sous_menu
81. {
82. 	width:108px;
83. 	float:right;
84. 	height:auto;
85. 	margin-right:20px;
86. 	margin-top:20px;
87. 	border-left:1px solid black;
88. 	background:white;
89. }
90. /*bas de la page */
91. 
92. #bas_page
93. {
94. 	background:#088590;
95. }










Message édité 22 fois, la dernière par keo le 30 July 2010 - 07 h 07.

java

grabber
Coordinateur
MacBook Pro Powered

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

le clear permet effectivement de sortir de l'aspect flottant des blocs :)

sinon pour ton truc j'ai pas trop le temps donc je vais faire court :
au debut de ta page html, tes declarations de blueprint ne vont pas, tu charges plusieurs fois la css IE et ce en 1er, il ne faut pas, en html le contenu se charge dans l'ordre de la page, donc c'est valable pour les css aussi, la css IE doit etre chargee en dernier avec un commentaire conditionnel pour que cela ne soit interprete que par IE d'une part et d'autre part que cela ecrase ou ajoute ce qu'il y avait avant. en inversant ce process tu risques de foutre en l'air blueprint a plus ou moins grande echelle. la css IE n'est qu'un patch de la css normale.

voila comment moi je declare, je te laisse corriger les chemins :

    Code     
1.   <!-- blueprint -->
2.   <link rel="stylesheet" href="css/blueprint-091/screen.css" type="text/css" media="screen, projection" />
3.   <link rel="stylesheet" href="css/blueprint-091/print.css" type="text/css" media="print" />
4.   <!--[if IE]>
5.   <link rel="stylesheet" href="css/blueprint-091/ie.css" type="text/css" media="screen, projection" />
6.   <![endif]-->


vires tout ce que tu as pour blueprint et colles ca a la place.

ensuite, pour ton menu, j'ai regarde ta page, si tu me parles de l'espace a gauche de ton 1er menu et celui a droite du dernier qui est plus grand c'est normal.
tu geres mal les notions de margin et padding.
voici l'explication :
le bloc parent de tes menus donc le #menu a un padding, donc une marge interne.
ensuite tes menus, donc les p, tu leur colle une marge exterieure a gauche et a droite, tu n'as pas respecte ce que je t'avais dit de faire. de fait l'espace trop grand se justifie comme suit :
espace trop grand = padding de l'element parent + marge de ton menu

par contre, si tu fais comme je t'ai dit, tu as :
- padding sur le bloc parent ca on est ok
- ensuite, marge sur les menus comme suit :
margin: 0 5px 0 0; (ou encore : margin-right: 5px;)
- dernier point on retire la marge droite du dernier menu pour justement eviter d'avoir un trop grand espace consequence de l'addition du padding de l'element parent + marge du menu, donc la tu utilises la ligne avec last-child que je t'ai filee hier

et comme ca tout roule :)

essayes et dis moi ce que ca donne, je suis vraiment charette aujourd'hui, je tacherai de repasser plus tard.
desole pour les fautes / err de frappe

a+

Olivier



:firefox: :ol:

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 30 July 2010 - 11 h 28 m 15 s
attention, juste un truc auquel je pense...
normalement la reset css de blueprint colle toutes les marges a 0, cela dit avec l'heritage, tu peux te retrouver avec de la marge quand meme.
donc pour le coup du margin-right: 5px, perso je choisirais plutot la 1ere solution a savoir : margin: 0 5px 0 0; mais si tu choisis celle avec margin-right et pour eviter tout probleme, je te conseille de mettre avant un margin: 0; qui va initialiser les autres marges au cas ou.

ca donne :
margin: 0;
margin-right: 5px;

mais ca va plus vite comme ca :)
margin: 0 5px 0 0;

l'ordre des valeurs en css est toujours le meme : top right bottom left
le sens des aiguilles d'une montre quoi :)

a+



:firefox: :ol:

keo
symfony2

Messages : 3 031
Inscrit le 08/11/02
Non connecté
  Posté le 30 July 2010 - 13 h 16 m 57 s
merci, prend ton temps pour répondre y pas le feu :)
je vais essayer tout ca se soir
je connaissais pas cette ecriture
    Code     
1. margin: 0 5px 0 0;
je ne savais pas aussi que la gestion des css avait un ordre
    Code     
1. l'ordre des valeurs en css est toujours le meme : top right bottom left




Message édité 2 fois, la dernière par keo le 30 July 2010 - 13 h 23.

java

grabber
Coordinateur
MacBook Pro Powered

Messages : 9 506
Inscrit le 06/03/02
Ville : Angers
Non connecté
  Posté le 30 July 2010 - 14 h 55 m 21 s
globalement, une page se charge de haut en bas (et de gauche a droite), ce qui est logique quand tu y penses, ton ordi telecharge la page html, et donc il l'affiche en live mais n'attend pas forcement de tout avoir pour commencer a afficher.
de fait l'importance des declarations est réelle.

au niveau des css :
si tu charges 2 css externes a la suite, avec des declarations communes, par exemple .ma_classe, dans la 1ere css tu lui colle la couleur rouge et dans la seconde css tu lui colle un souligne, la resultante sera pour un span utilisant cette classe un texte rouge souligne.
de meme, si dans la 1ere css tu lui colle la couleur rouge et que dans la seconde tu lui colle la couleur bleue, alors l'affichage du span te donnera ton texte en bleu puisque la derniere declaration a pris le dessus sur la premiere : meme classe, meme propriete, donc on ecrase.

au niveau du javascript c'est pareil, ca se charge dans un certain ordre, et d'ailleurs perso j'utilise comme tu le sais beaucoup de jquery, recemment j'ai eu un souci avec jqueryui et impromptu, de fait j'ai ete oblige de charger d'abord jqueryui, puis impromptu, puis ensuite j'ai du ajouter mon hack pour un z-index du calendrier de jqueryui qui etait parti en live (je voulais l'afficher dans une modale d'impromptu...), cela m'a donc permis de reactiver le bon z-index natif.

autre exemple nettement plus concret et nettement plus interessant... :
d'ordinaire on charge les css et les js externes dans le head, mais maintenant, a des fins d'optimisation, on ne fait plus cela, on charge tout à la fin. tu as surement pu remarquer lorsque tu vas sur des sites que parfois la mise en forme arrive apres le contenu, c'est du a cela ;) alors pourquoi fait on cela ? tout simplement parce que si tu colles tout dans le head, ton navigateur va provoquer un temps de latence sur l'affichage de ta page, le temps qu'il charge tous les fichiers javascripts et tous les fichiers css. le fait de mettre ces declarations à la fin fait que tu vas pouvoir afficher le contenu non mis en forme en premier, puis par exemple charger tes css pour le rendre plus lisible, et enfin charger tes js pour le rendre utilisable.
pour poursuivre ce point precis : si tu utilises des frameworks javascript comme par exemple mootools ou jquery, tu remarqueras que ceux ci n'agissent que quand le dom est "ready", soit quand la structure de la page est terminee au niveau de la structure, et c'est bien normal car comment faire tourner un script sur des elements inexistants... pas facile... de fait, l'utilite de charger ces fichiers js dans le head est totalement inexistant puisque de toute facon avant de les utiliser le dom devra etre "ready" ! en consequence, il est plus interessant de charger d'abord le contenu de la page, puis les css, puis les js afin de declencher le dom ready a la suite de cela :jap:



autre point concernant ce que tu souleves a savoir la notation css :

le css finalement c'est un fichier texte, et ce fichier texte est telecharge par le navigateur client qui souhaite afficher une page. en consequence, plus la css est de petite taille et plus ca chargera vite (meme remarque pour le javascript...).

pour reprendre l'exemple de javascript, si tu as deja pris des plugins jquery, tu as du remarquer que les noms avaient cette forme :
jquery.mon-plugin.js
ET
jquery.mon-plugin.min.js

le "min" signifie que le script a ete "minifié" ! en gros on a supprimé tout ce qui etait inutile : les espaces, les sauts de ligne, ...
apres on eput aller encore plus loin en "packant" les scripts, la tu as un fichier dont le nom ressemble à :
jquery.mon-plugin.pack.js

la difference ? le script est passe dans un packer, donc un script qui quand il trouve une variable nommee "ma_variable" va renommer cette variable en "a1" par exemple.
le but ? economie de 9 caracteres a chaque fois que j'utilise la variable dans le script :)
en plus de cela suivant les packers que tu utilises, certains reprennent tes structures conditionnelles pour les optimiser aussi.
au final, que ton script soit de base, minifié ou packé, il tournera toujours pareil (enfin si tu codes pas comme un porc sinon le packer va te le planter en général...)

par contre, le revers de la medaille est que pour corriger un script minifié c'est quasi impossible car tu n'as plus aucune présentation, quant au packer, tu n'as carrement plus la logique initiale.
il est donc necessaire de toujours garder sa source pour debugger ou ajouter des fonctionnalites.

c'est pourquoi les plugins sont fournis parfois en 3 versions, la de base dans laquelle tu vas pouvoir etendre les fonctionnalites, la minifiée et la packée pour le site en production afin d'alléger les temps de chargement de la page.

une autre methode d'optimisation consiste aussi à rassembler les js en un seul une fois packés / minifiés. prends par exemple jquery.js dispo sur leur site, si tu regardes la source du minifié, tu verras qu'il intègre sizzle.js, une lib qui permet d'étendre les capacités des sélecteurs. En l'intégrant directement dans jquery, tu n'as qu'un fichier à charger et pas deux. l'intérêt c'est que théoriquement les js et les css se chargent à la suite, chose qui change depuis un moment, les navigateurs modernes sont capables d'en bouffer plusieurs en même temps, mais bon, restons dans la théorie...

de fait il faut mieux charger un gros js contenant 10 petits js minifiés ou packés plutot que 10 js individuels !
pour faire un test, prends firefox avec l'extension firebug et jette un oeil aux elements qui se chargent, essaye de faire un test avec 10 js a la suite, puis cree un nouveau js dans lequel tu colles les contenus des 10 initiaux et ne charge que celui-ci (le gros), compare le temps de chargemetn de ta page et je pense que tu vas flipper !!!


bon bref, fin de la parenthese sur le js, revenons aux notations css.


docn toujours dans une optique d'optimisation, on peut noter les chsoes de deux facons : la facon complete et non optimisee et l'autre : la bonne ! je vais te faire un exemple concret, voici 2 choses identiques :

    Code     
1. #mon_id {
2.   margin-left: 10px;
3.   margin-top: 15px;
4.   margin-right: 10px;
5.   margin-bottom: 10px;
6. }
ici on definit juste 4 marges pour notre element, rien de sorcier... voici 2 meilleures notations :
    Code     
1. #mon_id { margin: 15px 10px 15px 10px; } 
ici on ne definit qu'une seule balise de marge en on specifie les 4 marges à la suite separees par un espace, soit top, right, bottom et left. mais on va faire encore mieux, ici tu remarques que les marges gauche et droite sont identiques, idem pour haut et bas, donc on va faire ca :
    Code     
1. #mon_id { margin: 15px 10px; } 
on ne specifie que les 2 premieres et le navigateur va en deduire les 2 dernieres de facon identiques. sur ces 3 exemples tu comprendras aisement le degre d'optimisation que tu peux obtenir sur une simple balise, je te laisse faire le calcul pour tout une page voire meme un site entier... y'a pas photo... donc dans la mesure du possible toujours utiliser les notations reduites. autre exemple pour les polices, de base on va avoir :
    Code     
1. #mon_id {
2.   font-size: 12px;
3.   color: #f00;
4.   font-family: arial;
5. }
qui se transforme en :
    Code     
1. #mon_id { font: #f00 12px arial; }
et puis aller, tant que j'y suis... je te conseille pour tes css de te creer des classes generiques : "gras" "italique" "souligne" "rouge" "bleu" etc... ca te permet de mettre facilement en forme des choses que tu vas utiliser X fois
    Code     
1. <span class="gras rouge souligne">mon titre gras rouge souligne</span>


si tu n'as besoin que du gras pas de probleme, l'interet est qu'en css on cumule les classes, c'est super pratique ;)

les nouvelles regles permettent d'aller nettement plus loin, surtout dans css3, mais bon je pense t'en avoir deja assez dit !!!



sur ce je te laisse etudier cela, n'oublie pas, comme je te le repete depuis que tu veins sur cete espace consacre au dev, que rien ne vaut une tres bonne connaissance des outils de base comme html, css et javascript, toutes les conneries que tu vois a gauche a droite a base d'outils revolutionnaires a la noix ne servent a rien si tu ne comprends pas comment ces memes outils fonctionnent.
la base... toujours la base :jap:


bonne lecture !!!



:firefox: :ol:

keo
symfony2

Messages : 3 031
Inscrit le 08/11/02
Non connecté
  Posté le 31 July 2010 - 07 h 47 m 05 s
merci a toi grabber, j'ai pu faire ce que je voulais, tes astuces m'on été très utiles :)
rest a trouver des idéee de décrations et design, la c'est dur il faut de l'inspiration.


Message édité 23 fois, la dernière par keo le 14 August 2010 - 12 h 41.

java

Page genérée en 0.8406 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