Discussion :

[phpiste]

Bonjour à tous le monde
Voila j'ai posté ce thread dans un autre Forum mais pas de solution quen j'espere la trouver ici
Alors 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 (en piece jointe) qui eclaircie le prob

le code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="w">
   <div id="bw1">&nbsp;</div>
      <div  id="bw2">
      <div id="bwc">Recherche rapide</div>
   </div>
</div>

le code css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#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

[Bisûnûrs]

Essaie comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="w">
   <div id="bw1"></div>
   <div  id="bw2">
      Recherche rapide
   </div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#bw1{
   background:red;
   width:5px;
   height:21px;
   float:left;
}
 
#bw2{
   background:green;
   height:21px;
}
 
#w{
   width:170px;
   height:200px;
   border:1px solid #000;
}

En revanche sur IE6 tu seras confronté au Three Pixel Jog ...

[Kerod]

Ou ou

Tu fais ainsi (l'imbrication des divs).

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="w">
           <div id="bw1"> 
            <div id="bw2">
                  <div id="bw3">Recherche rapide</div>  
            </div>
        </div>
   </div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 #bw1{
   background: url('./images/bordure_back.gif') repeat-y;
   height:21px;
}
 
#bw2{
   background: url('./images/bordure_left.gif') no-repeat left;
}
 
 #bw3{
   background: url('./images/bordure_right.gif') no-repeat right;
}
 
#w{
   width:170px;
   height:200px;
   border:1px solid #000; 
}

Récemment j'ai essayé ceci et ça fonctionnait.

Si tu utilises des bordures imagées c'est aussi une solution pour le contenu.


ou ou avec que des float

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
    <div id="w">
           <div id="bw1"> 
            <span id="bw2"></span>
              <span id="bw3"></span>  
            Recherche rapide
        </div>
   </div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  #bw1{
   background: url('./images/bordure_back.gif') repeat-y;
   height:21px;
}
 
#bw2{
   background: url('./images/bordure_left.gif') no-repeat;
   height: 21px;
   width: 5px;     
   float: left;
}
 
 #bw3{
   background: url('./images/bordure_right.gif') no-repeat; 
   height: 21px;
   width: 5px;     
   float: right;
}
 
#w{
   width:170px;
   height:200px;
   border:1px solid #000; 
}

[Kerod]

Euh c'est pas repeat-y mais plutôt repeat-x

[Bisûnûrs]

Des dimensions sur un span ? Ca marche ça ?


Sinon, à partir du moment où le conteneur à une largeur précise, on peut tout à fait mettre une valeur précise pour son contenu aussi :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="w">
   <div id="bw1"></div>
   <div  id="bw2">
      Recherche rapide
   </div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#bw1{
   background:red;
   width:5px;
   height:21px;
   float:left;
}
 
#bw2{
   background:green;
   height:21px;
   width:165px;
   float:left;
}
 
#w{
   width:170px;
   height:200px;
   border:1px solid #000;
}

[Kerod]

Oui ça marche. Juste un petit oubli :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 #bw1{
   background: url('./images/bordure_back.gif') repeat-y;
   height:21px;
}
 
#bw2{
   background: url('./images/bordure_left.gif') no-repeat;
   height: 21px;
   width: 5px;     
   float: left;
   display: block;
}
 
 #bw3{
   background: url('./images/bordure_right.gif') no-repeat; 
   height: 21px;
   width: 5px;     
   float: right;
   display: block;
}
 
#w{
   width:170px;
   height:200px;
   border:1px solid #000; 
}

Le code que je donne c'est généralement un code que j'ai utilisé au moins une fois et qui fonctionne

[Candygirl]

Des dimensions sur un span ? Ca marche ça ?

Oui, ça marche, dans ce cas, puisque le float induit automatiquement un type block

Oui ça marche. Juste un petit oubli :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
   display: block;

Il n'y avait pas d'oubli, le display:block est inutile ici vu le float