28173 sujets

CSS et mise en forme, CSS3

Creer une onglet qui s'étale automatiquement

Bonjour à tous le monde
Voila mon probleme j'essai de creer une onglet on disposant 2 div l'une à coté de l'autre ,en plus la deuxieme div doit s'étaler à 100% ce qui me creer des saut de ligne indisérable voila une ptite photo qui eclaircie le prob
upload/14970-ongletprob.JPG
le code html

<div id="w">
   <div id="bw1">&nbsp;</div>
      <div  id="bw2">
      <div id="bwc">Recherche rapide</div>
   </div>
</div>


le code css

#bw1{
	background-image:url(../images/ol1.png) ;
	background-repeat: no-repeat ;
	width: 5px ;
	height: 21px ;
	float:left ;
}
#bw2{
	
	background-image:url(../images/or1.png) ;
	background-repeat: no-repeat ;
	height: 21px ;
	float:left ;
	background-position:right ;
	width: 100% ;
}

#w{
	width: 170px  ;

	height: 200px ;
	border:1px solid #000000 ;
}


#bwc{
	float:left ;
	/* Div qui contientle text de l'onglet */
	font-family: Tahoma, Arial;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;	
	padding:3px 5px 0px 2px ;width: 100px ;
}

Merci de votre aide
Modifié par phpiste (02 Dec 2007 - 08:51)
Bonjour & bienvenue, phpiste.

a écrit :
Peut etre le message n'est pas dans le bon endroit
Il faut être un peu patient, c'est dimanche matin, quand même Smiley smile

Il y a plusieurs façons de réaliser ce que tu veux faire. Par exemple, tu pourrais placer ton image pour l'arrondi de gauche à l'intérieur du div et la positionner en absolu pour qu'elle se mette tout à gauche : 
<div id="recherche">
   <img src="...." alt="" />
   Recherche rapide
</div>


#recherche {
  position: relative;
  padding: 4px 8px;
}
#recherche img {
  position: absolute;
  top: 0;
  left: 0;
}
J'aurais pour ma part tendance à te conseiller l'utilisation des pseudo-éléments :before et/ou :after pour générer ce contenu graphique.
Tu as une solution parfaitement standard qui t'évite de modifier ton marquage HTML.
Bien sûr, Internet Explorer n'implémente toujours pas cette fonctionnalité… so what? Au pire, les utilisateurs d'Internet Explorer verront des onglets non arrondis, dégradation par ailleurs parfaitement acceptable.

C'est très difficile de rentrer dans cette optique, mais il est de bon ton de garder à l'esprit que si tu fais bien ton boulot, c'est à l'UA de bien faire le sien également.
En d'autres termes, bien travailler sur le web, c'est accepter que sa création ne sera pas systématiquement vue d'une façon strictement égale. Le plus important, c'est que ton information soit bien structurée à la base afin de la rendre disponible au plus grand nombre en faisant abstraction de tel ou tel mode de restitution.
Salut,
Benjamin D.C. a écrit :
J'aurais pour ma part tendance à te conseiller l'utilisation des pseudo-éléments :before et/ou :after pour générer ce contenu graphique.
Tu as une solution parfaitement standard qui t'évite de modifier ton marquage HTML.
Ce serait évidemment mieux. Mais on n'a pas toujours la possibilité de laisser tomber un navigateur comme IE6 !

Si tu tiens à conserver un code HTML immaculé, il est aussi possible de se tourner vers JavaScript et d'ajouter l'image via un script. Ce qui aura l'avantage de fonctionner sous IE par rapport aux propriétés CSS :before & :after.
beuh ? Smiley eek

D'abord un contenu structuré:
- soit une liste ul contenant des liens a s'il y a plusieurs onglets et un machin dynamique
- soit un titre hn si c'est un onglet placé sur un bloc isolé.

Ensuite, l'arrondi gauche en image de background du parent (li, hn) et le reste en background de l'enfant (a, span). Un float si nécessaire pour dimensionner le tout selon son contenu, et un clear sur ce qui suit.

J'ai loupé un épisode ? Ou alors, le Web devient décidément trop compliqué pour moi ? Smiley ravi
Laurent Denis a écrit :
D'abord un contenu structuré:

Ensuite, l'arrondi gauche en image de background du parent (li, hn) et le reste en background de l'enfant (a, span).
Faudrait voir le contexte Smiley smile
Merci pour ces reponses j'ai du repondre hier mais j'ai plus le temps excuse
Bon pour tous ce qui est dit j'essai d'adapter la solution la + logique puisque l'onglet se repete presque dans tous le site avec des niveau differents voila le derniers essai qui me semble le plus fonctionel

#bw1{
 
   background:red;
   width:5px;
   height:21px;
   float:left;
}
 
#bw2{
 
   height:21px;
}
 
#w{
 
   background:green;
   height:21px;
   border:1px solid #000;
}


<div id="w">
   <div id="bw1"></div>
   <div  id="bw2">
   </div>
</div>

Merci pour votre aide Smiley biggrin
Sujet clos
Aller à