Question de visuel

Bonjour

Comme un dessin vaut mieux qu'une longue explication, regardez l'image.
Mon site actuel fonctionne très bien comme il est (illustration 1). Il est fluide et la partie principale contient sur certaines pages des tableaux.

Cependant, j'aimerais obtenir, d'un point de vue visuel, le résultat de l'illustration 2, tout en conservant l'aspect fluide du site (sens des flèches). Comme la partie principale contiendra toujours à l'occasion des tableaux, j'aimerais y arriver sans tableaux.

J'ai donc tenté en utilisant que des div et en les regroupant par "ligne" comme sur l'illustration 3. Mes divers essais n'ont jamais aboutis. Les flottants, pour une raison que je ne m'explique pas, ne donnent pas le résultat escompté et chaque div reste en dessous des autres, même avec un codage html valide et un css remanié je ne sais plus combien de fois.

Ma question est donc : Est-ce seulement possible ?
Si ça ne l'est pas, je ne vais pas perdre ma jeunesse à chercher.


Au cas où voilà l'adresse du site http://aorgerit.nexenservices.com/flo/ La page d'accueil seule intègre ma dernière tentative échouée. Les autres pages sont la présentation actuelle.
Modifié par flocon (15 Jun 2009 - 14:03)

Bonjour

A première vue c'est techniquement possible avec une structure du type

CSS
.gauche{ width: XXpx; float: left; }
.droite{ width: XXpx; float: right; }
.centre { margin: 0 XXpx; }

HTML
<div>
  <div class="gauche"></div>
  <div class="droite"></div>
  <div class="centre"></div>
</div>
etc.

Mais tu invalides le point 10.3 qui recommande que l'ordre de présentation respecte l'ordre d'apparition dans le flux. Or là le flux propose .droite avant .centre....

Ceci pour la technique. Pour la philosophie :

a écrit :
je ne vais pas perdre ma jeunesse à chercher.

Le jeunesse c'est précisément de chercher. Quand on ne cherche plus alors c'est fini
Modifié par Arsene (16 Jun 2009 - 10:02)

Bonjour,

Peut on avoir les portions html/css liées à ce positionnement s'il te plaît?

Merci !

Arsene a écrit :

Mais tu invalides le point 10.3 qui recommande que l'ordre de présentation respecte l'ordre d'apparition dans le flux. Or là le flux propose .droite avant .centre....

C'était un essai pour voir si ça marchait en mettant tous les flottants avant le 'pas flottant'. Quand j'y arrive pas, je fais des tentatives
Pour la recherche, je me contente de chercher le possible, je n’ai pas la prétention n’étant qu’amateur, de faire avancer les encodages.

Regnak a écrit :
Peut on avoir les portions html/css liées à ce positionnement s'il te plaît?

Le HTML

<div id="fenetre"> <!-- Début fenêtre
  <div id="banniere"> <!-- Début banniere -->
  </div> <!-- Fin  banniere-->
  <div id="coeur"> <!-- Début central -->
     <div id="menu"> <!-- Début menu -->
     </div> <!-- Fin  menu-->
	 <div id="page"> <!-- Début page -->
	    <div id="accueil"> <!-- Début thème -->
	        <div id= "haut ">
		   <div id="hautgauche">
		   </div>
		   <div id="hautcentre">
		   </div>		
		   <div id="hautdroit">
		   </div>
	        </div>	
		<div id= "milieu">
		   <div id="milieugauche">
		   </div>
		   <div id="milieucentre">
	 	   </div>
		   <div id="milieudroit">
		   </div>
		</div>
	        <div id= "bas ">
		   <div id="basgauche">
		   </div>
		   <div id="bascentre">
		   </div>		
		   <div id="basdroit">
		   </div>
		</div>	 
            </div> <!-- Fin  thème-->
         </div> <!-- Fin  Page-->
    </div> <!-- Fin  central-->
    <div id="signe"> <!-- Début bas de page-->
    </div> <!-- Fin  bas de page-->
</div>  <!-- Fin  fenêtre -->

Et le CSS

body 
{
margin: 0.3em;
padding: 0;
}
#fenetre
{
position: relative;
width: 100%;
}
#banniere
{
height: 4em;
}
#coeur
{
width: 100%;
}
#menu 
{
float: left;
width: 17em;
}
#page
{
margin-left: 17em;
}
#accueil
{
juste une définition de couleur en fonction du thème
}
#haut
{
height: 6.15em;
width: 100%;
}
#hautgauche
{
float: left;
width: 6.15em;
margin: 0;
padding: 0;
}
#hautdroit
{
float: right;
width: 6.15em;
margin: 0;
padding: 0;
}
#hautcentre
{
margin-left: 6.15em;
margin-right: 6.15em;
padding: 0;
}

#milieu
{
margin-top: 6.15em;
margin-bottom: 6.15em;
width: 100%;
}
#milieugauche
{
float: left;
width: 6.15em;
margin: 0;
padding: 0;
}
#milieudroit
{
float: right;
width: 6.15em;
margin: 0;
padding: 0;
}
#milieucentre
{
margin-left: 6.15em;
margin-right: 6.15em;
padding: 0;
}

#bas
{
height: 6.15em;
width: 100%;
}
#basgauche
{
float: left;
width: 6.15em;
margin: 0;
padding: 0;
}
#basdroit
{
float: right;
width: 6.15em;
margin: 0;
padding: 0;
}
#bascentre
{
margin-left: 6.15em;
margin-right: 6.15em;
padding: 0;
}


#signe 
{
clear: left;
width: 100%;
height: 4em;
}

Modifié par flocon (18 Jun 2009 - 07:51)

J'ai résolu en partie mon problème, je suis distraite, j'avais associé des class plutôt que des id avec des #.
Ça vient juste de me sauter aux yeux !

Cela étant posé, il reste un petit problème. Les parties centrales sont bien accolées aux parties gauches, mais les parties droites sont en dessous. De plus le repeat-y marche pas non plus alors que le repeat-x marche très bien.(je comprends pourquoi : les div sont vides, mais comment y pallier tout en conservant la fluidité ?)

Tout ceci me sert à faire un décor (et plus tard plusieurs avec des changements de styles plus ou moins artistiques).J'ai cru que c'était parce que les images étaient trop grandes. Mais même si je définis des em assez grands pour que les div soient pas accolés, le problème perdure.

Alors je sèche...
Merci de votre attention
Modifié par flocon (18 Jun 2009 - 10:09)