|
"J'ai le plus grand mal du
monde à faire passer mon site du "tout-table" au
"tout-CSS" - je cherche simplement à garder ma mise
en page sur trois colonnes, la centrale changeant de taille avec le
navigateur. Pourriez-vous me donner une direction à suivre
?"
Un
problème, une interrogation ? Adressez-vous à la rédaction
de JDNet Développeurs
Les
CSS sont de plus en plus prises au sérieux, et à terme
les principaux navigateurs devraient reconnaître parfaitement
cette spécification essentielle du design Web (le plus mauvais
support des CSS parmi les navigateurs modernes semblant malheureusement
être celui du plus répandu, Internet Explorer - mais
tout de même battu à plate couture par Netscape Navigator
4).
Viendra alors le temps où les sites institutionnels et commerciaux
pourront passer sans crainte à un design plus léger,
séparant vraiment le contenu du style, et où les balises
TABLE ne seront plus utilisées pour la mise en page mais
pour les tableaux de données...
Voici un exemple de CSS permettant d'afficher une mise en page des
plus classique : trois colonnes, la colonne centrale étant
"fluide", c'est-à-dire qu'elle s'adapte à
l'espace que lui laissent les deux autre...
A note que notre exemple fait usage du Box
Model Hack pour circonvenir aux limitations de IE... Par ailleurs,
pour que cela fonctionne correctement, la colonne "fluide"
doit être placée après les colonnes "solides"
dans le code HTML.
Le code
<html>
<head>
<style
type="text/css">
body
{
margin:10px
10px 0px 10px;
padding:0px;
}
#colgauche
{
background:lightgrey;
border:2px
dotted black;
position:
absolute;
left:10px;
width:200px;
}
#coldroite
{
background:white;
border:1px
dashed black;
position:
absolute;
right:10px;
width:200px;
}
#colcentrale
{
background:pink;
border:5px
ridge green;
margin-left:
199px;
margin-right:199px;
voice-family:
"\"}\"";
voice-family:
inherit;
margin-left:
201px;
margin-right:201px;
}
</style>
</head>
<body>
<div
id="colgauche">
Je
ne sais pas quoi dire.
</div>
<div
id="coldroite">
...ni,
donc, taper...
</div>
<div
id="colcentrale">
...ni
écrire...
</div>
</body>
</html>
|
Discutez en sur 
[