28172 sujets

CSS et mise en forme, CSS3

Support extensible avec pied de page fixe

Bonjour Smiley smile

Je me permets d'exposer un problème. J'ai actuellement crée sur mon conteneur ou "support"(sur mon code) une bannière suivi d'un menu horizontal. Comme il sera sur toutes les pages, j'ai jugé bon de passer par du php en intégrant à mon code Html la fonction include. Ainsi, si je dois changer quelque chose, ce sera nettement plus pratique puisque j'aurais juste à changer "menu.php" ! Impeccable ça marche. Le problème c'est que je souhaite placer un bloc vers la droite pour en faire un menu d'information. Et malgré la fonction float utilisée, le menu_d ne veut pas se mettre tout à droite et mon pied de page se retrouve juste après mon menu du haut. Voila concrètement ce que cela donne http://teilijan.free.fr/home.php , certaines choses doivent m'échapper encore. 


<body>

  
 <div id="support">
    <?php include("menu.php"); ?>
    <div id="menu_d"></div>

    
    
    <div id="pied"><img src="imgs/2.png"> Design by Teilijan <img src="imgs/3.png"></div>
 </div>
  
</body>



html, body{
	width: 100%;
	height: 100%;
	margin: auto;
	font-size: 12px;
	background-image: url(imgs/arche.png);
	background-attachment: scroll;
	background-repeat: repeat;
	background-position: center top;
	line-height: 1.1;
}

#support{
    width: 790px;
    min-height: 800px;
	background-image: url(imgs/support.jpg);
    background-attachment: scroll;
	background-repeat: repeat-y;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid black;  
    position: relative;
   
}

#logo{
	width: 100%;
	height: 93px;
	margin-bottom: 10px;
	background-image: url(imgs/Archelune.png);
	background-position: center center;
	background-repeat: no-repeat;
}

#menu{
 
	width: 100%; 
	height: 35px;
	border: 1px solid black; 		
}

.bulle{
	width: 80px;
	height: 20px;
	text-align:center;
	margin-bottom: 10px; 
        float:right;
	margin-top: 10px;
	margin-right: 10px;
	visibility: visible;
	opacity: #ccc;	
}

#menu_d{ 
   float: right;
   width: 120px;
   height : 500px; 
   border: 1px solid black;
}

#pied{
	padding: 5px;
	width: 100%;
        clear: both;
        text-align: center; 
	margin-top: 5px; 
	position: absolute;  
        bottom: 0px;  
	
}

Modifié par Teilijan (02 Dec 2010 - 14:35)
Bonjour, première chose, corrige tes erreurs de validation.

<body> 
<link rel="shortcut icon" href="http://teilijan.free.fr/favicon.ico"> 
  
 <div id="support"> 
  <div id="logo">&nbsp;&nbsp;<img src="imgs/4.png"></div> 
 
<div id="menu"> 
  <!-- Ici on mettra les bulles --> 
     <div class="bulle"><h6><a href="home.php"><h6>Accueil</h6></a></h6></div> 
     <div class="bulle"><h6><a href="home.php"><h6>Accueil</h6></a></h6></div> 
     <div class="bulle"><h6><a href="home.php"><h6>Accueil</h6></a></h6></div> 
     <div class="bulle"><a href="home.php"><h6>Accueil</h6></a></div> 
     </div>   <div id="menu_d"></div>     
<div id="pied"><img src="imgs/2.png"> Design by Teilijan <img src="imgs/3.png"></div> 
 
</div> 
  
</body>


La balise <link> va entre les balises <head>, problèmes avec <h6>... Smiley rolleyes
Ensuite, tu verras...

Peut-être faire un peu de lecture sur les bonnes façons de créer un menu pourrait t'aider aussi.

Bonne continuation
Merci à toi. Oui, j'avais fait des erreurs inattentions. Comme j'ai modifié plein de choses, j'avais la tête ailleurs et j'ai fait plein de bêtises. * Rougit.

Effectivement, c'est mon premier site, j'essaye de comprendre. J'ai lu pas mal de choses déja.

J'ai rebalancé sur le Serveur. Voici ce que cela donne actuellement > http://teilijan.free.fr/home.php

J'aimerais ajouté des Blocs sur la gauche l'un en dessous de l'autre mais faire en sorte que le Support continue de descendre tout en gardant le pied de page fixe. Aurais-tu une idée sur la manière de procéder ?

J'ai commencé à lire le Tuto du site zéro mais j'ai besoin d'expérimenter pour apprendre, chose que je fais actuellement. Une fois le Html dans l'ordre et l'entête crée, il me suffit juste de positionner un bloc avec la fonction float à priori pour faire un menu à droite. Du moins, c'est ce que j' ai compris.

Merci bien.
Modifié par Teilijan (02 Dec 2010 - 13:59)
Sujet clos
Aller à