Image de fond sur plusieurs divRésolu/Fermé

Question

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"

PMax-57 · Answer

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 !

Le-fond-du-fond-c'est-plantafon · Answer

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 ;)

Le-fond-du-fond-c'est-plantafon · Answer

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...

monkey_monk · Answer

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 ?

PMax-57 · Answer

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)
}

Le-fond-du-fond-c'est-plantafon · Answer

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 :

espace du haut pour plus tard si besoin

le menu du haut

petit texte de présentation / image etc.

Mon gros texte avec l'overflow...

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; }

monkey_monk · Answer

Salut, tu devrais plutot faire comme ça :

espace du haut pour plus tard si besoin

le menu du haut

petit texte de présentation / image etc.

Mon gros texte avec l'overflow...

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 · Answer

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. https://csscreator.com/version2/pagelayout.php 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 · Answer

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...

Le-fond-du-fond-c'est-plantafon · Answer

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 ;)

PMax-57 · Answer

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 !

globbersthemes · Answer

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;

}

monkey_monk · Answer

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 · Answer

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...

Le-fond-du-fond-c'est-plantafon · Answer

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

PMax-57 · Answer

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 !

Image de fond sur plusieurs div

16 réponses

Discussions similaires

Newsletters