Un onglet en CSS

Bonjour à tous,

je souhaiterai avoir des onglets de ce type pour mon menu :

.

ayant pour code :

<div class="onglet">Texte</div>

les contraintes sont les suivantes :

- une bordure de 1px blanche à gauche
- une bordure de 1px blanche en haut
- des espaces à gauche et à droite du texte fixes (en px)
- que l'onglet s'adapte à la taille du texte
- une image en haut à droite de taille fixe, au-dessus la bordure du haut

mon problème est que je n'arrive pas à faire passer cette image au dessus de la bordure du haut, elle reste à l'intérieur du div.

Si vous avez une idée...

Merci
Modifié par Marloneyes (09 Feb 2006 - 17:14)

peut etre en y mettant dans le css un

margin-top: -10px <-- valeur au hazard à toi de voir

appliqué a l'image

Bonjour,

Marloneyes a écrit :
Bonjour à tous,

mon problème est que je n'arrive pas à faire passer cette image au dessus de la bordure du haut, elle reste à l'intérieur du div.

Si vous avez une idée...

Merci

La mettre en position relative avec un margin-top négatif comme la précisé Philippe.
Si ça peut t'aider, j'ai fait un test avec un menu onglet en css

Philippe a écrit :
peut etre en y mettant dans le css un

margin-top: -10px <-- valeur au hazard à toi de voir

appliqué a l'image

Mon image étant en background, je pense pas que je puisse influer dessus directement comme ça. Il va surement falloir que je change de méthode

chmel a écrit :
Bonjour,

La mettre en position relative avec un margin-top négatif comme la précisé Philippe.
Si ça peut t'aider, j'ai fait un test avec un menu onglet en css

Je n'arrive pas à ouvrir ton site

Pour l'instant j'arrive à ca :



(le body est en gris)

- le border-left dépasse en bas
- l'image est en dessous du border-top (normal mais je voudrais qu'elle passe au dessus)

avec ce code :

div#onglet{
	white-space: nowrap;
	width:120px;
	padding-left:20px;
	padding-right:17px;
	background: url(fleche.gif) right top no-repeat;
	background-color:#0F0082;
	border-left:1px solid white;
	border-top:1px solid white;
	color:white;
}

<div id="onglet">TOTO</div>

A vot' bon coeur...

Mes dernières recherches :

<div id="onglet">
	<div id="ongletImage"></div>
	<div id="onglet2">TOTO</div>
</div>

et :

div#onglet{
	position:absolute;
	left:10px;
	height:17px;
	width:120px;
	background-color:#0F0082;
	color:white;
	white-space: nowrap;
}


div#onglet2{
	height:17px;
	width:120px;
	padding-left:20px;
	padding-right:17px;
	border-left:1px solid white;
	border-top:1px solid white;
	background-color:red;
	white-space: nowrap;
}

div#ongletImage{
	position:absolute;
	width:10px;
	height:17px;
	background: url(fleche.gif) no-repeat;
	left:110px;
}

Cela affiche ce que je veux, mais il me reste un problème :
que la largeur de l'onglet s'adapte à son contenu... Est ce possible?
Modifié par Marloneyes (10 Feb 2006 - 14:40)