Div vertical et horizontale.

**Golgotha** · 05/04/2011, 12h37

Bonjour,

Je galère à trouver une solution à ce problème.

Comment faire pour que les div rose se touche (sans toucher a leurs taille).

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
      <style>       body {        font-family: 'Lucida Grande', Verdana, Arial, sans-serif;      }      
      .box {
      border: 3px solid black;
      background-color:pink;  
      width:auto;
      display: table;   
      white-space: nowrap;}            
 
      .com {
      background-color:yellow;     
      border: 3px solid black;                               
      -moz-transform: rotate(90deg) translateY(-40px) ;
      -o-transform: rotate(90deg) translateY(-40px)  ;
      -webkit-transform: rotate(90deg) translateY(-40px)  ;
      transform: rotate(90deg) translateY(-40px) ;
 
      -moz-transform-origin: 0% 0% ;
      -o-transform-origin: 0% 0% ;
      -webkit-transform-origin: 0% 0% ;
      transform-origin: 0% 0% ;
      display: table;
      white-space: nowrap;
      }
 
    </style> 
  <title>css</title>
  </head>
  <body >
 
  <div>
 
  <div style="float:left; border: 1px solid black;   ">
  <div class=box>DIV-111111</div>
  <div class=com>DIV-2222222222</div>
  </div>
 
  <div style="float:left; border: 1px solid black;   ">
  <div class=box>DIV-33</div>
  <div class=com>DIV-44444444</div>
  </div>
 
  <div style="float:left; border: 1px solid black;   ">
  <div class=box>DIV-55555555555555555</div>
  <div class=com>DIV-6666666666666666666666</div>
  </div>
 
  </div>
 
  </body>
</html>

Merci d'avance.

**NoSmoking** · 05/04/2011, 12h58

Bonjour,

Code css :

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

1
2
3
4
5
6
7
8
9
.box {
  border: 3px solid black;
  background-color:pink;
  width:auto;
/* A SUPPRIMER
  display: table;
  white-space: nowrap;
*/
}

**Golgotha** · 05/04/2011, 13h01

Non.. je veux que mes blocs rose restent à la taille de leurs texte.

**NoSmoking** · 05/04/2011, 13h07

dans ce cas mets la width à 100% et non en auto.

Code css :

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

1
2
3
4
5
6
7
.box {
  border: 3px solid black;
  background-color:pink;
  width:100%;
  display: table;
  white-space: nowrap;
}

**Golgotha** · 05/04/2011, 13h51

Avec le width à 100%, sur chrome ça part en vrille.. sinon ça me remet les div rose à la même taille que les div du dessous sur les autres navigateurs.

Le problème c'est que les div du bas, qui sont tournée, garde leurs "place" horizontal.. il y a une décorrélation du visuel et de la physique de la page HTML.

**NoSmoking** · 05/04/2011, 14h30

Envoyé par Golgotha

Avec le width à 100%, sur chrome ça part en vrille.. sinon ça me remet les div rose à la même taille que les div du dessous sur les autres navigateurs.

Le problème c'est que les div du bas, qui sont tournée, garde leurs "place" horizontal.. il y a une décorrélation du visuel et de la physique de la page HTML.

j'aime bien la définition...

plus sérieusement, il te faut mettre un DOCTYPE Strict, par exemple

Code :

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

**Golgotha** · 05/04/2011, 15h03

Merci

Je veux bien passé en strict mais ça résout pas mon problème

Je voie plusieurs solutions "théorique" mais je n'ai pas la connaissance technique pour savoir si c'est faisable ou pas..

1 - Ignorer la taille de la div du bas.
2 - Positionner les div rose relativement les unes aux autres, dans une sorte de calque..

J'avoue que je commence à pensé que c'est impossible à réaliser..

en fait ça se résume à faire ça en HTML avec 4 div :

[11111][2222222]
[DDDDD[AAAAAAAAAAA]DDDDD]

- la div D commence en même temps que la div 1
- la div A commence en même temps que la div 2
- la div 1 et la div 2 se succèdent sans espace.
- les div A & D peuvent se chevaucher, leurs taille n'a pas d'impact sur les div 1 & 2.

Pour l'instant ce que j'arrive a faire c'est ça :

[11111]................................[2222222]
[DDDDDDDDDDDDDDDDDDDDDD][AAAAAAAAAAA]

Sauf que ensuite je tourne les div D & A

**NoSmoking** · 05/04/2011, 15h24

avec le code suivant

Code html :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<style type="text/css">
body {
  font-family: Verdana, Arial, sans-serif;
 }
.box {
  border: 3px solid black;
  background-color:pink;
  width:100%;
  display: table;
  white-space: nowrap;
}
.com {
  background-color:yellow;
  border: 3px solid black;
  -moz-transform: rotate(90deg) translateY(-40px) ;
  -o-transform: rotate(90deg) translateY(-40px)  ;
  -webkit-transform: rotate(90deg) translateY(-40px)  ;
  transform: rotate(90deg) translateY(-40px) ;
  -moz-transform-origin: 0% 0% ;
  -o-transform-origin: 0% 0% ;
  -webkit-transform-origin: 0% 0% ;
  transform-origin: 0% 0% ;
  display: table;
  white-space: nowrap;
}
 </style>
  <title>css</title>
</head>
<body >
  <div>
  <div style="float:left; border: 1px solid black;">
  <div class=box>DIV-111111</div>
  <div class=com>DIV-2222222222</div>
  </div>
  <div style="float:left; border: 1px solid black;">
  <div class=box>DIV-33</div>
  <div class=com>DIV-44444444</div>
  </div>
  <div style="float:left; border: 1px solid black;">
  <div class=box>DIV-55555555555555555</div>
  <div class=com>DIV-6666666666666666666666</div>
  </div>
  </div>
  </body>
</html>

j'obtiens le résultat que tu attends et ce sur
- SAFARI
- CHROME
- OPERA
la version de mes autres browsers ne prend pas en compte le CCS3

**Golgotha** · 05/04/2011, 15h38

Non, je pense que j'ai du mal a me faire comprendre.. donc voici le résultat que j'obtient avec ton code, et le résultat que je voudrait obtenir :

Résultat obtenu

Les croix rouge que j'ai ajouté sont représentative de ce que je ne veux pas justement, la div du haut ne doit pas prendre la même place que la div du bas.

Résultat Voulu

Voila un montage pour la représentation de ce que je voudrais obtenir, les div du haut sont collé ensemble et ont la taille de leurs texte.

**NoSmoking** · 05/04/2011, 15h56

ajout d'un position:absolute sur la class com

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.com {
  position:absolute;  /* AJOUT */
  background-color:yellow;
  border: 3px solid black;
  -moz-transform: rotate(90deg) translateY(-40px) ;
  -o-transform: rotate(90deg) translateY(-40px)  ;
  -webkit-transform: rotate(90deg) translateY(-40px)  ;
  transform: rotate(90deg) translateY(-40px) ;
  -moz-transform-origin: 0% 0% ;
  -o-transform-origin: 0% 0% ;
  -webkit-transform-origin: 0% 0% ;
  transform-origin: 0% 0% ;
}