CS + onglets + css une piste ....

asso.bachant · Octobre 30, 2008, 7:38

voila sur la page sommaire j'appelle a l'affichage 2 articles dans un onglet dans lequel je viens positionner deux cadres côte a cote en css que je découvre (dur,dur)
de la manière suivante :

[(#ONGLETS_DEBUT{Ils ont dit ...})]
[(#REM) Mot du Maire ]
<div id="cadre1">
    <div id="hautdroit"></div><div id="hautgauche"></div>
    <div id="contenu">
        <p>

<BOUCLE_maire(ARTICLES){tout}{titre_mot=Maire}{doublons}{par date}{inverse}{0,4}>
<li class="hentry">
                    <h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
                    <small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|affdate_jourcourt)]</abbr>[, <:par_auteur:> (#LESAUTEURS)]</small>
                    [<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
                </li>
</BOUCLE_maire>
        </p>
    </div>
    <div id="basdroit"></div><div id="basgauche"></div>
</div>

[(#REM) Mot du Président]
<BOUCLE_president(ARTICLES){tout}{titre_mot=Président}{doublons}{par date}{inverse}{0,4}>
<li class="hentry">
                    <h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
                    <small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|affdate_jourcourt)]</abbr>[, <:par_auteur:> (#LESAUTEURS)]</small>
                    [<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
                </li>
</BOUCLE_president>

        </p>
    </div>
    <div id="basdroit"></div><div id="basgauche"></div>
</div>
#ONGLETS_FIN

la css
/* ------------------------------------------
/* les boites dans les onglets de la page sommaire
/* ------------------------------------------ */

#cadre1 { /* taille du cadre, Ó titre d'exemple */
width: 16em;
background-color: #909090;
}

#cadre2 { /* taille du cadre, Ó titre d'exemple */
width: 16em;
background-color: #909090;
position: relative;
left: 200px;
bottom: 350px;
}

ors l'onglet considère que les boites sont superposé et il est a rallonge.
vous n'auriez pas une idées

ps:/ d'autre pb sont visible mais une chose a la fois
l'url au cas ou : http://bachant.free.fr

--
@micalement stéphane --
ville de Bachant <http://bachant.free.fr>assobachant
asso.bachant@laposte.net

moustiquaire · Octobre 30, 2008, 9:31

assobachant a écrit :

ors l'onglet considère que les boites sont superposé et il est a rallonge.
vous n'auriez pas une idées

À mon avis, c'est plus une question de CSS que de Spip, tu gagnerais à t'inscrire à la liste "pompeurs" (googlise "pompeurs CSS" pour la trouver).

--
martin

Arnaud_CARIOU1 · Octobre 31, 2008, 10:42

Salut, pour apprendre les css tu as de très bon sites en français :

http://www.openweb.eu.org/css/
http://css.mammouthland.net/
http://www.pompage.net/

en anglais :

ton problème peut être réglé de plusieurs manière, soit en utilisant les
positions absolus ou la technique du float.

il te faut un div englobant :
<div id="onglets">
<div id="cadre1"></div>
<div id="cadre2"></div>
</div>

Seule le positionnement en absolu te permet d'utiliser le système de
placement left, top, bottom et right.

positionnement absolu

#onglets {
position : relative;
}
#cadre1 {
position : absolue;
width: 48%;
left: 0;
top:0;
}
#cadre2 {
position : absolue;
width: 48%;
right: 0;
top:0;
}

Ceci n'est qu'une piste, en lisant les articles de la rubrique css du
site openweb tu devrais t'en sortir.

Arnaud

Le jeudi 30 octobre 2008 à 20:38 +0100, assobachant a écrit :

voila sur la page sommaire j'appelle a l'affichage 2 articles dans un
onglet dans lequel je viens positionner deux cadres côte a cote en css
que je découvre (dur,dur)
de la manière suivante :

[(#ONGLETS_DEBUT{Ils ont dit ...})]
[(#REM) Mot du Maire ]
<div id="cadre1">
    <div id="hautdroit"></div><div id="hautgauche"></div>
    <div id="contenu">
        <p>

<BOUCLE_maire(ARTICLES){tout}{titre_mot=Maire}{doublons}{par
date}{inverse}{0,4}>
<li class="hentry">
                    <h3 class="entry-title"><a href="#URL_ARTICLE"
rel="bookmark">#TITRE</a></h3>
                    <small><abbr class="published"[
title="(#DATE|date_iso)"]>[(#DATE|affdate_jourcourt)]</abbr>[,
<:par_auteur:> (#LESAUTEURS)]</small>
                    [<div class="#EDIT{intro} introduction
entry-content">(#INTRODUCTION)</div>]
                </li>
</BOUCLE_maire>
        </p>
    </div>
    <div id="basdroit"></div><div id="basgauche"></div>
</div>

<div id="cadre2">
    <div id="hautdroit"></div><div id="hautgauche"></div>
    <div id="contenu">
        <p>

[(#REM) Mot du Président]
<BOUCLE_president(ARTICLES){tout}{titre_mot=Président}{doublons}{par
date}{inverse}{0,4}>
<li class="hentry">
                    <h3 class="entry-title"><a href="#URL_ARTICLE"
rel="bookmark">#TITRE</a></h3>
                    <small><abbr class="published"[
title="(#DATE|date_iso)"]>[(#DATE|affdate_jourcourt)]</abbr>[,
<:par_auteur:> (#LESAUTEURS)]</small>
                    [<div class="#EDIT{intro} introduction
entry-content">(#INTRODUCTION)</div>]
                </li>
</BOUCLE_president>

        </p>
    </div>
    <div id="basdroit"></div><div id="basgauche"></div>
</div>
#ONGLETS_FIN

la css
/* ------------------------------------------
/* les boites dans les onglets de la page sommaire
/* ------------------------------------------ */

#cadre1 { /* taille du cadre, Ó titre d'exemple */
width: 16em;
background-color: #909090;
}

#cadre2 { /* taille du cadre, Ó titre d'exemple */
width: 16em;
background-color: #909090;
position: relative;
left: 200px;
bottom: 350px;
}

ors l'onglet considère que les boites sont superposé et il est a rallonge.
vous n'auriez pas une idées

ps:/ d'autre pb sont visible mais une chose a la fois
l'url au cas ou : http://bachant.free.fr

--
CARIOU Arnaud
Web-Designer
Tél : 06 22 43 83 06
E-mail : arnaud@neolame.com

asso.bachant · Novembre 1, 2008, 5:40

Bon je m'en suis sortie avec un truc pas clair; donc si vous avez la soluce

j'ai du mettre des   avant la balise de fin d'onglet; voici donc le code provisoire et je vous remercie de m'avoir aider

[(#REM) Mot du Maire ]
<div id="cadre1">
    <div id="hautdroit"></div><div id="hautgauche"></div>
    <div id="contenu">
        <p>

<BOUCLE_maire(ARTICLES){tout}{titre_mot=Maire}{doublons}{par date}{inverse}{0,4}>

          <center>[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{80})]</center>
                    <h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
                    <small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|affdate_jourcourt)]</abbr>[, <:par_auteur:> (#LESAUTEURS)]</small>
                    [<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]

</BOUCLE_maire>
        </p>
    </div>
    <div id="basdroit"></div><div id="basgauche"></div>
</div>

<div id="cadre2">
    <div id="hautdroit"></div><div id="hautgauche"></div>
    <div id="contenu">
        <p>

[(#REM) Mot du Président]
<BOUCLE_president(ARTICLES){tout}{titre_mot=Président}{doublons}{par date}{inverse}{0,4}>

          <center>[(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire{80})]</center>
                    <h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
                    <small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|affdate_jourcourt)]</abbr>[, <:par_auteur:> (#LESAUTEURS)]</small>
                    [<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]

</BOUCLE_president>

        </p>
    </div>
    <div id="basdroit"></div><div id="basgauche"></div>
</div>
                  

#ONGLETS_FIN

CARIOU Arnaud a écrit :

Salut, pour apprendre les css tu as de très bon sites en français :

http://css.alsacreations.com/
http://www.openweb.eu.org/css/
http://css.mammouthland.net/
http://www.pompage.net/

en anglais :
Cascading Style Sheets

ton problème peut être réglé de plusieurs manière, soit en utilisant les
positions absolus ou la technique du float.

il te faut un div englobant : <div id="onglets">
  <div id="cadre1"></div>
  <div id="cadre2"></div>
</div>

Seule le positionnement en absolu te permet d'utiliser le système de
placement left, top, bottom et right.

positionnement absolu

#onglets {
position : relative;
}
#cadre1 {
position : absolue;
width: 48%;
left: 0;
top:0;
}
#cadre2 {
position : absolue;
width: 48%;
right: 0;
top:0;
}

Ceci n'est qu'une piste, en lisant les articles de la rubrique css du
site openweb tu devrais t'en sortir.

Arnaud

Le jeudi 30 octobre 2008 à 20:38 +0100, assobachant a écrit :


voila sur la page sommaire j'appelle a l'affichage 2 articles dans un onglet dans lequel je viens positionner deux cadres côte a cote en css que je découvre (dur,dur)
de la manière suivante :

[(#ONGLETS_DEBUT{Ils ont dit ...})]
[(#REM) Mot du Maire ]
<div id="cadre1">
    <div id="hautdroit"></div><div id="hautgauche"></div>
    <div id="contenu">
        <p>

<BOUCLE_maire(ARTICLES){tout}{titre_mot=Maire}{doublons}{par date}{inverse}{0,4}>
<li class="hentry">
                    <h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
                    <small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|affdate_jourcourt)]</abbr>[, <:par_auteur:> (#LESAUTEURS)]</small>
                    [<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
                </li>
</BOUCLE_maire>
        </p>
    </div>
    <div id="basdroit"></div><div id="basgauche"></div>
</div>

<div id="cadre2">
    <div id="hautdroit"></div><div id="hautgauche"></div>
    <div id="contenu">
        <p>

[(#REM) Mot du Président]
<BOUCLE_president(ARTICLES){tout}{titre_mot=Président}{doublons}{par date}{inverse}{0,4}>
<li class="hentry">
                    <h3 class="entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
                    <small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|affdate_jourcourt)]</abbr>[, <:par_auteur:> (#LESAUTEURS)]</small>
                    [<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
                </li>
</BOUCLE_president>

        </p>
    </div>
    <div id="basdroit"></div><div id="basgauche"></div>
</div>
#ONGLETS_FIN

la css
/* ------------------------------------------
/* les boites dans les onglets de la page sommaire
/* ------------------------------------------ */

#cadre1 { /* taille du cadre, Ó titre d'exemple */
width: 16em;
background-color: #909090;
}

#cadre2 { /* taille du cadre, Ó titre d'exemple */
width: 16em;
background-color: #909090;
position: relative;
left: 200px;
bottom: 350px;
}

ors l'onglet considère que les boites sont superposé et il est a rallonge.
vous n'auriez pas une idées

ps:/ d'autre pb sont visible mais une chose a la fois
l'url au cas ou : http://bachant.free.fr

--
@micalement stéphane --
ville de Bachant <http://bachant.free.fr>assobachant
asso.bachant@laposte.net

Pat2 · Novembre 1, 2008, 6:54

Oh c'est pô beau
J'ai mis un overflow:auto; dans la révision 23897 du Couteau Suisse.
Ca règle peut-être ton pb ?

Pat

assobachant a écrit :

Bon je m'en suis sortie avec un truc pas clair; donc si vous avez la soluce

j'ai du mettre des   avant la balise de fin d'onglet; voici donc le code provisoire et je vous remercie de m'avoir aider

asso.bachant · Novembre 1, 2008, 7:13

hélas ; mais merci d'avoir essayer j'ai laisser le premier onglets sans les   le deuxième lui les possédent
Version locale : 1.7.20.01
Révision : 23887
Votre version est à jour.

Pat a écrit :

Oh c'est pô beau
J'ai mis un overflow:auto; dans la révision 23897 du Couteau Suisse.
Ca règle peut-être ton pb ?

Pat

assobachant a écrit :

Bon je m'en suis sortie avec un truc pas clair; donc si vous avez la soluce

j'ai du mettre des   avant la balise de fin d'onglet; voici donc le code provisoire et je vous remercie de m'avoir aider

_______________________________________________
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/

irc://irc.freenode.net/spip ou http://embed.mibbit.com/?server=irc.freenode.net&channel=%23spip

--
@micalement stéphane --
ville de Bachant <http://bachant.free.fr>assobachant
asso.bachant@laposte.net

Pat2 · Novembre 1, 2008, 7:27

Euh ? J'ai bien dit : *23897*
Tu as l'air fatigué

Pat

assobachant a écrit :

hélas ; mais merci d'avoir essayer j'ai laisser le premier onglets sans les   le deuxième lui les possédent
Version locale : 1.7.20.01
Révision : 23887
Votre version est à jour.

Pat a écrit :

Oh c'est pô beau
J'ai mis un overflow:auto; dans la révision 23897 du Couteau Suisse.
Ca règle peut-être ton pb ?

Pat

assobachant a écrit :

Bon je m'en suis sortie avec un truc pas clair; donc si vous avez la soluce

j'ai du mettre des   avant la balise de fin d'onglet; voici donc le code provisoire et je vous remercie de m'avoir aider

_______________________________________________
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/

irc://irc.freenode.net/spip ou http://embed.mibbit.com/?server=irc.freenode.net&channel=%23spip

asso.bachant · Novembre 2, 2008, 9:02

• Revision 23897 <Connexion · GitLab Onglets : le contenu actif passe en overflow:auto; + test de version

Impecable merci Pat ; @llez je vire les pô beau

assobachant a écrit :

Bon je m'en suis sortie avec un truc pas clair; donc si vous avez la soluce

j'ai du mettre des   avant la balise de fin d'onglet; voici donc le code provisoire et je vous remercie de m'avoir aider

--
@micalement stéphane --
ville de Bachant <http://bachant.free.fr>assobachant
asso.bachant@laposte.net