Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > CSS
CSS Forum d'entraide sur l'utilisation des feuilles de style CSS. Avant de poster : Cours CSS, FAQ CSS, Galerie CSS
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 07/03/2011, 15h36   #1
Membre du Club
 
Inscription : avril 2008
Messages : 245
Détails du profil
Informations personnelles :
Âge : 27
Localisation : France

Informations forums :
Inscription : avril 2008
Messages : 245
Points : 40
Points : 40
Par défaut positionnement background CSS div

Bonjour,

J'ai un petit souci avec des fonds, J'ai un div qui se positionne tout en haut d'une page, dans lequel il y a 3 div avec chacun une image de fond, (le coin de gauche, le coin de droite, et le milieu qui est extensible) ce qui permet d'étendre la fenetre en gardant le fond toujours pareil.

Mais quand je réduis la fenetre, les div se mettent les uns en dessosu des autres et la mise en page foire :
Voici mon HTML :
Code :
1
2
3
4
5
6
7
8
<div id="container">
  <div id="content">
    <div class="Float" style="height:50px;width:50px;background-image:url(/images/menu/body/top_left.jpg);"></div>
    <div class="Float" style="height:50px;width:80%;background-image:url(/images/menu/body/top_middle.jpg);"></div>
    <div class="Float" style="height:50px;width:50px;background-image:url(/images/menu/body/top_right.jpg);"></div>
  </div>
  <div id="footer">pied de page</div>
</div>
Voici mon CSS :
Code :
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
 
html, body { height: 100%; }
body { margin: 0px; padding: 0px;}
#container {
  position: relative;
  min-height: 100%;
  height: 100%;
  voice-family: "\"}\"";
  voice-family: inherit;
  height: auto;
}
html>body #container {  height: auto; }
#content { padding: 0px; background-color: #a6c; padding-bottom: 0px; }
#footer {
  position: absolute;
  bottom: 0px;
  padding: 0px;
  background-color: #609;
  width: 100%;
}
 
.Float
{
  float:left;
}
Merci bcp.
Ju'
ju0123456789 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/03/2011, 15h42   #2
Modérateur
 
Avatar de Bisûnûrs
 
Josselin
Développeur Web
Inscription : janvier 2004
Messages : 9 050
Détails du profil
Informations personnelles :
Nom : Josselin
Âge : 29
Localisation : France, Rhône (Rhône Alpes)

Informations professionnelles :
Activité : Développeur Web

Informations forums :
Inscription : janvier 2004
Messages : 9 050
Points : 12 181
Points : 12 181
Il faudrait pour cela que ton div #content prenne pour largeur la somme des largeurs de ses éléments enfants .. mais comme tu mélanges les px et les %, ça va pas être facile ..
Bisûnûrs est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/03/2011, 16h26   #3
Membre du Club
 
Inscription : avril 2008
Messages : 245
Détails du profil
Informations personnelles :
Âge : 27
Localisation : France

Informations forums :
Inscription : avril 2008
Messages : 245
Points : 40
Points : 40
Bonjour et merci de ta réponse.
a ouais...
Mais alors comment puis-je procéder pour avoir mon coin gauche, mon coin droit qui ne bougent pas, et le milieu extensible ?

Le but pour moi sera de faire un encadré complet de la page, donc les resultats en PHP peuvent également changer la hauteur de la page
ju0123456789 est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 16h04.


 
 
 
 
Partenaires

Hébergement Web