Adaptation automatique à la rédsolution de l'ecran

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

Elsa a écrit :Bon, il serait temps que je me préoccupe des dimensions des pages:
Elsa, la dimension de la page est la première chose dont tu dois te préoccuper quand tu fais un site, avant tout contenu.

Il faut dès le départ te dire:
quel aspect vais-je donner à mon site?
en-tête, une colonne à droite, un conteneur central et un pied de page? ou une colonne de chaque coté du conteneur central?
Quelle sera la taille de l'affichage?
> adaptable à l'écran?
> fixe? si fixe, visible sans barre de navigation horizontale par quel écran minimum.

Si tu te poses ces questions une fois le site commencé, tu risques de reprendre beaucoup de choses car ce que tu auras fait ne s'adaptera pas forcement à la dimension que tu décideras ensuite.

cette page: http://css.alsacreations.com/Modeles-de ... age-en-CSS te montre un certain nombre de mises en page fixes ou fluides: c'est une bonne base de départ.
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
dle

Adaptation automatique à la résolution d'écran

Message par dle »

Bonjour à tous,

Je vous prie de m'excuser si la question vous paraît triviale, mais je débute.

Pour résoudre le problème évoqué ici (d'ailleurs le rendu est différent entre IE et FF), je comptais utiliser la solution donnée par Kristof le 1er mars avec une <div id="global">.
Or, mon premier code après le </head> est un <body style="...........

Je ne sais donc pas comment intégrer le code <div id="global">, car je n'ai pas de "vraie" balise <body>. J'ai essayé plusieurs choses "à la sauvage", car je ne maîtrise pas les connaissances html de base, mais sans succès ; en fait, mes pages se retrouvent pertubées dans mes tentatives.

Merci de bien vouloir aider un néophyte.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; i-NavFourF; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

:?: Est-ce que tu as lu les réponses données à krystof? :!:
et peux-tu copier-coller ici ta page de code?
(je repasserai sur ce sujet, plus le temps là)
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Adaptation automatique à la résolution d'écran

Message par Ymai »

dle a écrit : car je n'ai pas de "vraie" balise <body>
Alors là, j'aimerais voir le code.
> Onglet Source > Tout sélectionner
> Copier
> Coller ici dans une zone "Code"

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

Bien sûr que si, tu as une vraie balise body. Seulement, à cette balise ont été attaché des styles internes.
Ta balise body se termine donc après le >. tu dois avoir quelquechose comme:

Code : Tout sélectionner

<body style="color: rgb(255, 153, 0); background-color: rgb(204, 204, 204);">
Tout ce code représente la balise body + dans le cas présent:
color: tout ce qui est écrit dans le body sera orange
background-color: le fond du corps de la page sera gris clair
Evidemment, après Style, tu dois avoir autre chose, mais c'est la même construction.

En wysiwyg (cas de Kompozer), pour avoir un div dans le body,
1- dans une page neuve, il suffit que tu mettes ton curseur en cliquant tout en haut de ta page, puis dans la liste déroulante de la barre de menu où apparaît corps de texte, tu choisis conteneur générique (tout en bas de la liste)
2- Dans une page déjà commencée, il faut passer par le code source (quelqu'un a-t-il une autre solution?):
Juste après la fermeture de <body> (soit après le >), tu ajoutes

Code : Tout sélectionner

<div>
et juste avant </body> en toute fin de document, tu ajoutes

Code : Tout sélectionner

</div>
Pour attribuer l'identifiant "global" préalablement défini dans la feuille de style, il suffit de cliquer (bouton droit)sur <div> situé juste à côté de <body>dans la barre de tâches (en bas de ton écran) puis "id" puis "global"
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
krystof
Lézard vert
Messages : 155
Inscription : 01 mars 2007, 10:35

Message par krystof »

Mongo bob, la solution que j' ai proposée fonctionne parfaitement ( ce n' est pas moi qui l' ai inventée ) alors arrêtes un peu....ton cinéma :lol:
Kpz peut bugger si on edite le code source ? très bien.
est-ce que j' ai dis de modifier le code source avec Kpz ? non , alors fin de discussion. :evil:
Donc, dle, tu peux suivre ce que te dit Chinon, ou tu peux faire plus simple, plutôt que de saisir uniquement <div> après <body style="etc, etc...> tu saisis directement <div id="global">
ce qui signifie que tu vas créer un bloc qui s' appelle global.
n' oublie pas de mettre le </div> avant le </body>
ça ne va pas marcher tout de suite car tu dois définir les dimensions de ce bloc global.
et avant ça, pour le style on doit savoir si tu passes par une feuille de style externe ou si tu fais ça directement avec KPZ un peu à l' arrache ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322; IE7-01NET.COM-1.1; IE7-01NET.COM-1.1)
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

chinon37 a écrit :2- Dans une page déjà commencée, il faut passer par le code source (quelqu'un a-t-il une autre solution?):
Dans l'onglet "Normal", Ctrl+A (sélection de l'ensemble de la page)
> Insertion > Code HTML
Insérer <div> au début et </div> à la fin

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
dle

Message par dle »

Bonjour à tous,

Et merci de vous intéreser à mon cas !

1. J'ai compris que mon body commençait à <body style...>
2. J'ai vu comment insérer le <div id...>
3. J'ai fait un rapide essai (en mettant le #global dans ma feuille de style) : l'adaptation semble fonctionner, mais ma page originelle est perturbée. Mon menu (gauche) n'est plus fixe (en hauteur) et ma zone de texte est décalée. Je pense donc qu'il y a maintenant un problème de cohérence entre le body et le #global de ma feuille de style, mais aussi avec le <body style...>. Je n'arrive pas à caler tout ça.

A noter que je suis parti d'un modèle d'Alsa création avec 2 menus fixes que j'ai modifié comme j'ai pu. J'ai complété tout cela par diverses choses glanées sur le Net.
J'utilise Kpz et je me suis risqué (sans être toujours sûr de moi) à quelques modifications directement dans le source de Kpz, au moins pour extraire ce qui me paraissait inutilement conservé (ex : des <div.../div> sans rien entre ou plusieurs balises successives identiques) après des modifcations enchaînées en mode "Normal". J'ai essayé de mettre en oeuvre les feuilles de styles.

Au point où j'en suis, je voudrais retrouver ma page telle qu'elle est aujourd'hui en injectant l'adaptation de résolution. Je me suis rendu compte d'ailleurs qu'elle ne semble nécessaire que pour IE (j'ai une barre de défilement horizontale tant que ma page ne recouvre pas presque tout mon écran 1280x800) alors que pour FF, la barre de défilement n'apparaît que quand je suis dans une taille de fenêtre inférieure à la taille utile de ma page, c'est-à-dire la largeur de mon menu fixe haut.

Pourrai-je avoir les modifications à apporter à mon code (voir ci-dessous) pour, tout en ayant le même rendu :
A. Intégrer le <body style .....................> dans ma feuille de style.
B. Insérer l'adaptataion de la résolution d'écran.

Ma feuille de style actuelle:/

Code : Tout sélectionner

* Generated by KaZcadeS */

body {
  margin: 200px;
  padding: 0;
  color: #ffff00;
  font-weight: bold;
  text-decoration: none;
  background-color: #0070c0;
}
html > body {
  color: #ffff00;
  font-weight: bold;
  background-color: #0070c0;
  text-decoration: none;
}
.content {
  border-width: 20px;
  height: 100%;
  overflow: auto;
  color: #ffff00;
  font-weight: bold;
  background-color: #0070c0;
  margin-right: 0px;
  text-decoration: none;

}
.menu1 {
  border-top: 0px solid #00aff0;
  position: absolute;
  top: 0;
  left: 0;
  color: #00aff0;
  font-weight: bold;
  height: 768px;
  width: 170px;
  text-decoration: none;
  font-weight: bold;
  background-color: #002060;
}
body > .menu1 {
  position: fixed;
  color: #00aff0;
  font-weight: bold;
  background-color: #002060;
  text-decoration: none;
}
.menu2 {
  border: 0px solid #00aff0;
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  color: #00aff0;
  font-weight: bold;
  background-color: #002060;
  text-decoration: none;
  width: 1024px;
  visibility: visible;
  margin-left: 170px;
}

body > .menu2 {
  position: fixed;
  color: #00aff0;
  font-weight: bold;
  background-color: #002060;
  text-decoration: none;
}

.boite {
  border: 2px solid black;
  width: 20%;
  height: 100%;
  color: #ffff00;
  font-weight: bold;
  background-color: #0070c0;
  text-decoration: none;
}

a {
  border: 2px solid #002060;
  font-weight: bold;
  background-color: #002060;
  color: #00aff0;
  text-decoration: none;
}

a:hover {
  border: 2px solid #00aff0;
  font-weight: bolder;
  color: #002060;
  background-color: #00aff0;
  text-decoration: none;
}
Ma page de code actuelle:/

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html
 template="true"><head><link rel="shortcut icon"
 href="http://perso.orange.fr/promotion.koenig/icones/favicon.ico"><style><!--
BODY{ cursor:url("icones/insigne.cur"); }
-->
</style><meta content="text/html; charset=ISO-8859-15"
 http-equiv="content-type"><title>Promotion Général
KOENIG_page</title><meta name="description"
 content="Site de la promotion général koenig 1970 1971 de l'école militaire interarmes"><meta
 name="keywords"
 content="promotion, école miltaire interarmes, général koenig, association promotion général koenig, emia"><meta
 name="robots" content="index,follow"><meta
 content="G. DELLE LUCHE webmestre du site de la promotion Général KOENIG"
 name="author"><meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1"><link
 rel="stylesheet" type="text/css" href="style_page.css">
<meta content="Page de démarrage" name="description"></head><body
 style="margin-top: 60px; height: 100%; margin-left: 200px; width: 824px;"
 alink="#00aff0" link="#ffffff" vlink="#fe00fe"><div
 style="text-align: right; margin-left: 170px; width: 884px; color: rgb(255, 255, 0);"
 class="menu2"><a href="javascript:history.back();"><img
 title="Retour à la page précédemment affichée"
 style="border: 0px solid ; width: 80px; height: 36px;"
 alt="images/bouton_precedent.gif"
 src="images/bouton_precedent.gif" align="middle"
 vspace="2"></a></div>
<div style="text-align: center;"><b
 style="font-family: Century Gothic;">A
</b></div><br><div style="text-align: center;"
 class="menu1"><b style="font-family: Georgia;"><br><a
 href="tradi_koenig.html">Promotion<br>Général
KŒNIG</a>
<small><small><br><br><a
 href="tradi_emia.html">École
Militaire Interarmes<br>1970
- 1971</a><br><br></small></small></b>
<small><a href="tradi_insigne.html"><img
 src="images/insigne_koenig_bandeau.jpg"
 title="Insigne de la promotion Général KOENIG"
 alt="images/insigne_bandeau.jpg"
 style="border: 0px solid ; width: 80px; height: 206px;"
 vspace="2"></a></small><dl
 style="text-align: left;"><dd
 style="font-family: Century Gothic; margin-left: 20px; width: 150px;"><small><font
 size="-1"><a href="accueil.html">Accueil</a><br>
<a href="tradi.html">Les traditions</a><br>
<a href="assoc.html">L'association</a><br>
<a href="promo.html">La promotion</a><br>
<a href="albums.html">Les albums photos</a><br>
<a href="reserve.html">Réservé membres</a><br>
<a href="liens.html">Liens recommandés</a><br><br>
<a href="contacts.html">Les contacts</a><br>
<a
 href="javascript:window.external.AddFavorite('http://perso.orange.fr/promotion.koenig')">Ajouter
aux favoris</a>
</font></small></dd></dl><small><b
 style="font-family: Century Gothic;"><script
 type="text/javascript">
<!--
function mesure(_MesurePro, _page)
{ scr_w = screen.width;
scr_h = screen.height;
color = screen.colorDepth;
ref = escape(window.document.referrer);
document.write('<img src="http://www.direct-stats.com/logs/webmestrekoenig/75dCjaHrTL5rh/marqueur.php?page='+_page+ '&n='+ Math.round (Math.random () * 1000000000000000)+ '&reso_w='+ scr_w+ '&reso_h='+ scr_h+ '&color='+ color+ '&referer='+ ref+'" style="border:0px;" />');
}
mesure("Mesure Pro", "page.html");
-->
</script></b></small></div></body></html>
Vous remerciant par avance pour votre précieuse aide.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; i-NavFourF; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

>Ymai : est-ce que le Crozes-Hermitage 2004 peut remplacer la Chimay, en l'occurence? C'est tout ce que j'ai pour l'instant.


Mais que c'est dur!... :evil:

(je m'excuse pour les autres)
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Mongo Bob a écrit :>Ymai : est-ce que le Crozes-Hermitage 2004 peut remplacer la Chimay, en l'occurence? C'est tout ce que j'ai pour l'instant.
Mais que c'est dur!... :evil:
(je m'excuse pour les autres)
De chez Chapoutier?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

Ben non... cave de Tain, 26600 Tain, remarque ça a l'air de marcher quand même...




(tiens, les smileys marchent plus chez moi...)
Win:Kpz version 0.7.10 (20070831)
Ubuntu:Kpz v 20090206
2 tutos :
http://josar.free.fr/index.html
http://info.sio2.be/kpz/
1 nécessité :
http://www.geckozone.org/forum/viewtopic.php?t=51228
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

dle a écrit : Vous remerciant par avance pour votre précieuse aide.
Mmmmhhhh.... Je crains que ce soit un assez gros travail. D'abord analyser l'ensemble du code puis trouver les causes des soucis et finalement proposer des corrections.
Il serait possible de réduire la première étape en simplifiant tout ce qui peut être simplifié: supprimer tout ce qui n'est pas strictement nécessaire. Et le mieux placé pour faire ce travail est quelqu'un qui a déjà un peu bidouillé la page.

Les remerciements sont donc un peu prématurés à mon endroit...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
dle

Message par dle »

Bonjour à tous,

Au vu de la réaction d'Ymai, j'ai remis le couvert et retrempé mes doigts dans la soupe (pour le vin, moi je marche au Beaujolais) !
J'ai donc réussi à faire un peu de ménage (j'ai fait la découverte de Notepad++ qui m'a permis au moins d'avoir une visualisation plus confortable que celle de mon bloc-notes ; en attendant d'en connaître plus sur NotePad++ ?) : la méthode de la découverte !
J'ai mis en css d'autres choses, en particulier le style intégré dans mon <body style....>. J'ai aussi réagencé l'ordre du code pour avoir successivement le texte "utile", le menu1 (fixe gauche) et le menu2 (fixe haut). Je suis ensuite passé par le W3C validation service pour le code et la css.
A partir de là, j'ai essayé à nouveau la solution "du div global" de Kristof. J'ai tout d'abord mis le #global dans la css, calé à 824px pour être certain de voir s'il y avait un effet.
J'ai inséré le <div id="global> en tête de body.
- Si je mets le</div> en fin de body : pas d'effet visible sous IE sur la barre de défilement et mes menus 1 et 2 ne sont plus fixes en défilement vertical.
- Si je mets le </div> avant les "appels" aux menus : les menus sont fixes, mais il n'y a toujours pas d'effet visible sur la barre de défilement horizontale.
Je ne sais pas quoi tenter d'autre.
Si le coeur vous en dit :


Ma feuille de style (avec le #global intégré)

/* Generated by KaZcadeS */

#global
{
width:824px;
margin:0 auto;
}

body {
margin: 200px;
padding: 0;
color: #ffff00;
font-weight: bold;
text-decoration: none;
background-color: #0070c0;
cursor:url("icones/insigne.cur");
margin-top: 60px;
height: 100%;
margin-left: 200px;
width: 824px;
}
html > body {
color: #ffff00;
font-weight: bold;
background-color: #0070c0;
text-decoration: none;
}
.content {
border-width: 20px;
height: 100%;
overflow: auto;
color: #ffff00;
font-weight: bold;
background-color: #0070c0;
margin-right: 0px;
text-decoration: none;

}
.menu1 {
border-top: 0px solid #00aff0;
position: absolute;
top: 0;
left: 0;
color: #00aff0;
font-weight: bold;
height: 768px;
width: 170px;
text-decoration: none;
font-weight: bold;
background-color: #002060;
}
body > .menu1 {
position: fixed;
color: #00aff0;
font-weight: bold;
background-color: #002060;
text-decoration: none;
}
.menu2 {
border: 0px solid #00aff0;
position: absolute;
top: 0;
left: 0;
height: 40px;
color: #00aff0;
font-weight: bold;
background-color: #002060;
text-decoration: none;
width: 1024px;
visibility: visible;
margin-left: 170px;
}

body > .menu2 {
position: fixed;
color: #00aff0;
font-weight: bold;
background-color: #002060;
text-decoration: none;
}

.boite {
border: 2px solid black;
width: 20%;
height: 100%;
color: #ffff00;
font-weight: bold;
background-color: #0070c0;
text-decoration: none;
}
a {
border: 2px solid #002060;
font-weight: bold;
background-color: #002060;
color: #00aff0;
text-decoration: none;
}
a:hover {
border: 2px solid #00aff0;
font-weight: bolder;
color: #002060;
background-color: #00aff0;
text-decoration: none;
}

Mon code (les <div id="global> et </div> ne sont pas insérées)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="shortcut icon"
href="http://perso.orange.fr/promotion.koenig ... avicon.ico">
<meta content="text/html; charset=ISO-8859-15"
http-equiv="content-type"><title>Promotion Général KOENIG_page</title><meta
name="description"
content="Site de la promotion général koenig 1970 1971 de l'école militaire interarmes"><meta
name="keywords"
content="promotion, école miltaire interarmes, général koenig, association promotion général koenig, emia"><meta
name="robots" content="index,follow"><meta
content="G. DELLE LUCHE webmestre du site de la promotion Général KOENIG"
name="author"><meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"><link rel="stylesheet"
type="text/css" href="style_page.css">
<meta content="Page de démarrage" name="description">
</head>
<body>
<div style="text-align: center;"><b style="font-family: Century Gothic;">Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa Aaaaaaaa
</b>
</div>
<br>
<div style="text-align: center;" class="menu1"><b
style="font-family: Georgia;"><br><a href="tradi_koenig.html">Promotion<br>Général
KŒNIG</a>
<small><small><br><br><a href="tradi_emia.html">École
Militaire Interarmes<br>1970
- 1971</a><br><br></small></small></b>
<small><a href="tradi_insigne.html"><img
src="images/insigne_koenig_bandeau.jpg"
title="Insigne de la promotion Général KOENIG"
alt="images/insigne_bandeau.jpg"
style="border: 0px solid ; width: 80px; height: 206px;" vspace="2"></a></small><dl
style="text-align: left;"><dd
style="font-family: Century Gothic; margin-left: 20px; width: 150px;"><small><font
size="-1"><a href="accueil.html">Accueil</a><br>
<a href="tradi.html">Les traditions</a><br>
<a href="assoc.html">L'association</a><br>
<a href="promo.html">La promotion</a><br>
<a href="albums.html">Les albums photos</a><br>
<a href="reserve.html">Réservé membres</a><br>
<a href="liens.html">Liens recommandés</a><br><br>
<a href="contacts.html">Les contacts</a><br>
<a
href="javascript:window.external.AddFavorite('http://perso.orange.fr/promotion.koenig')">Ajouter
aux favoris</a>
</font></small></dd></dl><small><b style="font-family: Century Gothic;">
</b></small></div>
<div
style="text-align: right; margin-left: 170px; width: 884px; color: rgb(255, 255, 0);"
class="menu2"><a href="javascript:history.back();"><img
title="Retour à la page précédemment affichée"
style="border: 0px solid ; width: 80px; height: 36px;"
alt="images/bouton_precedent.gif" src="images/bouton_precedent.gif"
align="middle" vspace="2"></a>
</div>
<script type="text/javascript">
<!--
function mesure(_MesurePro, _page)
{ scr_w = screen.width;
scr_h = screen.height;
color = screen.colorDepth;
ref = escape(window.document.referrer);
document.write('<img src="http://www.direct-stats.com/logs/webmes ... ge='+_page+ '&n='+ Math.round (Math.random () * 1000000000000000)+ '&reso_w='+ scr_w+ '&reso_h='+ scr_h+ '&color='+ color+ '&referer='+ ref+'" style="border:0px;" />');
}
mesure("Mesure Pro", "page.html");
-->
</script>


</body></html>

Je vous promets de boire un coup à votre santé, pour vous remercier d'une solution, sinon pour votre attention.[/u][/i][/b]

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; i-NavFourF; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

J'ai simplifié à l'extrême:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
  <style>
body {
margin: auto;
padding: 0;
color: #ffff00;
font-weight: bold;
background-color: #0070c0;
height: 100%;
margin-left:200px;
}
  </style>
  <meta content="text/html; charset=ISO-8859-15"
 http-equiv="content-type">
  <title>Promotion Général KOENIG_page</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" type="text/css"
 href="style_page.css">
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. <br>
<br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. <br>
<br>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum. <br>
</div>
</body>
</html>
A partir de là, que faut-il ajouter? Un menu à gauche et un menu supérieur, j'imagine?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20061201 Firefox/2.0.0.6 (Ubuntu-feisty)
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
dle

Message par dle »

Bonsoir Ymai,

Je n'avais pas bien compris ce qu'il fallait simplifier et je vous prie de m'en excuser. C'est pourquoi le code de mon dernier message comporte beaucoup de choses superflues pour trouver une solution.

Ceci étant, ma feuille de style, rappelée dans mon dernier message, comporte déjà le style du body et les styles des menus gauche (menu1) et menu haut (menu2). En fait, il s'agit de deux zones à fixer.
Dans votre page de code ci-dessus, il suffit donc de les "appeler" (je ne sais pas si c'est le bon terme) par <div class="menu1"> et <div style="margin-left: 170px; width: 884px;" class="menu2";> (pour ce dernier, je me rends compte maintenant que, peut-être, une partie aurait pu être mise aussi dans la CSS, mais je verrai ça plus tard).

En redoublant le texte, on voit bien (IE7 et FF2) que ces zones sont fixes quand on manoeuvre l'ascenseur vertical.
On voit aussi (du moins sur mon écran en 1280x800) que la barre de défilement horizontale ne se comporte pas de la même manière dans les deux navigateurs :
- IE7 : il faut presque atteindre le 1280 pour qu'elle disparaisse.
- FF2 : elle apparaît, non pas dès qu'on réduit en plus petit que le menu (soit 1054) haut, mais quand on atteint la marge du texte (1024).


C'est justement ces problèmes que je comptais éliminer avec le "div global" et avoir, sous IE7 et FF2, une barre de défilement horizontale qui apparaisse au moment où on franchit la limite droite du menu haut (soit inférieure à [170+884=]1054 à l'heure actuelle comme on peut le voir dans le div ci-dessus).
Mais, comme je l'ai dit dans mon dernier message, je n'ai pour l'instant pas trouvé la solution qui le pemette et qui ne défixe pas mes menus.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; i-NavFourF; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités