dimensionner des blocs en %

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

Fabrice.Tres.Net
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Message par Fabrice.Tres.Net »

Mongo Bob a écrit :
Fabrice.Tres.Net a écrit :une simulation en ligne de tous ces pseudo-navigateurs avec http://browsershots.org/
Il ne fonctionne pas bien à 100%, loin de là, je l'ai abandonné car il me refuse mes cop d'éc même quand je clique sur "étendre". .......
Mongo, Merci pour l'info...

Je m'en sers juste pour vérifier globalement que je ne suis pas à la rue avec les étrangetés de IE 6 et 5.5...
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

le header s'affiche bien jaune, avec un height de 25%
à condition que l'on mette body en position absolue ou fixe.
le <body> est le seul élément positionné par défaut, c'est à dire que même si tu le mets en position"non défini", il est quand même positionné, mais on ne peut pas dire si c'est en relative ou autre, puisque le choix de positionnement d'un élément :
  • *dans le flux (= pour Kpz : "non définie")
    *relative;
    *absolute;
ne se révèle que et uniquement par rapport à son placement (je fais exprès de prendre un autre mot que "positionnement") dans la page html, placement qu'il ne va adopter que par rapport aux autres éléments situés avant lui (ou au-dessus de lui où sur sa gauche) dans le code html j'insiste, jamais par rapport aux éléments situés après ou "sous" lui.
Or, tu conviendras que le <body> n'a absolument pas à se placer par rapport à un quelconque autre élément avant lui dans la page html, pour la simple et bonne raison qu'il est le tout premier de la page en question, au niveau de l'affichage direct fourni par le navigateur (n'oublions pas le <head> même si celui-ci inclue des éléments qui vont servir indirectement à l'affichage, comme l'encodage...).
Ce qui signifie, pour répondre à ta question sur le meilleur choix pour le positionnement du <body>, qu'il n'y a aucun intérêt à le positionner, vu que c'est déjà fait, par nature.
Dans l'exemple de Ymai + haut, le <body> était pourvu d'une hauteur, mais il n'était pas en plus, positionné (ou Ymai l'aurait précisé, sûrement) et je ne crois pas que tu sois obligé de fournir cette propriété de positionnement au <body> pour qu'un élément contenu directement (en tant que 1er contenu, on dit : "1er enfant"), par celui-ci et pourvu de dimensions en %, adopte ces dimensions en % par rapport à lui.
Donc, tu devrais obtenir la même hauteur pour le #header : soit, 25% du <body>, en supprimant le "position: absolute" de celui-ci :

Code : Tout sélectionner

body {
  border-width: 0px;
  margin: 0%;
  padding: 0%;
  height: 100%;
  width: 100%;
  }
#header {
 (...)
  height: 25%;
} 
constates-tu le contraire?
Ensuite, pour continuer ma page html, je bloque,
Corps de texte > conteneur générique > ?????
Qqu'un peut-il me tuyauter
là, je comprends pas bien, peux-tu m'éclaircir? As-tu fait une mise en page sur papier, avant tout? Ca sert...
à +... :wink:
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
Invité

Message par Invité »

Pour ce qui concerne le "body"
l'affichage correct de mon #header
ne fonctionne que si je sélectionne absolue ou fixe pour la position dans body.
Avec les autres options relative, non définie ou statique
il s'affiche un bloc jaune de 9 ou 10px de haut sur toute la largeur.

Pour ce qui concerne l'endroit où je bloque,
une fois le header affiché,
je ne sais pas comment continuer dans komposer
pour afficher le bloc #menu.
ça doit être tout bête,
je ne sais pas comment faire pour continuer la page html afin d"afficher ce bloc #menu,
à part cliquer sur source et manuellement écrire <div id="header"></div>,
il doit y avoir une autre manière de procéder.que d'intervenir sur le code source.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr-FR; rv:1.8.1.11) Gecko/20071128 Iceweasel/2.0.0.11 (Debian-2.0.0.11-1)
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

c'est subtil, cette histoire, en effet, tu as raison, j'ai vérifié en chargeant ton style et avec le <body> en position non définie, ton #header n'est plus à 25% de la hauteur de celui-ci.
Note que si tu donnes au <body> une hauteur de 300px (ou 500 ou 800 peu importe), comme dans l'exemple de Ymai, tu peux du coup, le mettre en absolue ou en non défini (ou en relative ou en fixe), ça ne changera rien à la hauteur du <header>, celle-ci sera toujours de 25% du <body>. Ca me rassure un peu, tout ce laïus pour rien...
C'est parce que tu donnes une hauteur de 100% au <body> que la position absolute est obligatoire, en même temps, qu'est-ce que ça signifie qu'une hauteur de 100% pour un <body>, mais bon si ça marche pour toi comme ça...

à part cliquer sur source et manuellement écrire <div id="header"></div>,
il doit y avoir une autre manière de procéder.que d'intervenir sur le code source.
en effet, il faut absolument éviter de taper dans le code source dans l'onglet Source, mieux vaut un éditeur-texte adjoint.
Ensuite, pour continuer ma page html, je bloque,
Corps de texte > conteneur générique > ?????
Qqu'un peut-il me tuyauter
pourquoi la méthode pour créer le 1er div ne marche pas pour un 2ème? Le souci, c'est que je travaille dans un éditeur-texte pour créer mes éléments, et je ne vois pas comment tu fais "Corps de texte, etc..." dans l'interface de Kpz... :?
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
noid
Arias
Messages : 7
Inscription : 26 août 2005, 18:10

Message par noid »

J'essaie de m'expliquer

Quand j'ai établi toutes mes règles css, sur feuille de style liée
pour body #header,#menu #bloc-texte
Je vais dans Corps de texte et tout en bas, il y a conteneur générique (div)
je clique dessus
et tout en bas dans la barre d'état apparaît un div à côté de body
je clique droit sur ce div
une fenêtre s'ouvre avec
Sélectionner
Supprimer la balise
(Modèles)
ID
ses
Styles internes
Propriétés avancées

Et là je clique sur ID
les 3 choix que j'ai définis dans ma feuille de style liée apparaissent: header menu bloc-texte

et je clique donc sur header.

Comment fais-tu toi ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr-FR; rv:1.8.1.11) Gecko/20071128 Iceweasel/2.0.0.11 (Debian-2.0.0.11-1)
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Bonjour
Dans la page, j'écris quatre lignes, sans me poser de questions:

entête
menu
corps de texte
pied de page

Je sélectionne la première ligne; j'ouvre la liste de "Format de paragraphe" (celle qui commence par "Corps de texte") et je sélectionne "Conteneur générique".
Dans la barre d'état, je repère le bloc <div> correspondant. Clic droit > Id > Choisir...

Même chose pour les autres zones.

Mais il y a d'autres techniques possibles.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
noid
Arias
Messages : 7
Inscription : 26 août 2005, 18:10

Message par noid »

Oui, j'ai essayé,
pour les 2 premiers blocs ça marche,
pour le 3ème comme le mot écrit n'est pas dans la bonne zone,
ça ne le fait pas,
C'est bizarre ce truc.


Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr-FR; rv:1.8.1.11) Gecko/20071128 Iceweasel/2.0.0.11 (Debian-2.0.0.11-1)
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

On peut voir le code de cette page rétive?
Y compris la feuille CSS...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.12) Gecko/20080207 Ubuntu/7.10 (gutsy) Firefox/2.0.0.12
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
noid
Arias
Messages : 7
Inscription : 26 août 2005, 18:10

Message par noid »

Le code ne t'apportera rien
Je t'explique
je tape 3mots sur 3 lignes
je positionne le curseur sur le 1er mot(de la 1ère ligne)
Corps de texte > Conteneur générique > ID > header
OK, le header apparaît à l'écran
je positionne le curseur sur le mot de la 2ème ligne
Corps de texte > Conteneur générique > ID > menu
OK, le #menu apparait bien
sauf que le mot de la 3ème ligne a été chassé de l'écran par le bloc #menu
et là je ne sais que faire.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr-FR; rv:1.8.1.11) Gecko/20071128 Iceweasel/2.0.0.11 (Debian-2.0.0.11-1)
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

Noid, il s'agit donc de faire :
Format/Paragraphe/ et cocher (si ce n'est fait) "Corps de texte"
ah, mais! un peu de précicion, quoi! :P
Ceci dit, tu as raison, il y a une difficulté, pour que ce soit clair il faudrait clliquer à droite de <body> pour être sûr que le curseur ne soit pas dans la page, faire Fichier/Restaurer, veiller à ce qu'aucun élément déjà créé ne soit sélectionné : aucun petit carré ne doit apparaître le long d'un <div> ni une croix dans un carré en haut à gauche, auquel cas, tu peux créer ton 3ème <div> de cette façon-ci. Fastidieux.
:arrow: Mieux vaut simplifier (méthode Ymai) : particulièrement si tu as décidé de toute ta mise en page sur papier en 1er, tu tapes les bouts de phrase qui signalent tous tes éléments, <div> ou autre , tu les sélectionnes un à un et un par un tu suis ta méthode "Format/Paragraphe/Corps de texte", impossible de se gourer de sélectionner par inadvertance un élément déjà créé!
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 »

noid a écrit :Le code ne t'apportera rien
voire...
sauf que le mot de la 3ème ligne a été chassé de l'écran par le bloc #menu
et là je ne sais que faire.
moi non plus, parce que je ne comprends pas vraiment ce qui se passe. Voilà pourquoi le code pour suivre la procédure, pas à pas, sur le même texte, eût pu être éclairant pour mon cerveau fatigué.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.12) Gecko/20080207 Ubuntu/7.10 (gutsy) Firefox/2.0.0.12

PS: déjà, rien que de me relire, je suis fatigué, tiens...
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 »

Ymai, je crois que Noid a touché un petit bug Kpz, si je fais les choses exactement comme lui, mais aussi comme toi, c'est à dire non pas seulement cliquer dans le mot mais sélectionner avant de faire Format/Paragraphe... le 3ème mot disparaît carrément à l'oeil attentif du kompozéeur, le 3ème mot qui devait être le 3ème <div> figurant bien dans l'onglet Source.
Si tu veux contourner ça, Noid, tu n'as plus qu'à styler le 3ème mot avant le 2ème, et ça marchera : le 2ème mot ne disparaîtra pas.
Comme quoi, vive ma méthode à 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
Mongo Bob
Varan
Messages : 1903
Inscription : 10 sept. 2005, 01:51

Message par Mongo Bob »

complément : la manière normale de faire est de styler après avoir créé les <div> :
  • *J'écris mes 3 mots
    *je sélectionne le 1er : Format/Paragraphe/conteneur
    *je sélectionne le 2ème : ....................................;
    *le 3ème : ...........................
    *j'ai 3 <div> sans id dans ma page qui englobent chacun un mot
    *je vais dans Cascades, je crée ma 1ère règle #header, je lui colle un fond rouge et rien de +, c'est juste pour le distinguer des autres
    *je retourne dans ma page sélectionner mon 1er mot header
    *je clique droit sur <div> en bas pour aller chercher "id header"
    *je fais pareil pour les autres, aucun mot ne disparaîtra à mon oeil vivace et éveillé
    *ensuite seulement, je chiade mon stylage avec les dimensions, positionnement etc...
    *cette méthode est la méthode normale, appropriée, si on travaille dans l'interface de Kpz, en WYSIWYG (quoique... c'est l'une des méthodes normales etc...)
    *puis j'abandonne cette méthode et je prends un éditeur-texte qui me met les mains dans le cambouis du html et c'est bien plus rigolo... :wink:
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
noid
Arias
Messages : 7
Inscription : 26 août 2005, 18:10

Message par noid »

Merci pour vos interventions,
j'essaierai de comprendre le bazar demain,
mais le moins qu'on puisse dire, c'est que ce n'est pas très intuitif,
il faut déjà être un"peu" initié pour s'en sortir.

Enfin bon, je voulais m'y mettre pour le site d'une association,
où 2/3 personnes pourraient s'occuper de la maintenance sans trop se gratter la tête,
eh ben, c'est pas gagné.
J'espère que komposer évoluera vers plus de simplicité d'utilisation.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr-FR; rv:1.8.1.11) Gecko/20071128 Iceweasel/2.0.0.11 (Debian-2.0.0.11-1)
Répondre

Qui est en ligne ?

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