Discussion :

[Rekiem]

Bonjour à tous,
Ca fait un moment que je cherche sur la web la solution a mon problème mais rien ne marche.

J'ai une image qui sépare toute ma page html sur l'horinzontale.
Cette image fait 1200px de long et 20px de haut.

Que dois-je faire exactement dans le code CSS pour avoir cette image correctement affiché sans qu'elle sagrandisse ni quel dépasse sur la droite de la page quand je diminue la résolution ?
J'ai essayé de tas de possibilité avec les divs... mais rien n'y fait.
Si quelqun à une technique avec des divs et du css, c'est avec grand plaisir.
Merci encore !

[spirou]

Salut !!!

peut-être :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
overflow: auto;
 
OU
 
overflow: hidden;

Mais ce serait plus facile, si tu montrais ton code.

As-tu mis un width: 100% à ton div ?
Ton image est-elle appelée par le html ou par le css ?

[balu]

Cette image fait 1200px de long et 20px de haut.

Quelle est ton image?

Peut-être qu'elle pourrait être décomposée en plusieurs images plus petites?

Exemple : la partie fond que tu pourrais répéter à l'horizontal.

[Rekiem]

C'est en faite une sorte de bar de délimitation.
Mais j'avais aussi l'idée de faire la même chose avec d'autres images de mon site comme par exemple une bannière en haut et a droite de ma page, les boutons d'un menu...

Je veux surtout comprendre la méthode a effectuer. Une fois que j'aurais compris ca, je me débrouille avec ce que j'ai.
De ce que j'ai compris, il faut un référentiel de taille par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 html, body {
height : 100%;
width : 100%;
}

puis après redimensionner les images suivant les résolutions avec des div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
div.classexemple {
height : 10%;
width : 100%;
}

Par exemple ici, une image aurait une hauteur de 10% de la page et occuperait toute la page en longeur.

Mais ca ne marche pas.

Ceci n'est qu'un exemple, j'ai essayé de plein de façon possible, donc si vous avez une méthode particulière qui marche bien, partagez votre code svp !
Merci encore

[fred777888999]

Je n'ai pas compris ce que tu entends pas 'sans qu'elle s'agrandisse', mais tu peux tj essayer de la mettre en image de fond...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
fond { background: url(l'url de ton image); }

++
Fred.

[etarip]

tu as les dimensions de ton image, tu ne veux pas qu'elle se déforme, dans ces conditions donne les valeur précise a ton div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.classexemple{
         height: 20px;
         width: 1000px;
}

si jamais la taille peux effectivement varié, il n'y a pas de solution a part la décomposition de ton image et la répétition à l'infini sur 100%

[balu]

si jamais la taille peux effectivement varié, il n'y a pas de solution a part la décomposition de ton image et la répétition à l'infini sur 100%

C'est aussi ce que je voulais dire par mon message.

De plus, tes pages seront plus légères.

[Rekiem]

On s'est pas compris.
Je voudrais que l'image reste de la meme taille quelque soit la résolution de l'écran de l'internaute.
Par exemple que l'image prenne 10% de la hauteur de la page et 20% de largeur de la page quelque soit la résolution !

J'ai pas bien compris l'histoire de décomposition, c'est du charabia :s pour moi.
Si vous pouviez plus m'expliquez svp, ou simplement donnez moi votre méthode pour avoir une image qui s'adaptera à TOUTE les résolutions d'écran de l'internaute en % (une image qui prend la moitié de la page prendra TOUJOURS la moitié de la page quelque soit la résolution)

[SpaceFrog]

tu peux le faire avec un petit script javascript ...

[Rekiem]

arg j'aimerai bien éviter le javascript, je déteste ca