À l'aide avant et après les pseudo-éléments sur l'image d'arrière-plan
Je suis désireux de construire des éléments de navigation à partir de trois (arrière-plan) des images, avec la première et la dernière une largeur fixe, et la centrale de largeur variable, en fonction de la largeur du texte dans la valeur liquidative de l'élément. J'ai été amené à croire que l'utilisation de la pseudo-éléments avant et après la serait la meilleure méthode. Quand j'ai essayer ce que, le principal (central) image d'arrière-plan pour la nav élément est le chevauchement avec l'avant et après les images d'arrière-plan.
Vous pouvez voir ce que je veux dire sur cette page.
Voici le CSS:
.box {
background-image: url(nav/images/nav_02.png);
background-repeat: repeat;
height:20px;
position: absolute;
padding: 10px 13px;
}
.box:before {
left: 0;
background-image: url(nav/images/nav_01.png);
}
.box:after {
right: 0;
background-image: url(nav/images/nav_03.png);
}
.box:before,
.box:after {
content: ' ';
width: 13px;
height:40px;
position: absolute;
top: 0;
background-repeat: no-repeat
}
Et le code HTML:
<div class="box">here is some text</div>
Puis-je utiliser le fond d'images de cette façon, en utilisant des éléments pseudo?
Merci,
Nick
OriginalL'auteur Nick | 2012-06-03
Vous devez vous connecter pour publier un commentaire.
Oui, mais vous devrez utilisez gauche et droite les attributs pour déplacer les éléments pseudo dans la bonne position. le rembourrage n'est pas correct pour la zone principale à la position. Une meilleure utilisation de la marge.
OriginalL'auteur Oliver