Bonjour, j'aurai une question asser simple, est ce possible de faire des calcules dans les dimensions d'une div comme par exemple:
Code : Sélectionner tout - Visualiser dans une fenêtre à part div.centre {width:(100%)-200px; height:100%;}
Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter
Calcule dans les dimensions
Bonjour, j'aurai une question asser simple, est ce possible de faire des calcules dans les dimensions d'une div comme par exemple:
Code : Sélectionner tout - Visualiser dans une fenêtre à part div.centre {width:(100%)-200px; height:100%;}
Pour ma part jamais vu ça dans un css... Dormirai moins con si c'est possible...
Pensez à utiliser les ressources disponibles en Dev. Web :
(x)HTML : Cours (X)HTML / FAQ (X)HTML
CSS : Cours CSS / FAQ CSS / Galerie CSS
Javascript : Cours / FAQ / Sources
Mon site : Développeur Web Freelance
En fait je m'explique j'ai 3 colonnes sur une page:
une completement à gauche qui a comme css:
une completement à droite qui a comme css:
Code : Sélectionner tout - Visualiser dans une fenêtre à part #col_left {float:left; width:200px; height:100%; background-color:#73afe6;}
et une centrale qui devrait prendre toute la largeur restante entre les 2 autres colonnes, j'ai donc mis comme css:
Code : Sélectionner tout - Visualiser dans une fenêtre à part #col_right {float:right; width:200px; height:100%; background-color:#73afe6;}
Mais, avec cette solution il prend toute la largeur après la colonne de gauche et du coup celle droite se retrouve sous celle de gauche.
Code : Sélectionner tout - Visualiser dans une fenêtre à part #center {float:left; border:1px solid red; height:100%; width:100%;}
J'ai donc penser faire en sorte qu'il prenne toute la largeur donc 100% moins la largeur de la colonne de droite (200px).
Mais cette solution est elle envisageable???
Bonjour,
Ca, je pense que ce n'est pas possible.
Code : Sélectionner tout - Visualiser dans une fenêtre à part div.centre {width:(100%)-200px; height:100%;}
Pour la disposition de tes blocs, tu peux faire quelque chose comme ça :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
4
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
De cette façon, le bloc central occupe automatiquement l'espace restant entre les colonnes de gauche et de droite.
Merci pour ta réponse C_S_S.
Ta solution marche bien sauf si l'on rajoute :
A ce moment la, mon centre se place sous les 2 colonne et non-plus haut milieu.
Code : Sélectionner tout - Visualiser dans une fenêtre à part #center {border:1px solid red; height:100%; text-align:center;}
Une astuce?
Le text-align: center, centre les éléments qui sont à l'intérieur de la div. Il n'a normalement aucune influence sur la div elle meme.
Ce comportement est étrange
IConsulting - web consultants Cambodia
Sous quel navigateur as tu testé ?Envoyé par nico341
A ce moment la, mon centre se place sous les 2 colonne et non-plus haut milieu.
J'ai testé ceci sous IE6 et Firefox 2 et c'est ok :
Si tu veux, tu peux ajouter un overflow: auto; sur le #center.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Ok j'ai vu d'ou venait mon problème, j'avais oublié undans #center.
Code : Sélectionner tout - Visualiser dans une fenêtre à part float:left;
Avec l'overflow ca marche nikel le contenu reste bien centré, par contre, quel est la commande pour virer la scroll bar vertical??
Bonjour
Code : Sélectionner tout - Visualiser dans une fenêtre à part overflow:hidden;
Vous souhaitez participer à la rubrique (X)HTML/CSS, contactez moi.
D'après se que je comprend ca n'existe pas en w3c de virer une des 2 scroll.
Mais je pense savoir d'ou vient mon problème.
Pour rendre visible la colonne de droite qui n'a pas de contenu, juste un fond de couleur, j'ai fais:
hors ici le 100% correspond à la taille de l'ecran et si le centre est plus long que l'ecran il le gere comme un overflow et donc il rajoute une scroll.
Code : Sélectionner tout - Visualiser dans une fenêtre à part html, body {width:100%; margin:0px; padding:0px;}
Je pense la seul solution est de mettre une hauteur au 2 colonne ou au body je me trompe?
Si, utilises :
Si ça ne résoud pas ton souci, postes nous ton code, voire une page en ligne...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
2
Voila la page en question, je viens de tester ta solution mais j'ai toujours le même problème, une scroll vertical au centre.
J'aimerai que cette scroll passe sur la page entière, que si j'agrandit en hauteur le centre, la page entière se mets à la bonne taille automatiquement.
Voici ma page:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
Et pourquoi ne pas faire ainsi :
Je sais la présentation n'est pas parfaite, mais je t'ai juste montré le principe, pour le reste tu peux corriger toi même.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
Avec ton système c'est normal que tu ais l'ascenseur sur le div du milieu vu que tu y as mis overflow alors que sa taille est supérieure à celle que tu as indiqué (height: 100%)
Oui lol bonne idée...
Je me casse la tête pour rien la en faite.
Merci de ton aide ;-)
Pour en revenir à la question initialie, oui c'est possible, mais que sous IE (JS) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part width:expression((largeurwindow - 200) + "px");
Zend PHP Certified Engineer, Certifié Symfony2
blog : blog.lepine.pro
Secrétaire de l'AFUP (Association des Utilisateurs de PHP)
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Répondre avec citation
Partager