Mise en forme

bonjour,

j'utilise spip et je voudrai mettre en forme les breves
je voudrais afficher les breves sur 2 colonne et je ne sais pas si je peux le faire uniquement avec les css auxquel cas je séche ou si je suis obligé de faire une boucle speciale ou encore de modifier le code html.

une idée ? des suggestions ?

merci

Hello,

Ça va dépendre du code HTML généré, et donc du squelette utilisé (squelette par défaut, autre ?). On peut voir le code HTML correspondant aux brèves ?

Salut,

ça correspond à quoi tes deux colonnes :

. Brèves impaires à gauche et paires à droite (en zigzag donc) ?

. Les x premières brèves à gauche et ensuite le reste à droite ?


Le nombres de brèves à présenter est il maitrisé ?

je suis parti sur le squelette d'alternative
spip 192 au cas ou

pour l'instant j'utilise un include des breves dans ma page sommaire je l'ai juste deplacé et je lui ai affecté un id pour le manipuler via la CSS mais si j'ai reussi à la etre ou je voulais la mise ne colonne c'est pas aussi simple
le code des breves est le suivant, je n'ai rien modifié.
page inc-breves.html

    <!-- Breves -->
    <B_breves>
    <div class="menu">
    <h2 class="structure"><:dernieres_breves:></h2>
      <ul>
        <li><b><:nouvelles_breves:></b>
          <ul>
            <BOUCLE_breves(BREVES) {par date} {lang}{inverse} {0,3}>
          	<li>[<span>(#DATE|affdate)</span>]
              <a href="#URL_SITE_SPIP/#URL_BREVE" [title="(#INTRODUCTION|textebrut|entites_html)"]>[(#TITRE|supprimer_numero)]</a>
          	</li>
            </BOUCLE_breves>
          </ul>
        </li>
    <!--[if lte IE 6]><style>#encart a{height:1em;}#encart li{height:1em;float:left;clear:both;width:100%}</style><![endif]-->
    <!--[if IE 6]><style>#encart li{clear:none;}</style><![endif]-->
      </ul>
    </div><!-- menu -->
    </B_breves>

je pensais faire avec des balise BR etc .. mais je ne suis pas sur de ce que je fait.
alors un coup de mains est le bienvenu

merci
Modifié par hiroito (05 Jun 2007 - 22:17)

pour christian

Je n'ai pas reflechi comme cela.

Je pensais uniquement à afficher les 6 dernieres brèves editées en 2 colonnes repartie sur la largeure de la page pour ne pas avoir un placard de breve puis mon texte.
un maximum de 6 breves dans le bloc de breves est prevu. toujours les 6 derniers chronologiquement
Modifié par hiroito (05 Jun 2007 - 22:18)

Déjà, je peux te dire que tu as deux éléments style (balise <style>) qui n'ont rien à faire là en plein milieu de ton contenu HTML.
L'élément style ne peut être placé qu'au sein de l'élément head. Le fait que style soit entouré par un commentaire conditionnel n'y change rien.

On pensera donc à corriger cette erreur.

Tu as d'autre problèmes avec ta structure HTML. Par exemple, le fait d'utiliser deux listes ul imbriquées ne me semble pas justifié, et te compliquera la tâche plus qu'autre chose. Il faudrait simplifier ça.

concernant les balises style elles permettent de corriger un bug ie6 qui rajoute des pixels entre les balises ul li qui sont traitée via CSS
dixit eric meyer
et effectivement si je supprime ces styles j'ai des espaces tout moche dans ma liste avec ie6 que je n'ai pas avec ie7

pour les listes imbriquées je ne sais pas vu que le code est d'origine je n'ai rien bricolé dedans mais je vais faire des essais en simplifiant le code.
cependant je me demande toujours comment "colonner" mes breves le css suffirait-il ? ou je vais devoir aller plus loin et tenter une boucle pour les breve paire et une autre pour les breve impaire et renvoyer tout ca dans 2 bloc breve ? ca me parait bien compliqué non ?
Modifié par hiroito (05 Jun 2007 - 23:40)

hiroito a écrit :
concernant les balises style elles permettent de corriger un bug ie6 qui rajoute des pixels entre les balises ul li qui sont traitée via CSS
dixit eric meyer
et effectivement si je supprime ces styles j'ai des espaces tout moche dans ma liste avec ie6 que je n'ai pas avec ie7

Je ne dis pas que les styles ainsi adressés à IE6 sont inutiles. Je dis juste que les éléments style ne sont pas placés au bon endroit dans ton code HTML.

hiroito a écrit :
cependant je me demande toujours comment "colonner" mes breves le css suffirait-il ?

Pour rester dans les solutions simples :
- soit tu fais deux divs qui vont contenir chacun trois brèves, divs que l'on mettra côte-à-côte avec le positionnement flottant (ordre de lecture : toute la colonne gauche, puis toute la colonne droite) ;
- soit tu fais trois blocs des deux éléments (par exemple deux paragraphes), chaque élément représentant une brève, et les couples d'éléments étant mis côte-à-côte grâce au positionnement flottant tandis que les trois blocs sont placés les uns en dessous des autres (ordre de lecture en zig-zag) ;
- soit tu fais un tableau HTML avec une cellule par brève (ordre de lecture en zig-zag).

Dans les trois cas, ça demandera un balisage spécifique en fonction de si l'élément de la boucle est un élément pair ou impair ou multiple de trois. Je e sais pas si les boucles SPIP permettent cela...

merci pour les pistes.
Je vais essayer la premiere solution qui me parait la plus simple. reste à plancher sur le positionnement flottant, je suis un peu paume avec les regles de flottement et comment arriver à maitriser ce positionnement quelque soit le navigateur. Je sens que je vais encore me coucher tot.

pour les styles mal placés: de tout facon j'ai pas le choix. Le code édité est le contenu integral de la page. Cette page etant une fraction d'une page globale. c'est presque une noisette pour spip. Et je râle pas j'espique


donc quid vidic et victum
|
|
|
-> ca veux rien dire c'est pour frimer
merci pour les reponses

plus j'avance et plus je me rend compte que je ne sais rien pourtant j'aime bien ça comme quoi

hiroito a écrit :
pour les styles mal placés: de tout facon j'ai pas le choix.

Tu n'as pas accès aux squelettes plus globaux ?

Mais bon, libre à toi de produire du code non valide et potentiellement problématique dans les navigateurs. Il se pourrait que ça passe, mais c'est prendre un risque.


Pour le positionnement flottant :
Alsacréations : Comprendre le positionnement des éléments en CSS
Openweb : Initiation au positionnement flottant
+ http://www.covertprestige.info/ressources (partie « CSS : les flottants »)

merci pour les liens sur le positionnement flottant

squelette plus globaux ?
le squelette altenative est celui qui me permet de faire mon developpement le plus vite car très proche du résultat final. Ce squelette a semble t il ete validé sur la plupart des navigateurs importants.
je ne fait pas la promo de ce squelette il est simplement le plus adequat pour mes besoins et me sert de base de départ pour apprendre en douceur.

plus tard quand j'aurai progressé je pense partir de la dist voire de la page blanche mais "y d'la route!"

promis je ferai pas de menu déroulant. Aïie! Pas les doigts!!! Ils me servent encore.

A plus et merci encore

hiroito a écrit :
squelette plus globaux ?

Tu disais ceci :

hiroito a écrit :
pour les styles mal placés: de tout facon j'ai pas le choix. Le code édité est le contenu integral de la page. Cette page etant une fraction d'une page globale.

Donc, il te faut modifier le squelette (gabarit) de la page globale pour y rajouter tes style.