| Re: blocks aux coins arrondis |
Titre du sujet : Re: blocks aux coins arrondis
par Anonyme sur 19/05/2008 09:33:40
re',
Je rectifie le tir por que cela fonctionne aussi sous cette @#!*
Pour centerblocks.html :
<{if $xoBlocks[$zone]}>
<div class="xo-blockszone" id="xo-page-<{$topbottom}><{$lcr}>blocks">
<{foreach from=$xoBlocks[$zone] item=block}>
<!-- Ajout coins supérieurs (http://www.e-t172.net/articles/round/) -->
<div class="top_left"></div>
<div class="top_right"></div>
<!---------------------------->
<div class="xo-block <{$block.module}>">
<{if $block.title}>
<div class="xo-blocktitle"><{$block.title}></div>
<{/if}>
<div class="xo-blockcontent"><{$block.content}>
<!-- Ajout coins inférieurs -->
<div class="bottom_left">
<div class="bottom_right"></div>
</div>
<!---------------------------->
</div>
</div>
<{/foreach}>
<!-- more content here for example -->
</div>
<{/if}>
Pour blocks.css
/* corner : http://www.e-t172.net/articles/round/ (positions relatives) */
#xo-page .xo-blockszone .top_left {
background: url(../img/block-corner-top-l.gif) top left;
float: left;
z-index: 0;
background-repeat: no-repeat;
position: relative;
height: 10px;
width: 10px;
}
#xo-page .xo-blockszone .top_right {
background: url(../img/block-corner-top-r.gif) top right;
float: right;
z-index: 1;
background-repeat: no-repeat;
position: relative;
height: 10px;
width: 10px;
}
#xo-page .xo-blockszone .bottom_left {
background: url(../img/block-corner-bot-c.gif) bottom left;
float: left;
z-index: 2;
background-repeat: repeat-x;
position: relative;
height: 10px;
width: 100%;
}
#xo-page .xo-blockszone .bottom_right {
background: url(../img/block-corner-bot-r.gif) bottom right;
float: right;
z-index: 3;
background-repeat: no-repeat;
position: relative;
height: 10px;
width: 10px;
}
/* end corner */
#xo-page .xo-blockszone > .xo-block {
background-color: #e2edf0;
padding: 0;
margin-bottom: 20px;
}
#xo-page .xo-blockszone .xo-blockcontent {
padding: 5px 0 0 0;
position: relative;
z-index: 4;
}
Tout en sachant que le bloc en bas à gauche doit avoir des dimensions respectables (2000px par exemple) pour occuper tout l'espace sous le bloc.
@+
|
|
