Tout d'abord, je te remercie pour ton aide, SAM !
SAM <stephanemor...@wanadoo.fr.invalid> écrivait
news:4f8efffa$0$21461$
ba4a...@reader.news.orange.fr:
> Je suis assez certain que le positionnement absolu n'est pas requis
> (ou alors il y a une erreur de conception en amont)
C'est une erreur de ma part ! En fait le code est :
div.gauche
{
float: left;
width: 250px;
margin-left: 30px;
padding-top: 50px;
}
> Pourquoi une largeur maxi ici ?
> (normalement ce div doit s'étendre sur toute la largeur libre à droite
> du div-gauche, c'est le contenant général qui devrait avoir une
> limitation de largeur)
Jusqu'à présent, il n'y avait pas de contenant général, vu qu'il n'y avait
pas de boîte à droite : la largeur du menu de gauche étant fixée, il me
suffisait de préciser la largeur maxi du corps de texte, histoire de ne pas
avoir un texte étalé sur toute la largeur d'un écran géant (:
> on ne comprend rien à rien !
>
> les css c'est une chose
> mais ...
> sans le html correspondant
> sans dons divinatoires
> là ça va pas le faire ...
> elle doit être à la droite de quoi ?
Du corps de texte (le corps de texte est donc encadré à gauche par le menu,
à droite par la fameuse boîte).
> et, quel est son contenant ?
Il n'y en a pas, et je me doute bien que c'est là la plus grosse erreur !
Donc j'en ai mis un qui englobe le corps de texte ET la boîte flottante à
droite.
J'ai simplement précisé :
<div class="gauche">
Menu
</div>
<div class="corps">
<div class="droite>
Boîte flottant à droite
</div>
<div class="milieu">
<div class="intro">
Introduction
</div>
<div class="annonces">
Annonces
</div>
</div>
</div>
(il y a aussi une div en-tête et une div pied-de-page).
Et naturellement, cela marche tout de suite mieux comme on peut le voir
ici :
http://ecuriesdelancelot.fr
Par contre, j'ai encore un problème de « flottaison » sur cette page :
http://ecuriesdelancelot.fr/equipe
Normalement, chaque photo flotte à droite ou à gauche du texte de
présentation. Le problème est que je n'ai pas trouvé de solution vraiment
propre pour faire ça correctement.
Je peux insérer chaque ensemble texte + photo dans une div (à partir de la
2ème photo seulement, sinon, le corps de texte démarre sous le menu), et
appliquer un clear: both; à cette div. Je peux aussi, après chaque texte,
insérer un paragraphe vide ayant la propriété clear: both; Mais outre que
ça ne me paraît pas très propre comme procédé, si je fais ça, il y a un
espace anormalement grand entre les deux premières photos, puisque le
clear: both; est placé après le premier ensemble photo + texte.
En résumé, dès que je mets un clear: both; le corps de texte apparaît plus
bas que le menu, ce qui est évidemment tout à fait inadapté.
Actuellement le code est le suivant :
<div class="gauche">
Menu flottant à gauche
</div>
<div class="corps">
<h1>Titre 1</h1>
<h2>Sous-titre</h2>
<h3>Nom 1</h3>
<img class="photogauche" src="photos/photo1.jpg" title="titre1"
alt="titre1">
<p class="pres">1er texte de présentation.</p>
<h3>Nom 2</h3>
<img class="photodroite" src="photos/photo2.jpg" title="titre2"
alt="titre2">
<p class="pres">2ème texte de présentation.</p>
...
</div>
Les classes "photodroite" et "photogauche" correspondent évidemment à un
float: left; et à un float: right;
Je me doute bien que je me noie encore dans un verre d'eau, mais si
quelqu'un a une bouée...
--
Pascale
http://www.la-grille-verte.net