Footer fixe, menu coulissant horizontal et onglet active

Question

gabidospi

14 Nov 2006 à 16:50

Bonjour à tous, je suis un newbee dan sle domaine CSS, et je fais appel à vous pour m'aider à trouver la solution.
J'ai rencotré 3 problèmes lors de la création d'un site en CSS:
Mon site se présente sous la forme:

HEADER (hauteur fixe)
menu onglets dynamique
-------------------------------------
MENU G | CONTENU
(largeur fixe)|
|
-------------------------------------------
FOOTER (hauteur fixe)

avec scrollbars désactivées

Mes soucis:

1. Comment figer le footer EXACTEMENT en bas de la page et qu'il reste visible même si on modifie la taille de la fenêtre?
La solution la plus viable que j'ai trouvé c'est de mettre un containeur qui prend 80% de la page pour inclure le milieu, mais quand on agrandi la fenetre, le footer n'est plus en bas de page

2. Le menu horizontal de type onglets à image coulissante, dynamique en fonction de l'option choisie dans le menu de gauche. Comment bloquer l'afichage de l'onglet active tant qu'on est sur la page qui lui corresponde (pour expliquer : on a un menu Accueil | Produits | Contact, si on passe la souris sur les menu ils changent d'apparence, mais quand on clique dessus, ils reviennent à leur état passif).

3. Lors de la réduction de la fenêtre, les menus qui dépassent l'espace visible de mettent en dessous de la première rangée, en couvrant le contenu qui s'y trouve

Voilà mes CSS

* {
	margin:0;
	padding:0;
}

body {
	margin:0;
	padding:0;
	height: 100%;
	background: #BFBDCC;
}

* html {    /*removes the right scroll bar in IE.*/
	overflow-y:hidden; 
}

#conteneur { /* le conteneur global du site, qui sera centré  */
	bottom:0;
	height:100%;
	margin: 0 auto; 
	overflow:hidden;
	position: relative;
	top: 0;
	width: 100%;
}

#header {
	/* Le calque du haut de la page */
    height: 70px;
	background: #369 url(_images/fond_top2.gif) repeat-x bottom;
}

#topbar {
	position:absolute;
	/*background:#369 url(_images/fond_top2.gif) repeat-x bottom;*/
	font:small Georgia,Serif;
	_font:x-small;
	/*font-size:93%;*/
  	line-height:normal;
	height: 25px;
	left: 200px;
	top: 35px;
	width:100%;
	padding: 10px 0 0 0;
}

#sidebar { /* Le menu de gauche */
	position: absolute;
	left: 0;
	width: 350px;
	height: 400px;
	top: 92px;
}

.boite {
	/* Récipient pour accueillir le fond du menu gauche*/
    float: left;
	position :absolute;
	left: 0;
	width: 250px;
	height: 400px;
	top: 70px;
	background-image: url(_images/fond_menu.gif);
	background-repeat: no-repeat;
}

#main {
	/* Le calque du contenu principal */
	width: auto;
    top: 50px;
	height: 80%;
	background: #FFFFFF;
    margin-left: 200px;
	overflow:auto;
}

#footer {
	/* Le calque du bas de la page */
    height: 30px;
	padding: 5px 0 0 0;
    left: 0;
	background: #F8FD82;
}

.menugauche {
	list-style-type: none;
	margin: 25px 0 0 25px;
	padding:0;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: bold;
}

.menugauche li {
margin-bottom: 30px;
}

.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration:none;
}

.menugauche a:hover {
text-decoration: none;
}

p {
margin: 0 0 5px 0;
}
	
.bottom_lg{
	/* Choix de la langue */
	position:absolute;
	height : 30px;
	width: 170px;
	right: 0;
}

.menu_lg{
	font-size: 12px;
	liste_style_type:none;
	margin: 0;
	padding: 0;
}

.menu_lg li{
	float: left;
	block: 25px;
	margin-right: 3px;
	text-align: right;
}

.menu_lg li a{
	width: 53px ;
	line-height: 25px ;
	display: block ;
	text-decoration: none ;
}

.lg1{
	background-image: url(_images/flag_fr.jpg);
	background-repeat: no-repeat;
}

.lg2{
	background-image: url(_images/flag_gb.jpg);
	background-repeat: no-repeat;
}

.lg3{
	background-image: url(_images/flag_ro.jpg);
	background-repeat: no-repeat;
}



#top_menu ul {
	liste-style-type:none;
	margin:0;
	padding: 0;
}

#top_menu li{
	display:inline;
	margin:0;
	padding:0;
}

#top_menu a{
	float:left;
	margin:0;
	padding:0 7px 0 0;
    border-bottom:1px solid #765;
    text-decoration:none;
	background: url(_images/right_roll.gif) no-repeat right top;
}

#top_menu a span{
	float:left;
	display:block;
	font-weight:bold;
	padding: 5px 2px 4px 20px;
	color: #9cf;
	background: url(_images/left_roll.gif) no-repeat left top;
	text-decoration:none;
	text-align: center;
	white-space:nowrap;
}

#top_menu a:hover{
	color: #0000FF;
	background-position: 100% -100px;
}

#top_menu li:hover a{
	background-position: 100% -100px;
}

/* Un forcing pour IE */
#top_menu a:hover span{
	background-position: 0% -100px;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
    #header a span {float:none;}
    /* End IE5-Mac hack */
    #header a:hover span {
      color:#333;
      }

Et le code html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>DEFI GROUP - DEveloppement et Fabrication Industriels</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="accueil.css" rel="stylesheet" type="text/css">
<link href="top_menu.css" rel="stylesheet" type="text/css">
<link href="menu_g.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen">@import "accueil.css";</style>
</head>


<body>
<div id="conteneur"> 
  <div id="header"> DEFI GROUP</div>
  <div id="topbar"> 
    <?php	
	# Affichage et changement du top menu en fonction du choix fait sur le menu de gauche
	if (!isset($_GET['page'])) $page= 'menu'; else $page= $_GET['page']; 
	switch($page)
		{
			case 'menu': include ('top_menu/top_accueil.htm');break;
			case ($page==1||($page>=10&&$page<=19)): include ('top_menu/top_presentation.htm');break;   # top_menu presentation
			case ($page==2||($page>=20&&$page<=29)):include ('top_menu/top_metiers.htm');break; # top_menu metiers
			case ($page==3||($page>=30&&$page<=39)):include ('top_menu/top_produits.htm');break; # top_menu produits
			case 4:include ('top_menu/top_offres.htm');break;
			case 5:include ('top_menu/top_contact.htm');break;
			} 
		?>
  </div>
  <div class="boite"></div>
  <div id="sidebar"> 
    <ul id="menu_g">
      <li><a href="accueil_fr_frameless.php?page=1">Présentation</a></li>
      <li><a href="accueil_fr_frameless.php?page=2">Metiers</a></li>
      <li><a href="accueil_fr_frameless.php?page=3">Produits</a></li>
      <li><a href="accueil_fr_frameless.php?page=4">Offres / Postuler</a></li>
      <li><a href="accueil_fr_frameless.php?page=5">Contact</a></li>
    </ul>
  </div>
  <div id="main"> 
    <!--  http://css.alsacreations.com/Tutoriels-PHP/Inclure-un-fichier-dans-un-autre-grace-a-CSS-et-PHP  -->
    <?php 
		if (!isset($_GET['page'])) $page= 'menu'; else $page= $_GET['page']; 
 	switch($page)
		{   # Pages thématiques affichées suite aux choix du menu à gauche
			case 'menu': include ('contenu/accueil.htm');break;
			case 1: include ('contenu/presentation.htm');break; 
			case 2:include ('contenu/metiers.htm');break;
			# case '3':include ('contenu/clients.htm');break;
			case 3:include ('contenu/produits.htm');break;
			case 4:include ('contenu/offres.htm');break;
			case 5:include ('contenu/contact.htm');break;
		
			# Pages détaillées suite aux choix du top_menu
			# Présentation
			case '11' : include ('contenu/details/presentation/evolution.htm');break; # Evolution
			case '12' : include ('contenu/details/presentation/sites.htm');break; # Sites de prod
			case '13' : include ('contenu/details/presentation/clients.htm');break; # Clients
			case '14' : include ('contenu/details/presentation/chiffres.htm');break; # Chiffres clés
			case '15' : include ('contenu/details/presentation/innovations.htm');break; # Innovations
			case '16' : include ('contenu/details/presentation/certifications.htm');break; # Certifications
			case '17' : include ('contenu/details/presentation/environnement.htm');break; # Environnement
			
			# Metiers
			case '21' : include ('contenu/details/metiers/fabrication.htm');break; # Fabrication
			case '22' : include ('contenu/details/metiers/logistique.htm');break; # Logistique
			case '23' : include ('contenu/details/metiers/qualite.htm');break; # Qualité
			case '24' : include ('contenu/details/metiers/etudes.htm');break; # Etudes
			case '25' : include ('contenu/details/metiers/services.htm');break; # Services
			case '26' : include ('contenu/details/metiers/evolution.htm');break; # Evolution carrière
			
			# Produits
			case '31' : include ('contenu/details/produits/decoupage.htm');break; # Découpage
			case '32' : include ('contenu/details/produits/emboutissage.htm');break; # Emboutissage
			case '33' : include ('contenu/details/produits/assemblage.htm');break; # Assemblage
			case '34' : include ('contenu/details/produits/profilage.htm');break; # Profilage
			case '35' : include ('contenu/details/produits/tubefil.htm');break; # Tube & Fil
			case '36' : include ('contenu/details/produits/outillage.htm');break; # Outillage
			
			# Offres / Postuler
			
			# Contact
			} 
	?>
  </div>
  <div id="footer"> 
  <div class="bottom_lg"> 
    <ul class="menu_lg">
      <li class="lg1"><a href="#">FR</a></li>
      <li class="lg2"><a href="#">EN</a></li>
      <li class="lg3"><a href="#">RO</a></li>
    </ul>
  </div>
</div>
</div>

</body>
</html>

MErci de votre aide,

[édité par Alan, mise en forme du code]
Modifié par Alan (14 Dec 2006 - 10:40)

ockonor

14 Nov 2006 à 17:02

Bonjour et bienvenue à toi sur le forum,

Tu peux(tu dois) mettre ton code entre balises [code] c'est beaucoup plus facile pour nous de lire ton sujet. Ensuite pour ton problème je te conseil de lire
les tutoriaux sur le posisionement des boites et sur les menus;

Pour ta dtd :

change la en strict 1.0 Smiley cligne

Bonne journée Smiley smile

Modifié par ockonor (14 Nov 2006 - 17:04)

ockonor

14 Nov 2006 à 17:07

Pour ton menu,

Si j'ai bien compris declare un

.Page_courante

avec une image fixe sans rollover.

Christian Le Bouler

14 Nov 2006 à 17:10

ockonor a écrit :

Pour ta dtd :

change la en strict 1.0

Sans aller jusqu'à des choix aussi extrémistes Smiley lol

de toutes façons pas de DTD frameset puisque le document concerné n'est pas un jeu de frame.

Donc
. html 4.01 transitional
. html 4.01 strict
. xhtml 1.0 transitional
. xhtml 1.0 strict
Modifié par clb56 (14 Nov 2006 - 17:11)

gabidospi

14 Dec 2006 à 10:14

Merci à tous qui m'ont répondu.
Désolé pour le code.

Je reprends:

Le fait de changer en strict 1.0 n'a pas résolu mon problème. (il était censé résoudre quoi? le bottom de la page? )

Pour le menu, avec le style page_courante je fais quoi? Parce que j'ai déja un style appliqué au menu. Et comment lui indiquer de choisir un style ou un autre?

Merci

Re-voilà pour les css:


* {
	margin:0;
	padding:0;
}

body {
	margin:0;
	padding:0;
	height: 100%;
	background: #FFFFFF;
	font-family: Georgia, "Times New Roman", Times, serif;
}

* html {    /*removes the right scroll bar in IE.*/
	overflow-y:hidden; 
}

#conteneur { /* le conteneur global du site, qui sera centré  */
	bottom:0;
	height:100%;
	margin: 0 auto; 
	overflow:hidden;
	position: relative;
	top: 0;
	width: 100%;
}

#header {
	/* Le calque du haut de la page */
    height: 90px;
	background: #369 url(_images/fond_top2.gif) repeat-x bottom;
	
}

#header span{ /* Containeur pour le fondu en haut sous le logo */
	position: absolute;
	padding: 22px 0 0 30px;
	background:#369 url(_images/fondu_top.jpg) no-repeat top;
	width: 315px;
	height:67px;
	background-position: -42px 0%;
}

#topbar {  /*Containeur pour la barre de menu horizontale */
	position:absolute;
	font:small Georgia,Serif;
	_font:x-small;
	line-height:normal;
	height: 25px;
	left: 200px;
	top: 55px;
	width:100%;
	padding: 10px 0 0 10px;
}

#sidebar { /* Le menu de gauche */
	position: absolute;
	font:small Georgia,Serif;
	_font:x-small;
	left: 0;
	width: 350px;
	height: 400px;
	top: 92px;
}

.boite {
	/* Récipient pour accueillir le fond du menu gauche*/
    float: left;
	position :absolute;
	left: 0;
	width: 250px;
	height: 80%;
	top: 90px;
	background: url(_images/fondu_left.jpg) no-repeat top;
	background-position:  -42px 0%; 
}

#main {
	/* Le calque du contenu principal */
	width: auto;
    top: 50px;
	height: 80%;
	background: url(_images/fond_page.jpg) no-repeat 50px 50px fixed;
    margin-left: 225px;
	/*padding: 25px 0 0 0;*/
	overflow:auto;
}

#footer {
	height: 30px;
	padding: 5px 0 0 0;
	left: 0;
	background-image: url(_images/fond_top2.gif);
	background-repeat: repeat-x;
}

p {
	margin: 0 0 5px 0;
}

et le code de la page principale:


<!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>DEFI GROUP - DEveloppement et Fabrication Industriels</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="accueil.css" rel="stylesheet" type="text/css">
<link href="top_menu.css" rel="stylesheet" type="text/css">
<link href="menu_g.css" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen">@import "accueil.css";</style>
</head>


<body>
<div id="conteneur"> 
  <div id="header"> <span><img src="_images/logo.gif"> </span></div>
  <div id="topbar"> 
    <?php	
	# Affichage et changement du top menu en fonction du choix fait sur le menu de gauche
	
	if (!isset($_GET['menug'])) $menug=1; else $menug=$_GET['menug']; 
	
switch($menug)
{
case 0: include ('');break;
case 1: include ('top_menu/top_accueil.htm');break;
case 2: include ('top_menu/top_presentation.htm');break;   # top_menu presentation
case 3: include ('top_menu/top_metiers.htm');break; # top_menu metiers
case 4: include ('top_menu/top_produits.htm');break; # top_menu produits
case 5: include ('top_menu/top_offres.htm');break;
case 6: include ('top_menu/top_contact.htm');break;
case 7: include ('top_menu/top_plan.htm');break;
default: include ('top_menu/top_accueil.htm');break;
} 
?>

  </div>
  <div class="boite"></div>
  <!-- Menu de gauche -->
  <div id="sidebar"> 
    <ul id="menu_g">
      <li><a href="accueil_fr.php?menug=1&menuh=0">Accueil</a></li>
      <li><a href="accueil_fr.php?menug=2&menuh=0">Présentation</a></li>
      <li><a href="accueil_fr.php?menug=3&menuh=0">Metiers</a></li>
      <li><a href="accueil_fr.php?menug=4&menuh=0">Produits</a></li>
      <li><a href="accueil_fr.php?menug=5&menuh=0">Offres / Postuler</a></li>
      <li><a href="accueil_fr.php?menug=6&menuh=0">Contact</a></li>
      <li></li>
      <li><a href ="accueil_fr.php?menug=7">Plan du site</a></li>
    </ul>
  </div>
  <div id="main"> 
    <!--  http://css.alsacreations.com/Tutoriels-PHP/Inclure-un-fichier-dans-un-autre-grace-a-CSS-et-PHP  -->
    <?php 
		# menug, menu_h, page - variables qui définent les choix du menu gauche, du menu haut 
		#      et le choix fait dans la page principale (contenu)
		if (!isset($_GET['menug'])) $menug=1; else $menug= $_GET['menug']; 
		if (!isset($_GET['menuh'])) $menuh=0; else $menuh= $_GET['menuh']; 
		if (!isset($_GET['page'])) $page='0'; else $page= $_GET['page']; 
	
			
?>
  </div>
  <div id="footer"> 
    <!-- Footer: son, Contact et Langues -->
    <div class="bottom_lg"> 
      <!--<ul class="menu_lg">
        <li class="lg1"><a href="#">Fr</a></li>
        <li class="lg2"><a href="#">En</a></li>
        <li class="lg3"><a href="#">Ro</a></li>
      </ul>-->
    </div>
  </div>
</div>
</body>
</html>

Voilà, merci beaucoup

Sujet clos

CSS et mise en forme, CSS3

Footer fixe, menu coulissant horizontal et onglet active