problèmes de background et de div [résolu]

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : problèmes de background et de div [résolu]

micfont999

Simplement Moi

Bonsoir tout le monde,
ça fait un bail que je ne suis pas venu vous faire un petit coucou..

Voila je rencontre un soucis que je n'arrive pas à résoudre et qui pourtant doit être très simple..

J'ai pour l'instant un design de ce type :

j'ai réussi à mettre en place toutes les div, marquées en soulignées sur l'image.. pas de soucis tout fonctionne bien.
Mon seul soucis réside dans le fait que j'aimerais faire en sorte que le texte de mon contenu soit au dessus du bg de mon contenu.. POur ça aucun soucis, mais je rencontre un problème en souhaitant mettre dans mon contenu 3 images de background différentes..

Je m'explique avec cette image :

Comme vous le constatez, avec le contenu plus important, l'image du haut reste en place, l'image du bas reste en bas de mon div, et l'image du milieu est étendue ...
C'est ceci que je n'arrive pas à faire.
Faire en sorte que mon div est 3 images de fond, une qui restera toujours en haut, une autre toujours en bas, et une autre qui ce répètera pour combler le vide entre les deux ...
j'ai effectué pas mal de testes, avec 3 div pour chaque image en z-index, mais ça me fais un truc très foireux..

Voici mon bout de code simplifié :

Code :

<body>
<div id="global">
<div id="entete"></div>
<div id="menuKC">
</div>
<div id="centre">
<div id="flashGroupe">...</div>
<div id="contenu">
<div id="contenuHaut">
<div id="contenuBas">
<div id="contenuCentre">
Tribus hanc e partibus tangit oceanus, ita nominibus ut locis differens; Eous ab oriente, a meridie Indicus, a septentrione Scythicus. Ipsa, ingenti ac perpetua fronte versa ad orientem, tantum ibi se in latitudinem effundit, quantum Europe et Africa, et quod inter ambas Pelagus immissum est. Inde cum aliquatenus solida processit, ex illo oceano, quem Indicum diximus, Arabicum mare et Persicum, ex Scythico Caspium recipit: et ideo qua recipit angustior, rursus expanditur, et fit tam lata, quam fuerat. Deinde, cum jam in suum finem aliarumque terrarum confinia devenit, media Nostris aequoribus excipitur: reliqua altero cornu pergit ad Nilum, altero ad Tanain. Ora ejus cum alveo Nili amnis descendit in Pelagus; et diu, sicut illud incedit, ita sua litora porrigit: dein fit venienti obviam, et primum se ingenti ambitu incurvat; post se ingenti fronte ad Hellesponticum fretum extendit: ab eo iterum obliqua ad Bosporum, iterumque ad Ponticum latus curva, aditum Maeotidos transverso margine attingit. Ipsam gremio ad Tanain usque complexa, fit ripa, qua Tanais est. <br />
</div></div></div>
</div>
</div>
<div id="pieddepage"></div>
</div>

Rien de bien sorcier
et le css simplifié aussi juste pour le contenu

Code :

/* Contenu secondaire */
#contenu {
width:745px;
height:500px;
margin-left:279px;
z-index:10;
/*background-image:url(../images/contenu_15.png);*/
}
/* le min height pour les autres navigateurs que IE */
html>body #contenu {
height: auto;
min-height: 500px;
}
/* Contenu secondaire */
#contenuHaut {
width:745px;
height:254px;
background-image:url(../images/contenu_bis_09.png);
background-position:top left;
background-repeat:no-repeat;
z-index:1;
/*background-image:url(../images/contenu_15.png);*/
}
/* le min height pour les autres navigateurs que IE */
/*html>body #contenuHaut {
height: auto;
min-height: 500px;
} */
/* Contenu secondaire */
#contenuBas {
width:745px;
height:216px;
background-image:url(../images/contenu_bis_12.png);
background-position:bottom left;
background-repeat:no-repeat;
z-index:3;
/*background-image:url(../images/contenu_15.png);*/
}
#contenuCentre {
width:745px;
height:500px;
background-image:url(../images/contenu_bis_10.png);
background-repeat:repeat-y;
z-index:2;
/*background-image:url(../images/contenu_15.png);*/
}
/* le min height pour les autres navigateurs que IE */
html>body #contenuCentre {
height: auto;
min-height: 500px;
}

Est ce que quelqu'un à déjà eu à faire ce genre de manipulation et si oui est ce qu'il pourrait m'éclairer de ses lanternes pour voir un peu comment je peux bidouiller tout ça ..

Attention je tiens à préciser que le code html est un test, donc je sais que les div sont très mal imbriqués et autre hein, c'est l'un de mes nombreux tests ^^
Merci par avance pour tous ceux qui pourront m'aider

[:magnasuprema]

Message édité par micfont999 le 07-04-2009 à 21:57:43

---------------
> http://graphicriver.net/user/micfo [...] micfont999

Publicité

abais

tu dois avoir des div placés comme ça :

Code :

<div id="contenu">
   <div id="contenuBas">
        Contenu texte
    </div>
</div>

tu donnes seulement la largeur à contenu, la hauteur se fera en fonction du contenu de contenuBas...
contenu aura l'image du haut, en no-repeat et aligné en haut, ainsi qu'un fond gris.
contenuBas aura l'image du bas, en no-repeat et aligner en bas. Il aura aussi un min-height pour eviter le chevauchement de background avec contenu.

On s'est compris ? ^^

Message édité par abais le 07-04-2009 à 21:45:06

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

micfont999

Simplement Moi

oui on s'est compris, sauf que je ne peux pas mettre un fond gris
Le fond qui dois ce répéter doit être également une image c'est bien ça le soucis ... les images que j'ai fourni dans le topic sont un exemple...

Merci à toi pour ta réponse rapide.. c'est gentil

micfont999

Simplement Moi

Bon voila la solution à tous mes problèmes, t'étais pas si loin en fait

Code :

<div id="contenu">
<div id="contenuCentre">
<div id="contenuHaut">
<div id="contenuBas">
Tribus hanc e partibus tangit oceanus, ita nominibus ut locis differens; Eous ab oriente, a meridie Indicus, a septentrione Scythicus. Ipsa, ingenti ac perpetua fronte versa ad orientem, tantum ibi se in latitudinem effundit, quantum Europe et Africa, et quod inter ambas Pelagus immissum est. Inde cum aliquatenus solida processit, ex illo oceano, quem Indicum diximus, Arabicum mare et Persicum, ex Scythico Caspium recipit: et ideo qua recipit angustior, rursus expanditur, et fit tam lata, quam fuerat. Deinde, cum jam in suum finem aliarumque terrarum confinia devenit, media Nostris aequoribus excipitur: reliqua altero cornu pergit ad Nilum, altero ad Tanain. Ora ejus cum alveo Nili amnis descendit in Pelagus; et diu, sicut illud incedit, ita sua litora porrigit: dein fit venienti obviam, et primum se ingenti ambitu incurvat; post se ingenti fronte ad Hellesponticum fretum extendit: ab eo iterum obliqua ad Bosporum, iterumque ad Ponticum latus curva, aditum Maeotidos transverso margine attingit. Ipsam gremio ad Tanain usque complexa, fit ripa, qua Tanais est. <br />
</div></div></div>
</div>

et le css

Code :

/* Contenu secondaire */
#contenu {
width:745px;
height:500px;
margin-left:279px;
z-index:10;
/*background-image:url(../images/contenu_15.png);*/
}
/* le min height pour les autres navigateurs que IE */
html>body #contenu {
height: auto;
min-height: 500px;
}
/* Contenu secondaire */
#contenuHaut {
width:745px;
background-image:url(../images/contenu_bis_09.png);
background-position:top left;
background-repeat:no-repeat;
z-index:1;
/*background-image:url(../images/contenu_15.png);*/
}
/* le min height pour les autres navigateurs que IE */
/*html>body #contenuHaut {
height: auto;
min-height: 500px;
} */
/* Contenu secondaire */
#contenuBas {
width:745px;
height:500px;
background-image:url(../images/contenu_bis_12.png);
background-position:bottom left;
background-repeat:no-repeat;
z-index:3;
/*background-image:url(../images/contenu_15.png);*/
}
#contenuCentre {
width:745px;
background-image:url(../images/contenu_bis_10.png);
background-repeat:repeat-y;
z-index:2;
/*background-image:url(../images/contenu_15.png);*/
}
/* le min height pour les autres navigateurs que IE */
html>body #contenuBas {
height: auto;
min-height: 500px;
}

l'ordre est donc vraiment important

Merci à vous de votre lecture ^^ et merci à toi pour l'indice ^^

---------------
> http://graphicriver.net/user/micfo [...] micfont999

FORUM HardWare.fr

Programmation

HTML/CSS

problèmes de background et de div [résolu]

Sujets relatifs
[RESOLU][ORACLE] "Personnalisation" d'un ORDER	placer un uint>255 dans un buffer [résolu]
[Résolu] Ajax, XMLhttpRequest, interrogation multiples et simultannées	placement de texte[résolu]
Problème d'occurence variable [RESOLU]	[Résolu] Edit mono-ligne avec retour à la ligne ?
[Résolu] Comparatif IBM Rational Application Developer / Eclipse	flash cs4 problemes
[Résolu]Syntaxe dans un script php	recherche dans un recordset [Résolu]
Plus de sujets relatifs à : problèmes de background et de div [résolu]

Page générée en 0.088 secondes