28173 sujets

CSS et mise en forme, CSS3

[Résolu] Background en 2 parties verticales (position absolue)

Bonjour à tousles CSSophiles !

Je viens de finir la créa graphique de mon site pro et après avoir monté le layout, je reste face à unproblème insoluble Smiley eek

En effet, je voudrais que mo background se compose de deux parties verticales différentes, de largeurs différentes,l'une de couleur unie et l'autre avec une image de fond.

Pour illustrer ce que je veux faire :

upload/14759-Interface-.gif

Après avoir trituré le problème dans tous les sens, je bloque total alors peut-être que l'un d'entre vous pourrait m'aider à trouver une solution.

Pour voir ce que j'ai réussi à faire pour l'instant: la page et les styles.

Merci d'avace si quelqu'un à une ch'tite idée ! Smiley lol
Modifié par Dreo (04 Feb 2008 - 13:51)
Salut,

De bon samedi matin, pour faire simple, je ferais un seul background composé de tes 2 parties suffisamment large pour tenir dans des résolutions élevées en background-position: center; sur body.
Merci pour ta réponse Ghhost !

Si je comprends bien ce que tu dis, ca va me faire une image très large (au moins 1600), mais surtout, ça ne résoud pas mon problème sur la hauteur, si ?

Ou alors je n'ai pas compris ton raisonnement....
Re,

Tu peux continuer dans le même sens... et allonger ton image de fond c'est le plus simple
Ou peut être plus léger en terme de poids, faire une bande de 10px de haut avec tes 2 couleurs en repeat-y sur body et placer ta déco dans le code en png positionnée en absolute par rapport à ton contenu et avec les z-index adéquat la faire passer sous le contenu pour la partie non visible...
Je ne sais pas si j'ai été clair sur le coup Smiley biggol
Dreo a écrit :


En effet, je voudrais que mo background se compose de deux parties verticales différentes, de largeurs différentes,l'une de couleur unie et l'autre avec une image de fond.


bonjour Dreo

si par background tu entends bien le fond noir + l'image avec des fleurs blanches, il suffit de mettre l'image en fixed comme ceci:


body{
background-color:#3D3736;
background-image: url(../images/flower.jpg);
background-repeat: no-repeat;
background-position:fixed;
top:0;
right:0;
}


et bien sûr supprimer ce qui serait redondant notamment les blocs flower et flowerconteneur qui ne sont plus utiles.
Bonjour Verdan,

Oui c'est bien ce qque je veux faire mais le probleme c'est que les fleurs doivent être alignées à 400px de la gauche du bloc de page et non à droite du background... je ne sais pas si je suis très claire...
N'empêche qu'il y a une piste à explorer, je n'avais pas pensé à "fixed"...
J'essaie tout ca dans l'aprem ! Smiley lol
puisque ton bloc de page est centré, on doit pouvoir calculer une position adéquate en % par rapport au bord gauche ou droit du body... je suppose que ça ne doit pas être absolument 400px exactement ?

sinon tu peux remplacer absolute par fixed dans ton #flower
Re,

Pour être plus clair:

body{
background: lime;
}

#tete{
width: 600px;
height: 100px;
margin: auto;
position: relative;
border: 1px solid black;


}

#contenu{
width: 600px;
min-height: 600px;
margin: auto;
background: yellow;
position: relative;
z-index: 1000;
}

#fond{
position: absolute;
top: 10px;
right: -200px;
background: red;
width: 300px;
height: 500px;
z-index: 10;
}


<body>
<div id="tete">
		<div id="fond">
		</div>
</div>
<div id="contenu">
			Diam nulla qui humanitatis imperdiet per.
			Commodo adipiscing commodo mazim vel facilisis.
			Habent eum notare zzril tempor facilisis.<br/>
			Claram exerci eorum wisi lobortis option.
			Ullamcorper tation putamus nonummy facer augue.
			Aliquam et qui duis nulla doming.<br/>
			Tation dolor dolor lectores non augue.
			Soluta per non etiam consectetuer qui. Mirum per dynamicus
			feugait hendrerit soluta.<br/>
			Ut nunc ipsum putamus demonstraverunt
			imperdiet. Modo ut claritas ut hendrerit futurum. Seacula est
			velit nulla eros claritatem.<br/>
			Diam nulla qui humanitatis imperdiet per. Commodo adipiscing
			commodo mazim vel facilisis. Habent eum notare zzril tempor facilisis.<br/>
			Claram exerci eorum wisi lobortis option. Ullamcorper tation
			putamus nonummy facer augue. Aliquam et qui duis nulla doming.<br/>
			Tation dolor dolor lectores non augue. Soluta per non
			etiam consectetuer qui. Mirum per dynamicus feugait hendrerit soluta.
			Diam nulla qui humanitatis imperdiet per.
			Commodo adipiscing commodo mazim vel facilisis.
			Habent eum notare zzril tempor facilisis.<br/>
			Claram exerci eorum wisi lobortis option.
			Ullamcorper tation putamus nonummy facer augue.
			Aliquam et qui duis nulla doming.<br/>
			Tation dolor dolor lectores non augue.
			Soluta per non etiam consectetuer qui. Mirum per dynamicus


		</div>
</body>


Avec le body (lime) avec tes 2 couleurs de fond en repeat-y
le #fond (red) avec en background ta fleur en png.

Enfin si j'ai bien compris le problème Smiley biggol
verdan a écrit :
je suppose que ça ne doit pas être absolument 400px exactement ?


A priori si, à cause du menu et de la recherche en haut à gauche...


Je suis dessus...
On avance !
Grâce à vos conseils, voici ce que j'ai réussi à faire :
la page et les styles.

On est pas encore au résultat parfait mais ca prend forme !
Par contre je suis obligée de "tricher" sur la hauteur et la largeur du bloc #flower, ce qui m'ennuie un peu.

Je vais sûrement donc essayer avec la position:fixed; suggerée par Verdan, et bidouiller encore un peu...

Merci énormément en tous cas, ces points de vue extérieurs sont une bouffée d'oxygène pour mon petit cerveau embué Smiley biggol
Re,

Arf fixed, je ne le sens pas... Smiley smile
Bon pour être encore un peu plus clair pour une piste...

body {
margin: 0;
padding: 0;
height: 100%;
min-height:100%;
background: url(fond.jpg);
background-repeat: repeat-y;
background-position: center top;
text-align:center;
font-family: Helvetica, "Trebuchet MS", Arial, sans-serif;
font-size:11pt;
}


/* ------------------------------------------------------------------------------------------
LA STRUCTURE
------------------------------------------------------------------------------------------ */

/* Le bloc de #flowerconteneur
---------------------------------------------------------- */

/* Le bloc de #flower 
---------------------------------------------------------- */
#flower {
position: absolute;
top: 0px;
left: 400px;
width:437px;
height:612px;
background: url(flower.jpg) no-repeat #5C5452;
z-index: 10;
}
/* ------------------------------------------------------- */

#ancre{
width: 630px;
height: 80px;
margin: 0 auto;
position: relative;
}

/* Le bloc de #conteneur 
---------------------------------------------------------- */
#conteneur {
width:630px;
margin:0 auto;
position: relative;
z-index: 100;
}

/* Le bloc de #page 
----------------------------------------------------- */
#page {
position: relative;
z-index: 100;
margin:0 auto;
width: 610px;
padding:5px 10px;
background: lime;
}

/* Le bloc de #header --------------------------- */
#header {
width: 630px;
height: 180px;
background-color: #000000;
color:#FFFFFF;
margin:0 auto;
position: relative;

}
/* ---------------------------------------------- */

/* Le bloc de #sidebar -------------------------- */
#sidebar {
position: absolute;
left:15px;
width: 145px;
text-align:left;
margin-bottom:20px;
}
/* ----------------------------------------------- */

/* Le bloc de #main ------------------------------ */
#main {

background-color:#9999CC;
margin: 0 5px 20px 160px;
padding:0;
text-align:justify;
}
/* ------------------------------------------------- */

/* ----------------------------------------------------- */

/* Le bloc de #footer
-------------------------------------------------------- */
#footer {

height: 80px;
width: 610px;
margin: 0 auto;
padding: 0 10px;
background: url(../images/footerbg.png) no-repeat;

}


<body>
<div id="ancre">
    <div id="flower">
    </div>
</div>
<div id="conteneur">
 <div id="header">

        header de largeur fixe : 600px <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>    </div>
</div>
  <div id="page">
    <div id="sidebar">
      <p>menu</p>

            <p>largeur fixe : 145px</p>	  	
            <ul class="sidebar">
              <li><a href="">Menu 1</a></li>
                <li><a href="">Menu 2</a></li>
                <li><a href="">Menu 3</a></li>
                <li><a href="">Menu 4</a></li>
            </ul>	
        </div> 
    <div id="main">
          partie centrale qui "pousse" les colonnes vers le bas.<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du conv<br />
pant le reste de la largeur<br />
        partie avec du contenu occupant le reste de la largeur<br />
        partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occup<br />
ant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />

partie avec du contenu occupant le reste de la largeurt le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
            partie avec du contenu occupant le reste de la largeur<br />
            partie avec du contenu occupant le reste de la largeur<br />
    </div>
  </div>	  
	<div id="footer">
        pied de page de largeur fixe : 600px    </div>
	
</div>
</body>



Il faut régler quelques détail de placement mais ça doit tenir pour FF, IE6&7 et opera...
Bonne continuation
(2images jointes)
upload/5854-flower.jpg upload/5854-fond.jpg
ghost a écrit :

Bon pour être encore un peu plus clair pour une piste...


C'est plus une piste, tu m'as mâché le travail ! Et ça fonctionne royalement ! Je ne sais pas pourquoi, tu cela n'arrivait pas à se mettre en ordre dans mon petit cerveau, mais maintenant que c'est fait, cela me parait enfantin !

Merci 1000 fois en tous cas, je devrais être capable de mettre en ligne d'ici qqs jours, je te posterais l'url histoire que tu vois le résultat...

Smiley lol
Sujet clos
Aller à