High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Image de fond sur plusieurs div

Dernière réponse le 7 jui 2009 à 23:35:17 Le-fond-du-fond-c'est-plantafon, le 7 jui 2009 à 15:22:24 
 Signaler ce message aux modérateurs

Bonjour,
j'ai besoin de votre aide concernant une image de fond que je veux mettre sur plusieurs div : ma page se présente comme ça : un rectangle central :

j'ai créé un div principal : #centre (qui est le rectangle dans lequel je veux mettre tous mes div)

dans lequel il y a 3 div id :
.haut (pour le menu en haut comme une barre)
.element_centre1 (pour la partie à gauche de mon rectangle, avec du texte, ou image par la suite)
.element_centre2 (pour la partie à droite de mon rectangle, avec du texte donc overflow)


Mais quand je souhaite mettre un image de fond à ce rectangle entier, ca me met mon image UNIQUEMENT dans le .haut


J'ai un fichier design.css, voici comme il se présente :


#centre
{
height:600px;
margin-top:300px;
width:auto;
height:auto;
background-image:url(test.png);
background-repeat:repeat-y;
}

.haut
{
width:auto;
height:200px;
}


.element_centre1
{
float:left;
width:390px;
height:100px;
padding-bottom:200px;
}


.element_centre2
{
width:390px;
height:100px;
padding-bottom:200px;
overflow:auto;
}



Pouvez-vous m'aider SVP ;-) ???

MERCI ;)

"Le-fond-du-fond-c'est-plantafon"

Configuration: Mac OS X
Safari 530.17

Meilleures réponses pour « Image de fond sur plusieurs div » dans :
Pobleme insertion fond d'ecran (site web/CSS) Voir
Image de fond xhtml css Voir
[Outlook Express] Créer papier à lettre / Insérer image de fond Voir Le papier à lettre est une fonctionnalité de Outlook Express permettant d'égayer les courriers électroniques envoyés en insérant des illustrations (images, texte, etc.) en image de fond. Créer son papier à lettre sous Outlook Express Dans la fenêtre...
[Word] Image de fond VoirIl est possible sous Microsoft Word d'afficher une image en arrière-plan dans un document en cliquant sur le menu Format, puis sur Arrière-Plan et enfin sur Motifs et textures. Dans l'onglet Image, cliquer sur le bouton "Sélectionner une image"....
Insérer une image de fond sous la grille Excel VoirVous souhaitez insérer un logo sous JPEG ou autre, sous votre grille Excel : FORMAT / FEUILLE / ARRIERE PLAN s'ouvre un panneau vous présentant vos images pour sélection.... choisissez, validez. Pour le supprimer : même procédure FORMAT /...
[Infographie] Créer des mosaïques d'images VoirSi vous voulez créer des mosaïques d'images telles que celle-là: il existe deux logiciels gratuits sous Windows qui permettent d'en créer: AndreaMosaic et Foto-Mosaik
Les arrière-plans VoirInsérer une image en fond Il est possible de définir une image d'arrière-plan pour la page web grâce aux attributs de la balise  : Attribut Effet Visuel BACKGROUND="image" Affiche l'image en arrière...
Posez votre question Répondre

1

PMax-57, le 7 jui 2009 à 15:28:21

Salut


Mince, j'avais mal lu ton message.

Pour tes divs :

Tu crée ta div principale (par exemple : 250px de large, 100 px de haut).

à l'intérieur, tu crée ta div du haut avec tes dimensions
tu crée une div principale bas pour intégrer tes deux divs du bas

les div du bas, pour les aligner, rajoute la propriété css "display: inline-block;"

voilà j'espère que ça va t'aider !
bon courage !

   
Répondre à PMax-57

2

Le-fond-du-fond-c'est-plantafon, le 7 jui 2009 à 15:36:37

Merci de ta réponse PMax-57! mais je voudrais mettre une seule image de fond pour tous les div, c'est-à-dire ne pas séparer l'image en 4, mais avoir la même image qui représente le background de tous mes div

C'est pourquoi je l'avais mis dans le div principal que j'ai appelé "#centre", mais ce que je ne comprend pas c'est pourquoi ça me le met simplement dans le div id ".haut"

Tu vois?

Merci de ton aide ;-)

   
Répondre à Le-fond-du-fond-c'est-plantafon

3

Le-fond-du-fond-c'est-plantafon, le 7 jui 2009 à 15:52:05

Alors, voilà ou j'en suis ;) :

J'ai fait un div principal en haut : #principale

et un div pour le bas : #bas, qui regroupe mes 2 div class "element"

Par contre, j'ai 2 soucis :

- j'ai un espace énorme entre les 2 div principaux, comme si il y avait 50 lignes entre les deux quand je lance l'aperçu
- et je n'arrive pas à mettre l'image de fond "test" à la fois dans le div du haut (#principale) et le div du bas (#bas), par défaut pour tester je l'ai mis dans le div du bas (voir code CSS), mais je ne sais pas ou je devrais le mettre pour qu'il soit en même temps dans les 2 parties de ma page??

Voilà mon code CSS :


#principale
{
height:600px;
margin-top:100px;
width:500px;
}

.haut
{
width:auto;
height:100px;
}


#bas
{
width:auto;
height:200px;
margin-top:auto;
background-image:url(test.png);
display: inline-block;
}

.element_centre1
{
float:left;
width:390px;
height:100px;
padding-bottom:200px;
}


.element_centre2
{
width:390px;
height:100px;
padding-bottom:200px;
overflow:auto;
}


Merci ;)

   
Répondre à Le-fond-du-fond-c'est-plantafon

4

Le-fond-du-fond-c'est-plantafon, le 7 jui 2009 à 15:56:49

OK l'histoire de l'espace est reglé, j'avais mis la dimension height beaucoup trop élevée ;)

Mais je reste bloqué sur mon histoire d'image de fond, pour les 2 div principaux...

   
Répondre à Le-fond-du-fond-c'est-plantafon

5

monkey_monk, le 7 jui 2009 à 16:01:07

Bonjour,

je ne suis pas sur de comprendre... tu veux placer une image en dessous de toutes tes div ?
Si oui, pourquoi ne la mets-tu pas dans le background ?
[Monkey Monk]

   
Répondre à monkey_monk

6

PMax-57, le 7 jui 2009 à 16:02:13

Re salut


Pour tes divisions je vois déjà une erreur de largeur stricte...

En clair : est-ce que ton tableau sera dimensionné automatiquement, ou veux tu lui donner des valeurs fixes (par exemple: 50px de large 100px de haut).

Si tel n'est pas le cas, c'est ok. Sinon, ton codage sera à modifier.
Personnellement j'aurais fait: 

#principale
{
height:600px;
margin-top:100px;
width:500px;
background-url(l'url); (tu rajoute du repeat x, repeaty ou no-repeat suivant ce que tu souhaites, ou rien si tu veux répéter).
} 

#haut {
height:100px;
width:500px;
}

#bas { (dans cette div tu integreras bas1 et bas2)
height:500px;
width:500px;
}

#bas1 {
height:500px; (valeur restante de ta div principale : 600-100 = 500px)
width:240px; (valeur donnée à titre d'exemple)
display:inline-block; (pour aligner avec bas2)
}
#bas2 {
height:500px;
width:260px;
display:inline-block; (pour aligner avec bas1)
}

   
Répondre à PMax-57

7

Le-fond-du-fond-c'est-plantafon, le 7 jui 2009 à 16:24:28

Merci de vos réponses, pour Monkey_Monk : je voudrais en fait avoir une page de fond blanc par exemple, et avoir un rectangle au centre, qui rassemble toutes mes divs : et dans ce rectangle là, au centre, j'aimerais pouvoir mettre une image de fond, seulement dans ce rectangle, il y a plusieurs divs, c'est pourquoi j'essaie de trouver un moyen de mettre une image de fond pour l'ensemble des divs de ce rectangle, tu vois?



Merci PMax-57, mais là je galère trop, j'ai suivi ton code, seulement les 2 divs du bas ne sont plus alignés, je te montre les codes HTML et CSS pour que ce soit plus simple à comprendre :

il faudrait donc que je puisse tout rassembler dans le rectangle centrale, et mettre mon image de fond ensuite dans ce rectangle :

HTML :
<body>

<div id="principale">
espace du haut pour plus tard si besoin
</div>

<div id="haut">
le menu du haut
</div>

<div id="bas">

<div id="bas1">
petit texte de présentation / image etc.
</div>

<div id="bas2">
Mon gros texte avec l'overflow...
</div>

</div>
</body>


CSS :

#principale
{
height:300px;
margin-top:100px;
width:500px;
background-image:url(test.png);
}

#haut {
height:100px;
width:500px;
}

#bas {
height:300px;
width:500px;
}

#bas1 {
height:300px;
width:240px;
display:inline-block;
}
#bas2 {
height:300px;
width:260px;
display:inline-block;
overflow:auto;
}

   
Répondre à Le-fond-du-fond-c'est-plantafon

8

monkey_monk, le 7 jui 2009 à 16:46:30

Salut,

tu devrais plutot faire comme ça : 

<div id="principale">
  espace du haut pour plus tard si besoin
  <div id="haut">le menu du haut</div>
  <div id="bas">
    <div id="bas1">petit texte de présentation / image etc.</div>
    <div id="bas2">Mon gros texte avec l'overflow... </div>
  </div>
</div>


et pour le CSS quelque chose comme ça : 
* { margin: 0; padding: 0; }
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; }
div#principale{ width: 500px; background: transparent url(bg.png) repeat-x; margin: 50px auto 20px; text-align: left; }
div#haut { width: 500px; height: 100px; margin: 0 auto; background: transparent url(header.png) top left no-repeat; }
...etc !


Qu'en penses-tu ?
[Monkey Monk]

   
Répondre à monkey_monk

9

Le-fond-du-fond-c'est-plantafon, le 7 jui 2009 à 17:09:50

Merci ça commence à prendre forme!! mais comment mettre les deux balises du bas l'une à côté de l'autre?

Elles sont pour l'instant l'une en-dessous de l'autre, bien que j'ai mis la fonction "display: inline-block" :

Voilà le code CSS :

* { margin: 0; padding: 0; }
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; }
div#principale{ width: 700px; background: transparent url(test.png) repeat-x; margin: 50px auto 20px; text-align: left; }
div#haut { width: 700px; height: 100px; margin: 0 auto;}
div#bas { width: 700px; height: 100px; margin: 0 auto;}
div#bas1 { width: 350px; height: 100px; margin: 0 auto; display:inline-block;}
div#bas2 { width: 350px; height: 100px; margin: 0 auto; display:inline-block; overflow:scroll;}

Merci de ton aide ;)

(PS: autre question par curiosité : on peut créer un lien sur une image mise dans le fichier CSS? ou il faut que l'image soit dans la partie "html" pour lui créer un lien en cliquant dessus?)

   
Répondre à Le-fond-du-fond-c'est-plantafon

10

monkey_monk, le 7 jui 2009 à 17:22:40

Les liens sont créé dans la partie HTML... le CSS sert à configurer le comportement "visuel".

Pour ton problème je ne vois pas trop ce que tu veux dire... sinon pour info, je viens de découvrir un outil plutot marrant. http://csscreator.com/?q=tools/layout qui te permettra de faire un layout rapide.

Je n'ai pas encore décortiqué le code pour voir s'il est propre ou non... mais ça peut quand même être intéressant !
[Monkey Monk]

   
Répondre à monkey_monk

11

Le-fond-du-fond-c'est-plantafon, le 7 jui 2009 à 17:34:21

Ah ouai c'est vachement bien ce truc,

pour mon problème ce sont mes balises du bas qui sont alignées en verticale, alors que j'aimerais que ce soit sur la longueur, le "bas1" à gauche du rectangle, et le "bas2" avec l'overflow à droite du rectangle. Mais en faisant ce code CSS, le bas1 est au-dessus, et le bas2 est en-dessous :

div#bas { width: 700px; height: 100px; margin: 0 auto;}
div#bas1 { width: 350px; height: 100px; margin: 0 auto; display:inline-block;}
div#bas2 { width: 350px; height: 100px; margin: 0 auto; display:inline-block; overflow:scroll;}


Tu vois ou serait le problème?

   
Répondre à Le-fond-du-fond-c'est-plantafon

12

monkey_monk, le 7 jui 2009 à 17:50:57

Ah oui ok !

Rajoute "float:left;" à ton bas1... ça devrais régler ce petit prob' ! ;)

Tu risques ensuite de devoir chipoter avec la marge gauche de ton bas2... en général on met la largeur de la div de gauche comme marge de celle de droite.

Edit* Du coup pense à redéfinir tes largeurs, sinon ça va déborder... [Monkey Monk]

   
Répondre à monkey_monk

14

Le-fond-du-fond-c'est-plantafon, le 7 jui 2009 à 18:11:50

Salut!

bon j'ai pas trop le droit de le faire mais j'ai utilisé un autre site pour vous montrer ce que ça donne, j'espère que ça pourra vous aider :
http://www.krptechnologies.com/Musique.html


Mon problème reste le même : avec float:left sur le bas1, ça me donne le bas2 avec l'overflow qui vient se chevaucher juste en dessous

si je met : float:right, ça me donne le bas2 en-dessous mais pas sur la même ligne, et le rend pas très bien

Vous avez une idée??

Voilà le code CSS du site pour l'instant :

* { margin: 0; padding: 0; }
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; }
div#principale{ width: 700px; background: transparent url(test.png) repeat-x; margin: 50px auto 20px; text-align: left; }
div#haut { width: 700px; height: 100px; margin: 0 auto;}
div#bas { width: 700px; height: 100px; margin: 0 auto;}
div#bas1 { width: 350px; height: 100px; margin: 0 auto; margin-left:5px; display:inline-block;}
div#bas2 { width: 350px; height: 100px; margin: 0 auto; display:inline-block; overflow:auto; float:right;}


Merci ;)

   
Répondre à Le-fond-du-fond-c'est-plantafon

15

PMax-57, le 7 jui 2009 à 18:35:34

Re !

Défini tes Z-index :
dans ton CSS, sur bas1 tu met z-index: 2; bas 2 : z-index:3.

Ton bas 2 sera au dessus de ton bas 1.
Ensuite, tu ajuste à ta convenance !

Pour utiliser le float, tu peux utiliser la variable position:absolute; float:left; .

Bon courage !

   
Répondre à PMax-57

16

globbersthemes, le 7 jui 2009 à 18:35:50

Salut voila un exemple

div#haut {
float:left;
width: 700px;
height: 100px;
margin: 0 ;
padding:0;
}

div#bas {
float:left;
width: 700px;
height: 100px;
margin: 0 ;
padding:0;
}

div#bas1 {
float:left;
width: 350px;
height: 100px;
margin: 0 ;
padding:0;
}

div#bas2 {
float:left;
width: 350px;
height: 100px;
margin: 0 ;
padding:0;

}

   
Répondre à globbersthemes

17

monkey_monk, le 7 jui 2009 à 18:48:17

C'est exactement pour éviter les chevauchements que je t'ai dit de mettre une marge gauche à ton bas2... pour qu'il ne soit pas "en-dessous" de bas1 mais bien "à coté".

[Monkey Monk]

   
Répondre à monkey_monk

18

monkey_monk, le 7 jui 2009 à 18:51:04

Enlève tes display, ils ne servent absolument à rien. Ensuite mets plutôt float:left à bas1 et enlève le float à bas2.
Tu mets float:right; pr bas1 et margin-left:350px; à bas2...

[Monkey Monk]

   
Répondre à monkey_monk

19

Le-fond-du-fond-c'est-plantafon, le 7 jui 2009 à 22:23:06

Yesss merci les gars, ça marche!!! :) Je viens de rentrer et ai fait la dernière technique de Monkey_monk, merci aussi PMax-57 et Globbersthemes c'est vachement utile d'avoir plusieurs aides!

Bon et bien j'ai enfin réglé mon problème! Merci à vous! ;)

Je vais passer un peu de temps maintenant à chercher comment personnaliser la barre de défilement! Si vous avez des liens ou des conseils d'avance, c'est avec grand plaisir! Sinon si je n'y arrive pas je passerai bien poster un petit comment ici! ;)

Merci en tout cas pour ce 1er problème de mon site! ;)

Et n'hésitez pas si vous avez des infos sur la barre! ;)

à bientôt

Le-fond-du-fond-c'est-Plantafon

   
Répondre à Le-fond-du-fond-c'est-plantafon

20

 PMax-57, le 7 jui 2009 à 23:35:17

Re !

Content que tu ais résolu ton problème, je viens de lire ton dernier post.

Concernant ta barre de défilement, d'un avis personnel je te conseille de la laisser tel quel, car les variables que tu vas insérer ne seront pas forcément les même sur tous les navigateurs, et c'est un véritable casse-tête !

Par contre, si tu remarques que celle par défaut ne s'intègre pas bien dans ta charte graphique, modifie le stricte minimum, notamment les couleurs.

Enfin bref, il s'agit là d'un avis personnel, à voir si d'autres pensent pareil que moi !

Bon courage pour la suite !

   
Répondre à PMax-57
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net