28172 sujets

CSS et mise en forme, CSS3

Sortir une partie du background de mon bloc

Salut tout le monde,
je suis en train de réaliser la mise en page d'un site dont une des contraites est de sortir une partie du background sur un autre bloc, en l'occurrence le body.

Pour sortir mon background, j'utilise des marges négatives, mais le problème est que celui-ci passe en dessous du body.
J'ai bien essayé de joué avec le z-index, en mettant tous les autres blocs de ma page avec un z-index de 1 et le bloc où mon background doit dépenser avec un z-index de 100, mais ça ne change rien.

Des idées ?
Hello,

koskoz a écrit :
Pour sortir mon background, j'utilise des marges négatives, mais le problème est que celui-ci passe en dessous du body.


Il passe en dessous du <body> ? Eh bhe ça alors, j'avais jamais vu ça, tu veux dire qu'il passe derrière ton écran? ^^

Blague à part, est-ce que tu a une page ou un bout de code où l'on peut voir l'effet que tu essaie d'atteindre?
J'imagine qu'une méthode avec des blocs supplémentaires intermédiaires pourrait fonctionner.
Salut,

Si je comprends bien, il te faudrait une image qui passe derrière la zone de contenu du site en arrière plan et qui fait la jonction avec celle qui se trouve dans le contenu.

Pour çà il te faut une image plutôt grande, centrée derrière le conteneur, qui comporte autant de marge de chaque coté, que le graphisme en atteigne les bords ou pas.
Ex. Si ton conteneur fait 700px de large, et que ton design déborde sur le côté gauche de 80px, il te faut une image qui fait 700px + (2 x 80px), soit 860px de large.

Si ce n'est pas clair, n'hésite pas à me le dire je te ferai un schéma. Smiley cligne
peut etre faut il que tu mettes ton image dans un bloc en position: absolute, puis dans ta zone de contenu créer un bloc vide aux dimensions du 'bout' de l'image avec paddings right et bottom, en float:left ... ton 'p', sans float, la contournera ...
mais non, écoute a l'arrache voilà ce que je ferais de plus simple :


pour le html :

<div id="container">
     <div id="mavraieimage">ma vraie image</div>
     <div id="contenu">
          <div class="img_contourn">FAKE</div>
          Lorem ipsum odio patrioque forensibus mei ei, quo errem tamquam consulatu eu. Est te mazim ridens interpretaris, debet consul omittantur ut pro, eam ad kasd tamquam moderatius. Vim vitae tollit epicurei et. Tation ancillae mnesarchum et sit. No iisque omittam duo, per habemus dignissim consetetur an.
          
          Mei et cetero percipit adversarium. Etiam meliore eum ad, ea vel paulo latine. Pri posse clita necessitatibus at, eum mnesarchum necessitatibus te. Vix sadipscing persequeris et, no dolorum consetetur nam. Id per graece omittam aliquyam, id sit altera menandri neglegentur. Quas partem virtute id vix, eam malis iuvaret perfecto ea, sed vidit scaevola omittantur in. Ut adhuc consul 
     </div>
</div>



et pour la css :

#container
{
width:750px; 
height:650px;
padding:0 0 0 0;
margin:0 auto;
background:#ccc;
position:relative;

}
#mavraieimage
{
position:absolute;
width:150px;
height:150px;
display:block;
top:94px;
left:75px;
background:#fffccc;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
#contenu
{
float:left;
width:450px;
height: auto;
display:block;
padding:0 0 0 150px;
margin:150px 0 0 0 ;
background:#afbac5;

}
#contenu .img_contourn
{
float:left;
width:75px;
height: 75px;
display:block;
padding:0 10px 10px 0;
margin:0 ;
background:#afbac5;

}
#contenu p
{
font-size:12px;
font-weight:normal;
color:#009999;

}


j'ai mis une transparence là ou dois se trouver ton image pour que tu puisse voir au travers Smiley smile
Sujet clos
Aller à