Actualité informatique
Test comparatif matériel informatique
Jeux vidéo
Astuces informatique
Vidéo
Télécharger
Services en ligne
Forum informatique
01Business

|-  LOGICIELS


|||-  

Image de fond d'un div

 

SECURITE : rubised et 66 utilisateurs inconnus
Ajouter une réponse
 

 
Page photos
 
     
Vider la liste des messages à citer
 
 Page :
1
Auteur
 Sujet :

Image de fond d'un div

Prévenir les modérateurs en cas d'abus 
kuartin
  1. homepage
kuartin
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 25/08/2005 à 12:16:44  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
J'ai un problème avec la page que je suis en train de réaliser. La page est divisé en plusieurs parties. Le body qui contient un div no1 pour l'ensemble de la page, le no1 contient un div no2 pour la bannière et un div no3 pour tout ce qu'il y a en dessous de la bannière. Le div no3 contient un div pour le menu de gauche, un pour le corps et un autre pour le menu de droite.

 Le div qui contient la page à une largeur de 780 pixels et il est centré dans la page. J'ai mis une couleur de fond pour le body.

 Voilà ce que ça donne :

 http://img374.imageshack.us/im​g374/8765/page8hj.th.jpg

 Je souhaite mettre un fond uniquement à la partie du div no3 cepandant dans le css quand je mets background-image : url ("image.png" ); il ne me met pas l'image de fond sur toute la hauteur. J'ai essayé de mettre un repeat y mais rien n'y fait. Je suis obligé de mettre un height : 500 px; c'est-à-dire mettre une hauteur au div pour que le fond apparaissent.

 Voilà le code d'index.php :

 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/​DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/​xhtml" xml:lang="fr" >

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" media="screen" type="text/css" title="disignindex" href="disign.css" />

</head>

<body>

<div id="body">

<div id="banniere">

<img src="image/image_de_gauche_ban​niere.png" id="image_gauche_banniere">

<img src="image/image_de_droite_ban​niere.png" id="image_droite_banniere">

</div>

<div id="ensemble">

<div id="menu_de_gauche">


      <div class="element_menu_gauche">
      <h4><img src="image/menu_navigation.png​"></h4>
      <ul>
      <li><a href="index.php">Accueil</a></​li>
      <li><a href="page.php">Archive</a></l​i>
      <li><a href="page.php">Forum</a></li>
      <li><a href="page.php">Livre d'or</a></li>
      </ul>
      </div>
     
      <div class="element_menu_gauche">
      <h4><img src="image/menu_materiel.png">​</h4>
      <ul>
      <li><a href="page.php">Processeur</a>​</li>
      <li><a href="page.php">Carte graphique</a></li>
      <li><a href="page.php">Carte mère</a></li>
      <li><a href="page.php">Mémoire Vive</a></li>
      <li><a href="page.php">Stockage</a></​li>
      <li><a href="page.php">Divers</a></li​>      
      </ul>
     
      <div class="element_menu_gauche">
      <h4><img src="image/menu_overclocking.p​ng"></h4>
      <ul>
      <li><a href="page.php">Base Overclocking</a></li>
      <li><a href="page.php">Records</a></l​i>
      </ul>
     
      <div class="element_menu_gauche">
      <h4><img src="image/menu_nouvelle_confi​guration.png"></h4>
      <ul>
      <li><a href="page.php">Conseil</a></l​i>
      <li><a href="page.php">Proposition de config</a></li>
      <li><a href="page.php">La meilleur config</a></li>
      </ul>

</div>

<div id="menu_de_droite">

</div>

<div id="corps">

</div>


 </div>

 </div>

 </body>
 </html>
 




 Et le code css qui correspond :

 



body
 {
 margin:auto;
 margin-top:2px;
 margin-bottom:2px;
 background-color:#F7FBFF;
 }

 #body
 {
 width:780px;
 margin:auto;
 background-color:white;
 }

 #banniere
 {
 width:780px;
 height:88px;
 background-image:url("image/im​age_de_fond_banniere.png" );
 }

 #image_gauche_banniere
 {
 float:left;
 }

 #image_droite_banniere
 {
 float:right;
 }

 #ensemble
 {
 background-image:url("image/fo​nd_ensemble.png" );
 background-repeat: repeat-y;
 }

 #menu_de_gauche
 {
 float:left;
 width:160px;
 margin:0px;
 margin-left:11px;
 }

 .element_menu_gauche h4
 {
 margin:0px;
 margin-top:5px;
 }

 .element_menu_gauche ul
 {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 }

 .element_menu_gauche a
 {
 display:block;
 text-decoration: none;
 color: #2C3458;
 font-size:0.9em;
 height:17px;
 margin-left:1px;
 }

 .element_menu_gauche a:hover
 {
 color: white;
 background-color:#A1DEFF;
 }

 .element_menu_gauche a:first-letter
 {
 font-size: 1em;
 }




 Voilà normalement ce que ça devrait faire avec le fond (ici j'ai mis la propriété height pour que ça affiche mon fond d'écran) :

 http://img374.imageshack.us/im​g374/40/page22fs.th.jpg

 Je m'en remets à vous car je ne vois pas la solution :(


---------------
[Topic Unik]Comment overclocker ?
beno5
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 25/08/2005 à 12:35:41  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
background-image : url(image.png);

(Publicité)
  1. homepage
kuartin
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 25/08/2005 à 12:38:22  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 

Beno@ a écrit :

background-image : url(image.png);
 



 Je mets les guillemets pour les autres fond et ça a toujours marché. Sa ne change rien :(


---------------
[Topic Unik]Comment overclocker ?
beno5
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 25/08/2005 à 12:39:32  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
c'ets quoi ton fond?

  1. homepage
kuartin
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 25/08/2005 à 12:41:29  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 

Beno@ a écrit :

c'ets quoi ton fond?
 



 C'est une image png qui fait 780px de largeur et 3px de hauteur.

 Tu peux le voir sur la dernière image ;)


---------------
[Topic Unik]Comment overclocker ?
(Publicité)
  1. homepage
kuartin
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 25/08/2005 à 15:21:00  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
J'ai essayé de mettre une autre image de fond qui fait 780px de largeur et rien n'y fait il ne me l'affiche pas.

 J'ai découvert que le problème venait du div du menu_de_gauche. Si j'enlève les propriétés css relatives au div du menu_de_gauche alors mon fond s'affiche correctement.

 Cepandant l'effet est pas terrible car le menu fait maintenant 100 % de la page, les margin ont disparu etc...

 Quelle est la solution ?


---------------
[Topic Unik]Comment overclocker ?
beno5
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 25/08/2005 à 16:22:50  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
evite ca:  
 



code:

 #menu_de_gauche
 {
 float:left;
 width:160px;
 margin:0px;
 margin-left:11px;

 }




 remplace par:
 



code:

 #menu_de_gauche
 {
 float:left;
 width:160px;
 margin:0px 11px 0px 0px;
 }


  1. homepage
kuartin
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 25/08/2005 à 18:56:04  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
En le mettant comme tu l'as dis, la marge à gauche à disparu pour ce block :(

 Sinon comment régler mon problème ?

 Je comprends pas pourquoi ça marche pas pourtant c'est parfaitement logique  :o


---------------
[Topic Unik]Comment overclocker ?
(Publicité)
  1. homepage
kuartin
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 27/08/2005 à 09:04:30  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Personne ? :(


---------------
[Topic Unik]Comment overclocker ?
 Page :
1

Aller à :
 

Sujets relatifs
image qui suit la souris image disparue
Musique libre de droit pour fond de vidéo. [Résolu] comment faire des ligne horizontale comme sur cette image ?
Cherche image ISO de Windows Serveur 2003 edition standard en francais Restauration du system depuis image disque sauvegardé sur DD Ext.
Plus de sujets relatifs à : Image de fond d'un div

Les 5 sujets de discussion précédents Nombre de réponses Dernier message
réactualisation tchat en javascript 20
inserer un forum au milieu d'un page satique écrite en html 5
Auto increment 3
Contour autour d'une image 5
Impression pdf (compatible entre imprimante pdf) VB 0