AccueilCSS dans Blog4ever
Barre plus
Hardware

30 messages
0 appréciations
Hors-ligne
0 | | 10 novembre 2008
:b1:
En fait, ça fait deux jours que je me penche sur la barre plus, mais ça ne donne pas grand chose. J'arrive à la faire sauf que j'aimerais que la barre plus s'intègre parfaitement avec barre d'origine mais sans supprimer celle-çi. Il faudrait que la barre plus ait la même forme, la même police, la même taille... etc

Voici le CSS de mon menu haut :

#menu {
width : 770px;
}
ul#menu {
height : 30px;
margin : 0;
padding : 0;
background : url(img9/bg_menu.png) repeat-x 0 -20px;
list-style-type : none;
}
ul#menu li {
margin-left: 255px;
margin-right: -255px;
text-align : center;
}
ul#menu li a {
padding : 0 10px;
line-height : 20px;
font-size : 0.8em;
font-weight : bold;
letter-spacing : 1px;
color : #000000;
display : block;
text-decoration : none;
border-right : 1px solid #ccc;
}
ul#menu li a:hover {
color : #fff;
background-image : url(img9/bg_menu.png);
}


En fait, la démo 1 que tu as mis sur ton blog est le parfait exemple de ce que je voudrait faire avec un style différent.

Pourrait-tu m'aider ?
:b2: d'avance





Dernière modification le 10-11-2008 à 23:22:06
PapyClic

271 messages
1 appréciations
Hors-ligne
0 | | 10 novembre 2008
:b1: Hardware

J'ai supprimé la dernière ligne de ton sujet par précaution.

Je peux aller dans ta gestion mais il ne faut pas que toi tu y ailles en même temps, pour éviter des problèmes.
Dis-moi quand je pourrais y aller.
En attendant je regarde ton code source, j'ai compris ce que tu voulais faire.

A plus
Hardware

30 messages
0 appréciations
Hors-ligne
0 | | 11 novembre 2008
Le mot de passe que je t'avais donné n'était pas celui de l'espace de gestion mais celui pour accéder au blog parce que je l'avais mis en privé le temps que je fasse quelques changements.
Je vais t'envoyer le vrai mot de passe par e-mail et je me déconnecte pour que tu est accès à mon espace de gestion

J'ai mis mon blog en privé, le temps des changements, c'est le même mot de passe que mon espace de gestion
:vtn

Derni?re modification le 11-11-2008 ? 00:25:31
PapyClic

271 messages
1 appréciations
Hors-ligne
0 | | 11 novembre 2008
:b0: Hardware

J'ai regardé ton modèle, c'est très différent au niveau du menu barre, il y a une image où vient ce coller la liste composant le menu.

Mais une seule astuce, actuellement, me permet de superposer une barre identique avec la reprise des modules automatiques de B4e. La barre auto reste en place, elle est recouverte par celle qu'il faut créer, et mettre dans la bordure basse, dans ce modèle avec menu à droite, me demandes pas pourquoi, je ne sais pas !!!
En cas de retour en version gratuite cette barre ajoutée ne s'affichera pas, il restera celle automatique mais les éléments seront alignés à gauche, il faudra remettre l'ancien code pour le centrage.

Il est possible de mettre ces 2 barres l'une en-dessous de l'autre, dans ce cas là, il ne faut pas reprendre les modules dans la deuxième et la première ne contiendra que 4 éléments. C'est pour ça que je préfère installer par superposition, surtout qu'il est possible dans un deuxième temps de mettre dans cette barre, des menus déroulants.

Voilà mes conclusions, ce système étant très spécifique, pour l'instant je ne ferai pas de tuto, je t'indiquerai le code par mail ou je te l'installerai.

A plus on se contacte par mail.

Bonne journée


Derni?re modification le 11-11-2008 ? 10:12:47
PapyClic

271 messages
1 appréciations
Hors-ligne
0 | | 11 novembre 2008
re :b0: Harware

Je mets ici le code pour centrer ton menu, si tu supprimes la BarrePlus installée ou en cas de retour à la version gratuite.

#menu {
max-width : 770px;
background : url(http://img9/bg_menu.png) repeat-x 0 -20px;
padding-left: 250px;
}

ul#menu {
height : 30px;
margin : auto;
padding : auto;
list-style-type : none;
}
ul#menu li {
float: left;
padding-left: auto;
padding-right: auto;
text-align : center;
border-left : 1px solid #ccc;
}

/* la suite du code ne change pas */

ul#menu li a {
padding : 0 10px;
line-height : 20px;
font-size : 0.8em;
font-weight : bold;
letter-spacing : 1px;
color : #000000;
display : block;
text-decoration : none;
border-right : 1px solid #ccc;
}
ul#menu li a:hover {
color : #fff;
background-image : url(img9/bg_menu.png);
}


Eventuellement ce code peut servir à ceux qui ont choisi le même modèle que toi.

Dis-moi si le résultat de ma modife te convient.

A plus


Derni?re modification le 11-11-2008 ? 12:02:32
Hardware

30 messages
0 appréciations
Hors-ligne
0 | | 11 novembre 2008
Vraiment merci, c'est exactement ce que je voulais faire
J'avais vu que ce n'était pas pareil au niveau du modèle, il y avait des choses que je ne comprenais pas

Je vais voir un peu comment tu as fait
Encore une fois :b2:
Hardware

30 messages
0 appréciations
Hors-ligne
0 | | 11 novembre 2008
J'ai centré la barre en modifiant le padding-left et la largeur de la barre

#menu {
width : 701px;
}
ul#menu {
height : 30px;
margin : 0;
padding-left : 68px;
background : url(img9/bg_menu.png) repeat-x 0 -20px;
list-style-type : none;
}


Maintenant que j'ai ma barre, je vais y incorporer des menus déroulant :vazy:
Par contre est-ce que ça sera différent avec mon modèle ?

@+++++

Derni?re modification le 11-11-2008 ? 13:05:34
PapyClic

271 messages
1 appréciations
Hors-ligne
0 | | 11 novembre 2008
:b0: Hardware

J'ai vu le centrage, c'est super

Pour les menus déroulants je vais regarder, mais je pense que ça devrait être relativement simple.
Mais par contre il faudrait que tu reste certainement en version Silver.

Bon à plus j'étudie les menus déroulants et je te tiens au courant.

@+
PapyClic

271 messages
1 appréciations
Hors-ligne
0 | | 12 novembre 2008
:b1: Hardware

J'ai réussi, mais en faisant du spécifique, dans ton modèle il y a 2 différences importantes par rapport aux modèles basiques :
- 1 - une image reçoit le menu, donc il faut tenir compte de ses dimensions, si l'on veut conserver l'harmonie du design.
- 2 - la colonne est à droite, le code HTML sera mis dans la bordure basse. Au cours de mes essais mis dans la colonne gauche/droite çacréait un décalage. A revoir car je ne comprends pas pourquoi ce phénomène.

Je te passe le code par mail vu ces spécificités, si un autre blogmaster est intéressé qu'il me contacte.

Si tu as besoin de renseignements complémentaires pour les listes composants les menus déroulants, fais moi signe.

Bonne continuation
Hardware

30 messages
0 appréciations
Hors-ligne
0 | | 13 novembre 2008
Salut d'abord merci pour ma barre, c'est génial
Par contre je n'arrive pas à la mettre sur mon blog, il y a toujours l'autre barre derrière et les liens n'apparaissent pas correctement.

Pourtant j'ai mis le CSS, l'HTML et le javascript dans la bordure du bas...

J'ai mis ma barre que j'ai personnalisé sur cette page : [lien]

Derni?re modification le 13-11-2008 ? 22:04:55
PapyClic

271 messages
1 appréciations
Hors-ligne
0 | | 18 novembre 2008
:b0: Hardware

Les problèmes d'interprétation du code par les navigateurs étant résolus, je pense que maintenant ça fonctionne correctement.

Bonne journée
Ce sujet est fermé, vous ne pouvez pas y répondre.
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie CSS dans Blog4ever.
⨯

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 142 autres membres