28220 sujets

CSS et mise en forme, CSS3

[Résolu] Banniere extensible

Bonsoir,

Je suis en train d'essayer de créer un site extensible, mais je rencontre 2 problèmes avec la disposition de ma banniere.
Ma banniere fait 760px X 250px.
1/ Sur ma page, elle se trouve en haut à gauche, alors que je la voudrais en haut au milieu.
2/ Elle n'est pas extensible

Voici mon code XHTML :

<div id="conteneur">
<!-- la banniere -->
<div id="banniere"> <img src="../images/banniere.gif" alt="banniere" title="Oenas et Serapias, Alimentation et accessoire pour oiseaux" /></div></div>


et pour le CSS

#conteneur
{
position: absolute;
width: 100%;
padding: 0;
margin: 0;
}


Auriez vous une idée pour m'aider à résoudre mes 2 problèmes ?

D'avance merci !
Modifié par Dgidge (27 Nov 2005 - 20:57)
Salut,

Dans l'exemple que tu donnes, à quoi servent les div ?

Ton image fait 760px pourquoi serait-elle extensible ?
papyjo a écrit :
Salut,
Dans l'exemple que tu donnes, à quoi servent les div ?


J'ai créé 5 div
-le conteneur (qui contient les 4 div ci-dessous)
-la banniere (en haut, a gauche au lieu d'être centré)
-les menus (sous la banniere, centré)
-le corps (sous les menus, centré)
-le pied de page (sous le corps, centré)

papyjo a écrit :
Ton image fait 760px pourquoi serait-elle extensible ?

La taille de mon image, c'est celle que je lui ai donné par defaut, quand je l'ai créée. En fait, je voudrais qu'elle vienne prendre 100% de la place de mon bloc "banniere" et que ce bloc "banniere" soit extensible, comme pour un zoom, c'est-à-dire en gardant les proportions.

Est-ce possible ?
Hello,

pour l'alignement de ton div banniere, tu peux faire:

#banniere{
margin-left:auto;
margin-right:auto;
}

ou, si tout sera centré dans ton conteneur:
#conteneur{
position: absolute;
width: 100%;
padding: 0;
margin: 0;
text-align:center;
}


ensuite, pour ton image étirable (attention à la qualité, ce n'est pas toujours (pas souvent, même) très judicieux, tu peux t'inspirer de ce tuto
Bonsoir,

Pour des bannières extensibles sans perte de qualité de l'image, la ruse classique consiste :
- à réaliser une bannière étroite (400px par exemple) dont la partie droite s'achève par une zone avec un arrière-plan simple (une couleur ou un dégradé vertical par exemple)
- à réaliser une image de cette partie de l'arrière-plan, et à la répéter horizontalement en arrière-plan CSS dans le bloc complétant l'image en largeur.

On peut affiner en jouant sur 2 images (une à droite et l'autre à gauche) réunies par l'arrière-plan CSS, ou sur d'autres variantes similaires...
Modifié par Laurent Denis (27 Nov 2005 - 19:39)
Sujet clos
Aller à