28220 sujets

CSS et mise en forme, CSS3

[résolu] Float avec design fluide (un grand classique)

Pages :
Bonjour,

J'ai un petit soucis de float sur un design extensible ... ce n'est pas la première fois que cela m'arrive, mais je solutionne généralement le problème en utilisant un systême de positionnement absolu, maiiiiiis, là, ca va pas être possible.

Le soucis, c'est que le menu ne veut pas se placer à côté du contenu, il se place systématiquement en dessous, alors que je lui applique un float, et il a la place puisque j'applique un margin conséquent sur le contenu.

Voici le code XHTML : (j'ai volontairement supprimé des parties de code pour ne pas surcharger)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    <title>Titre du site</title>
  </head>
   
  <body>
    <div id="Haut">
      <h1 id="TitreSite">Titre du site</h1>
      <h2 id="SousTitreSite">P'tit mot à propos du site</h2>
    </div>
    
    <p id="AccessiBarre" class="Cache"><strong>Accès rapides :</strong> 
      <a href="#Contenu" accesskey="2">Contenu</a> - 
      <a href="#Menu" accesskey="3">Menu</a> - 
      <a href="accessibilite.html" accesskey="0">Politique d'accessibilité</a>
    </p>
    
    <div id="Page">
      <div id="Contenu">
        <h4 class="TitreParagraphe">Un titre</h4>
        <p>Du contenu</p>
      </div><!-- Fin #Contenu -->
   
      <div id="Menus">
        <div class="Menu" id="LeSite">
          <h3 class="Titre-Menu">Le Site</h3>
          <ul>
            <li>Item 1</li>
                   ....
            <li>Item n</li>
          </ul>
        </div>  
      </div><!-- Fin #Menus -->
    </div><!-- Fin #Page -->
   
    <div id="Pied">
      <p id="Copyright">Copyright </p>
    </div>
  </body>
</html>


et voici le code CSS qui nous intéresse : 


/* Page : Contient #Menu et #Contenu */
#Page {
  margin:230px 16px 0 9px;
  background:url('images/page-gauche.gif') repeat-y #FFF;
  padding:0 15px;
  }

/* Contenu */
#Contenu {
  margin:0 0 0 220px;
  text-align:justify;
  }
  
/* Menus */
#Menus {
  width:200px;
  float:left;
  }

/* Pied */
#Pied {
  clear:both;
  }


(c'est dommage, mon code avait une belle indentation, mais elle est partie Smiley decu )

Et enfin, voici ce que ca donne
Modifié par Kevin (08 Jun 2005 - 15:06)
En plaçant l'élément flottant avec le contenu principal dans ton code, ça devrait fonctionner.
Tu veux dire en placant #Menus dans #Contenu ?

Je l'ai fait ici et ca marche pas mieux Smiley decu !
Modifié par Kevin (07 Jun 2005 - 12:52)
Oops avec --> avant
En plaçant menus avec contenu.
Modifié par Igor (07 Jun 2005 - 12:54)
Oui, mais là, ca me foire mon accessibilité, j'préférerais vraiment conserver le contenu avant le menu ....

Edit : Oui, évidemment, là, ca fonctionne Smiley decu
Modifié par Kevin (07 Jun 2005 - 12:57)
Kevin a écrit :
Oui, mais là, ca me foire mon accessibilité, j'préférerais vraiment conserver le contenu avant le menu ....


Pas tant que çà puisque tu prends soin de mettre des liens d'évitement (id Accessibarre).
Moui, pas bête ... Huuuuuuuum ... Bon, je vais bosser comme ça pour l'instant, s'il y'a une autre solution, ca m'intéresse aussi !

Merci beaucoup Igor Smiley smile !
J'ai pas trop lu en détail les réponses, alors pas taper si je redis un truc qui a déjà été testé Smiley langue

T'as essayé en faisant float sur les 2 éléments, menu et contenu et à appliquer une marge de XX px sur le contenu à gauche (si le menu est à gauche) et une largeur de XX px sur le menus avec un conteneur d'une largeur de YY % (pitié YY != 100)

C'est ce que j'ai dans la tête, pas testé.
Hum, et bien non, pas testé ... Mais le pourcentage donnera forcément un décalage selon les résolutions non ?
Kevin a écrit :
Hum, et bien non, pas testé ... Mais le pourcentage donnera forcément un décalage selon les résolutions non ?

En quel honneur ??
Je comprend pas pourquoi tu dis ça Smiley ohwell

Tu veux bien une mise en page fluide, donc tu es obligé de passer par les pourcentages.
@Olivier
Tu ne te souviens pas d'un exemple 3 colonnes en float de Laurent sur son site dont il mettais le lien sur le forum? Je ne met pas la souris dessus Smiley cligne .

Sinon c'est faisable un "layout" total float fluide, ou bien deux float comme le cas de Kevin, j'en ai déjà réalisé un il me semble mais dans le cas d'un conteneur fixe. Pas moyen de le retrouver dans disque dur. Smiley decu
Le truc de Laurent c'était à base de display: table-cell; non compatible IE

Perso, je vois mal où est la difficulté d'un tel layout à base de float, mais bon... faudrait peut être tester en direct Smiley smile
Arf, en effet, ça ne semble être possible qu'avec le menu avant le contenu dans le source Smiley ohwell 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Mise en page fluide à base de float, 2 colonnes</title>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		<style type="text/css" media="screen">
			* { margin: 0; padding: 0 }
			
			body
			{
				text-align: center;
				background: #eee
			}
			
			div#conteneur
			{
				width: 85%;
				margin: 0 auto;
				background: #ff0
			}
			
			h1#titre
			{
				height: 80px;
				background: #f80;
			}
			
			div#menu
			{
				width: 200px;
				float: left;
				background: #f00
			}
			
			div#contenu
			{
				margin-left: 200px;
				background: #080
			}
			
			p#pied
			{
				clear: both;
				background: #0f0
			}
		</style>
	</head>

	<body>

	<div id="conteneur">
		<h1 id="titre">Titre</h1>
				
		<div id="menu">
			<ul>
				<li>item1</li>
				<li>item2</li>
				<li>item3</li>
				<li>item4</li>
				<li>item5</li>
			</ul>
		</div>
		
		<div id="contenu">
			<h2>Contenu</h2>
			<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
		</div>
		<p id="pied">Pied de page</p>
	</div>
	</body>
</html>


C'est dommage ça Smiley ohwell
Pour faire fonctionner avec menu à la suite du contenu, il faudrait utiliser float: right; sur le contenu et donc dimensionner le contenu ce qui n'est pas possible ici Smiley ohwell
Bonjour,

ta solution est parfaitement focntionnelle olivier si on prends soin de retirer le text-align center sur le body qui tue le dispositif sous IE Smiley smile 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Mise en page fluide à base de float, 2 colonnes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css" media="screen">
* { margin: 0; padding: 0 }

body
{
background: #eee
}

div#conteneur
{
width: 100%;
margin: 0 auto;
background: #ff0
}

h1#titre
{
height: 80px;
background: #f80;
}

div#menu
{
width:24%;
background: #f00
}

div#contenu
{
width:75%;
float:right;
background: #080
}

p#pied
{
clear: both;
background: #0f0
}
</style>
</head>

<body>

<div id="conteneur">
<h1 id="titre">Titre</h1>
<div id="contenu">
<h2>Contenu</h2>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
</div>
<div id="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
</div>
<p id="pied">Pied de page</p>
</div>
</body>
</html>


JP
Euh, c'était juste un oubli, il faut ajouter le text-align: left; au div#conteneur, le text-align: center; ne pose pas de problème Smiley ohwell
Mon truc fonctionne comme ça, le seul truc c'est que Kevin voudrait que son contenu soit avant le menu dans la source HTML

Ce que tu proposes n'y change rien Smiley ohwell
En fait ce que tu proposes est différent et si tu ajoutes le text-align: center; ça fonctionnera tout autant Smiley cligne

Tu proposes quelque chose avec menu en largeur fluide, or il faudrait un menu en largeur fixe.
Tout le problème est là Smiley cligne on ne peut pas dimensionner le div#contenu
Y a pas de mal Smiley langue
Kevin, je crois que malheureusement pour ton truc, le menu va devoir passer devant le contenu dans la source HTML Smiley ohwell

A priori ce n'est pas dramatique, même si ça aurait été préférable d'avoir ça comme tu voulais...
Sinon, avec le lien dont parlais Igor sur le blog de Laurent, mais ça ne fonctionnera pas sous IE...

It's mine !! I got it !
http://blog-and-blues.org/weblog/2004/09/24/304-des-colonnes-de-meme-hauteurs-en-css
Modifié par Olivier (08 Jun 2005 - 01:22)
Pages :
Sujet clos
Aller à