Création d'un bandeau dans squelette SPIP 1.6

Bonsoir,

Grâce à vos différentes indications, j'obtiens quelque chose d'acceptable,
en procédant de la sorte :

1/ dans le fichier habillage.css, j'ajoute un "paragraphe" (ça doit avoir un
autre nom...) consacré au bandeau comme ceci :

/*
* Disposition a l'ecran : colonnes, encarts, cartouches
*/

#bandeau {
position: absolute;
text-align: center;
background-color: #ffffff;
padding: 0em;
}

[et les autres "#" suivent, avec une petite modif quand-même :]

#principal {
position: absolute;
left: 30%;
/*left: 18em;*/
top: 85px; [--> du coup il faut "descendre" l'endroit où vont être
affichés les autres "#quelque_chose"
                        --> ici, 85 pixels à partir du haut, pour laisser la
place au bandeau]
margin: 0px;
padding: 0px;
/*margin-right: 2em;*/
margin-right: 3%;
margin-top: 1em;
}

[etc.]

2/ Ajout, dans chaque squellette HTML, des lignes suivantes, peu après la
balise /head :

</head>
<body bgcolor="white">

<div id="bandeau">
<table width="100%" border="4" cellspacing="0" cellpadding="0"
bordercolor="#006666">
  <tr>
    <td bordercolor="#996666">
      <div align="center"><img src="/NAVPICS/bandeau.jpg" </div>
    </td>
  </tr>
</table>
</div>

<div id="navigation">
[etc.]

J'espère que ça pourra servir à quelqu'un d'autre, mais encore quelques
réglages à faire avec les histoires de marge gauche et droite, pour arriver
à résultat parfait.

Franck.

----- Original Message -----
From: "Franck Bergdolt" <franck.bergdolt@wanadoo.fr>
To: "Spip" <spip@rezo.net>
Sent: Wednesday, December 31, 2003 6:30 PM
Subject: Re: [Spip] Re: Création d'un bandeau dans squelette SPIP 1.6

Le bandeau dans la div "principal", l'intègre à l'écran dans la zone de
texte, ce qui déjà un pas, car ça ne bouzille plus la mise en page

générale,

mais reste encore à inclure ce fichier image dans un véritable bandeau, en
haut de toute la page (de toutes les colonnes).

Pour cela, je vais me colleter aux styles css. Depuis le temps que j'en
entends parler...

Merci à tous pour ces prévieux conseils, et bon réveillon ! (pas devant un
ordinateur j'espère)

Franck.

----- Original Message -----
From: "BoOz" <booz.bloog@laposte.net>
To: <spip@rezo.net>
Sent: Tuesday, December 30, 2003 10:59 PM
Subject: [Spip] Re: Création d'un bandeau dans squelette SPIP 1.6

> il faut mettre ton bandeau dans la div "principal"
>
>
> @+
>
> "Franck Bergdolt" <franck.bergdolt@wanadoo.fr> a écrit dans le message
news:
> 019001c3cefd$ce2cdc00$abc3f851@x25...
> > Bonjour,
> >
> > Je viens d'installer SPIP 1.6 chez Ouvaton avec le squelette de base,
tout
> > se passe bien.
> >
> > J'aimerais insérer sur chaque page (article, rubrique, sommaire etc.)

un

> > bandeau avec le nom du site. J'ai pour cela créé une image/logo Jpeg

de

> 800
> > x 60 pixels, que je comptais insérer dans un joli cadre (tableau) tout
> > simple que j'aurais placé avant les premières balises de SPIP, comme
ceci
> :
> >
> > </head>
> > <body bgcolor="white">
> >
> > <!-- ici insertion du bandeau -->
> > <table width="100%" border="5" cellspacing="0" cellpadding="0"
> > bordercolor="#006666">
> > <tr>
> > <td bordercolor="#006666">
> > <div align="center"><img src="file:/IMG/bandeau.jpg" width="800"
> > height="60"></div>
> > </td>
> > </tr>
> > </table>
> > <!-- fin d'insertion du bandeau -->
> >
> > <div id="navigation">
> > <h1 class="structure">Navigation</h1>
> >
> > <!-- Menu de navigation general -->
> > <div class="menu">
> > <ul class="general">
> > etc...
> >
> > Mais ça ne marche pas : l'affichage est complètement perturbé
> (chevauchement
> > des menus, etc.)
> >
> > J'ai donc essayé sans le tableau, comme ceci :
> >
> > <!-- ici insertion du bandeau -->
> > <div align="center"><img src="file:/IMG/bandeau.jpg" width="800"
> > height="60"></div>
> > <!-- fin d'insertion du bandeau -->
> >
> > C'est moins pire, mais il y a toujours le problème suivant : le menu
> > apparaît toujours au même endroit, et l'image (enfin, son emplacement
avec
> > la petite croix en haut à gauche) apparaît en-dessous du menu. Le menu
ne
> > s'est pas décalé pour faire la place au bandeau.
> >
> > J'avais essayé aussi de placer l'ensemble du code de la page dans un
> tableau
> > décrit dès les premières lignes, mais ça ne donne rien de bon. Je sens
que
> > je fais fausse route avec les tableaux. Quelqu'un pourrait-il me

mettre

> sur
> > la piste ?
> >
> > Franck.
> >
> >
>
>

--------------------------------------------------------------------------
--
> ----
>
>
>
>
>

--------------------------------------------------------------------------

--

----

_______________________________________________
liste spip
spip@rezo.net - désabonnement : spip-off@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.spip.net/

Salut Franck,

il y a encore plus simple (je déteste les tableaux). Dans ta feuille
CSS crée un tag "body" semblable à ceci :

body
{
  margin: 10px;
  font-family: trebuchet ms, verdana, sans-serif;
                     font-size: small;
  padding: 0px;
  background-color: #FFF;
  background-image: url(IMG/tonimage.gif);
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
}

Ça va fixer "tonimage.gif" en haut et au centre de ta page. Ensuite
dépendemment de la taille de ton image, si tu ne veux pas qu'elle soit
marsqée par tout le reste, il faut définir un <div class="contenu">
dans lequel tu vas faire rentrer tout le reste de ta page :

#contenu
{
  background: #fff;
  margin: 0px;
  padding: 25px 15px 15px 15px;
  clear: right;
  text-align: justify;
}

Ta page ressemble alors à ceci (version slimfast):

<html>
  <head>
    <title>Ton titre</title>
  </head>
<body>
  <div class="contenu">
  ...
  </div>
</body>
</html>

Et voilà :wink:

R.

Le Sat, 3 Jan 2004 20:15:54 +0100, Franck Bergdolt écrivait :

Bonsoir,

Grâce à vos différentes indications, j'obtiens quelque chose d'acceptable,
en procédant de la sorte :

1/ dans le fichier habillage.css, j'ajoute un "paragraphe" (ça doit avoir un
autre nom...) consacré au bandeau comme ceci :

/*
* Disposition a l'ecran : colonnes, encarts, cartouches
*/

#bandeau {
position: absolute;
text-align: center;
background-color: #ffffff;
padding: 0em;
}

[et les autres "#" suivent, avec une petite modif quand-même :]

#principal {
position: absolute;
left: 30%;
/*left: 18em;*/
top: 85px; [--> du coup il faut "descendre" l'endroit où vont être
affichés les autres "#quelque_chose"
                        --> ici, 85 pixels à partir du haut, pour laisser la
place au bandeau]
margin: 0px;
padding: 0px;
/*margin-right: 2em;*/
margin-right: 3%;
margin-top: 1em;
}

[etc.]

2/ Ajout, dans chaque squellette HTML, des lignes suivantes, peu après la
balise /head :

</head>
<body bgcolor="white">

<div id="bandeau">
<table width="100%" border="4" cellspacing="0" cellpadding="0"
bordercolor="#006666">
  <tr>
    <td bordercolor="#996666">
      <div align="center"><img src="/NAVPICS/bandeau.jpg" </div>
    </td>
  </tr>
</table>
</div>

<div id="navigation">
[etc.]

J'espère que ça pourra servir à quelqu'un d'autre, mais encore quelques
réglages à faire avec les histoires de marge gauche et droite, pour arriver
à résultat parfait.

Franck.

Petite erreur...

Le Sat, 3 Jan 2004 14:35:21 -0500, Romain écrivait :

<body>
  <div class="contenu">
  ...
  </div>

En fait c'est <div id="contenu">

R.