recherche_webmaster Posté 15 Octobre 2005 Posté 15 Octobre 2005 Bonjour, Je regardais le site webrankinfo.com et je me pose deux questions quant au design : 1- Le logo en haut à gauche est une image avec un peu de texte vertical. Question : Comment l'effet d'éclaircissement est-il produit sur l'ensemble de la zone image + texte ? 2 - Il y a un effet de profondeur donné à la page par les deux bordures à droite et gauche de celle-ci. Je ne comprend pas comment c'est fait puisque si l'on redimensionne l'écran l'effet reste (donc ce n'est pas un body-background avec positionnement des éléments en absolu). Voilà, j'ai déjà vu ça ailleurs mais ça me plait bien et aussi je voudrais comprendre, par curiosité.
Raphael Posté 15 Octobre 2005 Posté 15 Octobre 2005 Hello, 1- En fait il ne s'agit que d'un seul lien qui contient l'image en arrière plan, et un texte. Au survol, il y'a un simple changement de l'arrière-plan et un changement de couleur du texte. 2- Il s'agit vraissemblablement d'une imbrication de bloc (ici <div>) : un bloc qui contient la partie droite de la bordure (image d'arrière plan), et dans lequel est inclu le bloc de contenu qui lui contient la partie gauche de la bordure
recherche_webmaster Posté 15 Octobre 2005 Auteur Posté 15 Octobre 2005 (modifié) En fait il ne s'agit que d'un seul lien qui contient l'image en arrière plan, et un texte. Au survol, il y'a un simple changement de l'arrière-plan et un changement de couleur du texte. Ok, j'étais parti sur l'idée d'un calque transparent. Il s'agit vraissemblablement d'une imbrication de bloc (ici <div>) : un bloc qui contient la partie droite de la bordure (image d'arrière plan), et dans lequel est inclu le bloc de contenu qui lui contient la partie gauche de la bordure Là je comprend moins parce que l'image de fond du bloc de la partie droite a nécessairement une largeur fixe alors que les blocs doivent être positionnées avec une valeur en % (par rapport à la taille de l'écran). Donc en redimensionnant la fenêtre, l'image devrait dépasser la taille en % impartie à son bloc conteneur. Modifié 15 Octobre 2005 par recherche_webmaster
Boo2M0rs0 Posté 15 Octobre 2005 Posté 15 Octobre 2005 Bonsoir, Là je comprend moins parce que l'image de fond du bloc de la partie droite a nécessairement une largeur fixe alors que les blocs doivent être positionnées avec une valeur en % (par rapport à la taille de l'écran). Donc en redimensionnant la fenêtre, l'image devrait dépasser la taille en % impartie à son bloc conteneur. Heu, non, l'image de fond, n'est pas considérée comme une image mais comme un arrière plan, elle ne change donc pas de taille (ne se déforme pas), a propriété css repeat-y ou no-repeat est utilisée pour éviter de répéter l'arrière plan sur toute la largeur du div. La même technique est utilisée pour le deuxième div, à une nuance près car cette fois-ci il y a rajout d'un alignement à droite de l'arrière plan. Si on résume on a: Premier div: Il fait 100% de largeur il définit un arrière plan, qui est en fait une image ne se répetant que sur la verticale. Deuxième div: Il fait aussi 100% de largeur Il a une marge gauche correspondant à la largeur de la bordure gauche Il définit un arrière plan, ne se répétant que sur la verticale et aligné à droite du conteneur. Il a une marge droite interne (padding) correspondant à la largeur de la bordure droite. Pour avoir une texture d'arrière plan, il faudrait donc avoir un troisième div qui contiendrai les deux autres ... On ne peut mettre qu'un seul arrière plan par conteneur, c'est selon moi, un assez grand défaut dans css :/
recherche_webmaster Posté 15 Octobre 2005 Auteur Posté 15 Octobre 2005 (modifié) l'image de fond, n'est pas considérée comme une image mais comme un arrière plan, elle ne change donc pas de taille (ne se déforme pas) C'est ce que j'ai dit, oui, l'image ne change pas de taille, mais la div oui d'où le problème en cas de redimensionnement. Deuxième div:Il fait aussi 100% de largeurIl a une marge gauche correspondant à la largeur de la bordure gauche Tu veux dire un margin exprimé en pixel ? Effectivement vu comme cela le premier point s'éclaire (s'éclaircit?). Je vois comment ça peut se faire en effet, je vais peut être faire un essai. Je n'avais pas pensé aux deux blocs avec une largeur de 100%. il faudrait donc avoir un troisième div qui contiendrai les deux autres ... On ne peut mettre qu'un seul arrière plan par conteneur Tu fais bien de le préciser, je me demandais justement si c'était possible. Modifié 15 Octobre 2005 par recherche_webmaster
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant