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">

Div vertical et horizontale.

CSS

Vue hybride

Discussions similaires

Partager

Partager