avancé css: haut et en bas avec le centre souple

est-il possible avec juste CSS2 avoir les suivantes:avancé css: haut et en bas avec le centre souple

tout le contenu d'être dans la section div.mid souple
se chevauchent haut et en bas pièces
pas démenait iE6

est ici le photoshop avec tranche de centre:

alt text http://i39.tinypic.com/11qnzbt.jpg

que vous pouvez voir les parties supérieure et inférieure sont assez grandes et j'ai besoin de les recouvrir de la tranche du milieu ...

S'il vous plaît les dont comprends mal ici, je comprends comment faire un div flexible central , la complexité est dans le chevauchement du haut et du bas tandis que le milieu div reste flexible.

J'imagine que ce soit nécessite des marges négatives ou des éléments absolument top position et bas avec z-index ..

Source

2010-05-06 Haroldo

Voici un exemple de coup d'envoi, vous pouvez copy'n'paste'n'run il.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2781669</title> 
     <style> 
      #wrap_centre { 
       width: 1000px; 
       margin: 0 auto; 
      } 
      .top { 
       padding: 0 100px; 
       height: 200px; 
       background: url('http://i39.tinypic.com/11qnzbt.jpg') no-repeat center top; 
      } 
      .mid { 
       padding: 0 100px; 
       background: url('http://url.to.1px.height.slice.jpg') repeat-y center center; 
      } 
      .content { 
       position: relative; 
       min-height: 200px; 
       top: -100px; 
       margin-bottom: -200px; 
      } 
      .bot { 
       padding: 0 100px; 
       height: 250px; 
       background: url('http://i39.tinypic.com/11qnzbt.jpg') no-repeat center bottom; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="wrap_centre"> 
      <div class="top"></div> 
      <div class="mid"> 
       <div class="content">mid<p>mid<p>mid<p>mid<p>mid<p>mid<p>mid</div> 
      </div>    
      <div class="bot"></div> 
     </div> 
    </body> 
</html>

Vous ne devez créer une nouvelle tranche pour la .mid.

Mise à jour: Selon les commentaires, ci-dessus est mise à jour.

Source

2010-05-06 14:49:23 BalusC

merci pour votre temps balus, mais avez-vous vu le peu sur le chevauchement des éléments haut et bas? – Haroldo

Apparemment, j'ai mal compris cette partie. Pouvez-vous élaborer plus? – BalusC

comme vous pouvez voir le haut et les parties de bot sont assez grandes, je veux les utiliser mais le contenu commence à dire 100px du haut du sommet et courir à 100px du bot du bot - si cela a du sens? – Haroldo

avancé css: haut et en bas avec le centre souple

Répondre

Questions connexes