Discussion :

[Clorish]

Je voulais juste savoir si il existe un moyen de centraliser certaines valeurs des styles CSS dans des constantes.

Je pense par exemple aux valeurs de tailles (Width/height) et de position (top/left) des divs

[E.Bzz]

Bonjour,
à ma connaissance non.
Mais une class peut être utilisée dans ce but.

Code :

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

1
2
3
4
5
6
7
8
9
.taille {
width:200px;
height:100px;
}
.col1 { color:red;}
.col2 { color:blue;}
...
<div class="taille col1">bleu</div>
<div class="taille col2">rouge</div>

A+

[Clorish]

non mon but serait plutot de definir en entete de CSS une taille globale de ma page et de calculer les tailles des elements interne en fonction de cette taille, genre :

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
 
Page_width = 1000;
menu_width = 200;
 
 
div#menu {
width = menu_width;
}
 
div#sousmenu {
width = menu_width;
}
 
div#body {
width = page_width-menu_width;
}

[Dan_A]

Cela s'appelle du CSS dynamique ou CSS/PHP ou CSS/ASP.
Ce n'est pas forcément une bonne méthode car le fichier CSS doit être interprété et ne peut pas toujours être mis en cache.

[E.Bzz]

non mon but serait plutot de definir en entete de CSS une taille globale de ma page et de calculer les tailles des elements interne en fonction de cette taille

Bien compris, mais à part la soluce serveur ci-dessus, je pense que tu ne peux le faire qu'en JS ... si JS est activé

A+

[Clorish]

snirf .. bon ben faites chaiffer les calculatrices ...

[E.Bzz]

Au cas où (mais pour IE uniquement ), cf. la syntaxe "expression()" utilisée ici :
http://www.amaryllidaceae.org/web-ja...S/IE-fixed.htm

A+

[vacknov]

si j'ai bien compris tu veux definir les valeurs width et height des div en fonction de la resolution de l'écran à partir duquel l'on veut consulter tes pages ?

[E.Bzz]

si j'ai bien compris tu veux definir les valeurs width et height des div en fonction de la resolution de l'écran à partir duquel l'on veut consulter tes pages ?

Mais en CSS !!

[vacknov]

Code :

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

1
2
3
4
5
6
7
8
<head>
<script language="JavaScript">
if((screen.width==1024) && (screen.height==800) ))
 document.writeln('<link rel=stylesheet href="file1.css" type="text/css">');
if((screen.width==800) && (screen.height==600) ))
 document.writeln('<link rel=stylesheet href="file2.css" type ="text/css">');
</script>
</head>

Bien entendu, dans chaque fichier (file1.css et file2.css) serait defini :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
div#menu {
width = menu_width;
}
 
div#sousmenu {
width = menu_width;
}
 
div#body {
width = page_width-menu_width;
}

etant donné que les valeurs ne sont pas les mêmes dans les deux fichiers on peut dire que nous avons des constantes (menu_width, page_width-menu_width...) qui varient en fonction de la resolution de l'écran.

[E.Bzz]

ça serait super, mais la syntaxe
attribut = variable;
n'existe pas en CSS 2.
Et puis tu noteras que tu ne les as pas valorisées ...

A+

[vacknov]

Code :

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

1
2
3
4
5
 
ça serait super, mais la syntaxe
attribut = variable;
n'existe pas en CSS 2.
Et puis tu noteras que tu ne les as pas valorisées ...

Code :

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

1
2
3
4
5
6
div#menu {
width :menu_width;
}
.
.
.

[Clorish]

et ben non, desolé les gars .. ce n'ets aps pour faire du multi reso
Sinon ca serait trop facile

Non ce que je veux c'est faire, comme on le fait avec tout langages de programtion, regrouper certaines valeurs communes pour eviter de modifier toutes les instances le jour ou il faudra les modifier.

Par exemple, par souci d'homogeneite, chaques textes est defini avec la meme police. Bien, plutot que de la specifier a toutes mes classes css, j'aurait aime la definir une fois pour toute, de maniere a ce que je n'ai qu'une seule isntance a modifier "le jour ou".

D'autre part, c'est bien beau les width et les Height, en % et px mais ca ne me permet pas de definir de maniere relative uen ligne de 3 div, les 2 extremités etant identique, et celle du milieu la somme des 2 extremitées moins la largeur totale (pour matcher avec le reste du site). D'autre part, certains divs etant de taille fixe (image) je ne peux pas passer par des % ....

Bref, plutot que de modifier 20 instances ou recalculer toutes les dimentions ... j'aurais aimer automatiser tout ca

Peut etre avec de "l'heritage" ? J'ai entendu ce mot mais je ne sais pas comment m'en servir
Si c'est comme en programation ... ca peut etre bien ...

Sinon poru le texte je duplique mes classes, c'est a dire que je definie une fois ma classe avec jsute les props specialisées, et une fois avec tout un tas d'autres communes, pour definir juste les prop comunes (font)

Je joue aussi sur des classes qui ne specifie que la tailel (width) qu iest transmise avec une autre, dans toutes les balises devant avoir la meme taille .... Bref, bidouille.

[Dan_A]

Pour une fonte, il suffit de l'affecter à body :
body{font-family:"times new roman";color:red;} et tout ce qui n'est pas redéfini utilisera cette famille et affichera le texte (hors liens) en rouge...

[Clorish]

ca c'est effectivement uen bonne idee pour ce cas tres precis

Et je viens de penser a un truc : On peut faire comme pour les images ? lier un fichier php comme style css, dans lequel on fait des echos ?

[Candygirl]

Non ce que je veux c'est faire, comme on le fait avec tout langages de programtion, regrouper certaines valeurs communes pour eviter de modifier toutes les instances le jour ou il faudra les modifier.

Html et css ne sont pas des langages de programmation, donc l'algorithmie, les calculs, tu peux oublier.

Par contre tout l'art d'un montage css est justement d'en faire quelque chose d'efficace que l'on n'ait pas à tout retoucher lors de la modification d'une dimension ou d'une autre. Pour ça, tu peux jouer, par exemple, avec le width d'un block qui occupe tout l'espace à disposition, par défaut et s'il est dans le flux. Un petit exemple (pas le type de montage que je préfère perso):

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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
#conteneur {width:80%;margin:0 auto;}
.largmenu {width:150px;} 
#menu {float:left;background:#F93;}
#menu2 {float:right;background:#6C3;}
#corps {overflow:hidden;}
* html #corps {height:1%;}
 
</style>
</head>
 
<body>
	<div id="conteneur">
		<div id="menu" class="largmenu">menu1</div>
		<div id="menu2" class="largmenu">menu2</div>
		<div id="corps">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur libero orci, convallis sit amet, pretium ut, cursus elementum, metus. Duis eu lacus. Donec malesuada tellus in ipsum. Vestibulum iaculis nisl id ipsum. Cras imperdiet nulla vel lacus. Curabitur rutrum orci a diam. Maecenas justo. Sed sagittis libero ut leo. Curabitur consequat nunc ac enim. Curabitur sed nunc. Sed eget lectus. Vivamus eget diam non arcu tincidunt imperdiet. Nam ipsum nisi, ornare ut, dapibus ut, vulputate vel, orci. Suspendisse volutpat commodo neque. Morbi tincidunt. In hac habitasse platea dictumst. In purus. Curabitur dui nunc, rhoncus in, tempus ac, euismod a, nulla. Morbi tempor nisi at est molestie volutpat. Maecenas bibendum nisl ut tortor.</div>
	</div>
</body>
</html>

Là, tu changes la largeur de ton conteneur, ça suit. C'est un type de montage, il y a pleins de manières différentes d'imaginer les choses en jouant avec les unités (%, px,...), les positionnement; c'est très créatif

Bref, css se rapproche peut-être finalement plus de l'art que de la programmation ?

[Candygirl]

tout ce qui n'est pas redéfini utilisera cette famille et affichera le texte (hors liens) en rouge...

Et que sont les liens si ce n'est une balise dont la couleur du texte est justement redéfinie par les règlages par défaut des navigateurs...

Clorish, autrement tu peux aussi te pencher du côté des sélecteurs en css; il faut juste être attentif que certains ne passent pas sur tous les navigateurs... un avant goût de css3 ici

A lire aussi les notions d'héritage et de cascades

[Clorish]

Merci pour ces infos et precisions.

Par contre je prefere eviter les CSS3 ... question de compatibilité.

[DanielCosta]

Pour une fonte, il suffit de l'affecter à body :
body{font-family:"times new roman";color:red;} et tout ce qui n'est pas redéfini utilisera cette famille et affichera le texte (hors liens) en rouge...

Code :

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

1
2
3
4
5
6
7
8
 
*
{
  font-family:;
  font-size:;
  color:;
  ...
}

c'est là pour ça.