28220 sujets

CSS et mise en forme, CSS3

Positionner une side bar, un entête et un bas de page

Bonjour,
cela fait plusieurs jours que j'essaie de positionner un bandeau de menu à gauche de ma page, un entête et un bas de page.
Cela fonctionne parfaitement avec Netscape mais ne marche pas avec IE.
Pourriez-vous m'aider?
J'utilise un fixed positioning et je sais que IE ne gère pas cela.
J'ai donc appliqué un hack émulant le fixed positioning. Ca m'a permis d'avoir l'entête correctement, mais le reste ne prend pas les dimensions attendues. Je voudrais que le bandeau de gauche fasse toute la hauteur de la page, et que les 3 autres éléments (entête, pied de page et contenu) fasse la largeur totale moins la largeur du bandeau de gauche.

Le code est un peu long mais voici la page html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Site de la F&eacute;d&eacute;ration d'Aikido et de Budo de Bruxelles
</title>
<META NAME="Description" CONTENT="Site de la BABF, F&eacute;d&eacute;ration d'Aikido et de Budo de Bruxelles">
<META NAME="Keywords" CONTENT="BABF,F&eacute;d&eacute;ration,Federation,federation,f&eacute;d&eacute;ration,Budo,budo,Bruxelles,Brussels,Brussel,Aikido,aikido,takemusu,Takemusu,taijutsu,club,art martial,saito,Saito,morihiro,Morihiro,ueshiba,Ueshiba,morihei,Morihei,dojo,art,martial,japon,Japon,belgique,Belgique">
<META NAME="robots" CONTENT="all">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

<link rel=stylesheet href="stylesheets/css800600.css" type="text/css" media="all">
</head>
<body>
<div id="content">
<div id="mainmenu">
<ul>
<li id="current"><a href="index.html" OnMouseOver="window.status=('Origines'); return true;" OnMouseOut="window.status=(''); return true;">Accueil</a></li>
<li><a href="page2.html" OnMouseOver="window.status=('Plus de d&eacute;tails'); return true;" OnMouseOut="window.status=(''); return true;">Qui sommmes-nous?</a></li>
<li><a href="page3.html" OnMouseOver="window.status=('Disciplines'); return true;" OnMouseOut="window.status=(''); return true;">Les disciplines</a></li>
<li><a href="page4.html" OnMouseOver="window.status=('Non d&eacute;fini'); return true;" OnMouseOut="window.status=(''); return true;">Link 4</a></li>
<li><a href="page5.html" OnMouseOver="window.status=('Non d&eacute;fini'); return true;" OnMouseOut="window.status=(''); return true;">Link 5</a></li>
</ul>
</div>

<div id="bannertop">
Brussels Aikido &amp; Budo Federation
</div>

<div id="welcome">
Bienvenue sur le site de la BABF, <br> F&eacute;d&eacute;ration d'Aikido et de Budo de Bruxelles.
</div>

<div id="bannerbottom">
contacter le webmaster
</div>
</div>

</body>
</html>


et voici le fichier css:

#mainmenu {
	display:block;
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:auto;	
	width:20%;
	height:100%;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	padding-left:0px;
	padding-right:0px;
	border-right:2px solid black;
	background:#3774B8;
	background-image:url("http://homeusers.brutele.be/arnaud/aikido/BABF/pictures/BABF.gif");
	background-repeat:no-repeat;
	background-position:top center;
	}

#bannertop {
	display:block;
	position:fixed;
	top:0;
	left:20%;
	right:0;
	bottom:auto;
	width:80%;
	height:15%;
	margin-left:2px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	padding-left:0px;
	padding-right:0px;
	border:0px;
	text-align:center;
	line-height:2.2;
	font-size:24pt;
	font-family:"Book Antiqua", serif;
	color:#1C416C;
	font-weight:bold;
	background-color:#5CA3F3;
	background-image:url("http://homeusers.brutele.be/arnaud/aikido/BABF/pictures/bannertop.jpg");
	background-repeat:repeat-x;
	background-position:bottom;
	}

#bannerbottom {
	display:block;
	position:fixed;
	top:auto;
	bottom:0;
	right:0;
	left:20%;
	width:auto;
	height:5%;
	margin-left:2px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	padding-left:0px;
	padding-right:0px;
	padding-top:15px;
	padding-bottom:20px;
	text-align:center;
	font-size:12pt;
	font-family:"Book Antiqua", serif;
	font-weight:normal;
	color: black;
	background-color:#5CA3F3;
	background-image:url("http://homeusers.brutele.be/arnaud/aikido/BABF/pictures/bannerbottom.jpg");
	background-repeat:repeat-x;
	background-position:top;
	}

#welcome {
	display:block;
	position:fixed;
	width:auto;
	height:auto;
	top:15%;
	bottom:15%;
	left:20%;
	right:0;
	font-size:16pt;
	font-family:"Book Antiqua", serif;
	color:#1A589D;
	font-weight:bold;
	text-align:center;
	line-height: 2.5;
	margin-left:2px;
	border:0px;
	margin-right:0px;
	margin-top:119px;
	margin-bottom:0px;
	padding-left:0px;
	padding-right:0px;
	}


/* Pour Windows IE \*/

* html {
	overflow:hidden;
	}

* body {
	overflow: auto;
}


* html #mainmenu, html #bannertop, html #bannerbottom, html #welcome, html #textarea {
	position:absolute;
	}

/* */


édit par Igor: il y a un bouton éditer en haut à droite de ton post Smiley cligne
Modifié par Igor (05 Jun 2005 - 15:48)
Bonjour primus et bienvenue,

Merci d'utiliser [ code] et [ /code] (sans les espaces) pour présenter ton code dans le forum comme tu as dû le lire en lisant Aide/Règles Smiley cligne , il sera plus lisible pour tout le monde et éviteras de déformer le forum..
Mille excuse!

Je tâcherai de ne plus l'oublier!

J'en profite pour rectifier la dernière partie de mon code css.
J'ai malencontreusement copié une version test, voici celle que j'utilise actuellement, mais qui est cependant tout aussi défectueuse, pour une raison qui m'échappe:


/* Pour Windows IE \*/

* html {
	height:100%;
	width:100%;
	overflow: hidden;
}

* html body {
	height:100%;
	width:100%;
	overflow: auto;
	font-family:"Book Antiqua", serif;
	color:#1A589D;
	background:#FFFFFF;
	margin:0px;
	padding:0px;
}

* html #mainmenu, html #bannertop, html #bannerbottom, html #welcome, html #textarea {
	position:absolute;
	}

/* */
Sujet clos
Aller à