Blueprint: Pousser la colonne partiellement dans une autre colonne

Est-il possible d'utiliser les classes push-x et pull-x de Blueprint pour créer une colonne qui se chevauche et qui est moitié dans une colonne et moitié dans une autre colonne?Blueprint: Pousser la colonne partiellement dans une autre colonne

Voici un exemple:

+-------+-----+-------+ 
|  |  |  | 
| 1 | 2 | 3 | 
|  +-----+  | 
|   |   | 
|   |   | 
+----------+----------+

Je trouve l'article Cross-column pull-outs de AListApart. Cependant, il s'agit d'une colonne moyenne dont la hauteur est connue et qui utilise une entretoise qui doit être placée manuellement, ce qui rend l'automatisation difficile.

Existe-t-il un moyen plus simple et plus automatique de réaliser cet effet?

MISE À JOUR: Ajout d'une prime pour une solution qui n'utilise pas une colonne centrale de hauteur statique ou qui utilise javascript pour redimensionner la colonne du milieu.

Source

2010-01-07 matpie

Voici une approche différente du problème. La chute est que le contenu du pull-out est dupliqué (un pour flotter à gauche, un à droite).

http://jsbin.com/ewahu

EDIT

version alternative en utilisant JQuery pour dupliquer le contenu de la traction dans l'entretoise:

http://jsbin.com/uzawe

EDIT

améliorée, plus propre et plus maigre version en utilisant clone pour dupliquer le retrait.

http://jsbin.com/ugaka

Source

2010-01-08 10:50:38 graphicdivine

Je serais prêt à me contenter de cela s'il y a quelques JS pour l'accompagner (jQuery pour dupliquer automatiquement le contenu dans l'entretoise). – matpie

Ce serait assez facile à mettre en œuvre si c'est comme cela que vous voulez le faire. Personnellement, je pense qu'il est plus robuste de le garder sans JavaScript. – graphicdivine

Je vais pour une sorte d'amélioration progressive. Si JS n'est pas activé, la colonne n'apparaîtra pas au milieu. Il se montrera simplement sur le côté et sera généralement ennuyeux. – matpie

Êtes-vous en mesure d'utiliser le positionnement pour obtenir cet effet? Si vous avez une largeur fixe, il devrait être assez facile à réaliser.

<div id="container"> 
<div id="primary"> 
    <p>test</p> 
    <p>test</p> 
</div> 
<div id="secondary"> 
    <p>test</p> 
    <p>test</p> 
</div> 
<div id="tertiary"> 
    test 
</div>

CSS

#container { position: relative; width: 200px; } #primary { position: absolute; top: 0; left: 0; width: 50%; background-color: red; } #secondary { position: absolute; top: 0; right: 0; width: 50%; background-color: blue }

#tertiary { position: relative; top: 0; margin: 0 auto; width: 50px; background-color: green; }

Source

2010-01-11 23:57:01

Cela ne permettra pas au texte d'entourer la colonne du milieu comme indiqué ici: http://jsbin.com/ewahu – matpie

Il ne semble pas difficile de modifier l'exemple AListApart faire avec juste un peu javascript donc vous n'avez pas besoin d'une solution hauteur ed:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
<title> 
Cross-Column Pull-Out: Example 3 
</title> 
<style type="text/css"> 
* {margin:0;padding:0;} 
p {padding:.625em 0; text-align:justify; line-height:20px;} 
#overall {width:755px; margin:0 auto;} 
.col {width:365px; padding:0 5px; float:left;} 
.CCspace {width:175px; padding:5px; float:right;} 
.CCpullout {width:350px; padding:5px; float:left; margin-left:-185px;} 
.CCpullout span {width:350px; position: absolute; text-align:center; font-size:.9em; font-weight:bold;} 
</style> 
</head> 
<body> 
<!-- The Cross-Column Pull-Out technique was developed by Daniel M. Frommelt and Matthew Latzke from the University of Wisconsin - Platteville --> 

<div id="overall"> 
    <h1>Example 3: Fixing the Pull-Out</h1> 

    <div class="col"> 
     <span class="CCspace">&nbsp;</span> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dolor pede, tempus non, volutpat dignissim, cursus non, mauris. In tristique. Integer blandit, lorem eget tincidunt posuere, quam wisi fermentum elit, quis aliquam ante enim at nibh. Sed faucibus sem et mi. Donec iaculis nulla nec urna. Phasellus ultricies est et urna.</p> 
     <p>Praesent congue sagittis elit. Nullam sagittis tortor ut dui. Praesent tristique feugiat ligula. Quisque congue ante vel augue facilisis nonummy. Nulla auctor, purus id ullamcorper ultrices, justo metus venenatis odio, eu nonummy pede urna pretium tortor. Aliquam erat volutpat. Nullam ante. Aenean feugiat. Etiam lacinia dolor sagittis nunc. Maecenas nibh risus, suscipit vel, elementum vitae, posuere et, purus. Vivamus ipsum nunc, mattis non, gravida ut, tempor et, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sem. Integer accumsan mi sed metus porta volutpat. Duis sollicitudin enim at diam. Donec ultrices sem aliquam ante ullamcorper placerat.</p> 
    </div> 
    <div class="col"> 
     <span class="CCpullout"><span><img src="http://www.alistapart.com/d/crosscolumn/monkey.jpg" alt="" /></span>And then some more text<br/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dolor pede, tempus non, volutpat dignissim, cursus non, mauris. In tristique. Integer blandit, lorem eget tincidunt posuere, quam wisi fermentum elit, quis aliquam ante enim at nibh. Sed faucibus sem et mi. Donec iaculis nulla nec urna. Phasellus ultricies est et urna.</span> 
     <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tristique arcu vitae dui. Ut tempus wisi eget urna. Nullam laoreet scelerisque felis. Aliquam turpis libero, iaculis nec, porta nec, condimentum The office monkey, riding the office camel. sit amet, dolor. Proin cursus orci eu purus. In quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus accumsan, augue vitae vehicula viverra, risus velit consequat nunc, ut molestie erat risus non dui. Morbi placerat leo. Maecenas iaculis elit at eros. Cras sem. Phasellus augue.</p> 

     <p>Integer molestie eros et urna. Aenean egestas lectus ac mi. Etiam semper lectus at ipsum. Nunc cursus wisi eget urna. Donec pretium tristique sapien. Integer ligula nunc, malesuada gravida, posuere luctus, semper sit amet, nunc. Cras sagittis blandit urna. Nunc eu arcu sed magna vestibulum dictum. Fusce pretium interdum risus. Praesent bibendum lacinia sem. Aliquam erat volutpat.</p> 
     <p>Nunc arcu. Ut faucibus purus in risus. Morbi sem. Nunc consequat, sem a suscipit scelerisque, leo tortor sollicitudin nibh, quis vehicula turpis nibh et lorem. Fusce facilisis semper felis. Cras quis magna. In hac habitasse platea dictumst. Etiam quam nisl, bibendum et, tincidunt vel, tristique sed, eros. Cras laoreet. Etiam nisl eros, luctus nec, eleifend vitae, aliquam id, sapien.</p> 
    </div> 
    <script> 
     var pullout = document.getElementsByClassName('CCpullout')[0]; 
     var spacer = document.getElementsByClassName('CCspace')[0]; 
     spacer.style.height = pullout.offsetHeight + 'px'; 
    </script> 
</div> 

</body> 
</html>

La seule chose que j'ai été enlever les hauteurs fixes (vous pouvez mettre en min-height si on le souhaite, mais il importe peu) et ajouter un petit script le plus tôt possible afin de minimiser tout mouvement visible comme la page rendue.

Source

2010-01-14 07:50:48

Il suffit d'utiliser ce style

#Main 
{ 
    width: 950px; 
    height: auto; 
    padding: 0px; 
    margin: 0px; 
} 
#Top 
{ 
    width: 950px; 
    height: 100px; /* you can use ato or whatever else */ 
} 
#Bottom 
{ 
    width: 950px; 
    height: 100px; /* you can use ato or whatever else */ 
} 
#TLeft, #TMiddle, #TRight 
{ 
    display: inline-block; /* this is neceesarybecause we use span */ 
    border: solid 1px black; 
    width: 310px; 
    height: 100px; /* you can use ato or whatever else */ 
    vertical-align: top; 
} 
#TLeft 
{ 
    float: left; 
} 
#TMiddle 
{ 
    float: none; 
} 
#TRight 
{ 
    float: right; 
}/* note that You can use all of them as float:left or, float:right */ 
#BLeft, #BRight 
{ 
    display: inline-block; /* this is neceesarybecause we use span */ 
    border: solid 1px black; 
    width: 445px; 
    height: 100px; /* you can use ato or whatever else */ 
    vertical-align: top; 
} 
#BLeft 
{ 
    float: left; 
} 
#BRight 
{ 
    float: right; 
}/* note that You can use all of them as float:left or, float:right */ 

<div id="Main"> 
     <div id="Top"> 
      <span id="TLeft"> 
       TopLeft 
      </span> 
      <span id="TMiddle"> 
       TopMiddle 
      </span> 
      <span id="TRight"> 
       TopRight 
      </span> 
     </div> 
     <div id="Bottom"> 
      <span id="BLeft"> 
       BottomLeft 
      </span> 
      <span id="BRight"> 
       BottomLeft 
      </span> 
     </div> 
</div>

Notez juste que vous pouvez changer la largeur pour obtenir un meilleur alignement.

Source

2010-01-17 06:58:07

Blueprint: Pousser la colonne partiellement dans une autre colonne

Répondre

Questions connexes