Calcule dans les dimensions

**nico341** · 03/09/2008, 18h25

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

**HiRoN** · 03/09/2008, 18h41

Pour ma part jamais vu ça dans un css... Dormirai moins con si c'est possible...

**nico341** · 03/09/2008, 18h51

En fait je m'explique j'ai 3 colonnes sur une page:
une completement à gauche 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;}

une completement à droite qui a comme css:

Code :

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

#col_right {float:right; 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

#center {float:left; border:1px solid red; height:100%; width:100%;}

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.

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

**c_s_s** · 03/09/2008, 19h38

Bonjour,

Code :

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

div.centre {width:(100%)-200px; height:100%;}

Ca, je pense que ce n'est pas possible.

Pour la disposition de tes blocs, tu peux faire quelque chose comme ça :

Code css :

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

1
2
3
4
 
#col_left {float:left; width:200px; height:100%; background-color:#73afe6;}
#col_right {float:right; width:200px; height:100%; background-color:#73afe6;}
#center {border:1px solid red; height:100%; }

Code html :

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

1
2
3
<div id="col_left">...</div>
<div id="col_right">...</div>
<div id="center">...</div>

De cette façon, le bloc central occupe automatiquement l'espace restant entre les colonnes de gauche et de droite.

**nico341** · 04/09/2008, 10h59

Merci pour ta réponse C_S_S.

Ta solution marche bien sauf si l'on rajoute :

Code :

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

#center {border:1px solid red; height:100%; text-align:center;}

A ce moment la, mon centre se place sous les 2 colonne et non-plus haut milieu.

Une astuce?

**Damouille** · 04/09/2008, 13h30

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

**pop_up** · 04/09/2008, 13h50

Envoyé par nico341

A ce moment la, mon centre se place sous les 2 colonne et non-plus haut milieu.

Sous quel navigateur as tu testé ?

J'ai testé ceci sous IE6 et Firefox 2 et c'est ok :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title>untitled</title>
	<style TYPE="text/css">
	#col_left {float:left; width:200px; height:100%; background-color:#73afe6;}
	#col_right {float:right; width:200px; height:100%; background-color:#73afe6;}
	#center {border:1px solid red; height:100%;text-align:center;}
	</style>
</head>
<body>
<div id="col_left">.s d sd fsdf f..</div>
<div id="col_right">.sdf sdfs ds fsd fsd fsd ..</div>
<div id="center">..sdf sdfsdf.</div>
 
</body>
</HTML>

Si tu veux, tu peux ajouter un overflow: auto; sur le #center.

**Halleck** · 05/09/2008, 09h05

Envoyé par nico341

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

Calcule dans les dimensions

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager