28173 sujets

CSS et mise en forme, CSS3

Présentation de page sans tableau

Bonjour,

D'abord bravo pour le site : excellent.
Pour ma part : retour au html après qq temps d'absence dans le cadre du développement d'un application web.
Pour ce qui est du design, déjà en 2000 j'avais proscrit les frames et adopté le CSS. Par contre je faisais la mise en page avec des tableau : bouh c'est pas bien. Smiley nono
L'objectif est d'avoir le footer au bas de la fenêtre lorsque c'est possible.
Du coup j'ai fait le tour des exemples et tutoriaux du site et me suis inspiré de deux des exemples.
Le résultat est "presque" celui escompté : en fait mon menu déborde sur le footer :

upload/9922-css.gif

* feuille de style

html, body {

	text-align: center;
	width: 100%;
	margin: 0%;
}	

div#frame_conteneur {
	
	min-height: 100%;
	background-color: #404080;
	position: relative;
}

div#frame_entete {
	
	height:24px;
}

div#frame_centre {
	
	padding-bottom: 24px;
	overflow: auto;
}

div#frame_menuG {

	width: 200px;
	left: 0px;
	position: absolute;
	background-color: #FF0000;
}

div#frame_contenu {
	
	margin-left: 200px;
	margin-right: 24px;
	background-color: #FFFFFF;
}

div#frame_menuD {

	width: 24px;
	right: 0px;
	position: absolute
}

div#frame_pied {
	
	position: absolute;
	width: 100%;
	bottom: 0;
}


page html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>structure</title>
<link href="reg.css" type="text/css" rel="stylesheet" /> 
</head>
<body>

<div id="frame_conteneur">

  <div id="frame_entete">entete</div>

  <div id="frame_centre">

    <div id="frame_menuG">menu  
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    fin menu</div>

   <div id="frame_menuD">0</div>

    <div id="frame_contenu">contenu
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    fin contenu</div>
    
  </div>

  <div id="frame_pied">pied de page</div>
  
</div>

</body>
</html>



Merci d'avance Smiley help
Modifié par schwartzkopf (12 Dec 2006 - 10:04)
Salut.

En abandonnant le positionnement absolu de tes colonnes et en utilisant 
#contenu {
   float: right;
   }
#menu {
   float: left;
   }
#footer {
   clear: both;
}
tu n'aurais pas ce soucis Smiley cligne

En règle générale, le positionnement absolu quand on ne connaît pas les dimensions, c'est risqué ...
Bonjour à tous !

Je suis confronté à un problème similaire à celui de schwartzkopf.

Comme Sopo, je pense que le "clear: both" est plus adapté pour le footer. Car le "position: absolute; bottom: 0;" ne s'affiche pas en bas de page comme on pourrait le penser, mais en bas de la fenêtre, ce qui est gênant lorsque la page est trop haute pour s'afficher entièrement.

Mais le problème avec la solution de Sopo devient : comment faire pour spécifier que le contenu doit utiliser toute la largeur de la page sauf les 200px de gauche réservés pour le menu ? (c'était quelque chose de très simple à faire avec les frames, mais en CSS, ça semble très complexe !!)

Un simple "margin-left: 250px;" ne marche pas et fait passer le contenu en-dessous du menu.

Le style par défaut de MediaWiki (utilisé sur wikipedia & co.) présente une solution sous Firefox en utilisant une marge négative pour le contenu. Exemple :
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Titre</title>
<style type="text/css">
    #menu {
        float:left; 
        width:200px; 
        height:400px;
        border: 1px solid;
    }
    #principal {
        float: right;
        width: 100%;
        margin-left: -250px; 
        border: 1px solid;
    }
    #contenu {
        margin-left: 250px; 
        border: 1px solid;
    }
</style></head><body>

	<div id="menu"><h2>Menu</h2></div>
	
	<div id="principal">
	    <div id="contenu">
		    <h2>Premier paragraphe</h2> 
		    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
	   </div>
	</div>

</body>
</html>


Mais cette méthode ne résout pas le problème sous Internet Explorer (testé sous IE 6, je ne sais pas ce que donne IE 7), puisque dès que la fenêtre devient trop petite pour afficher entièrement le contenu, il ne tient plus compte des marges et refait passer le contenu sous le menu. C'est très gênant lorsqu'on veut afficher des images de grande taille par exemple.

Quelqu'un aurait-il une meilleure solution ?

A noter que MediaWiki résout le problème sous IE en utilisant un positionnement absolu et non plus flottant. Mais du coup, l'utilisation du "clear:both" pour le footer devient impossible et il s'affiche seulement sous le contenu et non plus en bas de page ...
Modifié par RaccoonKun (13 Dec 2006 - 18:13)
Sujet clos
Aller à