Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP CSS vs tables

CSS vs tables

11 réponses
Avatar
romer
Bonjour,

En commençant une petite page d'accueil, je me retrouve devant une
difficulté de mise en page.
- cadre de 820px de largeur centré sur l'écran
- colonne droite de10em avec float: right contenant un petit menu.
- colonne gauche de10em avec float: left contenant une citation.
Au milieu se trouve une photo d'env 400px de large.

Tout va bien sauf… si un utilisateur agrandit la taille du texte. Les 2
colonnes G et D s'élargissent et la photo fint par être chassée vers le
bas. Normal me direz-vous mais la cata pour la mise en page !
Mais comment éviter cela en évitant aussi le calage de la page dans un
tableau de 3 colonnes qui résoudrait le pb en étendant alors une ligne
du menu G sur 2 lignes - ce qui serait acceptable .

Par avance merci.
--
A+

Romer
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
SAM
Bernd a écrit :
Bonjour,

En commençant une petite page d'accueil, je me retrouve devant une
difficulté de mise en page.
- cadre de 820px de largeur centré sur l'écran
- colonne droite de10em avec float: right contenant un petit menu.
- colonne gauche de10em avec float: left contenant une citation.
Au milieu se trouve une photo d'env 400px de large.



on fait donc 2 1/2 colonnes et 2 autres dans celle de droite

expérience amusante :

<html>
<div id="content" style="width:80%;margin:0 9%;border:1px solid">
<div id="gauche" style="width:10em;float:left;border:1px solid">
gauche
</div>
<div id="droite" style="border:1px solid">
<div id="menu" style="width:10em;border:1px solid;float:right">
droite
</div>
<div id="contenu" style="border:1px solid;margin:0 10.5em">
<p>blabla blabla
<span style="display:block;width:400px;height:200px;border:1px
solid">
simulation d'image
</span>
</p>
</div>
</div>
</div>
</html>

Tout va bien sauf… si un utilisateur agrandit la taille du texte. Les 2
colonnes G et D s'élargissent et la photo fint par être chassée vers le
bas. Normal me direz-vous mais la cata pour la mise en page !
Mais comment éviter cela en évitant aussi le calage de la page dans un
tableau de 3 colonnes qui résoudrait le pb en étendant alors une ligne
du menu G sur 2 lignes - ce qui serait acceptable .



ben ... du fixes tout en px et voilà
le menu G fera ce que tu demandes

<html>
<div id="content" style="width:780px;margin:auto;position:relative">
<div id="gauche" style="width:150px;position:absolute">
tout le très grand menu de gauche ici
</div>
<div id="colonnes_droite" style="margin-left:160px">
<div id="centre" style="margin-right:160px">
le centre
<p style="width:400px;height:200px;border:1px solid">
simulation d'image
</p>
</div>
<div id="droite" style="position:absolute;width:150px;right:0;top:0">
le truc qui doit etre à droite
</div>
</div>
</div>
</html>

variante :

<html>
<div id="content" style="width:780px;margin:auto;position:relative">
<div id="gauche" style="width:150px;position:absolute">
tout le très grand menu de gauche ici
</div>
<div id="centre" style="margin:0 160px">
le centre
<p style="width:400px;height:200px;border:1px solid">
simulation d'image
</p>
</div>
<div id="droite" style="position:absolute;width:150px;right:0;top:0">
le truc qui doit etre à droite
</div>
</div>
</html>

--
sm
Avatar
romer
SAM wrote:

> Tout va bien sauf… si un utilisateur agrandit la taille du texte. Les 2
> colonnes G et D s'élargissent et la photo fint par être chassée vers le
> bas. Normal me direz-vous mais la cata pour la mise en page !
> Mais comment éviter cela en évitant aussi le calage de la page dans un
> tableau de 3 colonnes qui résoudrait le pb en étendant alors une ligne
> du menu G sur 2 lignes - ce qui serait acceptable .

ben ... du fixes tout en px et voilà
le menu G fera ce que tu demandes



Merci de ta réponse.
Je ne l'ai pas encore fait mais j'ai peur d'une chose qu'on rencontre
sur cretains sites : les mots du menu en s'agrandissant vont sortir du
cadre du menu sans bordure (j'ai mis autout du menu un cadre de couleur
plus foncée que le fond de la page).
Et là ce n'est pas vraiment top.

--
A+

Romer
Avatar
William Marie
"Bernd" a écrit dans le message de news:
1ibqfkp.o5lr3q1pizahvN%
Bonjour,

En commençant une petite page d'accueil, je me retrouve devant une
difficulté de mise en page.
- cadre de 820px de largeur centré sur l'écran
- colonne droite de10em avec float: right contenant un petit menu.
- colonne gauche de10em avec float: left contenant une citation.
Au milieu se trouve une photo d'env 400px de large.

Tout va bien sauf. si un utilisateur agrandit la taille du texte. Les
2 colonnes G et D s'élargissent et la photo fint par être chassée
vers le bas. Normal me direz-vous mais la cata pour la mise en page !
Mais comment éviter cela en évitant aussi le calage de la page dans un
tableau de 3 colonnes qui résoudrait le pb en étendant alors une ligne
du menu G sur 2 lignes - ce qui serait acceptable .

Par avance merci.



Bien sûr je me suis heurté à ces problèmes quand j'ai renoncé aux tableaux,
à leur oeuvres et à leurs pompes et même aux frames par dessus le marché.
Aggravé que IE6 (et même 7) n'avait pas la même conception des marges que FF
et Opera. Du coup je me suis fendu d'un petit tutorial écrit comme pense
bête dans un premier temps puis tourné de façon plus pédagogique pour mles
petits camarades.

Le parti pris est de travailler sur une surface fixe (trop dur de travailler
en dynamique sans tout foutre en l'air) de 950 pixels de large partant du
principe que tous les clients disposent d'un moniteur affichant au moins
1024x768. Donc ne venez pas me reprocher que cela s'affiche mal sur votre
téléphone portable ou autres horreurs visuelles riquiquis.

Un gag à savoir : avec IE7, même si 3 div de graphiques sont impeccablement
positionnés en "absolute" il subsiste un défaut d'alignement vertical si ils
sont positionnés en horizontal. La solution consiste à les intégrer tous les
trois dans un div global de niveau supérieur.

Fouille dans le code de mes pages tu y trouveras sûrement une solution.
--
=================================== William Marie
Attention antiSpam remplacer trapellun.invalid
par free.fr
Web : http://wmarie.free.fr
http://www.pandemonium.dnsalias.org (site expérimental)
====================================
Avatar
SAM
Bernd a écrit :
SAM wrote:

Tout va bien sauf… si un utilisateur agrandit la taille du texte. Les 2
colonnes G et D s'élargissent et la photo fint par être chassée vers le
bas. Normal me direz-vous mais la cata pour la mise en page !
Mais comment éviter cela en évitant aussi le calage de la page dans un
tableau de 3 colonnes qui résoudrait le pb en étendant alors une ligne
du menu G sur 2 lignes - ce qui serait acceptable .


ben ... du fixes tout en px et voilà
le menu G fera ce que tu demandes



Merci de ta réponse.
Je ne l'ai pas encore fait mais j'ai peur d'une chose qu'on rencontre
sur cretains sites : les mots du menu en s'agrandissant vont sortir du
cadre du menu sans bordure (j'ai mis autout du menu un cadre de couleur
plus foncée que le fond de la page).
Et là ce n'est pas vraiment top.




Oui, en effet ça déborde (et même sans agrandissement) :

<html>
<div style="margin:0 110px;border:1px solid;border-width:0 1px 0 1px">
<p style="width:400px;height:200px;border:1px solid">
ma 'tite photo
</p>
</div>
<div style="position:absolute;width:100px;top:0;right:0">
mon petit blabla de droite
</div>
<ul style="list-style:none;width:100px;position:absolute;top:0;left:0">
<li>Menu :</li>
<li style="border:1px solid">
<a style="display:block;background:#ffc" href="#">
titrage anticonstitutionnellement long
</a>
</li>
<li style="border:1px solid">
<a style="display:block;background:#ffc" href="#">
titrage normal
</a>
</li>
</ul>
</html>

Solution :
- admettre que la mise en page se dégrade quand on zoome
- s'arranger pour que la dégradation reste lisible
- ou faire comme beaucoup : ne pas s'occuper de la question
(tous les sites marchands ...)

--
sm
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
William Marie nous narre ce qui suit en ce 3/02/2008 16:53 :

Le parti pris est de travailler sur une surface fixe (trop dur de travailler
en dynamique sans tout foutre en l'air) de 950 pixels de large partant du
principe que tous les clients disposent d'un moniteur affichant au moins
1024x768.



Rien n'est plus faux et quand bien même, un moniteur de 1024 x 768 de
résolution, et à fortiori lorsque la taille est de 1280 pixels de large
voire plus, est souvent utilisé pour afficher deux fenêtres et même
davantage.
950 pixels est un mauvais choix. Le compromis idéal est de 760 à 800
pixels, pas davantage.
Ce problème a d'ailleurs été soulevé ici même à de nombreuses reprises.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor/free.fr/
Avatar
romer
SAM wrote:

Oui, en effet ça déborde (et même sans agrandissement) :

<html>
<div style="margin:0 110px;border:1px solid;border-width:0 1px 0 1px">
<p style="width:400px;height:200px;border:1px solid">
ma 'tite photo



En effet, je viens de vérifier dans un navigateur.

Solution :
- admettre que la mise en page se dégrade quand on zoome
- s'arranger pour que la dégradation reste lisible
- ou faire comme beaucoup : ne pas s'occuper de la question
(tous les sites marchands ...)



L'idéal serait que tout le monde ou presque porte des lunettes adaptées
et puissent lire sans difficulté les caractères autour 16px, que les
résolutions d'écran soient à peu près identiques, les écrans à peu près
semblables en dimensions, les OS pas trop différents, les navigateurs
autres que ceux de MS, bref, j'arrête, ça devient en effet assez
compliqué à résoudre sinon à accepter comme tu dis que la mise en page
déraille de temps à autre.
--
A+

Romer
Avatar
romer
William Marie wrote:

Fouille dans le code de mes pages tu y trouveras sûrement une solution.



Merci - tu es "bookmarké" pour ton essai sur le positionnement que je
lirai à tête plus reposée dès que j'ai qq. heures devant moi.

--
A+

Romer
Avatar
SAM
Bernd a écrit :

L'idéal serait que tout le monde ou presque porte des lunettes adaptées
et puissent lire sans difficulté les caractères autour 16px,



Sur Mac on peut zoomer tout l'écran : tout reste alors en place.
Je suppose que sur Win il doit il y avoir aussi une fonction équivalente.

On peut supposer que les mal voyants (ou peu voyants) sont au courant et
savent s'en servir ?
Les autres juste un peu miros ne vont pas faire beaucoup zoomer dans le
navigateur, non ? Ça ne doit pas trop casser la mise en page j'imagine.

Les assez mal-voyants de toutes façons utilisent très peu de navigateurs
graphiques, ils utilisent en mode texte.
(tu essaies sans css et regardes ce que ça donne, l'ordre de
présentation est logique ? oui ? alors tt est OK)

Les très mal-voyants utilisent des navigateurs vocaux et là c'est une
autre paires de manches ! les alt et title sont "intelligemment"
complétés ? Les tables sont organisés logiquement ? ça suit bien de
cellule à cellule, par rangée ?


--
sm
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
SAM nous narre ce qui suit en ce 3/02/2008 23:26 :

L'idéal serait que tout le monde ou presque porte des lunettes adaptées
et puissent lire sans difficulté les caractères autour 16px,




...
Les autres juste un peu miros ne vont pas faire beaucoup zoomer dans le
navigateur, non ? Ça ne doit pas trop casser la mise en page j'imagine.
Les assez mal-voyants de toutes façons utilisent très peu de navigateurs
graphiques, ils utilisent en mode texte.



Je crois qu'ils savent qu'il existe un navigateur qui surpasse tous les
autres à ce point de vue : Opera.
Il permet de zoomer l'ensemble de la page (y compris les images !) et
donc de garder intacte la mise en page.
Dommage que les autres ne le fassent pas :-(
Même pas Firefox. Un peu mieux K-Meleon mais c'est loin d'être satisfaisant.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor/free.fr/
Avatar
SAM
docanski a écrit :
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
SAM nous narre ce qui suit en ce 3/02/2008 23:26 :

Les assez mal-voyants de toutes façons utilisent très peu de
navigateurs graphiques, ils utilisent en mode texte.



Je crois qu'ils savent qu'il existe un navigateur qui surpasse tous les
autres à ce point de vue : Opera.



Ma tante utilise un soft vraiment spécialisé :
non seulement en mode texte mais en blanc sur noir
(le plus souvent : un mot à la fois ...)

L'autre tante : c'est tout en vocal ...

Je les admire,
à plus de 75 ans vouloir rester "à la page" et avec un handicap !

--
sm
1 2