|
"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>
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
Discutez en sur 
[