| Re: blocks aux coins arrondis |
Titre du sujet : Re: blocks aux coins arrondis
par Anonyme sur 19/05/2008 02:29:09
Citation :et si je n'ai pas de largeur fixe ?
... c'est plus compliqué 
Attention, ouverture de l'atelier bricolage !
-> modification du fichier 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 -->
<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>
<div class="bottom_right"></div>
<!---------------------------->
</div>
</div>
<{/foreach}>
<!-- more content here for example -->
</div>
<{/if}>
--> modification de blocks.css (en se basant sur le lien fourni par Ankyo : http://www.e-t172.net/articles/round/ (positions relatives))
On ajoute :
/* corner */
#xo-page .xo-blockszone .top_left, #xo-page .xo-blockszone .top_right, #xo-page .xo-blockszone .bottom_left, #xo-page .xo-blockszone .bottom_right {
height: 10px;
width: 10px;
background-repeat: no-repeat;
position: relative;
}
#xo-page .xo-blockszone .top_left {
background: url(../img/block-corner-top-l.gif) top left;
float: left;
z-index: 1;
}
#xo-page .xo-blockszone .top_right {
background: url(../img/block-corner-top-r.gif) top right;
float: right;
z-index: 2;
}
#xo-page .xo-blockszone .bottom_left {
background: url(../img/block-corner-bot-l.gif) bottom left;
float: left;
z-index: 3;
}
#xo-page .xo-blockszone .bottom_right {
background: url(../img/block-corner-bot-r.gif) bottom right;
float: right;
z-index: 4;
}
/* end corner */
#xo-page .xo-blockszone .xo-blockcontent {
padding-bottom: 10px;
position: relative;
z-index: 0;
}
--> modification de layout-soup.css
#xo-page .xo-blockszone .xo-block {
/*margin-bottom: 10px;*/
}
... cela fonctionne sur ff et opera, mais comme d'hab' il y a une cagade sur ie7
Citation :
#xo-page .xo-blockszone .xo-blockcontent {
padding-bottom: 10px;
}
... cela affiche une barre de 10px sous les arrondis (ie7) mais cette propriété est nécessaire pour ff et opera (sans quoi il y a une zone blanche entre les deux coins inférieurs).
... ce ne doit pas être grand chose, peut être revoir l'imbrication des <div> dans le fichier centerblocks.html ? J'ai essayé mais sans réussite :(
@+
|
|
