28220 sujets

CSS et mise en forme, CSS3

Un Header qui s'adapte a la résolution de l'écran [resolu]

bonjour,

je découvre le monde fascinant et simplifiant des CSS depuis quelques jours et je bute déja sur a mon avis sur quelque chose de bien simple. ca fait une journée que je tente des trucs et je ne trouve pas.

je veux mettre une image en haut du site qui s'adapte a la résolution de l'ecran, tant en hauteur qu'en largeur, laissant toujours 10 % de marges des 2 cotés et 20px en haut.
Pas de problème pour BODY mais je pense que HEADER n'est pas complet ou bien est faux!

Le CSS :

body{
background-color:#5a7eb4;
margin-top:20px;
margin-right:10%;
margin-left:10%;
text-align:center;
}

#header{
background-image:url(images/header.gif);
background-repeat:no-repeat;
background-position:center;
margin-left:auto;
margin-right:auto;
width:100%;
}


et le XHTML.....


[code]<body>
<!-- debut du header-->
<div id="header"></div>
<!-- fin du header -->[/cod
e]

Quels sont les attributs que je renseigne mal ou que j'oublie ?
Merci du coup de main !
Smiley biggrin
Modifié par RoseGrenouille (01 Sep 2005 - 01:26)
connecté
Administrateur
Salut et bienvenue,

Si tu veux que ton élément <div> occupe de la place, il faut lui donner un vrai contenu (dans le HTML) ou alors lui indiquer une hauteur (height) dans le CSS, sinon il sera vide et invisible Smiley smile

Autre chose : margin-left:auto; et margin-right:auto; ne vont pas servir à grand chose puisque l'élément prend déjà toute la largeur (width 100%)
Merci pour ta réponse Raphael

je comprends mais... Smiley ohwell

...en fixant la hauteur de maniere précise, quand je baisse la résolution, l'image reste bien centrée a l'écran , mais ses bords droits et gauche sont rognés !

En fait , ce que je voudrais c'est que mon bandeau Header prenne , par exemple 15% de la hauteur totale de la page et qu'il determine automatiquement la largeur de l'image pour que cell-ci ne soit pas deformée ni coupée.

Est ce qu'on ne peut pas regler ca avec les pourcentages au lieu des pixels ?
Hello,

Je sais que Raphael ne le fera pas, alors je le fais a sa place,
si tu commences en css, je peux te conseiller une chose,
c'est le livre de Raphael....

Sincèrement, avant de livre son livre, je faisais pas mal d'erreurs basiques,
la simple lecture de son livre, m'a dépoussieré l'esprit.

Je ne dirai pas que je suis devenu le roi du css puisque cette personne existe déja,
mais au moins je repars sur de bonnes bases! Smiley lol
Je pensais bien en passer par la........
Le bandeau me fait de l'oeil depuis quelques jours.
Smiley murf
je vais quand même essayer de continuer de forger pour devenir forgeron...
@Mobman 02 : le pourcentage , tu le mets dans le CSS ou dans le XHTML ?

Parce que dans le Css ca ne me donne rien de bon .....

Mais j'ai découvert quelques chose sur les images des Header à force de regarder de bons sites batis comme il faut.
L'image a très souvent un dégradé et une partie monochromatique , soit au centre , soit a droite soit a gauche.
A mon avis, la repetition en X d'un image de 1px de large , et de la hauteur du header permet de s'adapter a toutes les resolutions et sans déformations.
Par exemple dans le header de ce forum, à mons avis, il ya au moins deux images puisque'on devine un trait de jonction un peu plus gris que l'autre et que seul la partie grise varie avec la résolution

Smiley ravi
Je vais continuer a explorer et tenter de dénicher le livre de raphael.

@ raphael : y'a t-il un moyen de se procurer ton livre au canada autrement qu'en laissant 11euros a amazon pour la livraison?

Bonne journée !!!! Smiley biggrin
Sujet clos
Aller à