français

a/X web 2 development

CSS est un langage de spécification de style, interprété par les navigateurs clients.

L'utilisation des feuilles de style, permet de modifier l'apparence d'une page web, et plus généralement de tout un site, sans toucher au contenu. C'est particulièrement utile si le contenu est généré dynamiquement.

C'est malheureusement une source de casse-tête pour le webmestre à cause de la disparité dans la manière dont les navigateurs interprètent les règles de styles. Pire encore, certaine partie de la spécification sont parfois complètement ignorées. C'est la spécialité d'Internet Explorer, véritable punition du webmestre.

Le sélecteur ci-dessous permet de changer le style du site à la volée. Il utilise javascript pour modifier la feuille dans la page active, et une requête Ajax pour changer le réglage globalement pour tout le site.

Note : La feuille de style "menu horizontal" n'est pas ajustée pour IE6

views/a_x.css

/* @override 
	http://10.37.129.2:8888/~max/a_X/a_X/views/a_x.css
*/

html {
	background: url(logo.png) no-repeat left top;
}

body {
	margin: 0;
	font: 12px Verdana, sans-serif;
	color: #360042;
}

#lang {
	position: absolute;
	top: 1em;
	left: 120px;
	margin: 0;
}

#lang a {
	color: gray;
}

#lang a:hover {
	color: #360042;
}

object#fond_logo {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	/*border: 1px solid orange;*/
}

h1, h2, h3, h4 {
	font-family: Futura, "Trebuchet MS", Verdana, sans-serif;
}

h1#titre_page {
	white-space: nowrap;
	margin: 30px 1em 50px 400px;
	height: 60px;
	font-size: 2.5em;
	font-weight: normal;
}

span.a_X {
	color: #FF7C00;
	font-size: 1.5em;
}

code, samp, pre.code, .masque pre {
	color: #014a63;
	font-family: courier;	
	font-size: 1.1em;
}

code {
	font-weight: bold;
}

.masque, pre.code {
	clear: both;
	overflow: auto;
	border: 1px solid #740e00;
	padding: 1em;
}

abbr {
	cursor: help;
	color: #014a63;
	font-weight: bold;
	font-style: italic;
}

#menu {
	width: 400px;
	height: 28em;
	min-height: 250px;
	float: left;
	position: relative;
	margin-bottom: 1.5em;
	margin-right: 11em;
	z-index: 1;
	/*position: absolute;
	left: 450px;
	top: 180px;*/
}

#menu_g {
	/*right: 0;*/
	left: 400px;
	font: 1.1em Futura, "Arial Narrow", "Helvetica Neue", sans-serif;
}

#menu a {
	text-decoration: none;
	white-space: nowrap;
	color: #a6a6a6;
	/*display: inline-block;*/
	width: 100%;
}

ul.hop_menu {
	background: #740e00;
	color: #bfbfbf;
}

ul.hop_menu li:hover {
	background-color: #360042;
}

ul.hop_menu li.actif {
	background-color: #ff7c00;
}

#menu li.actif a {
	color: #420050;
}

div#travail {
	/*position: absolute;
	top: 400px;*/
	margin: 2em;
	margin-left: 190px;
	/*margin-left: 65px;*/
}

#travail .contrib {
	color: #420050;
	text-shadow: #ff7c00 0 0 1em;
	font-weight: bold;
	white-space: nowrap;
}

#travail>h3 {
	margin-left: -60px;
}

#travail h5 {
	/*margin-left: -2.5em;*/
}

.encart {
	padding: 0 1em;
	border-right: 1em solid #740e00;
}

div.centre {
	margin-left: 400px;
	width: 16em;
	/*display: table;
	margin: 0.5em auto;*/
}

dl.ligne {
	white-space: nowrap;
}

dl.ligne dt {
	padding-right: 1em;
	font-weight: bold;
	margin-top: .5em;
	color: #bfbfbf;
}

dl.ligne dd {
	margin-top: .2em;
	/*padding-left: 3em;*/
	/*display: inline;*/
}

#travail em {
	font-weight: bold;
	font-style: italic;
}

#travail h2 {
	color: #3f3f3f;
	font-size: 1.5em;
}

#travail dt {
	font-weight: bold;
	margin-top: 1em;
	color: #3f3f3f;
}

#travail dd {
	margin-bottom: .5em;
	margin-top: .5em;
}

#travail a {
	color: #360042; /*IE!!*/
	/*color: inherit;*/
}

#travail ul li {
	margin-top: .5em;
	line-height: 1.4em;
}

.masque h3 {
	border-bottom: 1px solid #740e00;
	border-right: 1px solid #740e00;
	display: inline-block;
	padding: .5em 1em;
	margin: -1em 0 1em -1em;
}

p img, dd img {
	vertical-align: bottom;
	border: none;
}

.glissable p {
	cursor: move;
}

.glissable p a {
	cursor: pointer;
}

.clear {
	clear: both;
}

div.toc {
	margin-left: 210px; /*400 -190*/
	padding-left: 11em;
	font-weight: bold;
}

.toc ul {
	margin:  0;
	padding-left: 2em;
	list-style-type: none;
}

.toc>ul {
	padding: 0;
}

.toc a {
	text-decoration: none;
}

#travail .toc ul li {
	margin: 0;
}

.fold, .no_fold {
	padding-left: 2em;	
}

.fold {
	margin-top: -2.5em;
	margin-bottom: 0;
	padding-top: 2em;
	overflow: hidden;
	height: 0;
}

.fold:hover {
	height: auto;
	overflow: auto;
	padding-bottom: 1em;
}

#travail a.download {
	display: block;
	position: relative;
	float: right;
	padding:  1em;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	background-color: #420050;
	text-decoration: none;
	color: #ff7c00;
	font-weight: bold;
	margin-bottom: 1em;
}

.download .contrib {
	color: inherit !important;
}

.pied {
	text-align: center;
	margin-top: 2em;
}

.dmsq {
	cursor: pointer;
}
	

views/a_x-h.css

/* @override 
	http://127.0.0.1:16080/~max/a_X/a_X/views/a_x-h.css
	http://10.37.129.2:8888/~max/a_X/a_X/views/a_x-h.css
*/

@import url("a_x.css");

#menu {
	float: none;
	width: 100em;
	height: 4em;
	margin-bottom: 1em;
	margin-right: 0 !important;
	min-height: 85px;
	/*
	left: 450px;
	top: 180px;*/
}

#menu_g {
	white-space: nowrap;
	left: 270px;
	top: 10px;
}

#menu_g > li {
	display: inline;
}

#menu_g > li > ul.hop_menu {
	position: absolute;
	left: 0;
	top: 100%;
}

#travail {
	margin-left: 220px !important;
}

#menu_g > li + li {
	border-top: none;
	border-left: .15em solid gray; /* (1) */
}

#menu_g > li.has_sub_menu {
	background-image: url(../../hop/widgets/grey_down.gif);
	z-index: 1; /*opera*/
}

#menu_g {
	height: 1.85em; /* (2) */
}

#menu_g > li {
	top: .35em; /* (2) */
}

#menu_g > li > ul.hop_menu {
	margin-left: -.15em; /* (1) */
	/*margin-top: -.15em;  (1) */ /* (2) */
	/*min-width: 100%;*/
	z-index: 2; /*opera*/
}
	

views/a_x.js

Event.observe(window,'load', masquer);

function masquer() {
	$A(document.getElementsByClassName('masque')).each(function (e_cour) {
		Element.hide(e_cour);
		Event.observe(e_cour, 'click', function () { Element.hide(e_cour) });
	});
}

// var hop_menu_css;
function change_style(selection) {
	// if (hop_menu_css == undefined) hop_menu_css = $('hop_menu').href;
	$('feuille_style').href = selection;
	if (selection != 'views/vide.css') $('hop_menu').href = 'views/hop_menu_IE6.css';
	else $('hop_menu').href = 'views/vide.css';
	new Ajax.Request('set_style.php?style=' + selection);
}

function dmsq(el) {
	new Ajax.Updater(el, 'dmsq.php');
}
	

Valid XHTML 1.0 Strict