Probleme design et image de fond

**anthonydb1** · 20/11/2008, 18h31

Voilà bonjour à tous je vous expose mon probléme je dois creer un site internet pour un projet et je voudrais que le design du site soit ajustable en fonction de la taille de l'écran. Je connais la démarche a suivre mais cependant j'ai un souci au niveau de la banniére du haut (et du bas aussi d'ailleurs confus ) je m'explique j'ai defini ma div correspondant à la banniere à l'aide de % j'ai ensuite utilisé la syntaxe background-image dans mon fichier css pour inclure la banniere. Et la probléme la banniere ne s'affiche pas du tout je suis oblige de mettre une min-height et min-width pour que la banniere s'affiche et dans ce cas le design n'est plus ajustable. Que puis-je faire merci bien voici mon code css aidez moi s'il vous plait la ligne en rouge contient l'ajout de la banniere

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@charset "utf-8";

/* CSS Document */

body{width:100%;height:100%}

* {background-color:rgb(204,255,102);}



.banniereduhaut{min-height:102px;height:20%;width:80%;margin-left:4cm;background-image:url(Images/Banner3.gif);}	

.rech_rapide {height:10%;width:80%;margin-top:0.5cm; text-align:center;font-size:14px;}

.connexion {height:20%;width:20%;margin-top:0.5cm;float:right;}

.menu {height:20%;width:20%;margin-top:0.5cm;float:left;font-weight:bold;}

.menu a {color:rgb(51,153,0);text-align:center;font-family: Helvetica, sans-serif;}

.menu a { text-decoration: none; }

.menu dt {color:rgb(51,153,0);text-align:center;border-bottom:2px solid;border-color:rgb(255,153,0);font-size:18px;}

.menu a:hover{color:rgb(51,204,0);}

.menu ul {list-style-type: none;}

.menu li {border-bottom:1px solid;border-color:rgb(204,102,0);font-size:15px;margin-left:30px;font-style:italic;}



.contenu {height:90%;width:50%;margin-left:auto;margin-right:auto;margin-top:0.5cm;padding:5px;text-align:center;  }

En orange vous pouvez voir le bout de code qui semble gener car si j'enleve le min-height alors je n'ai plus la banniere. Donc voilà merci de m'aider

**devyan** · 20/11/2008, 18h55

Houla! Oui, je vois tout à fait le problème! Que j'ai moi-même mis quelques jours à régler pour mon cas car les solutions que j'ai pu collecter avec google ne fonctionnaient pas avec tous les navigateurs et/ou pas dans tous les cas de dimensionnement des pages.

Le principal problème est que les éléments ont tendance à se limiter à la largeur de la zone visible de la fenêtre du navigateur.

J'ai donc réglé le problème de la manière suivante :

html =

Code :

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

1
2
3
4
5
6
7
8
 
<body>
<div id="main">
 
      <div class="contenu"></div>
 
</div>
</body>

css =

Code :

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

1
2
3
4
5
/* ======================================================================== */
/*            FORCER LE DIMENSIONNEMENT MINIMUM A TOUTE LA PAGE             */
/* ======================================================================== */
html, body {min-height: 100%; height: auto;}
#main {height: auto; width: auto; min-height: 100%; min-width: 100%;}

Testé (dans mon cas) avec IE6 et 7, FF2 et 3, Opera9 et Safari3(win)

**anthonydb1** · 21/11/2008, 06h48

Merci bien pour ton aide j'ai essayé de faire comme tu dis mais dans ce cas quand j'enleve le min-height de banniere du haut rien ne s'affiche. je ne sais pas comment faire

**c_s_s** · 21/11/2008, 09h58

Bonjour,

J'imagine que ta bannière a une hauteur fixe, dans ce cas, mieux vaut indiquer cette hauteur dans le css plutôt que de mettre une valeur en pourcentage.

height:20% --> height:**px (avec la bonne hauteur à la place de **)

Tu pourras ensuite enlever le min-height.

**devyan** · 21/11/2008, 10h14

Envoyé par anthonydb1

Merci bien pour ton aide j'ai essayé de faire comme tu dis mais dans ce cas quand j'enleve le min-height de banniere du haut rien ne s'affiche. je ne sais pas comment faire

Pas besoin d'enlever le "min-height" sur ta bannnière. **EDIT** Tu la places dans #main comme pour contenu dans mon exemple (mais sans la structure html de ta page c'est plus difficile de répondre... Lorsque nous demandons le CSS et le HTML ce n'est pas pour vous ennuyer mais parce que la structure html aussi est importante)

**EDIT** Non ça c'est hors sujet

(tu limites à 80% en largeur) De plus, tu peux placer l'image de "background" plus haut dans le contenu html (sur html ou #main par exemple il me semble que sur body il y a des cas où cela pose problème lors du redimensionnement)

Probleme design et image de fond

CSS

Discussions similaires

Partager

Partager