• Bonjour Visiteur. Bienvenue sur les nouveaux forums de MacGeneration. La peinture est encore fraiche, quelques boulons doivent être resserrés, plus d’informations demain !

methodologie pour créer des blocs ombrés et espacés?

[MGZ] Shralldam

Gendarmette déchue
Modérateur
Passage éclair pour dire que je vais probablement revoir le layout pour qu'il fonctionne mieux sous tous les navigateurs. Ce ne sera pas dans l'immédiat parce que j'ai d'autres trucs sur le feu (et je pars en vacances fin du mois :love:), mais je vais faire mon possible. ;)
 

iknabes

Membre confirmé
2 Octobre 2006
181
1
Je reviens apres un peu de temps pris par le travail et par la conctructioin de l'une de mes pages, j'y reviens apres. Donc,

Salut Pb88081,
merci pour ton temps passé a aider et tes explications:)
le lien browers pour test que tu me fais connaitre me sera tres pratique par la suite;)

Salut Shralldam, merci merci merci:love:
Donc concentre toi bien sur ce que tu as a faire, je t'attends patiemment:D hehehe.
Au passage, et pour le fun: c'est peut etre bizarre mais parmi plusieurs chose que je commencent a comprendre, je n'arrive toujours pas a saisir le role, l'interet, la commande que permet la commande position absolute ou relative (malgre plusieurs lectures a travers des sites, entre autres , le site du zero)

Sinon voici aussi un morceau de page que j'essaie de creer (cf image png) (c'est une section avec de la video).
Donc voila commence s'organise la chose: lorsque l'on clique sur l'une des image poster se trouvant dans l'"aside" gauche de ma page accueil, on tombe sur cette page avec la video prete a etre lue (avec en bas de page le choix de l'ensemble des videos consultables)
Ma question: comment faire pour que lorsque l'on choisi une video, l'image correpondant a cette video en bas de page apparaisse automatiquement avec un encadre comme j'ai simulé et comment fair epour qu'a chaque fois cette image correspondante prenne toujours la meme position position (egalement comme je le motre)
Faut il faire appel a du PHP pour faire ca?:rose:

Suis je clair?:siffle:

J'attends avec iiiiimpatience vos lumieres:D

Merci:zen:

Shralldam, d'avance: passe de tres tres tres bonne vacances!!:up:


J'edit car j'oubliais:
aussi comment faut il faire pour qu automatiquement se creer un micro-apercu (comme presenté) des videos voisines et des liens qui vont avec? PHP?
oui je sais je vais pas dans le plus simple:siffle: mais en meme temps j'ai le temps d'apprendre, juste besoin d'un chouia d'aide:rateau:
 
Dernière édition:

iknabes

Membre confirmé
2 Octobre 2006
181
1
je commence mon initiation Php sur le site du zero, je crois que je commence a comprendre l'interet (notion site statique ou dynamique) et les possibilites

comme ca peut etre que je comprendrais vos reponses:)
 

[MGZ] Shralldam

Gendarmette déchue
Modérateur
Au passage, et pour le fun: c'est peut etre bizarre mais parmi plusieurs chose que je commencent a comprendre, je n'arrive toujours pas a saisir le role, l'interet, la commande que permet la commande position absolute ou relative (malgre plusieurs lectures a travers des sites, entre autres , le site du zero)

Sinon voici aussi un morceau de page que j'essaie de creer (cf image png) (c'est une section avec de la video).
Donc voila commence s'organise la chose: lorsque l'on clique sur l'une des image poster se trouvant dans l'"aside" gauche de ma page accueil, on tombe sur cette page avec la video prete a etre lue (avec en bas de page le choix de l'ensemble des videos consultables)
Ma question: comment faire pour que lorsque l'on choisi une video, l'image correpondant a cette video en bas de page apparaisse automatiquement avec un encadre comme j'ai simulé et comment fair epour qu'a chaque fois cette image correspondante prenne toujours la meme position position (egalement comme je le motre)
Faut il faire appel a du PHP pour faire ca?:rose:
Position: relative
position: relative sert à décaler un élément de sa position de référence initiale, c'est à dire celle qui est définie par le flux (l'ordre dans lequel on écrit les balises HTML et la succession naturelle de ces éléments lors du rendu de la page). On se sert le plus souvent de position: relative pour pouvoir positionner un élément enfant avec la valeur absolute. En clair, on met position: relative sur l'élément parent, puis position:absolute sur l'élément enfant pour le positionner à partir des coordonnées de référence de l'élément parent.

Position: absolute
Contrairement à relative où un élément reste dépendant de son ordre naturel dans le flux (l'ordre dans lequel on écrit les balises HTML dans le code), position: absolute permet de ne pas tenir compte du flux pour positionner l'élément. En clair, on pourrait avoir un élément (une DIV par exemple) déclaré après un autre dans le code HTML, mais lors du rendu de la page, il est "avant" l'autre élément dans l'ordre visuel de mise en page. Ça semble assez pratique dit comme ça, mais un élément positionné en absolute étant retiré du flux, il ne dépend plus de celui-ci et les autres éléments de la page ne tiennent plus compte de lui. À noter qu'une fois dans ce mode, une DIV ne prendra plus la largeur totale de son parent (le comportement par défaut). On utilise position: absolute avec les propriétés top, right, bottom et left qui permettent d'indiquer la position des limites de l'élément par rapport à son plus proche ancêtre dont la propriété position est spécifiée.

Position: fixed
Ressemble un peu à absolute. On s'en sert conjointement avec les propriétés top, right, bottom et left pour définir une position fixe par rapport aux limites de la fenêtre du navigateur. En résumé, même si on utilise les barres de défilement, l'élément restera toujours au même endroit par rapport à la fenêtre du navigateur. Pratique pour un menu (ou un footer) qu'on veut garder toujours visible malgré les défilements.

Position: static
C'est le comportement implicite (par défaut), qui fait qu'un élément se comporte de la façon attendue de lui par rapport au flux. On le déclare très rarement, sauf pour faire "revenir à la normale" un élément qui aurait été positionné différemment plus tôt.

Position: inherit
Ici, on demande à l'élément d'obtenir le même positionnement que son parent.

Il existe de bons articles sur le positionnement sur le net, un coup de Google devrait combler tes attentes. Attention, on peut très rapidement "casser" un layout en jouant trop avec les positions, et ça peut devenir rapidement complexe si on ne fait pas attention.

Par rapport à ton système pour l'affichage des vidéos, je pense plutôt à du Javascript. Avec la pseudo-classe :target, je crois qu'il y a même moyen de le faire entièrement via CSS (mais cette pseudo-classe n'est pas reconnue par les version plus anciennes de IE, forcément), en plus avec les propriétés de transformation et de transition du CSS3, il y a de quoi faire un truc sympa. J'avais déjà fait un "slider" en CSS avec cette technique, mais ce n'est pas ce qu'il y a de plus souple... Il doit exister des modules pour jQuery (un framework JS très populaire) qui devraient pouvoir t'aider... Ne serait-ce que pour assurer la compatibilité avec les anciens navigateurs.

Le PHP est le plus souvent utilisé pour fonctionner conjointement avec une base de donnée (même s'il peut fonctionner tout seul aussi). Il n'est pas vraiment adapté pour effectuer des transformations visuelles dynamiques dans une page, contrairement à Javascript qui permet tout ça.

Sinon, pour clarifier les choses, je suis graphiste/illustrateur de formation, et j'ai appris le webdesign sur le tas, en m'auto-formant, lisant beaucoup d'articles en ligne et plusieurs bons bouquins, puis en pratiquant évidemment. Toutefois, je ne suis pas intégrateur et parfois, moi aussi, je bute sur un bug ou un dysfonctionnement, et ça prend du temps avant de trouver la solution ! Cependant, c'est en grande partie grâce à la générosité de "ceux qui savent" et qui prennent le temps de donner leurs solutions sur le net que j'ai réussi à comprendre et corriger beaucoup de choses. Il me paraît donc normal de faire pareil quand il me semble que je dispose des données qui permettent d'aider les autres ! Voici quelques références qui m'ont servi, et qui pourraient t'aider également :

• Sitepoint.com : Kevin Yank
Si tu comprends l'Anglais, les cours de Kevin Yank sont un must. Un de ses livres, "Simply Javascript", est vraiment bien fichu et curieusement beaucoup plus facile à comprendre que l'autre livre en français que j'avais acheté. Il propose également des cours sous forme de vidéos (CSS, PHP, MySQL, Javascript…), il ne parle pas trop vite et est très compréhensible. J'adore ce mec.

• La série A Book Apart (traduit chez Eyrolles)
Une excellente série de livres faciles à lire, pas trop épais et qui se concentrent sur l'essentiel, et souvent avec de l'humour ! Pour commencer, je recommande les deux premiers : HTML5 pour les Web Designers de Jeremy Keith, et CSS3 pour les Web Designers de Dan Cederholm. Et pour un peu plus tard, le n°4 : Responsive Web Design de Ethan Marcotte.
(En parallèle, ne pas hésiter à consulter le site A List Apart, repaire de la plupart des auteurs de cette série de livres.)

• Dans le monde francophone, Alsacreations est une (sinon LA) référence. Beaucoup d'articles très bien fichus et un forum ! Le site du zéro est très bien aussi, mais tu connais déjà :D

• Puis d'autres sites assez incontournables tels que CSS-Tricks, Stack Overflow, CSS3please (pour jouer :D), Smashing Magazine… Il y a aussi un nouveau venu (enfin, il y a quelques mois déjà quand même) : Codecademy, pour apprendre à coder de façon interactive.

Ouf ! Voilà, je crois qu'il y a de quoi faire… :siffle: :D
 
Dernière édition:

iknabes

Membre confirmé
2 Octobre 2006
181
1
Oulala, beaucoup d'info a consulter ici.:up:
Merci pour ton cours sur les positions, il faut que je pratique tout cela.
Je tiens a dire que j'apprecie beaucoup ta demarche altruiste, tes ecrits m'aident beaucoup a orienter mon esprit dans mes etapes.
Pour le moment je vais essayer de realiser la page Video avec du CSS puisque tu semble dire que c'est realisable, ca me fera gagner du temps pour envoyer quelquechose d'utilisable sur internet en attendant que j'apprenne les autres langages php et javascript.

Bon courage a toi dans tes projets egalement

mata ne!:zen:
 

[MGZ] Shralldam

Gendarmette déchue
Modérateur
Merci :)

Justement, comme je le disais, j'avais déjà fait un test de slider uniquement en CSS, je l'ai retrouvé :

https://dl.dropbox.com/u/5373816/misc/slidercss.zip

On clique sur les petites pastilles et les images de Batou défilent :D

Comme je disais, ce n'est pas très souple car ici, il faut définir une taille exacte pour les images (elles doivent toutes avoir la même au pixel près), et après faire le calcul pour savoir de combien on doit déplacer la DIV parente (pour qu'elle révèle la bonne image). Il y a très certainement moyen de l'améliorer, mais au moins ça prouve qu'il y a moyen de le faire en CSS. Cela dit, comme je l'ai signalé, IE ne connaît pas la pseudo-classe :target, donc ça ne marchera pas jusque IE8 au moins, faudra une bouée de sauvetage JS pour ces navigateurs.
 

momo-fr

Ancien Aveyronnais
Club MacG
4 Octobre 2004
4 694
1 808
58
Bordeaux (33)
www.momofr.net
Mouais… monter des trucs en CSS avec une bouée en JS pour une partie des navigateurs… bof bof, autant monter un truc en JS qui passe partout, c'est plus simple et souple… et toc. :D :p :rateau: :cool:
 

iknabes

Membre confirmé
2 Octobre 2006
181
1
Ah ben zut, moi qui etait content de voir dans la nuit des lignes magiques pour mon probleme:D
Moi le boué j'en suis pas encore la:siffle::rateau:

Il sont un peu penibles ces Ie, a chaque fois que l'on fait un truc je vois quil faut toujours une petite attention pour eux;)

En tout cas j'aime bien l'effet que tu m as envoyé, vais essayer de faire un truc avec ca en attendant de trouver une boutique de pneumatique:D

Sore de ha,:zen:

---------- Nouveau message ajouté à 08h29 ---------- Le message précédent a été envoyé à 08h28 ----------

[MGZ] Shralldam;12304332 a dit:
Belle reponse:D