Pour qu'une div s'ajuste en fonction du texte qu'elle contient

Bonjour à tous!

Mon sujet a maintes fois été abordé, j'en suis sûr. J'ai fouillé, essayé de comprendre, mais il faut croire que j'ai un peu de mal surtout lorsque IE et Mozilla fonctionnent différemment. Mon site doit être aussi parfaitement accessible, même pour les plus vieilles machines (c'est un site pour des nonnes!).

Donc. J'ai une <div> qui en contient trois autres disposées en colonnes. Celle du milieu contient le texte. Je voudrais que la hauteur de la <div> principale s'ajuste en fonction du texte.

Voici le lien de la page :
http://www.kundera.be/Congreg2/pages/education.html

Voici le CSS :

/* CONTENU */
#main {
position: relative;
left: 0px;
top: 0px;
}

#sommaire {
position: relative;      /* C'est le prob pour positionner ces foutues div en colonnes */
left: 10px;
min-height: 1000px;
border: 1px solid black;
padding: 0.5em;
width: 20%;
}

#article {
position: absolute;
left: 25%;
top: 0px;
width: 50%;
text-align: justify;
}

#medias {
position: absolute;
right: 10px;
top: 0px;
border: 1px solid black;
padding: 0.5em;
width: 20%;
}
/* FIN CONTENU */

Merci à vous d'y jeter un oeil...

Manu
Modifié par manuwatt (02 Aug 2007 - 14:08)

Bonjour,

Tu peux laisser tomber positionnement relatif et absolu ici, tu n'arriveras à rien de cette manière. Je pense que tu as dû lire un peu rapidement et en diagonale les différents articles et tutoriels sur le positionnement CSS disponible ici et là (par exemple dans les tutoriels d'Alsacréations), et louper l'information capitale sur les caractéristiques du positionnement absolu.

En l'occurrence, on utilisera plutôt ici la propriété CSS float pour positionner les différentes «colonnes». Voir par exemple ce tutoriel:
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant

manuwatt a écrit :
Mon site doit être aussi parfaitement accessible

Auquel cas il va y avoir plusieurs choses à travailler, et notamment:
- repenser complètement le menu avec pictogrammes (sans texte alternatif?) et liens déroulants;
- travailler la question du texte alternatif;
- surtout, travailler la gestion des langues: opportunité d'une langue par défaut, négociation de contenus, etc.

Bonne continuation.

Salut,

si le site doit être compatible avec des machines plus anciennes (et donc des navigateurs plus anciens), il ne faut pas négliger non plus l'option "tableau à 3 colonnes" !

a écrit :
Mon site doit être aussi parfaitement accessible, même pour les plus vieilles machines (c'est un site pour des nonnes!).

Ne pas confondre l'accessibilité du site (i.e. l'accès à l'information pour tous les visiteurs) et sa "compatibilité" avec les différents navigateurs

Salut,

Juste une petit chose tu devrais essyer de reduire ta banniere car 1M c'est un peu trop je pense.

Hello,

Merci beaucoup pour le lien sur les "float", je me suis bien rendu compte que je m'emmêlais un peu les pinceaux. Bon, j'ai pas lu en diagonale ça fait réellement de nombreux jours que je suis là-dessus (j'ai aussi le bouquin d'Antoine sur les CSS) mais faut croire que j'ai pas un esprit formaté pour ce genre de boulots!

En ce qui concerne le menu en pictogrammes, je me suis pas cassé le c... à utiliser cette technique (qui a, en plus, des désavantages en ce qui concerne l'accessibilité...) si ce n'était pas obsolument indispensable. Tout simplement parce que le site hébergera des articles dans les trois langues mais que chaque version ne sera pas toujours traduite dans les deux autres langues. Un peu complexe à expliquer comme ça, l'Église catholique a ses mystères auxquels je suis obligé de me conformer...

Et pour la bannière, ouais, c'est méga-lourd, elle restera comme ça tant que mon commandiataire continuera à changer d'avis toutes les deux heures Je préfère la laisser en .png et voir directement les changements. Mais une fois le site mis en ligne pour tout le monde, je changerai bien évidemment le format!

Merci pour tout... Je vais essayer avec tout ça!

Manu