Partie "Barre"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Marge extérieure haute | margin-top | Dimension (ex: 10px) | |
| Hauteur | height | Dimension en pixels (ex : 200px) |
#barre
{
width : 768px;
margin-top : 5px;
height:30px;
}
{
width : 768px;
margin-top : 5px;
height:30px;
}
Cette règle gére la taille et le placement de la barre, je l'ai volontairement colorée pour bien la définir, n'étant pas visible à l'origine. Voir les autres articles, beaucoup d'attributs peuvent être rajoutés à cette règle pour différentes présentation de ce menu, en particulier cet article [lien].
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Puces de la liste | list-style-type | Forme de puce (ex : disc,circle,square,none) |
#barre ul
{
list-style-type : none;
}
{
list-style-type : none;
}
En principe dans ce menu les puces ne sont pas utiles, cette règle à mon avis existe pour éventuellement désactiver un paramètrage par défaut. Dans le CSS, les éléments contenus dans un bloc, héritent des attributs du bloc dans lequel ils sont incorporés.
Exemple : Si dans la partie "Page" l'alignement du texte est "text-align: center"... dans le "Cadre", le "Contenu" ainsi que tous les éléments formant la page, il en sera de même, sauf si, à la saisie dans le composeur, vous formatez en alignement gauche. Mais il est préférable d'ajouter cet attribut dans le CSS en direct dans la partie "Contenu", "text-align: left;"... il n'apparaît pas dans l'assistant mais il reste présent dans la règle.
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
#barre li
{
float : left;
}
{
float : left;
}
Attribut absent dans l'assistant, mais très important, pour mettre les éléments de la liste composant le menu, en ligne.
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir | |
| Couleur du texte | color | Choisir | |
| Décoration du texte | text-decoration | ||
| Largeur | width | Dimension en pixels (ex : 200px) | |
| Hauteur | height | Dimension en pixels (ex : 200px) | |
| Marge extérieure gauche | margin-left | Dimension (ex: 10px) | |
| Taille de la bordure | border-width | Dimension (ex:2px) | |
| Style de la bordure | border-style | ||
| Couleur de la bordure | border-color | Choisir |
#barre a
{
background : #004000;
color : #EEF4E2;
text-decoration : none;
width : 100px;
height : 23px;
margin-left : 2px;
border-width : 1px;
border-style : solid;
border-color : #000000;
text-align : center;
display : block;
}
{
background : #004000;
color : #EEF4E2;
text-decoration : none;
width : 100px;
height : 23px;
margin-left : 2px;
border-width : 1px;
border-style : solid;
border-color : #000000;
text-align : center;
display : block;
}
Gestion des liens composant le menu... chaque lien vers un module, est un élément de la liste. Si cette règle était absente, les liens prendraient l'apparence des liens en général, c'est à dire sur la balise HTML <a>, géré dans la partie "Page > liens" de l'assistant.
Partie "Barre > liens au survol"
| Nom de l'attribut | Nom CSS | Valeur | Valeurs possibles |
| Couleur de fond | background | Choisir |
#barre a:hover
{
background : #C5D5A7;
border : 1px solid #004000;
}
{
background : #C5D5A7;
border : 1px solid #004000;
}
Commentaires
le 31-12-2008 à 15:01:33
site/blog
31-12-2008 à 19:04:18
J'ai répondu sur le sujet ouvert dans le forum B4e.
Bon révéillon
site/blog
le 20-07-2010 à 16:16:57
Je voudrais modifier ma page d'accueil...
1 - Centrer la partie barre : accueil articles photos (sans forum)
2 - Supprimer dans le menu vertical gauche les cases : Tous les articles (lorsque l'on clique sur cette case ils s'affichent de façon désordonnés)
3 - Placer la rubrique PHOTO avec son contenu (album - diaporama) en haut dans la partie barre...
Voilà les modifications souhaitées dans un premier temps...Est-ce possible de la faire sans que ça bouleverse le contenu du blog ? Je ne sais pas trop comment m'y prendre car j'ai beaucoup "bidouillé" pour avoir la présentation actuelle et j'ai un peu peur de la faire sans faire de dégats...
Pouvez-vous m'aider s'il vous plait...
Merci infiniment...
Cyrene
site/blog
20-07-2010 à 18:29:30
Question 1 J'ai centré la barre mais pour ta
Question 2 Ce n'est pas possible, mais tu peux organiser tes articles en mettant des poids.
Question 3 Je ne comprends pas tu as bien le lien pour l'album photos sur la barre.
Bonne soirée
site/blog
le 01-01-2012 à 15:31:24
PapyClic, j'aimerais savoir comment diminuer l'espace entre la barre et le contenu ou menu. Dans quelle partie du CSS ou dizperso je peux faire cette modification ?
Comme on peut le voir il y a un espace inutile en dessous de la barre, et cela m'énerve :(
Merci d'avance vraiment.
site/blog
01-01-2012 à 15:45:00
Diminue la hauteur de la partie barre, actuellement 200px, je crois que 120px suffiraient.
Merci pour tes voeux, à mon tour je te souhaite bonne année 2012.
site/blog
le 01-01-2012 à 15:55:49
Je viens tout juste de le voir merci beaucoup, c'était si simple ah ah, désolée.
120px, oui c'est parfait ! Encore merci :) !