Les dans la joie et la bonne humeure

30 Posts

Sfimx Reply #1, 20 years, 5 months ago

Bonjour,

c’est dans la joie et la bonne humeur (vous allez bientôt plus me croire) que j’ai refait un skin pour mon site, jusque là, sa va (excepté que NVU a ruiné a deux reprise mon code laugh

). J’ai donc du intégré mes deux menus

J’ai retouché pendant plus d’une heure les CSS pour que sa aie l’air potable : http://testingcms.sfimx.atoxx.net/accueil

le pire n’est pas là, j’ai essayé multiple possibilité, mais impossible de mettre le DropMenu horizontal au milieu de la barre, c’est une malédiction ? Ensuite le deuxième dropmenu, qui lui est vertical. Rien n’a fait non plus, il est obligé de se mettre au milieu de la grande case qu’il lui est reservé ? il a pas le droit de se mettre comme tout le monde, à gauche ?

voici le code du menu du design d’andreas (le 8ème je crois)

.menublock{margin:0 0  8px; font-size:0.9em;text-align:left;}
.menublock li{list-style:none; display:block; padding:2px; margin-bottom:2px;}
.menublock li a{font-weight:bold; text-decoration:none;}
.menublock li a:hover{text-decoration:none;}
.menublock li ul{margin:3px 0 3px; font-size:1em; font-weight:normal;}
.menublock li ul li{margin-bottom:0;}
.menublock li ul a{font-weight:normal;}
/*  turn off sub-menus */
.menublock ul ul {
    display: none;
}

j’ai essayé de tripaturé, ça et là, mais il a résister, quelqu’un pourrait donc m’expliquer comment l’aligner à gauche

Sfimx

171 Posts

xeres Reply #2, 20 years, 5 months ago

rajoute

padding:0;

dans la classe .menublock

30 Posts

Sfimx Reply #3, 20 years, 5 months ago

effectivement, merci beaucoup, et pour le menu horizontal, vois-tu une solution ?

Sfimx

p.s : si jamais tu veux le code :

#navigation{;
background-image:url(fond_2bar.png);
background-repeat:repeat;
margin:0 1px;
text-align:left;
color:#1C3E59;
height:20px
}

#navigation li{
float:left;
list-style-type:none;
vertical-align:middle;
}

#navigation li a{
padding:0 10px;
font-size:11px;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #1C3E59;
}

* html #navigation a {width:1%;}

#navigation a:hover{

color:#5BCDEA;
padding:0 10px;
text-decoration:none;
text-transform:uppercase;
font-size:11px;
border-top-style:dotted;
border-top-width:thin;
}

#navigation li.here { 
padding:0 10px;
color: #115A9A;
text-transform:uppercase;
font-size:11px;
}
#navigation li.here a, #navigation li.here a:hover{
padding:0;
 border-top-style:solid;
border-top-width:thin;
font-size:11px;
}

Sfimx

171 Posts

xeres Reply #4, 20 years, 5 months ago

je pense qu’il te manque un

line-height: ??px;

pour ton sélecteur li, avec la valeur qui te convient bien. Je n’ai pas testé mais ça devrait te mettre sur la voie, tu peux virer ton vertical-align:middle; inutile

30 Posts

Sfimx Reply #5, 20 years, 5 months ago

merci,

j’ai fait ce que tu m’a dis :

#navigation li{
float:left;
list-style-type:none;
line-height: 25px;
}

va voir maintenant : http://testingcms.sfimx.atoxx.net/

et t’a le droit à une admirable répétition du background et un changement de taille du bloc

Sfimx

52 Posts

abbeyroad Reply #6, 20 years, 5 months ago

Essaies de rajouter ce code a la fin de ton fichier CSS:

/* rectif pour menu du haut :  */

td#navigation ul {
    margin: 0;
    line-height: 28px;
    }
    
/* rectif pour menu de droite :  */
td.menu ul {
    margin-left: 0;
    padding-left: 0;
    }

td.menu ul ul {
    margin-left: 0;
    padding-left: 15px;
    }
    
td.menu ul ul ul {
    margin-left: 0;
    padding-left: 25px;
    }

En faite, les "browsers" appliquent aux listes de differents valeurs par default , tantot en padding, tantot margin.
Voici une tres bonne resource pour styler les listes: http://css.maxdesign.com.au/listamatic/index.htm

Apres ca? A toi de voire - peutetre songer a faire un layout sans tables pour demontrer la flexibilite de MODx sur "TestingCMS"......

Cheers

30 Posts

Sfimx Reply #7, 20 years, 5 months ago

C’est excellent, merci beaucoup, franchement, je me suis arraché le cheveux là dessus pendant un moment, mais il me serai jamais venu a l’idée de faire un CSS avec td.

merci beaucoup encore

Sfimx, pour vou servir wink

415 Posts

Soda Reply #8, 20 years, 2 months ago

Salut, c’est pas trés conforme aux standards d’utiliser une table pour ça, deux solutions:

tu t’en fous et tu laisse comme ça,
tu t’en fous pas et tu fais un display:inline; pour les li, voir la démo le menu est en haut à droite et voici le code:

ul.menu {
	position: absolute;
	 /* pour opera sinon affiche pas les 1er liens */
	top: 125px;
	right:-219px;
	color: White;
	background-color : transparent;
	text-align: right;
}
ul.menu li {display:inline;}
ul.menu li a {padding:0 3px;text-decoration:none;}
ul.menu li:after { content: "\007C"; }
ul.menu li:before { content: "";}
ul.menu li.here {font-size: 200%;}
ul.menu li.here:after {content: "\002E";}

si ça peut aider.

MODx Sites & Prestations: http://dp-site.fr [Last MODx Site]
MODx Repository: [HOME] [MetaTagsExtra] / Current Dev: [xFDM]