Div vertical et horizontale. [Résolu]

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

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 :

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

Golgotha · 05/04/2011, 15h58

ça y est tu es mon dieu

NoSmoking · 05/04/2011, 16h08

Citation:

Envoyé par Golgotha

ça y est tu es mon dieu

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

05/04/2011, 13h01	#3
Golgotha Modérateur cédric Développeur informatique Inscription : août 2007 Messages : 732 Détails du profil Informations personnelles : Nom : cédric Âge : 27 Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : août 2007 Messages : 732 Points : 1 566 Points : 1 566	Non.. je veux que mes blocs rose restent à la taille de leurs texte. __________________ modérateur webmasters - développements web & php faq jQuery - règles du forum - faqs web mon espace perso Venez participez au deuxième defi Web !
	00

05/04/2011, 13h51	#5
Golgotha Modérateur cédric Développeur informatique Inscription : août 2007 Messages : 732 Détails du profil Informations personnelles : Nom : cédric Âge : 27 Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : août 2007 Messages : 732 Points : 1 566 Points : 1 566	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. __________________ modérateur webmasters - développements web & php faq jQuery - règles du forum - faqs web mon espace perso Venez participez au deuxième defi Web !
	00

05/04/2011, 15h03	#7
Golgotha Modérateur cédric Développeur informatique Inscription : août 2007 Messages : 732 Détails du profil Informations personnelles : Nom : cédric Âge : 27 Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : août 2007 Messages : 732 Points : 1 566 Points : 1 566	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 __________________ modérateur webmasters - développements web & php faq jQuery - règles du forum - faqs web mon espace perso Venez participez au deuxième defi Web !
	00

05/04/2011, 15h38	#9
Golgotha Modérateur cédric Développeur informatique Inscription : août 2007 Messages : 732 Détails du profil Informations personnelles : Nom : cédric Âge : 27 Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : août 2007 Messages : 732 Points : 1 566 Points : 1 566	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. __________________ modérateur webmasters - développements web & php faq jQuery - règles du forum - faqs web mon espace perso Venez participez au deuxième defi Web !
	00

05/04/2011, 15h58	#11
Golgotha Modérateur cédric Développeur informatique Inscription : août 2007 Messages : 732 Détails du profil Informations personnelles : Nom : cédric Âge : 27 Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : août 2007 Messages : 732 Points : 1 566 Points : 1 566	ça y est tu es mon dieu __________________ modérateur webmasters - développements web & php faq jQuery - règles du forum - faqs web mon espace perso Venez participez au deuxième defi Web !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email