Discussion :

[lelectronique.com]

Bonsoir,

voilà je me permet de poster un message car je n'arrive pas à trouver mon erreur, pour aligner ses 2 divs à coté de l'autre sachant que le premier n'a pas de largeur fixe et que le deuxième doit prendre le restant de l'espace de la page

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
barre_titre h1{
    transform: skew(-30deg);
    -o-transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    -webkit-transform: skew(-30deg);
	font-size:0.75rem;
	text-transform:capitalize;
	font-family:Tahoma, Geneva, sans-serif;
	float:left;
	background:#F3CD17;
	margin-left:6px;
	padding:4px 10px;
}
.barre_titre h1 span {
	color:#3c3c3b;
    transform: skew(30deg);
    -o-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -webkit-transform: skew(30deg);
}
.barre_titre div{
    padding:4px 10px;
    transform: skew(-30deg);
    -o-transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    -webkit-transform: skew(-30deg);
    background:#c6c6c6;
	margin-left:3px;
}

Code html :

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

1
2
3
4
<div class="barre_titre">
	<h1><span>actualité</span></h1>
    <div>&nbsp;</div>
</div>

pourtant si je fais juste cela pas de soucis

Code html :

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

1
2
3
<div style="background-color:#0F3; height:20px">
<h1 style="float:left; background-color:#030;">essai</h1>
<div style=" background-color:#F00;">essai2</div>

Merci d'avance
bonne soirée

[Invité]

Bonjour,

Code css :

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

display:inline-block;

[lelectronique.com]

Merci mais je met cela ou du coup ?

[lelectronique.com]

je viens de tester cela ne fonctionne pas
j'arrive à avoir les 2 barres alignés mais la 2e barre (grise) ne prend pas tout le reste disponible

[Invité]

1/ On ne voit pas ton code...
Sinon, dans ton 1er message, tu as barre_titre h1{ au lieu de .barre_titre h1{ !

2/ Dis-nous au moins quel résultat PRÉCIS tu souhaites obtenir, sur un exemple CONCRET (=du "vrai" texte).

3/ A voir si ça te convient :

Code html :

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

1
2
3
4
<div class="barre_titre">
  <h1><span>actualité</span></h1>
  <div><span>Tandem Bithyniam fultum ut quod</span></div>
</div>

Code css :

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
.barre_titre {
    padding:0;
    transform: skew(-30deg);
    -o-transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    -webkit-transform: skew(-30deg);
    background:#c6c6c6;
	margin:0 5px;
}
.barre_titre h1 {
	font-size:0.75rem;
	text-transform:capitalize;
	font-family:Tahoma, Geneva, sans-serif;
	display:inline-block;
	background:#F3CD17;
	margin:0; 
	padding:10px 15px;
}
.barre_titre h1 span {
  display:block;
}
.barre_titre span { /* on redresse les textes */
  color:#3c3c3b;
    transform: skew(30deg);
    -o-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -webkit-transform: skew(30deg);
  display:inline-block;
}
.barre_titre div {
	padding:0 10px;
  display:inline-block;
}

[lelectronique.com]

bonjour

le . c'est une erreur de copier coller il était bien présent dans mon code

nickel cela fonctionne ton code, je vais comparer avec le miens afin de voir ou se trouver le problème car belle prise de tête pour une bétise je pense...

merci beaucoup et bonne journée

[lelectronique.com]

euh, du coup je ne peux pas mettre en espace entre les deux div ? car le gris est dans la barre principale

[Invité]

Ajoute :

Code :

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

1
2
3
.barre_titre h1 {
	  border-right:5px solid white;
}

[lelectronique.com]

merci beaucoup j'ai encore pas mal à apprendre en CSS...
bonne soirée