création d'un site web

chatoune · Post by **chatoune** » 05 Dec 2005 15:31

iubito wrote:pour faire ton menu... euh... regarde par là par exemple

Euh....c'est gentil iubito mais ce que j'aimerais, c'est pouvoir mettre un menu à moi.

svernoux · Post by **svernoux** » 01 Jan 2006 23:14

Ca faisait longtemps que j'avais pas posé de question, donc pour bien rattaquer l'année, me revoici !

The question : comment s'y prendre, avec un design fluide (largeur en %), pour mettre en tête une image (style bannière, bandeau), qui prenne toute la largeur (= s'adapte à la largeur) ? Vu que l'image est d'une taille fixe, je ne vois pas trop de solution a priori, mais je me dis que ça doit tout de même bien être possible, non ?

Merci d'avance à qui aura une idée !

kokoyaya · Post by **kokoyaya** » 01 Jan 2006 23:15

width="100%" ?

svernoux · Post by **svernoux** » 01 Jan 2006 23:19

kokoyaya wrote:width="100%" ?

sur l'image tu veux dire ? Ben j'ai essayé, mais du coup ça déforme l'image. C'est ça l'ennui.

Latinus · Post by **Latinus** » 01 Jan 2006 23:22

Le problème avec un width="100%", c'est que ça va déformer l'image pour qu'elle réponde à la demande.

Ce qu'on fait plus fréquemment, c'est utiliser une image "spacer".

en gros :

[image spacer répétée/étirée] + [la bannière, taille fixe] + [image spacer si nécessaire]

L'image spacer pouvant être d'une largeur d'un pixel (ce qui à l'avantage d'être très léger) et de hauteur égale à la bannière. Pour que l'illusion soit parfaite, il suffit de lui donner la même couleur que celle de l'extrêmité de la bannière qu'on veut "prolonger".

kokoyaya · Post by **kokoyaya** » 01 Jan 2006 23:26

svernoux wrote:
kokoyaya wrote:width="100%" ?
sur l'image tu veux dire ? Ben j'ai essayé, mais du coup ça déforme l'image. C'est ça l'ennui.

Ben width="100%" height="100%"

arkayn · Post by **arkayn** » 01 Jan 2006 23:38

Ça ne marcherait pas, Koko. L'image serait effectivement déformée dans la largeur. La hauteur resterait fixe, supposons 100 pixels de haut (à 100 %) alors que la largeur varierait à 300, 958, 1153 ou autre selon l'affichage de la page.

L'idée de Latinus est une des meilleures. On pourrait en envisager des plus complexes en faisant de la programmation, mais je ne pense pas que ce serait l'idée que se fait Svernoux de la simplicité.

iubito · Post by **iubito** » 01 Jan 2006 23:59

un div avec en background une image (1px, hauteur de la bannière) du fond (si c'est un fond uni, juste un background-color: #couleur suffit)

Et dans ce div juste la bannière...

svernoux · Post by **svernoux** » 02 Jan 2006 12:48

Ah, merci tout le monde ! L'idée que je comprends le mieux est celle de iub, mais je ne sais pas encore si ce sera adapté. Au cas où, je vous demanderai des précisions sur les spacers parce que je suis pas sûre d'avoir compris comment ça marche...

arkayn · Post by **arkayn** » 02 Jan 2006 13:35

Le spacer est une image (en général d'un pixel de large, voire de haut aussi) de la même couleur que le fond. Il suffit de définir sa largeur sur 100 % par exemple et il occupera toute la place disponible à côté de la bannière. On ne le verra pas puisque de la couleur du fond et comme il est uni, on ne voit pas de déformation.

Personnellement le même spacer me sert pour tout. J'ai donc créé un gif transparent d' 1 x 1 pixel.

iubito · Post by **iubito** » 02 Jan 2006 14:11

perso je déteste mettre des spacer juste pour caler des pixels avec

Code: Select all

<img src="spacer.gif"... />

et encore plus quand on oublie de mettre l'attribut alt="" sur l'image !

Quand on veut espacer de quelques pixels, on a le style padding: 10px par exemple.
Imaginons un dégradé jaune rouge de haut en bas qu'on veut mettre sur toute la largeur de l'écran en bandeau en haut (30 px de hauteur), et au milieu notre bannière basé sur ce même fond jaune rouge.
Je crée une image d'1 px de large qui fait le dégradé sur 30px de haut, puis j'écris

Code: Select all

<div style="background:degrade.gif; text-align: center; width:100%;">
<img src="mabanniere.gif" />
</div>

et voilà c'est tout de suite plus propre

svernoux · Post by **svernoux** » 02 Jan 2006 16:09

Merci arkayn pour l'explication !

iubito wrote:Quand on veut espacer de quelques pixels, on a le style padding: 10px par exemple.
Imaginons un dégradé jaune rouge de haut en bas qu'on veut mettre sur toute la largeur de l'écran en bandeau en haut (30 px de hauteur), et au milieu notre bannière basé sur ce même fond jaune rouge.
Je crée une image d'1 px de large qui fait le dégradé sur 30px de haut, puis j'écris
Code: Select all
<div style="background:degrade.gif; text-align: center; width:100%;">
<img src="mabanniere.gif" />
</div>
et voilà c'est tout de suite plus propre

Euh, oui d'accord, mais c'est quoi le rapport avec le padding ? (je vois pas de padding dans ton code...

)

iubito · Post by **iubito** » 03 Jan 2006 12:50

Et hop! encore un exemple de site pourri de chez pourri
http: // vouservir . com (attention, musique de fond "relaxante"...)

ça ressemble à un site sur les tapis ?
l'auteur vient de m'écrire car le menu marche pas bien (sur IE), j'ai voulu regarder le code de la page.... ô mon Dieu !!! que c'est laid !

svernoux · Post by **svernoux** » 03 Jan 2006 12:55

iubito wrote:j'ai voulu regarder le code de la page.... ô mon Dieu !!! que c'est laid !

en fait, je savais même pas que ça existait, ce genre de code !

Mais sois pas vache, il te fait de la pub !

iubito · Post by **iubito** » 03 Jan 2006 14:13

ouais mais comme il crypte sa page pour la générer tout en javascript, il ne risque pas d'être référencé par google

et pourtant il fait tout pour, rien qu'à voir tous les mots-clés hôtel vacances météo, mets tes bas, et co... manquait plus que xxx, cul, porno pour compléter le tout.
Et vous arrivez à lire le message sautillant quand vous cliquez sur l'image pour accéder à la 2e page ?