THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline


Bonjour,
Je suis sur la réalisation de mon second site, en local avec Thelia 1.5.4. Pour le premier il n'y avait pas encore les grid donc c'est l'inconnu pour moi sad

Je souhaite aligner proprement mon menu horizontal, avec des espaces identiques entre chaque composant.
Ce qui me pose surtout souci, c'est le composant qui vient de la boucle RUBRIQUE qui me chamboule tout.

Voici le code de ma page menu :

<div id="nav" class="grid_12">
    <div class="rfloat">
    </div>
        <div id="chemin" class="grid_3">
              <a href="#URLSOMMAIRE">ACCUEIL</a> <!-- ::accueil::  -->
        </div>
       
                <div id="chemin" class="grid_1">
                        <a href="template/concept.html">CONCEPT</a> <!-- ::page concept::  -->
        </div>         
       
                <div id="chemin" class="grid_1">
                        <a href="template/abonnement.html">S'ABONNER</a> <!-- ::page s'abonner::  -->
        </div>                 
       
                <ul class="primnav">
                        <THELIA_MENU_RUBRIQUES type="RUBRIQUE" classement="manuel" parent="0">
                    <li>
                    <a href="#URL" #FILTRE_egalite(#RUBRIQUE_RACINE||#ID||class="selection")>#TITRE</a>
                    </li>
                        </THELIA_MENU_RUBRIQUES>
                </ul>
       
        <div id="chemin" class="grid_1">
            <a href="www.monsite.com/blog">BLOG</a>
        </div>
       
    <div class="push"></div>
</div>


Et mon code CSS :

#nav {

    border-top: 1px solid #E7E7E8; /* Couleur (gris) du trait sous le logo, haut dessus du menu, sur toute la largeur du site */
    border-bottom: 0px solid #E65596; /* Couleur (rose) du trait sous le menu, toute la largeur du site */
    padding-top: 10px;
    padding-bottom: 0px;
    margin-top: -40px;
    margin-bottom: 5px;
    /* background-image: url(../_gfx/menu-repeat.jpg);  /* Barre sous traduction */
    background-repeat: repeat-x;
    background-position: bottom;

}

#nav .icone {
    margin-top: -5px;
}

.primnav .selection {
    font-weight: bold;
}

.primnav {
    font-size: 1em;
    line-height: 1.2em;
}

.primnav li {
    display: inline;
    border-right: 1px solid #B85219;
    float: left;
    list-style-type: none;
}

.primnav li a {
    display: block;
    color: #505052;
    text-transform: uppercase;
    text-decoration: none;
    padding-left: 20px; /* Permet de ne pas coller le mot S'ABONNER du menu */
    padding-right: 0px;
    font-size: 1em;
    font-weight:bold; /* graisse texte titres des rubriques qui apparaissent dans menu */
}

.primnav li:last-child {
    border-right: none;
}

.primnav li .sousnav {
    font-size: .8em;
    line-height: 1em;
    display: none;
    width: 1024px;
    margin: 3px auto;
}

.primnav li .sousnav .sousnavsep {
    margin: 0;
    padding: 0;
}

.primnav li .sousnav .grid_3 {
    margin-bottom: 5px;
}

.primnav li .sousnav .ulsousnav li {
    list-style-type: none;
    border: 0;
    display: list-item;
    width: 100%;
}

.primnav li .sousnav a {
    margin: 3px 0 3px 0;
    display: inline-block;
    line-height: 1em;
    text-transform: none;
}

.primnav li .sousnav h3 {
    font-weight: bold;
}

.primnav li:hover .sousnav {
    display: block;
    text-transform: none;
}

.primnav .grid_sousnav {
    position: absolute;
    left: 0;
}

.primnav .sousnav .sousnav_wrap {
    border-top: none;
    padding-top: 10px;
    padding-bottom: 2px;
    background-color: #E5E5E5;
    opacity: .95;
    filter:alpha(opacity=95);
    -moz-opacity:0.95;
    opacity:0.95;
    width: 1005px;
    margin-bottom: 0;
    border-left: 2px solid #ccc;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
}

#nav .sousnav a.voirtous {
    text-decoration: underline;
    color: #B85219;
}

Quelqu'un peu m'aider ?
Merci d'avance !

Last edited by choupette (21-10-2014 20:08:26)

Offline


Personne pour m'aider ?

Offline


A moins d'écrire le code pour toi, pas vraiment. Etudie le CSS avec un outils comme FireBug pour FireFox, et tu devrait pouvoir t'en sortir.


OpenStudio Toulouse

Offline


Merci roadster31, mais j'abandonne l'alignement.
Novice, je ne comprends pas le fonctionnement des grid, ni FireBug...
Thelia2 semble bien plus complexe que le 1....
Y a t'il possibilité de repasser en Thelia 1 sans tout refaire. Une mise à jour en sens inverse en quelque sorte ?

Offline


Je te croyais en Thelia 1.5.4 ?

Avec Thelia 2, on utilise le framework CSS bootstrap, qui est très bien documenté et commenté sur le net. Une recherche te donnera plein de pistes.

Mais des notions de HTML et CSS sont tout de même indispensables.


OpenStudio Toulouse

Offline


roadster31 wrote:

Je te croyais en Thelia 1.5.4 ?

Ah  pardon. J'ai un premier site en Thelia 1.5.4. Mais pour ma seconde activité, j'essaie de faire mon site en Thelia 2.

roadster31 wrote:

Avec Thelia 2, on utilise le framework CSS bootstrap, qui est très bien documenté et commenté sur le net. Une recherche te donnera plein de pistes.

OK, je vais aller fouiller. Merci !


roadster31 wrote:

Mais des notions de HTML et CSS sont tout de même indispensables.

J'ai fais mon premier site, je devrais m'en sortir, non ??

Last edited by choupette (30-10-2014 22:59:13)