[HTML] Localisation dans CMS

CUCARACHA · 04/08/2007, 12h23

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)

BackOffice (Zone en violet = Iframe d'édition correspondant à la frame principale)

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...

**Candygirl** · 04/08/2007, 13h12

Un petit position:relative sur le conteneur en question devrait règler ton problème, si j'ai bien compris.

CUCARACHA · 04/08/2007, 13h24

Salut,

Le conteneur est un td, donc selon toi, si j'ajoute un style="position:relative" dans le td, toutes les coordonées absolues contenues seront relative au coin supérieur gauche du td ?

J'essaye

++

Laurent

**Candygirl** · 04/08/2007, 13h29

non, si c'est un td (mais il me semble qu'un td n'a pas sa raison d'être ici

), il me semble que cela ne va pas le faire à moins que tu ne lui donnes aussi un display:block.

CUCARACHA · 04/08/2007, 13h37

Re,

Ben non... Voici le code généré...

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<table cellspacing="0" cellpadding="0" border="0" style="border-style:None;border-collapse:collapse;width:100%;height:100%;">
<tr>
    <td rowspan="2" style="width:auto;postion:relative;">
    <!-- Debut du contenu-->
    <DIV>
        <IMG style="LEFT: 7px; WIDTH: 779px; POSITION: absolute; TOP: 7px; HEIGHT: 189px" height=240 src="http://didierdelzor.free.fr/photos/page_visu_haut.jpg" width=1160>
    </DIV>
    <DIV>&nbsp;</DIV>
    <DIV>&nbsp;</DIV>
    <DIV>&nbsp;</DIV>
    <DIV>&nbsp;</DIV>
    <DIV>&nbsp;</DIV>
    <DIV>&nbsp;</DIV>
    <DIV>&nbsp;</DIV>
    <DIV>&nbsp;</DIV>
    <DIV>&nbsp;</DIV>
    <DIV>&nbsp;</DIV>
    <DIV>&nbsp;</DIV>
    <DIV>&nbsp;</DIV>
    <DIV style="LEFT: 286px; POSITION: absolute; TOP: 208px">
        <SPAN style="COLOR: #ff0000">
            <SPAN style="FONT-SIZE: 8pt; COLOR: #ff0000; FONT-FAMILY: Verdana">ARAVO Aventure crée l'événement à Font-Romeu dans les Pyrénées Orientales<BR>avec la première manifestation sportive de l'année et la naissance du :
            </SPAN><BR>
            <SPAN style="FONT-SIZE: 8pt; COLOR: #ff0000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif"><B>
                <SPAN style="COLOR: #ff0000">1er ULTRA TRAIL BLANC EUROPEEN
                </SPAN></B>
            </SPAN>
        </SPAN>
    <SPAN style="FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif"><BR><BR>Station au cœur de la Cerdagne, elle reste le terrain de jeu idéal pour cette <BR>première grande aventure hivernale !
    </SPAN>
</DIV>
</td>
					</tr>
				</table>

j'ai un peu refait l'indentation pour les besoins de la cause

humm...

Et si je mettais un div dans le td, qu'en penses tu ?

++

Laurent

**Candygirl** · 04/08/2007, 13h41

Cf ci-dessus...

Le probème c'est que le display:block risque de perturber ton td... Je ne sais pas vraiment pourquoi un td ne peus pas servir de référence (vraisemblablement un problème de type ? ).

Oui, tu peux, mais la vraie question est plutôt que fait un td ici?

CUCARACHA · 04/08/2007, 13h54

Re,

En fait, le projet est très ancien. En conséquence, la plupart des éléments actuels sont de l'ASP 3.0. Et le répertoire de base est doté d'une application ASP.net 1.1.

ASP.net 1.1 n'aime pas trop les divs, il faut tout gérer à la mano en HTMLGenericControl.

Comme j'ai des clients en prod, je dois migrer progressivement vers l'asp.net2.0.

J'ai trouvé une solution pour faire cohabiter des applications ASP, ASP.net 1.1 et ASP.net 2.0 en jouant sur les ports des applications web. Ca a l'air de marcher. En conséquence, ce que j'appelle les briques logicielles qui sont des applications dans l'application, sont dorénavant développées en ASP.net 2.0 (C#) en revanche, l'existant, c'est à dire, une bonne partie du backoffice et tout la partie commune du cms ne peuvent pas migrer partiellement en 2.0 sans une refonte totale et, étant seul à bosser sur le cœur de l'appli, je dois le faire en parallèle. De plus lorsque la version 3.0 sera prête c'est à dire la version ASP.net 3.0 Ajax, je vais devoir rapatrier toutes les données de mes sites existants sans peter la structure et certains sont gros (Site de la mutuelle de LCL plus de 120 pages) je n'ai pas le droit à l'erreur. Donc j'avance step by step sur des œufs... (un pu comme dans la salle des œufs de LBRS a WOW

).

Voilà l'histoire... et fo faire avec...

++

Laurent

**Candygirl** · 04/08/2007, 14h12

Envoyé par Laurent Jordi

(un pu comme dans la salle des œufs de LBRS a WOW

).

Oui mais tout dépend de tes skills et du stuff de ton groupe. Et pis au lvl 70, ça ne pose plus de problème

(Mais pourquoi quand je décroche un mois y a toujours un site, une parole qui m'y ramène ?!!

)

Enfin bref, s'il est vrai que les migrations d'une version de cms à une autre plus moderne est délicate, du moment que tu modernises, je trouve dommage de ne pas profiter de virer la structure de mise en page en tableau.

CUCARACHA · 04/08/2007, 14h17

Mouerf... Je peux essayer mais j'avoue mieux maitriser la structure en tableaux que celle en divs, notamment à cause de la proportionnalité...

Si tu me garantie qu'en passant à des divs je règlerais mon problème (et que je ne coderais pas durant 2 jours pour rien) je fonce...

Quoi que je peux tester sur une mini maquette...

++

Laurent

CUCARACHA · 04/08/2007, 14h40

Re, voila ma maquette :

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
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

**Candygirl** · 04/08/2007, 14h49

Envoyé par Laurent Jordi

Je ne comprends pas pourquoi ça ne réagit pas pareil dans FF et IE, une idée ?

Le premier élément est ton doctype. Tu devrais passer à un doctype "moderne" et complet afin que IE interprète ton code en mode (quasi) standard et réagisse plus en adéquation avec les standards.

Passer en montage css plutôt qu'en tableaux te demandera un gros investissement en temps et pratique jusqu'à ce que tu aies un niveau suffisant pour maîtriser correctement la problèmatiqe des navigateurs. Perso je pense qu'il est temps de prendre le train en marche et de faire cet effort maintenant que les css sont suffisement implémenté plutôt que de repousser à plus tard l'inéluctable.

CUCARACHA · 04/08/2007, 14h56

Salut,

Compte tenu du travail que représente la création de ce système, je n'ai pas de problème pour faire cet effort.

En fait, le seul problème que j'ai est d'arriver a faire en div EXACTEMENT la même chose que ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<table border=0 cellspacing=0 cellpadding=0 height=100% width=100%>
<tr>
<td height=80px>&nbsp;</td>
</tr>
<tr>
<td height=*>&nbsp;</td>
</tr>
<tr>
<td height=80px>&nbsp;</td>
</tr>
</table>

J'avoue en jamais y être arrivé. Pour le reste je pense que je maîtrise pas trop mal...

D'avance merci pour ton aide,

Laurent

**Candygirl** · 04/08/2007, 16h45

Envoyé par Laurent Jordi

En fait, le seul problème que j'ai est d'arriver a faire en div EXACTEMENT la même chose que ça :

Il est vrai que ce genre de structure n'est pas très facile à mettre en oeuvre à l'aide de css. Voici 2 idées de montage qui s'en rapprocherait:

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
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
html {height:100%;}
* {margin:0;padding:0;}
 
h1,#footer {height:80px; background:red;}
 
body {min-height:100%; position:relative; margin:0;padding:0;}
* html body {height:100%;}
#footer {position:absolute; bottom:0; left:0; width:100%;}
</style>
</head>
 
<body>
<h1>top de 80px</h1>
<div id="cpntenu">contenu</div>
<p id="footer">footer</p>
</body>
</html>

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
17
18
19
20
21
22
23
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
 
* {margin:0;padding:0;}
 
h1,#footer {height:80px; background:red;}
 
#contenu {position:absolute; top:80px;bottom:80px;width:100%; overflow:auto;}
#footer {position:absolute; bottom:0; left:0; width:100%;}
</style>
</head>
 
<body>
<h1>top de 80px</h1>
<div id="cpntenu">contenu</div>
<p id="footer">footer</p>
</body>
</html>

Le poblème de cette 2ème version est que IE6 ne sait pas calculer la hauteur du #content avec le top et le bottom, ce qui pourrait être fait en javascript.

En fait c'est plutôt que ce type de montage n'est finalement peut-être pas très intéressant pour plusieures raisons.

D'abord, il n'est pas bienvenu de donner une hauteur fixe en pixels si le top et le footer contiennent du texte (résultat catatrophique en cas d'agrandissement de la police). Ensuite, on peut se poser la question de l'intérêt d'imposer tout le temps le header et le footer plutôt que de laiser place libre au contenu du site qui peux devenir assez restreint sur un 800x600 par exemple (il y en a encore et particulièrement certaines personnes qui gardent volontairement une résolutions faible sur un grand écran pour avoir des carcatères plus gros).

mais bon, c'est mon avis

CUCARACHA · 04/08/2007, 17h00

Re

Autocensuré

++

Laurent

CUCARACHA · 04/08/2007, 17h07

http://eztsmanager.ezlogicmonaco.com/validation.htm

Voila un exemple conforme au CSS validator et au XHTML Validator 1.1 et regades ce fichier dans Firefox et dans IE...

Vous comprendrez mon précédent propo

++

Laurent

P.S. Et je ne vous parle pas sur résultat dans safarie ou opéra (encore qu'opera est peut-etre un des moins pires en ce qui concerne le respect des normes)

CUCARACHA · 04/08/2007, 17h40

Grummble...

Bon voici le code qui marche et qui est conforme au XHTML 1.1

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
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 !

[HTML] Localisation dans CMS

HTML

Discussions similaires

Partager

Partager