Div vertical et horizontale.

Version imprimable

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:

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>

http://img838.imageshack.us/img838/363/divm.jpg

Merci d'avance. :ccool:

Bonjour,

Code:

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

05/04/2011, 13h01
Golgotha

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

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

Code:

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

05/04/2011, 13h51
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.
05/04/2011, 14h30
NoSmoking

Citation:

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
05/04/2011, 15h03
Golgotha

Merci ;)

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

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

avec le code suivant

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

05/04/2011, 15h38
Golgotha

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
http://img714.imageshack.us/img714/1421/resobtenu.jpg

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
http://img685.imageshack.us/img685/7631/resvoulu.jpg

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.

ajout d'un position:absolute sur la class com

Code:

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

05/04/2011, 15h58
Golgotha

ça y est tu es mon dieu :ave: :ave: :ave: :ave:

:merci:
05/04/2011, 16h08
NoSmoking

Citation:

Envoyé par Golgotha

ça y est tu es mon dieu :ave: :ave: :ave: :ave:
:merci:

n'exagérons rien, en gros le position:absolute sort l'élément du flux ce qui n'oblige plus le contenant à s'ajuster...