28221 sujets

CSS et mise en forme, CSS3

Débordement [Résolu]

Sur le site d'Alsa, on trouve une petite mise en page CSS intéressante et que l'on peut voir ici. J'essaie de la mettre en oeuvre mais je suis confronté au problème suivant : si le contenu de la partie centrale (<div id="centre">) est inférieure en hauteur au contenu du menu (<div id="gauche">), le pied de page recouvre le menu.

==> J'oubliais ! Ceci sous Firefox (cela "semble" fonctionner sous IE... mais pas tout le temps).

J'imagine que l'on peut régler le problème avec un float et un spacer, voire un overflow, bien placé, encore que cette solution me paraisse un peu compliqué. Bref, je n'y arrive pas.

Que faut-il mettre en oeuvre ?

Merci de votre aide.

G. Saunier.
Modifié le 09 Jan 2005 - 15:45
Je "remonte" le sujet. Personne n'a une petite idée ? Mon message n'est peut-être pas assez clair ?

...
Déjà j'ai une remarque à propos de ce design : sous IE il merdouille complètement si la fenêtre est inférieure à la largeur fixe Smiley ohwell

Je te propose d'utiliser mon design, il est quasi pareil et je l'ai testé sans soucis sous IE, firefox et safari. En plus tu as juste à changer la largeur de body et tout le reste s'adapte automatiquement. Si tu veux passer la colonne de liens à droite il suffir de mettre un float; right à la place de left. J'ai aussi un conteneur faux-columns si tu veux utiliser cette astuce.


<!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>Design</title>
   <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <link rel="stylesheet" type="text/css" href="./style/screen.css" media="screen" title="Normal" />
 </head>
 <body>
  <div id="header">
   <h1>Design</h1>
  </div>
  <div id="menu">
   <ul>
    <li><a href="#">lien</a></li>
   </ul>
  </div>
  <div id="fauxcolumns">
   <div id="content">
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
blabla<br/>
   </div>
   <div id="nav">
    <ul>
     <li>lien</li>
     <li>lien</li>
    </ul>
   </div>
  </div>
  <div id="footer">
&copy; Copyright
  </div>
 </body>
</html>




/* Global */
* {
 margin: 0px;
 padding: 0px;
 border: 0px;
}

/* Single */
html {
 background: #444444;
}
body {
 width: 800px;
 margin: 0px auto 0px auto;
 font-family:  arial, sans-serif;
 font-size: 0.8em;
}
#header {
 height: 75px;
 background: #ffffff;
}
#menu {
 padding: 5px 0px 5px 0px;
 background: #cccccc;
}
#menu ul {
 list-style-type: none;
}
#menu li {
 display: inline;
}
#menu a {
 padding: 5px;
 color: #666666;
}
#menu a:hover {
 background: #ffffff;
 color: #000000;
}
#fauxcolumns {
 width: 100%;
 background: #ffffff;
}
#content {
 float: right;
 width: 75%;
 padding: 5px;
}
#nav {
 float: left;
 padding: 5px;
}
#nav ul {
 list-style-type: none;
}
#footer {
 clear: both;
 padding: 5px;
 background: #cccccc;
 color: #444444;
 font-size: 0.7em;
}


Au passage si des gens remarques des erreurs (ou des horreurs) dans ce que j'ai fait je suis toute disposée à faire des améliorations.
A ce props, cela pose-t-il un pb de centrer directement le body au lieu de mettre un gros conteneur global ?
Modifié le 08 Jan 2005 - 19:12
Salut, et merci. Ton mail vient confirmer ce que j'étais en train d'essayer de faire : un système avec double float. Je me demande tout de même s'il n'y a rien de plus propre avec un overflow.

Peu importe. Cela fonctionne. Donc résolu.
Sujet clos
Aller à