[Abandonné]Casse-tête avec div flottants et ordre d'affichage

Bonjour.

Ma page se compose comme ceci :
-au centre et à gauche j'ai un div "conteneur" étirable en largeur (float:none)qui contient des paragraphes et des images(en rouge sur l'image d'exemple).
-A droite de la page, j'ai un menu de 200px de largeuren float:right(en bleu).
http://pflample.jpg
image d'exemple :
J'arrive à afficher tout ça correctement, mais alors l'ordre d'affichage est mauvais. c'est d'abord le menu (long à charger car contenant beaucoup d'images lourdes) qui s'affiche et alors ensuite s'affiche le texte du div central.

Est-ce impossible à réaliser en css ?
Modifié par Ralfman68 (11 Dec 2006 - 03:08)

bonjour,

et en inversant le flux html (et les float )?

d'abord le "rouge " sans float et body avec un padding-right de 210px par exemple et le menu en positionement absolue en right:5px; et top:1em; (par exemple).

ou inversement du flux et les 2 en float , en se partageant la page en pourcentage.

... d'autre possibilité encore probablement .

++

Est-ce qu'il s'agit d'un problème de positionnement ou d'un problème de temps de chargement et d'affichage progressif des éléments ?

J'ai l'impression (mais ça n'est pas très clair) qu'il s'agit du deuxième cas, mais je ne comprends pas trop le problème rencontré. Le code du bloc bleu est en premier dans le code de la page, et du coup le bloc rouge ne s'affiche qu'une fois le bloc bleu complètement chargé ? Quel navigateur peut bien gérer aussi mal l'affichage progressif des éléments, au point de ne pas afficher du texte (pourtant le texte c'est pas méchant) avant d'avoir affiché des images de contenu ?

Et s'il s'agit d'un problème de positionnement, as-tu vérifié que :
1 - le menu en float: right est bien placé en premier dans le code ;
2 - tu as utilisé un des deux moyens disponibles pour éviter que le bloc de contenu ne prenne 100% de la largeur de son conteneur.

Pour le (2), tu peux :
- mettre un margin-right: 220px sur ton bloc de contenu ;
- utiliser plutôt un overflow: auto ou overflow: hidden, si mon souvenir est bon.

Merci de vos prestes réponses.

@Gcyrillus => si j'inverse le flux html ainsi que les float, c'est le menu qui s'affiche en premier , ce que je ne souhaite pas. Il faudrait que le visiteur puisse lire tout de suite le texte de la page d'acceuil.
Par contre la solution de se partager la page ne fonctionne pas étant donné que le menu est en pixels et le texte en %...

@Mpop =>le rouge est en premier et le bloc bleu est en dernier dans le html. Disons que le menu est composé d'une vingtaine de vignettes longues à charger et que je préfere que les images qui accompagnent le texte viennent en premier.

EDIT : je capitule. Mon après-midi aura été fichu en l'air pour rien. Tant pis si le visiteur devra attendre le chargement complet de la page...
Modifié par Ralfman68 (16 Nov 2006 - 18:45)

Suivi les caractéristiques de ton design (et en particulier la présence ou non d'un pied de page et la longueur possible du menu), une option serait de positionner le menu en absolu plutôt qu'en flottant, ce qui permet de le placer en second dans le code.

Je te remercie Mpop, mais j'ai laissé tombé ce probleme, sinon je perdrai trop de temps. Tant pis pour l'ordre d'affichage. (effectivement, tu avais raison, le texte s'affiche quasi instantanément, ce ne sont que les images accompagnant ce texte qui mettent du temps à venir).

A vrai dire, je me demande si ce que je voulais est possible en css (du moins sans bidouille javascript)
(un div central extensible en largeur placé à gauche d'un menu de largeur fixe tout en affichant d'abord le div de gauche). Ca a l'air tout bête comme ça, mais...
Modifié par Ralfman68 (16 Nov 2006 - 23:33)

rebonsoir,

(j'avais deja emis la proposition du positionement absolu )

En fait il y a assez peu d'info sur le contexte de ta page , s'agit t-il d'une page d'acceuil ,
si non alors un preload en css en background de balise vide de fond avec un positionenment a 3000 pixel a droite du fond en no-repeat (dans les pages peut-etre vues precedement) peut permettre eventuellement d'accelerer par la suite l'affichage.

Un preload sur une page d'entrée pour la page d'entrée ne sert evidement a rien.

autre solution theorique pour retardé l'affichage du menu (c'est bien ça le probleme ? ) , serait de lincorporé avec une balise "object" , en gerant la barre de scroll pour IE (je crois qu'il y a ça dans la faq).
On peut imaginer alors que le contenu d'object perds de sa priorité de chargement et ne viendrais qu'aprés.

En fait un lien aurait eclairé tout le monde

bonne soirée

Merci GCyrillus, voilà un lien.(considérez le contenu comme du lorem ipsum)
Déplorablement, les miniatures du div a gauche s'affichent avant les images du texte, ce qui est assez genant...
Pardonnez le souk dans les css (le div gauche placé à droite etc...)

PS : par ailleurs, le menu devra etre étirable dans la largeur du div central avec des cases d'items de taille identique... je me demande comment je vais faire ça sans tableaux... Est-ce vraiment utile , y-a t'il un vrai avantage à garder les listes pour ce menu par rapport aux tableaux qui permettraient d'obtenir un ajustement précis et facile ?
Modifié par Ralfman68 (11 Dec 2006 - 03:09)

désolé je decroche , mais je viens de charger la page dans firefoxe et IE,

c'est long dans firefoxe pour l'image , et relativement plus rapide dans IE,
pourtant webdevelloper me montre que toutes les images font 4ko ??.

Effectivement il y a un drole de comportement incomprehensible au premier abord entre le menu et le conteneur principal.

C'est interessant , je suis curieux , mais je regarderais maintenant demain en soirée si personne n'a encore d'explication d'ici la .

bizarrre bizarre .

++

je viens de regarder d'un peu plus pres la page

je trouve ceci :

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">

Malgre cela , IE semble garder les images en cache et avoir un affichage rapide ?!.

Ces 2 lignes sont-elles la en permanent ou juste pour le debugage ?

Les balises images ne sont pas refermées :

a écrit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

FF y est peut-etre sensible .
il m'est arrivé de tester un code php , un petit compteur qui s'incremente de 1 a chaque affichage , mais qui s'incrementer de 4 dans ff, de 2 dans mozilla et de 1 dans internet explorer !?!?! , le bug etait dans le html : <img src="" />
FF tentait a plusieurs reprises de trouvé l'adresse ou de compensé l'erreur avant de laché l'affaire ...
du coup rappel de 4 fois la page !! avant de l'afficher ! (premiere version de firefoxe ).

En testant en local , avec les balises refermées ça va deja un peu plus vite ou bien c'est juste une idée de ma part .

Puis en passant le menu en dernier dans le html et en le positionnant a droite en absolue on retarde un peu son affichage, c'est assez bien perceptible visuellement dans IE.

Je n'ai pas tester cette idée saugrenue de la balises object .

voici les portions de css auxquels j'ai touché (si je n'en ai pas oublié).

body             {
                 background: url(bannier  dfe00.png) repeat-x ;
                 height:100%;
                 color:#533;
                 padding:20px;
                 font-family: Verdana, Arial, Helvetica, sans-serif;
                 padding-right:200px;
}
#conteneur       {
                 border:0px solid red;
                 background: #fff url('menupartiecentre.png') repeat-x ;
                 padding:0px 0px 0px 0px;
                 margin:0px 0px 0px 0px;
                 overflow:hidden
                 }
#droite {
                 border:0px solid red;
                 margin:0px 0px 0px 0px;
                 display:block;
                 background: url(menubgvidecentre.png) repeat-x ;
                 }
#gauche                {
                 border:0px solid red;
                 right:0px;
                 position: absolute;
                 width:192px;
                 z-index:1;
                 padding:0px 0px 0px 0px ;
                 top:0px;
                 margin:0px 0px 0px 0px;
                 }

et extrait du html

...
        <div id="header"></div>
        <div id="droite">
             <div id="menu">
                  <ul>

....
        </div> <!-- fin gauche -->

</div><!-- fin conteneur , d'ailleurs gauche(qui est a droite ) peut en etre sortis -->
<div id="spacer"></div>
<div id="pied">

bonne soirée
Modifié par gcyrillus (11 Dec 2006 - 17:54)

gcyrillus a écrit :
je viens de regarder d'un peu plus pres la page

je trouve ceci :

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">

bonne soirée

Modifié par Ralfman68 (11 Dec 2006 - 03:10)