Problème de DIV

[Zildal]

Bonjour!

J'ai essayé de constuire le tableau avec DIV. Ca fonctionne bien!

Un problème que je n'arrive pas à résoudre. Il s'agit de l'agrandissement des textes qui nous empêche de pouvoir lire avec DIV.

Par exemple la source suivante en test :

.accueil {
	font-family: Arial;
	font-size: 80%;
	text-align: justify;
}
.bloc1 {
	width : 48%;
	float : left;

}
.bloc2 {
	width : 48%;
	float : left;
}

Dans la source HTML,

<div class="accueil">

<div class="bloc1">Texte 1</div>

<div class="bloc2">Texte 2</div>

</div>

Quand les textes s'agrandissent de plus en plus, les textes de deux bloc se fusionnent donc illisibles! Je sais pas comment le défilement en horizontal soit automatique. Je pense toujours au problème de width. Mais bon...

Que faire? J'espère que mon explication est clair...

Modifié 23 Mai 2005 par Zildal

[enroc]

Peux-tu en dire plus ? Je crois qu'il manque un peu de contexte : le textes ne se chevauchent chez moi que si ma fenêtre ne fait que quelques pixels.

Sinon une solution est de déterminer la largeur de tes blocs en fonctions de la taille de la police, en utilisant l'unité 'em'.

[Matthieu Faure]

Salut,

Tu devrais trouver des éléments de réponse dans l'article de (maitre) Eric Meyer http://complexspiral.com/publications/containing-floats/ et aussi dans un exemple (combiné avec d'autres hacks) dans la CSS de http://www.adullact.org/lettre_adullact/

Note: ne pas avoir peur de sortir le bleu de travail et la clé de 12

Matthieu

[Zildal]

Merci pour ces liens intéressants Mais je ne trouve pas la solution qui me concerne...

Le problème est la taille de l'écran.

Quand j'ai mis width en "%", j'ai construis deux colonnes en DIV, chaque 48%.

ça fait preque 100%.

Alors quand deux colonnes se mesurent sur tout l'écran sans dépasser le défilement.

Quand je fais, manuellement, agrandir les textes. Avec Firefox, les deux colonnes restent toujours sur l'écran. Les textes sont trop grands et se mélangent. Ca devient illisible pour les malvoyants.

J'essaie de comprendre pourquoi les deux colonnes ne peuvent pas dépasser la taille de l'écran automatiquement...

Merci

[fre]

Si je peux te donner un conseil, essaies de fixer la largeur de la seconde DIV en Em et ne définit rien pour la première.

Logiquement la première prendra la place nécéssaire et la seconde la taille fixée.

Au grossissement des caractères devraieent faire grossir les deux de maniere cohérente.

C'est une idée pas testée mais une diée qd meme

[Zildal]

Pourquoi pas! il faut toujours essayer!

Merci

[Xavier]

Pourquoi pas tout simplement éviter que les gens aient besoin d'agrandir le texte ?

Si tu respectes leurs préférences (= supprimer le font-size: 80% le texte sera directement à la bonne taille, donc les gens ne redimentionneront pas la page, et n'auront pas de chevauchement

[Matthieu Faure]

Le problème est la taille de l'écran.

Quand j'ai mis width en "%", j'ai construis deux colonnes en DIV, chaque 48%.

ça fait preque 100%.

<{POST_SNAPBACK}>

Une piste:

- spécifie la largeur d'une colonne, disons width: 48% pour la colonne 1 et mets-la en float: left;

- ne spécifie pas de largeur à la colonne 2

- mais précise sa marge gauche (pour ne pas empieter sur la première colonne), disons margin-left: 50%

- je prend 50% pour être large => à adapter en fonction des tes padding et autres éléments graphiques

Au final, la largeur de la deuxième colonne est calculée automatiquement par le navigateur, et les textes aggrandis ne devraient pas se chevaucher.

Matthieu