[HTML] Localisation dans CMS
Salut à tous,
Je suis en train de bosser sur la nouvelle version de mon CMS. La précédente version découpait le contenu dans différents cadres. Cette technique présentait de nombreux avantages malgré les dires de certains. Toutefois, je suis obligé de passer à .net pour des raisons de sécurité. En conséquence, j'ai redéveloppé une page unique qui recrée le découpage qui existait avec les cadres. Cette technique pose un nouveau problème, il s'agit du système de coordonnées absolues.
En effet, l'éditeur que j'ai créé permet de faire du positionnement absolu d'éléments HTML. Durant l'édition si on positionne un élément par glisser-déplacé, il est référencé en coordonnées absolues par rapport au coin supérieur gauche de la zone d'édition qui est une IFrame
Source HTML visible sur mairies.ezlogicfrance.com
Front Office (Zone en violet = frame principale)
http://www.laurentjordi.net/ClientsF...rontoffice.png
BackOffice (Zone en violet = Iframe d'édition correspondant à la frame principale)
http://www.laurentjordi.net/ClientsF...backoffice.png
Dans ce contexte, les coordonnées absolues ne posent aucun problème. En revanche, lorsqu’on est sur une page seule, si l'éditeur collecte et fixe des coordonnées absolues, elles décalent tous les éléments en haut à gauche.
Ma question est la suivante :
Existe-t-il, à part utilisation d'une IFrame, une possibilité de d'indiquer que tous les éléments HTML se trouvant dans un conteneur voient ses coordonnées Absolues être relatives au container sachant qu'il n'est pas possible de remplacer les position:absolute à l'intérieur du texte html par des position:relative car certains éléments peuvent rester dans le Flux HTML (et donc seraient recouvert par les éléments positionnés)...
Je ne sais pas si j'ai été bien clair, c'est un peu complexe mais c'est assez intéressant de s'y pencher...
D'avance merci pour votre aide...
Laurent
P.S. La version avtuelle est entièrement crossplatform, il est évident que la suivante doit l'être aussi...
comportement différent FF et IE
Re, voila ma maquette :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html style="width:100%;height:100%">
<body style="width:100%;height:100%;margin:0">
<div style="text-align:center;vertical-align:top;border:1px blue solid;width:100%;height:100%">
<div style="height:80px;width:800px;border:1px green solid;text-align:left;">header</div>
<div style="height:24px;width:800px;border:1px darkblue solid;text-align:left;">Menu
haut</div>
<div style="width:800px;height:100%;position:relative;border:1px red solid;text-align:left;">
<p>Coucou texte dans le flux</p>
<div style="position:absolute;top:10;left:10;border:1px orange solid;text-align:left;background-color:yellow"><p>Coucou
texte dans un div en pos absloue</p>
</div>
</div>
<div style="height:24px;width:800px;border:1px darkblue solid;text-align:left;">Menu
bas</div>
<div style="height:17px;width:800px;border:1px darkblue solid;text-align:left;">footer</div>
</body>
</html> |
Je ne comprends pas pourquoi ça ne réagit pas pareil dans FF et IE, une idée ?
++
Laurent
Bon finalement voici la structure parfaite
Grummble...
Bon voici le code qui marche et qui est conforme au XHTML 1.1
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
#global{
margin-left: auto; margin-right: auto;width:800px;
}
</style>
</head>
<body style="margin:0">
<div id=global>
<div style="border-right: #008000 1px solid; border-top: #008000 1px solid; border-left: #008000 1px solid;
width: 800px; border-bottom: #008000 1px solid; height: 80px">
header
</div>
<div style="border-right: #00008b 1px solid; border-top: #00008b 1px solid; border-left: #00008b 1px solid;
width: 800px; border-bottom: #00008b 1px solid; height: 24px">
Menu haut</div>
<div style="border-right: #ff0000 1px solid; border-top: #ff0000 1px solid; border-left: #ff0000 1px solid;
width: 800px; border-bottom: #ff0000 1px solid; position: relative;">
<div style="height: 600px">
<p>
Coucou texte dans le flux</p>
<div style="border-right: #ffa500 1px solid; border-top: #ffa500 1px solid; left: 10px;
border-left: #ffa500 1px solid; border-bottom: #ffa500 1px solid; position: absolute;
top: 10px; background-color: yellow">
<p>
Coucou texte dans un div en pos absloue</p>
</div>
</div>
</div>
<div style="height: 24px; width: 800px; border: 1px #00008b solid;">
Menu bas</div>
<div style="height: 17px; width: 800px; border: 1px #00008b solid;">
footer</div>
</div>
</body>
</html> |
++
Laurent
P.S. Les mecs du W3C sont quand même des malade mentaux... NA !
