Fork me on GitHub

Page « 1 2 (3) 4 »

Mon 1er site en CSS/XHTML : Une expérience expliquée en détail

200619
Mai
  alain01 Documentations 13554


4) Onglets, partie 1 : bords arrondis

Il existe une méthode pour définir des onglets, c'est la méthode des portes coulissantes, ce n'est pas celle que j'ai utilisée mais celle-là (Exemple 2, Horizontal).

Il s'agit d'une astuce css tout à fait fabuleuse. cela vous génére des formes d'onglets sans avoir besoin d'images. Une fois le principe bien compris, vous pourrez créer autant d'onglets de couleurs différentes de vous souhaitez, en une seule ligne css.
Quand vous avez maitrisez ces quelques lignes de css, libre à vous de définir des types d'onglets avec les paramètres suivants :
- couleur,
- grandeur de l'onglet
- onglet sombre ou clair

Tentative d'explication :

<div id="navigation">
    <
ul>
        <
li>
            <
class="menumini" href="http://monsite.fr/lien1.html" title="Mon lien 1">
                 <
class="BoxOnglet"><span class="BoxContenu couleur4">Lien 1</span><class="b4 couleur4"></b><class="b3 couleur4"></b><class="b2 couleur4"></b></b>
            </
a>
        </
li>
    </
ul>
</
div>


avec comme css (que j'ai commenté):
// placement des onglets sur la page
#navigation {
    
padding-left300px;
    
backgroundtransparent no-repeat;
    
margin0px;
    
height4em/* cache overflow:hidden de IE5/Mac */
    
overflowhidden/* */
    
background-imageurl(images/fonds_blocnote_top.png);
   
height45px;
}

#navigation ul {
  
margin:0px
  
padding:0
  list-
style-type:none
  
background:transparent;
  }
#navigation li {
  
display:block
  
float:left
  
margin:15px 2px 0px 0px;
  }
.
BoxOnglet, .BoxOngletFonce {
  
background:transparent;
  }

// Onglet pour texte sombre
.BoxOnglet span {
   
text-aligncenter;
   
color#FFCC33;
   
margin0px;
   
font-familyverdana;
   
font-size80%;
   
font-weightnormal;
}

// Onglet pour texte clair
.BoxOngletFonce span {
   
text-aligncenter;
   
color#093F7D;
   
margin0;
   
font-familyverdana;
   
font-size80%;
   
font-weightnormal;
}


// Astuces pour faire des bords arrondis
// b1 Ã©tant la base la plus large et b4 la plus petite
.b1, .b2, .b3, .b4 {
  
display:block
  
font-size:xx-small;
/* cache overflow:hidden de IE5/Mac */ 
/* */ 
  
overflowhidden
/* */ 
  
}

.
b1, .b2, .b3 {height:1px;}
.
b2, .b3, .b4 {
  
border-left:1px solid #FFFFFF; 
  
border-right:1px solid #FFFFFF;
  
}
.
b1 {margin:0px 5pxbackground:#FFFFFF;}
.b2 {margin:0 3pxborder-width:0 2px;}
.
b3 {margin:0 2px;}
.
b4 {height:2pxmargin:0 1px;}

// contour des onglets
.BoxContenu {
  
display:block
  
border-left:1px solid #FFFFFF; 
  
border-right:1px solid #FFFFFF;
  
}

// onglets taille normale
a.menu {
  
display:block
  
text-decoration:none
  
width:6.5em;
  }

// petits onglets
a.menumini {
  
display:block
  
text-decoration:none
  
width:3.5em;
  }

// onglets grande taille
a.menugrand {
  
display:block
  
text-decoration:none
  
width:9.5em;
  }

a.menu:hovera.menumini:hovera.menugrand:hover  {
  
background:transparent
  
cursor:pointer;
  
text-decorationnone;
  }
a.menu:hover spana.menumini:hover spana.menugrand:hover span {
  
padding-top:8px;
  }

// définition des couleurs des onglets
.rouge {background:#cc3333;}
.bleu {background:#093F7D;}
.jaune {background:#FFCC33;}
.comite{background:#3662a2;}

Note: 9.00 (2 votes) - Noter cet article -
Page « 1 2 (3) 4 »

Partager Twitter Partagez cette article sur GG+
Format imprimable Envoyer cet article à un ami
Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Xoops accro
Inscrit le: 15/07/2004
De:
Contributions: 4763
blueteen Posté le: 19/05/2006 12:45  Mis à jour: 19/05/2006 12:45
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Détail du travail effectué très intéressant !
Chapeau pour la validation w3c ! (il te reste juste 2 erreurs sur certaines pages, mais c'est pour chipoter
et encore plus merci, pour la mise à disposition de ce thème !
Xoops accro
Inscrit le: 04/02/2003
De: Le Mans
Contributions: 12273
Christian Posté le: 19/05/2006 12:57  Mis à jour: 19/05/2006 12:57
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Suis content que certains s'inspirent de mon article pour xoopser un template xhtml/css, car s'il bat des records de lecture, on voit encore peu de sites xoops construits ainsi.

Suis persuadé néanmoins que c'est une question de patience, çà va venir.
Admin Frxoops
Inscrit le: 04/02/2003
De: Belgique
Contributions: 3376
Solo71 Posté le: 19/05/2006 14:27  Mis à jour: 19/05/2006 14:27
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Citation :
Suis content que certains s'inspirent de mon article pour xoopser un template xhtml/css, car s'il bat des records de lecture, on voit encore peu de sites xoops construits ainsi.


Pourtant ça ne prend que 10 minutes... :roll:
Xoops accro
Inscrit le: 25/02/2004
De: Région parisienne
Contributions: 2526
DuGris Posté le: 19/05/2006 15:28  Mis à jour: 19/05/2006 15:28
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Waowwwwwwwww, superbe travail et merci de nous en faire profiter.

Petite question :
As tu été obligé de modifier les templates des modules pour le "full" CSS/XHTML ?????
Admin Frxoops
Inscrit le: 16/05/2003
De: Rhone-Alpes
Contributions: 4051
alain01 Posté le: 19/05/2006 15:41  Mis à jour: 19/05/2006 15:43
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Merci.

Oui, il faut passer sur chaque template de modules que tu veux afficher (page + blocs).
Pas tous, mais seulement ceux que tu rends disponibles à l'ensemble de tes groupes.
Mais bon, ce site ne comporte que 2 modules...
Aspirant
Inscrit le: 28/02/2005
De: Vercors
Contributions: 37
oryxvet Posté le: 19/05/2006 17:50  Mis à jour: 19/05/2006 17:50
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Bravo pour cet article.
On attend avec impatience que le thème par défaut de xoops soit remanié selon ces principes CSS/XHTML.
Supporter Xoops
Inscrit le: 09/01/2005
De: Breizh
Contributions: 16972
Kris Posté le: 19/05/2006 20:50  Mis à jour: 19/05/2006 20:50
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Je dois dire ...... BRAVO :bravo:

Merci de faire partager ta connaissance :xfsuper:

Kris
Aspirant
Inscrit le: 06/01/2004
De:
Contributions: 63
skalpa Posté le: 20/05/2006 07:16  Mis à jour: 20/05/2006 07:22
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
(cool

Juste un petit conseil
Citation :
Pour un onglet d'un lien vers un module, ce n'est pas si simple que cela. En effet, l'onglet doit rester dans sa colorisation active tant que l'on est sur une page du module donc faire un test sur la racine de l'url du module ne fonctionnera que sur la page index.html du module


La methode indiquee ne marcherait plus si jamais la re-ecriture d'URL devenait possible dans XOOPS.
Je suggererais plutot:
<{if $xoops_dirname == 'wordpress'}>
<{if 
$xoops_dirname == 'xhldo'}>

quand c'est possible (les modules)

Citation :
Bravo pour cet article.
On attend avec impatience que le thème par défaut de xoops soit remanié selon ces principes CSS/XHTML.

C'est en cours... ce sera pas ds la prochaine version (2.0.14) mais la suivante. Il y a juste a trouver une solution qui marche pour que les modules puissent etre livres avec 2 jeux de gabarits differents (un compatible avec les themes actuels, et un "pur"), mais je crois avoir la solution aussi.
Supporter Xoops
Inscrit le: 21/06/2004
De: Montrèal
Contributions: 9
AmiCalmant Posté le: 20/05/2006 09:12  Mis à jour: 20/05/2006 09:12
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Citation :
La methode indiquee ne marcherait plus si jamais la re-ecriture d'URL devenait possible dans XOOPS.


Excellente idée! Est-ce également quelque chose qui est sur le radar? Cela aiderait beaucoup à améliorer la taxonomie pour le référencement.

Merci à Alain pour le partage des idées CSS/XHTML. N'y a-t-il absolument pas de tableau dans le code des modules du core ou des modules contrib les plus populaires?

Ami Calmant,
--
C.A.
Supporter Xoops
Inscrit le: 13/05/2005
De: Le théíƒÂ¢tre de la vie
Contributions: 340
mediateur Posté le: 21/05/2006 11:49  Mis à jour: 21/05/2006 11:49
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
ça fait des idées à inscrire dans le panier xoops ! Très jolie présentation. :tucartonnes:
Supporter Xoops
Inscrit le: 24/11/2004
De: Marseillan - Cap d'Agde
Contributions: 687
denisdlu Posté le: 21/05/2006 20:07  Mis à jour: 21/05/2006 20:07
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Salut Alain

Super travail come d'habitude avec le souci de partager ton expèrience .
Pour répondre a Christian , c'est sur que tout lemonde a interet a faire des sites en CSS propre , mais cela demande un gros investissement de temps .
Bien sur c'est du temps perdu au debut et bien vite rattrapé ensuite .
Alain a choisi un systeme a 2 colonnes , s'il y en avait 3 ca aurait été bien plus difficile encore .
Et ce satané IE qui fait perdre un temps fou et empoisonne tout le monde car il ne respecte rien ( ou presque).
Tout cela n'est pas une excuse mais ca explique aussi que pas mal de gens renoncent a se lancer dans l'aventure
Pourtant quand on voit le resultat c'est vrai que c'est sympa .
Newbie
Inscrit le: 19/10/2005
De:
Contributions: 2
jazzfan Posté le: 22/05/2006 13:59  Mis à jour: 22/05/2006 13:59
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Bonjour,

Houla, je me suis dit, super complet l'article.
Vite je l'imprime comme sujet de lecture pour ce soir avant le dodo.

Bingo, l'ami news traduit mal les blocs de code et pas d'images...
Bon , pas une version pdf à mettre en ligne pour ceusses qui préfère lire hors écran des fois ?

Sinon, que du bon cet article
Stef
Admin Frxoops
Inscrit le: 16/05/2003
De: Rhone-Alpes
Contributions: 4051
alain01 Posté le: 22/05/2006 15:01  Mis à jour: 22/05/2006 15:01
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Merci Skalpa pour ta remarque !
J'ai modifié dans l'article, dans mon thème et dans le zip à télécharger !

Merci pour vos commentaires.

@Amicalment : Je me suis focalisé surtout à la page d'accueil ainsi qu'aux pages de modules et pas vraiment des pages "système" genre "mon compte" etc...
Aspirant
Inscrit le: 13/07/2003
De: Brasil - SíƒÂ£o Paulo - Guarulhos
Contributions: 72
gibaphp Posté le: 22/05/2006 15:50  Mis à jour: 22/05/2006 15:50
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Merci por work
Régulier
Inscrit le: 06/09/2005
De: Tours
Contributions: 306
kryxx Posté le: 19/12/2006 15:18  Mis à jour: 19/12/2006 15:18
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Citation :
7) Téléchargement du thème
Ce nouveau thème est donc disponible en libre téléchargement ici.


euhhhh le lien n'est plus valide
Admin Frxoops
Inscrit le: 16/05/2003
De: Rhone-Alpes
Contributions: 4051
alain01 Posté le: 19/12/2006 15:25  Mis à jour: 19/12/2006 15:25
 Re: Mon 1er site en CSS/XHTML : Une expérience expliquée ...
Ok, corrigé.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

46 Personne(s) en ligne (1 Personne(s) connectée(s) sur Articles) | Utilisateur(s): 0 | Invité(s): 46 | Plus ...