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 :
http://img12.imageshack.us/img12/2787/image01r.th.jpg
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 :
http://img4.imageshack.us/img4/5931/image02b.th.jpg
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é :
Rien de bien sorcier
et le css simplifié aussi juste pour le contenu
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
Modifié par micfont999 (07 Apr 2009 - 22:06)
ç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 :
http://img12.imageshack.us/img12/2787/image01r.th.jpg
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 :
http://img4.imageshack.us/img4/5931/image02b.th.jpg
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é :
<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
/* 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
Modifié par micfont999 (07 Apr 2009 - 22:06)