Fork me on GitHub




« 1 (2)


Kris
Re: blocks aux coins arrondis
#11
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
@ burning : et si je n'ai pas de largeur fixe ?

Posté le : 19/05/2008 01:00

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: blocks aux coins arrondis
#12
Guest_
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 :(

@+

Posté le : 19/05/2008 02:29
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: blocks aux coins arrondis
#13
Guest_
re',

Je rectifie le tir por que cela fonctionne aussi sous cette @#!*![ de IE

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.

@+

Posté le : 19/05/2008 09:33
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: blocks aux coins arrondis
#14
Guest_
re',

Reste un gros écueil, les blocs droit et gauche placés dans la colonne central. Ce sont les mêmes propriétés que pour les blocs centraux... et sans surprise, des soucis avec IE7 :(

Bref, un peu d'ajax dans tout ça finalement ...


[edit]... une dernière rectification (il y avait un souci de conception dans blockcenter.html), désolé pour la pollution

<{if $xoBlocks[$zone]}>
    <div class="xo-blockszone" id="xo-page-<{$topbottom}><{$lcr}>blocks">
    
  <{foreach from=$xoBlocks[$zone] item=block}>
        
        
    <div class="xo-block <{$block.module}>">
            
<!-- Ajout coins supérieurs (http://www.e-t172.net/articles/round/) -->
        <div class="top_left"></div>
        <div class="top_right"></div>    
<!---------------------------->                
            
      <{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}>


... là ça semble bon sur tous les navigateurs.

@+

Posté le : 19/05/2008 10:02
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Nikita
Re: blocks aux coins arrondis
#15
Semi pro
Inscrit: 10/11/2004 13:40
Messages: 1659
Merci à tous pour votre aide, j'ai utilisé une des méthodes proposée ici que j'ai "réussi" à mettre en place

http://www.tayo.fr/faire-un-div-arron ... -image--en-css-astuce.php



Pour les bonnes âmes voilà une demande que je n'arrive pas à résoudre https://www.frxoops.org/modules/newbb/ ... p?forum=12&topic_id=26149

Posté le : 19/05/2008 14:14

PS : Toujours faire une sauvegarde des fichiers avant de les modifier !
-------------------------------------------
http://www.aideordi.com
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant
« 1 (2)



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

98 Personne(s) en ligne (81 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 98 | Plus ...