Alignement 2 div

Version imprimable

Alignement 2 div

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:

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:

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:

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

07/10/2015, 20h48
Invité

Bonjour,

Code:

display:inline-block;
07/10/2015, 20h54
lelectronique.com

Merci mais je met cela ou du coup ?
08/10/2015, 07h53
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

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:

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

Code:

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;
}

08/10/2015, 09h04
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
08/10/2015, 09h09
lelectronique.com

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

Ajoute :

Code:

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

08/10/2015, 19h29
lelectronique.com

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