28220 sujets

CSS et mise en forme, CSS3

[RESOLU]Centrage et retaillage automatique d'un bandeau

Salut,
je m'attaque à la conception de mon site et je souhaite utiliser CSS/HTML.
Mon 1er souci: j'ai un bandeau en tête de la page d'accueil que je souhaiterai voir se retailler et rester centré si l'utilisateur retaille la fenêtre du navigateur.
Faut-il utiliser une box, dans laquel on insère l'image ?
A voir ici http://oferran.free.fr/ (ne pas se fier au source, c'était mon 1er jet avant de m'apercevoir du pb.
Evidemment je ne veux pas utiliser de tableau.
J'ai fait qques tests, d'après "Centrer les éléments ou un site web en CSS" sur Alsacrétions en vain et en regardant le source de qques sites mais ça marche pas.
Merci de votre aide
Modifié par olivtt (04 Dec 2005 - 18:43)
bonjour et bienvenue sur ce forum

Pour regler ton souci de centrage de bandeau, tu peux faire ceci
#bandeau {
	
	margin: 4px auto;
	width:1000px;
	height:50px;
	z-index:1;


z-index n'a , à mon sens aucune utilité dans ta structure.
En regardant le reste de ton CSS, tu peux appliquer la meme chose pour le background de la date qui vient sous le bandeau.

Autre chose, tu dis vouloir centrer le bandeau quel que soit le redimensionnement de l'utilisateur. Ton bandeau fait 1000px de long. Donc l'utilisateur d'un petit ecran n'en verra qu'une partie.

Amicalement,
Modifié par Philippe (04 Dec 2005 - 20:27)
Merci de ta réponse
je viens de l'essayer (chez moi en local) et ça marche pas...
D'ailleurs je ne teste qu'avec le bandeau sans la date du jour ni l'autre image.
J'ai aussi fait le test avec un bandeau de largeur 800 suite à ta (bonne) remarque.
ça y est.
En fait y a du mieux semble-t-il. Peut être que le pb est du à la largeur du bandeau.
en fait ce que je voudrais c'est que le vélo à droite soit visible qque soit la taille du naviagateur (taille acceptable dirons-nous 640 par exemple)
Un pote a fait ça ici : http://lpivtt.free.fr/VTT_menu.php mais son bandeau est dans un tableau et si tu essaies de retailler je voudrais obtenir ce résultat: le bandeau n'est jamais tronqué.
bon deja le centrage fonctionne correctement.

Pour ce qui est de transformer ton bandeau en bandeau étirable il s'agit d'une autre histoire. Faut il encore pouvoir le couper .
Garder lea partie droite ne pose aucun soucis. Ce qui pose probleme, c'est de pouvoir etirer une partie sur la gauche sans pour autant dénaturé l'image.

Pour cela, je prefere te laisser dans les mains d'une personne plus competente que moi

désolé, mes compétences sont limitées Smiley ohwell
merci de ton aide, je viens de m'apercevoir que j'ai pas posté sur le bon forum
Je vais essayer sur "CSS et mise en forme".
olivtt a écrit :

je viens de m'apercevoir que j'ai pas posté sur le bon forum
Je vais essayer sur "CSS et mise en forme".

Sujet déplacé. Smiley cligne
Bonjour,

Je crois que la réponse attendue par olivtt se trouve en partie sur le site à l'adresse:
http://blog.alsacreations.com/2004/05/21/8-faire-un-arriere-plan-etirable

Je viens de faire l'essai suivant en poisionnant l'image qui doit s'étirer à 250px du haut de la page.

Sélecteur image:
#body-bg {
	position: absolute;
	top: 250px;
	width: 100%;
	height: 174px;
}

J'ai ensuite inséré l'image avec le body de la page:
<img id="body-bg" src="images/layout/body-bg.jpg"  alt="" />

Cela fonctionne sous FF1.5 et IE6. Un paysage panoramique accepte l'étirement si l'image à une dimension (witdth) suffisante.
Merci Geba !!!! Oui c'est bien ça que je voulais. Je viens d'essayer ça marche super !!!
C'est bizarre car il me semblait avoir essayé ça.
Mais en fait l'astuce est de faire ça

<img id="bandeau" src="images/bandeau.jpg"  alt="" />

au lieu de ça 

<div id="bandeau"> <img src="images/bandeau.jpg" alt="" >  </div>


donc résolu: encore merci !!!
Modifié par olivtt (05 Dec 2005 - 16:00)
Bonsoir,

Je n'ai pas beaucoup de mérite, je travaillais aussi sur cette question. Quand j'ai lu votre question, je venais de trouver la réponse sur le blog d'Alsacréations.

On trouve tout sur Alsacréations !
salut tout l'monde,
je croyais avoir participé au début du post, mais je trouve plus mon message... j'ai dû rater quelque bouton...
enfin j'ai regardé le site de test: et je trouve pas super que l'image soit étirable/déformable: est-ce bien l'effet désiré ?
sur l'exemple http Smiley ohwell /lpivtt.free.fr/VTT_menu.php l'image ne s'étire pas, elle disparait à droite et à gauche en restant toujours centrée, mais sans se déformer...
mais bon si le sujet est résolu, très bien...
Salut,
effectivement tu as répondu au début, en fait comme j'avais pas posté au bon endroit j'ai refait un post puis l'initial a été déplacé donc y a 2 posts.
En effet, c'est l'effet voulu au début mais effectivement c'est pas super....
J'avais fait une remarque ( dans l'autre post aussi ) sur le fait que finalement c'est vrai que l'image n'était pas redimensionnée mais rognée à droite et gauche.
Donc maintenant que j'ai les 2 solutions, j'ai le choix...
Voilà.
1er post ici:
http://forum.alsacreations.com/topic-4-9477-1-Centrage-et-retaillage-automatique-dun-bandeau.html
Sujet clos
Aller à