Problème de footer et menu

26 janv. 2010, 22:59

Bonjour à tous, voilà j'ai deux petits problème, le premier sur le menu qui change de place quand je reduis la fenêtre MF, le deuxième qui est sur le footer j'ai cherché partout je n'arrive pas a faire en sorte que mon image reste fixe en bas même si le texte est petit...

Je cherche désespérément quelqu'un qui sera m'aider car mes recherches sont saturées...

Merci d'avance.

Problème sur le menu : Menu grande fenêtre donc OK - Menu en fenêtre réduite donc pas OK

problème sur le footer : image 1 - image 2 - image 3

Le css :

Code : Tout sélectionner

body, html{
  	margin: 0px;
  	padding: 0px;
  	outline: 0px;
  	width: 100%;
  	height: 100%;
  	background-color: white;
}
#header{
	background-image: url("img/header.png");
	background-repeat: repeat-x;
	height: 129px;
}
#logo{
	position: left;
	//float: left;
	height: 100px;
	width: 110px;
	margin-left: 20%;
	margin-top: 7px;
	border: 0px solid red;
}
#menu{
	float: right;
	margin-top: 70px;
	height: 12px;
}
ul{
	margin-right: 50%;
	
}
li{
	display: inline;
	margin-right: 20px;
}
#content{
	padding-left: 20%;
	padding-right: 20%;
	//border: 1px solid black;
	//-moz-border-radius: 5px;
	margin-bottom: 14px;
}
#footer {
	background-repeat: repeat-x;
	height: 30px;
	width: 100%;
    position: relative;
    bottom: 0;
    background-image: url("img/footer.png");
}
a{
	color: rgb(255,255,255);
	text-decoration: none;
	text-shadow: black 0px 1px 1px;
	font-family : arial;
	font-size: 11px;
}
a:hover{
	color: rgb(110,110,110);
}
a.logo{
	border: 0;
}

Le HTML :

Code : Tout sélectionner

<html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Anthony CLUSE</title>
<link href="style.css" type="text/css" rel="stylesheet" title="mon style" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>

<div id="header">
<!--<img id="logo" src="img/logosac.png"/>-->
<a href="index.html"><img id="logo" src="img/logosac.png"/></a>

<div id="menu">
<ul>
<li><a href="index.html">ACCUEIL</a></li>
<li><a href="#">CREATIONS</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="#">BLOG</a></li>
</ul>
</div>

</div>

<div id="content">site en construction...
...
</div>

<div id="footer"><div>

</body>

</html>

08 févr. 2010, 01:44

Salut,

pour ton menu du haut : ce que tu observes est le comportement normal d'un flottant (propriété float en css). Si tu ne veux pas que ça bouge, tu peux soit :
- faire en sorte que l'élément conteneur du flottant aie une taille minimum (min-width) imposée au lieu de s'ajuster bêtement sur la taille de la fenêtre (ce qui va causer l'apparition d'une barre de scroll horizontale si la fenêtre est plus petite que cette taille, mais tu peux éventuellement supprimer la barre de scroll si tu préfères avec overflow*).
- ou alors abandonner les flottants pour la mise en page de ton header et passer à du positionnement (propriété position, valeurs relative, absolute ou fixed puis autres propriétés pour placer les éléments entre eux (top/bottom/left/right, margin*, padding* etc).

pour ton menu du bas c'est un peu le même souci, sans le float : tel qu'il est il se positionne juste après le contenu de ta page (si ce contenu est petit, il remonte en haut, si le contenu est plus haut que la fenêtre il ira tout en bas, ce qu'apparemment tu ne veux pas non plus). Dans ce cas, position:fixed (au lieu de relative) devrait faire ton bonheur.

Problème de footer et menu

Qui est en ligne