une reduction de l'écran et mon bloc fout le camp

[gonzlufcadful]

Tout d'abord, désolé pour le titre mais c'est pas évident à décrire !
En fait, j'ai fini la mise en page d'un site que je dois faire pour une PME avec NVU et après des heures de galère pour corriger tous les bugs je me suis rendu compte d'un nième problème que je ne vois pas comment résoudre :
j'ai dans ma page trois blocs accolés avec boîte->flottante->gauche dans css et pour le bloc tout à droite, je voudrais qu'il s'adapte à la taille de la fenêtre, sa largeur est donc définie en % et j'utilise boîte->dégagement->droit dans css pour que justement quand la fenêtre se réduit, il reste en place. Seulement voilà, sous internet explorer, ça fonctionne correctement mais sous firefox, quand on réduit la fenêtre par la droite, elle commence à se réduire puis elle part vers le bas ...

voir :http://www.tighfili.com/Web%20site/Home.html

en fait, je me suis inspiré de la mise en page d'un site ou ça marche correctement sous ie et firefox :

voir :http://www.comedia.org.uk/pages/home.htm

Pourriez vous me dire comment corriger ce probléme qui défigure mon beau site web ?


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

[Mongo Bob]

j'utilise boîte->dégagement->droit dans css pour que justement quand la fenêtre se réduit, il reste en place.

non, "dégagement droit" appliqué à un bloc éloigne ce bloc de tout autre bloc flottant qui pourrait se trouver à sa droite, il n'y a aucun bloc susceptible de se placer à droite de bg23, donc ça sert à rien, tu peux l'enlever.
Pour la juxtaposition des 3 blocs, il faut qu'ils soient en "float : left" tous les 3, -bg21, bg22 et bg23- ce qui est le cas mais encore faut-il que leur largeur s'accordent.
Si tu travailles en %, ce qui est une excellente chose, fais-le donc pour les 3, je vois :

Code : Tout sélectionner

- bg21 width: 155px;
- bg22 width: 198px;
- bg23 width: 65%.

autant unifier les mesures, un truc comme :

Code : Tout sélectionner

- bg21 width: 17%;
- bg22 width: 17%;
- bg23 width: 65%.

17+17+65=99, là, tes 3 blocs devraient rester côte à côte à charge que leur contenu (flash + image dans le bg21) ne soit pas trop imposant en largeur
Ton site pose plein de problèmes d'accessibilité : le flash, le logo "Tighfili" qui devrait être le <h1> de la page, là c'est une image-texte, un <h2> sans contenu texte :

Code : Tout sélectionner

<h2><br>
<span style="font-weight: bold;"></span></h2>

et ton menu est une embrouille entre <dl>, <dt>, <dd>, <ul> et <li>, il ne pourrait être balisé que strictement en <ul> <li> avec les <li> en "affichage: en ligne" pour obtenir le menu en horizontal.
Là, je pige pas comment tu as fait mais c'est vrai que tu es loin d'avoir terminé, alors excuse-moi si ces remarques sont prématurées.
Par contre :
Evite absolument les <br> pour positionner les éléments, ça marche jamais bien, ex.:

Code : Tout sélectionner

<div style="text-align: center;"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img style="width: 145px; height: 55px;" alt="logo" src="integrated%20logo.bmp"><br>
</div>

(ici pour positionner l'image du logo)
Bon courage...

[gonzlufcadful]

Désolé pour le retard mais il fallait que je finisse le site avant de corriger les erreurs car mon stage se termine bientôt .

J'ai essayé plusieurs combinaisons (le 17%, 17%, 65% entre autres) mais ça ne résoud pas le problème , notamment en ayant pour bg2 avec 100% en largeur, et 13%, 17%, 80% (qui convient mieux) pour bg21,22 et 23 sans marges latérales et ça ne résoud rien alors que ça devrait s'emboîter pile !

De toute façon, ça ne conviendrait pas totalement comme j'ai un slide show dans bg21 et que j'ai rendimmensionné des dizaines d'images, je veux garder une taille fixe (en px) pour le cadre !!! ce qui me parait être tout à fait compréhensible ... je voudrait que seul le gros bloc bg23 qui contient les informations principales puisse s'adapter selon la taille de l'écran et la résolution ... et ça marche très bien sur le site qui m'a servi de modèle donc c'est pas irréalisable !!!!!!!!!!!! :
http://www.comedia.org.uk/pages/home.htm

En fait pour le dégagement droit pour bg23, je sais qu'à la base c'est pas trop fait pour ça mais bon ce brave Internet Explorer l'interprète comme tel et garde la fenêtre comme il faut donc je laisse comme ça en attendant de trouver une meilleure solution. Et puis je pense que 80% des gens utilisent IE donc c'est mieux que rien ...
D'ailleurs il n'y a que sous IE que ça marche car même en ouvrant la page dans NVU et en rétrecissant la fenêtre le bloc part vers le bas.

Pour les autres petits problèmes comme le logo et le menu, j'avoue que c'est un peu bidouillé mais tant que ça marche à peu près je préfère laisser tel quel !

Sinon, à mon grand désarroi (le rendu été pas mal du tout ), j'avais fait une page avec un cadre semi-transparent avec CSS->fond->opacité mais cette fois IE ne capte pas au contraire de Firefox :
http://www.tighfili.com/Web%20Site%20St ... Story.html

Voilà, si quelqu'un a un élément de réponse

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

[Mongo Bob]

j'avais fait une page avec un cadre semi-transparent avec CSS->fond->opacité mais cette fois IE ne capte pas au contraire de Firefox :Voilà, si quelqu'un a un élément de réponse

ça marche pas pour le moment par css, la graduation de la transparence (ou opacité, c'est une façon de voir).
La propriété "opacity" n'existe officiellement pas, elle sera peut-être dans css3, pour une fois IE n'applique pas une propr qui n'existe pas encore, souvent, il n'applique pas une propr qui existe déjà. Cascades garde le choix de "opacity" en attente, comme ça, il sera déjà prêt, FF l'a implémenté par avance :
http://www.geckozone.org/forum/viewtopi ... 381#394381
(cf réponse Kaze un peu + bas dans le topic ci-dessus)

[Ymai]

Bonjour
Le comportement de IE ne serait-il pas simplement dû au fait qu'il reste plein de balises MS qu'il serait capable d'interpréter? Sait-on jamais, avec Bill.

Je n'ai malheureusement pas l'occasion de regarder le problème plus en détails ces temps-ci.
Sans doute cela ne correspond-il pas exactement aux spécifications, mais il me semble que le comportement de:

Code : Tout sélectionner

<body>
<div style="width: 17%; float: left;">Bloc1</div>
<div style="width: 17%; float: left;">Bloc2</div>
<div>Bloc3</div>
</body>

rappelle des choses dans le sens souhaité (un bloc de dimension variable qui ne s'enfuit pas quand on réduit la taille de la page).
Fait en 47,18 secondes, avec la méthode à Kazé.

Sinon, le site :http://www.comedia.org.uk travaille sur la base de tableaux. Il ne peut donc pas servir de modèle.
Un petit conseil: aller voir sur le forum "Développement web" et poser une seule question à la fois, de manière concise et précise. Ca peut marcher.

PS: pourquoi vouloir utiliser NVU?
http://www.geckozone.org/forum/viewtopic.php?t=51228

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)

[Mongo Bob]

>Ymai :
oui et on donne pas de largeur à Bloc3 qui du coup, prend toute la largeur disponible? C'est mieux.

comme j'ai un slide show dans bg21 et que j'ai rendimmensionné des dizaines d'images, je veux garder une taille fixe (en px) pour le cadre !!!

je vois pas pourquoi ton slide-show ne rentre pas dans un bloc de 17% de large, ou plus : tu as des images qui font quoi? 155px de large? c'est trop large? 155px de large, c'est 20% d'un moniteur qui affiche en 800x600 (14% des moniteurs en fonctionnement). Ca doit coller.

ce qui me parait être tout à fait compréhensible

tout à fait.

je voudrait que seul le gros bloc bg23 qui contient les informations principales puisse s'adapter selon la taille de l'écran et la résolution

Ymai a répondu mieux que moi : pas de largeur à spécifier pour ton bg23.

j'avoue que c'est un peu bidouillé mais tant que ça marche à peu près je préfère laisser tel quel

Oui,c'est ce qu'on peut dire de ton site en général : ça marche à peu près et c'est bidouillé, en effet, mais déjà qu'il faut être trés rigoureux avec html et css, si en plus on veut insérer du flash, il doit falloir encore plus d'attention, je suppose. Et plutôt que ça marche à peu près, essayer que ça marche trés bien!
Voilà ce qu'on peut trouver dans ton code, c'est pas trop bon :
<p class="MsoNormal"> c'est ce dont parle Ymai, quant à <st1:metricconverter etc...> sais pas, du flash mal contrôlé ou mal intégré? Voir forum Devweb, en effet.
Faudrait tout reprendre à 0 et avec Kompozer plutôt que Nvu :
http://www.geckozone.org/forum/viewtopic.php?t=51228
Bon courage...

[Ymai]

Faudrait tout reprendre à 0 et avec Kompozer plutôt que Nvu :
http://www.geckozone.org/forum/viewtopic.php?t=51228
Bon courage...

C'est de l'acharnement?

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)

[Mongo Bob]

C'est de l'acharnement? Très content

plus de nouvelles, en tout cas

[gonzlufcadful]

je vois pas pourquoi ton slide-show ne rentre pas dans un bloc de 17% de large, ou plus : tu as des images qui font quoi? 155px de large? c'est trop large? 155px de large, c'est 20% d'un moniteur qui affiche en 800x600 (14% des moniteurs en fonctionnement). Ca doit coller

c'est pas ça je veux que la largeur de mes images colle pile avec celle du cadre sinon c'est moche !!! c'est pour ça que comme toutes mes images font 155 de large je dois garder ça pour bg21.

Ymai a répondu mieux que moi : pas de largeur à spécifier pour ton bg23

Si je fais ça le bg23 part direct vers le bas pour prendre toute la largeur de l'écran !!!

Voilà ce qu'on peut trouver dans ton code, c'est pas trop bon :
<p class="MsoNormal">

ça je crois que ça apparait quand je colles du texte en provenance d'un fichier word ou autre... d'ailleurs NVU c'est un cauchemard à ce niveau là quand on ajoute du texte il met parfois des espaces (br) fantômes! (ie qui n'existaient pas sur le texte que je copie) et qui apparaissent sur Firefox mais pas sur IE !!!!!!! ou alors il me bidouille la mise en forme du texte même si je selectionne "coller sans mise en forme" ...

Faudrait tout reprendre à 0 et avec Kompozer plutôt que Nvu

Je crois que ça va pas être possible ...
En fait mon job se termine demain après je reprends les cours qui n'ont rien à voir avec tout ça.
Quand j'ai appris que je devais faire un site web y'a 2 mois (ce que je n'ai jamais fait auparavant) j'ai tapé éditeur gratuit de site web sur google et il m'a sorti NVU gratifié de plein d'éloges donc j'ai choisi ça surtout que y'a le cours très bien de ce cher Yves Mxxxxxx de sio2 qui explique tout ... pour NVU !!! donc exit KompoZer même si c'est censé être mieux c'est trop tard pour changer.

Sinon, pour mon pb est-ce que quelq'un a déjà réussi à faire tenir des blocs côte à côte avec NVU sans qu'ils partent vers le bas parce que je me demande si c'est pas un bug insoluble de ce brave logiciel assez caractériel il faut quand même l'avouer !

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

[ndm]Masquage d'un patronyme[/ndm]

[Mongo Bob]

c'est pas ça je veux que la largeur de mes images colle pile avec celle du cadre sinon c'est moche !!!

xact, compris, mais ce souci visuel devrait pouvoir se combler par je sais pas une bordure autour des images qui comblent l'espace, non?

Citation:
Ymai a répondu mieux que moi : pas de largeur à spécifier pour ton bg23
Si je fais ça le bg23 part direct vers le bas pour prendre toute la largeur de l'écran !!!

faut que je récupère ton code et que j'essaie : attention, bg23 doit aussi être en flottant:gauche, OK? Je me rends compte que Ymai n'a pas précisé, ça

Quand j'ai appris que je devais faire un site web y'a 2 mois (ce que je n'ai jamais fait auparavant) j'ai tapé éditeur gratuit de site web sur google et il m'a sorti NVU gratifié de plein d'éloges donc j'ai choisi ça surtout que y'a le cours très bien de ce cher Yves Mairesse de sio2 qui explique tout ... pour NVU !!! donc exit KompoZer même si c'est censé être mieux c'est trop tard pour changer.

Yves Mairesse a adapté pour Kpz :
http://info.sio2.be/kpz/

Sinon, pour mon pb est-ce que quelq'un a déjà réussi à faire tenir des blocs côte à côte avec NVU sans qu'ils partent vers le bas parce que je me demande si c'est pas un bug insoluble de ce brave logiciel assez caractériel il faut quand même l'avouer !

Ton bloc est parti vers le bas parce que l'un des trois est de trop grande taille de largeur pour que les 3 demeurent côte à côte, c'est le dernier dans le code html qui du coup, refuse de se loger à droite.
Pour NVU caractériel, on te dit que
http://www.geckozone.org/forum/viewtopic.php?t=51228
(>Ymai : c'est plus fort que moi...)

[Ymai]

y'a le cours très bien de ce cher Yves Mxxxxx de sio2 qui explique tout ... pour NVU !!! donc exit KompoZer même si c'est censé être mieux c'est trop tard pour changer.

Cette fois, c'est décidé: je vire définitivement ce cours NVU qui ne figure plus que dans les moteurs de recherche. Grrrrrr Ces sales bêtes ont de la mémoire.
Cette leçon s'auto-détruira dans les 24h. J'aimerais bien voir la tête de Mr Google quand il découvrira le pot-aux-roses.

Merci quand même d'avoir apprécié mon travail.

[edit]Et un gros Grrrrrrrr pour gonzlufcadful aussi, malgré les gentilles choses dites précédemment.
Vu sur la page d'accueil de la leçon relative à NVU


Je ne mets pas l'adresse pour éviter les liens obsolètes...
[/edit]

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]

Pouf! un cours sur NVU:
http://info.sio2.be/NVU/

Il ne reste plus que le cache de Mr Google.
http://www.google.be/search?q=COURS+nvu


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]

Sinon, pour mon pb est-ce que quelq'un a déjà réussi à faire tenir des blocs côte à côte avec NVU sans qu'ils partent vers le bas parce que je me demande si c'est pas un bug insoluble de ce brave logiciel assez caractériel il faut quand même l'avouer !

Caractériel, je ne sais pas. Mais ce n'est pas un bug ni de KompoZer, ni de NVU. L'un et l'autre ne font que produire un fichier de texte pur: des caractères les uns à côté des autres.
Par contre, la manipulation correcte de CSS est parfois une autre paire de manches.

Sinon, toujours sans vraiment approfondir la question précise, je propose ceci:

Code : Tout sélectionner

<body style="margin: auto; width: 1000px;">
<div style="width: 155px; float: left;">Bloc1</div>
<div style="width: 200px; float: left;">Bloc2</div>
<div>Bloc3</div>
</body>

où la première colonne mesure 155px, la deuxième 200 (mais on indique ce que l'on veut) et la troisième est libre. Le total mesure 1000px.
Et la troisième colonne ne me semble pas vouloir faire mine de descendre.
Même pas sous IE6 sous Linux (si, ça marche; pratique pour les tests).

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)

[Mongo Bob]

j'étais persuadé que le 3ème bloc devait être aussi en flottant, ça me rappele un autre topic, "juxtaposer 2 tableaux", j'avais expérimenté que les 2 en flottant faisait que le 2ème tableau lui permettait de se juxtaposer à exactement le même niveau que le 1er, que sinon, restant dans le flux, il tendait trop vers la gauche, et pas assez vers le haut, ce qui faisait que les 2 n'étaient pas à la même hauteur.
2 blocs, le 1er en flottant, le 2ème non, semblent se juxtaposer aussi bien quand j'essaie maintenant, les largeurs doivent jouer...
J'ai pas élucidé tous les mystères du positionnement...

[chinon37]

tiens, tiens...