28172 sujets

CSS et mise en forme, CSS3

[Résolu] Footer récalcitrant

Bonjour à toutes et à tous,

J'ai un problème assez léger mais embêtant mon footer ne se positionne correctement que lorsque je le met en position fixed. Or je le veux simplement en bas mais lorsque je le met en absolute ou en relative il y a un minuscule espace entre le bord et l'image. J'ai déja essayer beaucoup de chose mon CSS est surement un grand foutoir ! Je vous le link pour que vous puissiez m'aider. J'espère que sa sera le cas !

Merci à vous.

CSS : 

*{
	margin:0;
	padding:0;
	width:100%;
}

html { 
	background: url(img/wallpaper.png) no-repeat center fixed; 
	background-size: cover;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
.titre {
	width:50%;
	display: block;
	margin: auto;
}
#corps {
	text-align: justify;
	width: 50%;
	background-color: white;
	background-position: center;
	border:outset;
	margin: auto;
	padding: 5px 20px 0px 20px;
	height:100%;
	font-size:medium;
}
.pied{
	position: absolute;
	bottom:0;
}
.mail a {
	display:block;
	width:180px;
	line-height:40px;
	text-align:center;
	vertical-align:middle;
	background:url(img/mail.png) no-repeat;
	color:black;
	text-decoration:none;
	position: fixed;
	float:left;
	top:93%;
	z-index: 2;
	margin: 0px 0px 0px 15%;
	bottom:0;
}
.mail a:hover {
	background:url(img/mail2.png) no-repeat;
	text-decoration: underline;
}
.cv a {
	display:block;
	width:180px;
	line-height:40px;
	text-align:left;
	vertical-align: left;
	background:url(img/cv.png) no-repeat;
	background-position:140px 4px;
	color:black;
	text-decoration:none;
	position: fixed;
	bottom:0;
	top:93%;
	z-index: 2;
	margin: 0px 0px 0px 70%;
	bottom:0;
	padding:0px 0px 0px 0px;
}
.cv a:hover {
	background:url(img/cv.png) no repeat;
	text-decoration: underline;
}
.haut, .bas {
	height:60px;
	width:60px;
	position:fixed;
	z-index:1;
}
.haut{
	top:89.5%;
	margin:0px 0px 0px 92%;
}
.bas {
	top: 89.5%;
	margin: 0px 0px 0px 2.5%;
}
Bonjour,

Merci de votre réponse.

Voici mon HTML :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Présentation du Site Test</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
		<link rel="icon" type="image/png" href="img/favicon.png" />
	</head>
	<div class="global">
		<div id= "haut">	</div>
		<h1> <img src="img/H1.png" alt="Titre" class="titre"> </h1>
		
	<body>

		<div> <a href="#bas"> <img height="60px" width="60px" src="img/bas.png" alt="bas" class="bas"> </a> </div>
		<div> </br>	</br>	</br></div>
		<div id="corps" > ...</div>
		<div class="pied"> <img src="img/pied_page.png" alt="pied"/> </div>
		<div> <a href="#haut"> <img height="60px" width="60px" src="img/haut.png" alt="haut" class="haut"> </a> </div>
		<div id="bas"> </div>
	</div>
</body>
</html>


J'ai supprimer le texte surperflu
Modifié par Philigane (16 Apr 2013 - 16:36)
Votre html présente quelques problèmes:

-position de la balise body inadequate

-une balise DIV avec des BR!

Regardez l'exemple que je vous ai donné. Smiley cligne
Inadéquate pourquoi cela ? Expliquez moi je vous prie Smiley smile .

Pour les </br> c'est parce que sinon mon menu qui est un menu déroulant en js empiète sur mon bloc "corps" c'est pas très esthétique mais j'ai fais sa vite mdr.
Vous écrivez:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Présentation du Site Test</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
		<link rel="icon" type="image/png" href="img/favicon.png" />
	</head>
	<div class="global">
		<div id= "haut">	</div>
		<h1> <img src="img/H1.png" alt="Titre" class="titre"> </h1>
		
	<body> <!-- PAS BON -->

		<div> <a href="#bas"> <img height="60px" width="60px" src="img/bas.png" alt="bas" class="bas"> </a> </div>
		<div> </br>	</br>	</br></div>
		<div id="corps" > ...</div>
		<div class="pied"> <img src="img/pied_page.png" alt="pied"/> </div>
		<div> <a href="#haut"> <img height="60px" width="60px" src="img/haut.png" alt="haut" class="haut"> </a> </div>
		<div id="bas"> </div>
	</div>
</body>
</html>

Alors que cela est plus approprié:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Présentation du Site Test</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
		<link rel="icon" type="image/png" href="img/favicon.png" />
	</head>
 <body>
	<div class="global">
		<div id= "haut">	</div>
		<h1> <img src="img/H1.png" alt="Titre" class="titre"> </h1>

		<div> <a href="#bas"> <img height="60px" width="60px" src="img/bas.png" alt="bas" class="bas"> </a> </div>
		<div> </br>	</br>	</br></div>
		<div id="corps" > ...</div>
		<div class="pied"> <img src="img/pied_page.png" alt="pied"/> </div>
		<div> <a href="#haut"> <img height="60px" width="60px" src="img/haut.png" alt="haut" class="haut"> </a> </div>
		<div id="bas"> </div>
	</div>
</body>
</html>
Et ceci est susceptible de nuire à tout mon site c'est cela ? Quand bien même mon pied de page reste figé en bas =/
Bonjour,

En HTML5, le retour chariot c'est 
<br>
, non?

Erreur dans votre syntaxe ici : 
<img height="60px" width="60px"
. Il ne faut pas de 'px'.

Je sais ... ceci ne résoud pas le problème...
Modifié par lddsoft (17 Apr 2013 - 16:10)
Hello,

Une petite page de test en ligne, c'est vraiment l'idéal, là, on ne sait pas vraiment où vous en êtes dans vos corrections, nous n'avons pas accès aux images, ni aux éventuels styles parasitaires, c'est réellement problématique de tenter de vous venir en aide Smiley ohwell
Mon CSS complet :http://www4.zippyshare.com/v/44668154/file.html
Mon PHP complet sans les textes :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Présentation du Site Test</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
		<link rel="icon" type="image/png" href="img/favicon.png" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/interface.js"></script>
	</head>
</body>
	<div class="global">
		<div id= "haut">	</div>
		<h1> <a href="index.html"> <img src="img/H1.png" alt="Titre" class="titre"></a></h1>
		

	<div class="dock" id="dock">
	  <div class="dock-container">
	  <a class="dock-item" href="index.php"><img src="img/home.png" alt="home" /><span>Accueil</span></a>  
	  <a class="dock-item" href="competences.php"><img src="img/portfolio.png" alt="portfolio" /><span>Compétences</span></a>
	  <a class="dock-item" href="contact.php"><img src="img/email.png" alt="contact" /><span>Contact</span></a>   
	  <a class="dock-item" href="comment.php"><img src="img/calendar.png" alt="calendar" /><span>Commentaires</span></a> 
	  <a class="dock-item" href="about.php"><img src="img/information.png" alt="about" /><span>À propos</span></a> 
	  </div>
	</div>
	<script type="text/javascript">
		
		$(document).ready(
			function()
			{
				$('#dock').Fisheye(
					{
						maxWidth: 50,
						items: 'a',
						itemsText: 'span',
						container: '.dock-container',
						itemWidth: 40,
						proximity: 90,
						halign : 'center'
					}
				)
			}
		);

	</script>
		<div> <a href="#bas"> <img height="60px" width="60px" src="img/bas.png" alt="bas" class="bas"> </a> </div>
			<div class="date">
				<?php
					$date = date("d-m-Y");
					Print("Nous sommes le $date");
				?>
			</div>

		<div id="corps" > 
		<div class="pied"> <img src="img/pied_page.png" alt="pied"/>	</div>
		<div> <a href="#haut"> <img height="60px" width="60px" src="img/haut.png" alt="haut" class="haut"> </a> </div>
		<div id="bas"> </div>
	</div>
</body>
</html>


Photo du site : http://img4.hostingpics.net/pics/784052photo.png

J'espère que sa vous va je sais pas faire une page de test.
Modifié par Philigane (18 Apr 2013 - 21:38)
Sujet clos
Aller à