Pied de page lors d'un recadrage de la fenêtre

Invité · 07/05/2014, 13h49

Bonjour,

J'ai un problème sur mon site web pour le pied de page, il se superpose (contre mon gré) au menu de navigation lors du recadrage de la fenêtre. (www.maxime-lamarthe.fr/test)

Voici le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="développeur, informatique, web, mobile, epitech, nantes" />
<meta name="author" content="Maxime Lamarthe" />
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="icon" type="image/png" href="image/portrait.png" />
<title>Maxime Lamarthe</title>
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<header>
  <h1 class="me">Maxime LAMARTHE</h1>
  <p class="me">19 ans<br />
    Première année à Epitech Nantes</p>
<a><img src="image/portrait.jpg" alt="Portrait" id="photo"/></a>
</header>
<div class="main clearfix">
  <nav id="menu" class="nav">
    <ul>
      <li> <a href="index.html"> <span class="icon"> <i aria-hidden="true" class="icon-home"></i> </span> <span>Accueil</span> </a> </li>
      <li> <a href="pedago.html"> <span class="icon"> <i aria-hidden="true" class="icon-school"></i> </span> <span>Formation</span> </a> </li>
      <li> <a href="experience.html"> <span class="icon"> <i aria-hidden="true" class="icon-experience"></i> </span> <span>Expérience</span> </a> </li>
      <li> <a href="hobbies.html"> <span class="icon"> <i aria-hidden="true" class="icon-hobbies"></i> </span> <span>Hobbies</span> </a> </li>
      <li> <a href="voyages.html"> <span class="icon"> <i aria-hidden="true" class="icon-voyage"></i> </span> <span>Voyages</span> </a> </li>
      <li> <a href="en/home.html"> <span class="icon"> <i aria-hidden="true" class="icon-english"></i> </span> <span>English</span> </a> </li>
    </ul>
  </nav>
</div>
<script>
                        //  The function to change the class
                        var changeClass = function (r,className1,className2) {
                                var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
                                if( regex.test(r.className) ) {
                                        r.className = r.className.replace(regex,' '+className2+' ');
                            }
                            else{
                                        r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
                            }
                            return r.className;
                        };      
 
                        //  Creating our button in JS for smaller screens
                        var menuElements = document.getElementById('menu');
                        menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');
 
                        //  Toggle the class on click to show / hide the menu
                        document.getElementById('menutoggle').onclick = function() {
                                changeClass(this, 'navtoogle active', 'navtoogle');
                        }
                        document.onclick = function(e) {
                                var mobileButton = document.getElementById('menutoggle'),
                                        buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;
 
                                if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
                                        changeClass(mobileButton, 'navtoogle active', 'navtoogle');
                                }
                        }
</script>
<div class="side" id="left"></div>
<section>
  <p>EN COURS DE CONSTRUCTION</p>
</section>
<div class="side" id="right"></div>
<footer>
  <p id="coordonnee"><a href="mailto:maxime.lamarthe@epitech.eu">maxime.lamarthe@epitech.eu</a><br />
    06.46.89.04.84<br />
    6 rue Mathurin Brissonneau<br />
    44100 Nantes</p>
  <figure id="lien">
	<a href="download/cv.pdf" target="_blank"><img id="cv" src="image/pdf.png" alt="icone pdf" title="Télécharger mon cv au format pdf" /></a>
	<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> 
    <a href="https://www.facebook.com/sharer/sharer.php?u=www.maxime-lamarthe.fr" target="_blank"><img id='fb' src="image/facebook.png" alt="icone facebook" title="Partager sur facebook" /></a> 
	<a href="http://fr.linkedin.com/pub/maxime-lamarthe/89/305/647/" target="_blank"><img id='in' src="image/linkedin.png" alt="icone linkedin" title="Voir mon compte linkedin" /></a>
  </figure>
</footer>
</body>
</html>

et le css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
@charset "iso-8859-1";
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
 
 
body, html {
	display: block;
	font-size: 15px;
	padding: 0;
	margin: 0;
	height: 100%;
}
 
body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #89867e;
	background: #F0F0F0;
}
 
a {
	color: #333;
	text-decoration: none;
}
 
a:hover {
	color: #fff;
}
 
.main {
	width: 100%;
	margin: auto;
	padding: 0em;
	min-height: 11em;
}
 
footer
{
	position: absolute;
	padding:0;
	margin: 0;
	left:0;
	bottom: 0;
	width: 100%;
	height: 160px;
	overflow: hidden;
	border-radius: 10px 10px 0 0;
	background-color: #959595;
}
 
#lien
{
	display: block;
	position: absolute;
	width: 10em;
	height: 10em;
	right: 1%;
	bottom: 0.4em;
	margin: 0;
	padding: 0;
}
 
#fb {
	position: absolute;
	bottom: 0em;
	right: 0em;
}
 
#in {
	position: absolute;
	bottom: 0em;
	left: 0em;
}
 
#cv {
	position: absolute;
	top: 0em;
	right: 2.8em;
}
 
#coordonnee {
	display: block;
	position: absolute;
	bottom: 1.5em;
	left: 1%;
	color: #F0F0F0;
	font-size: 16px;
}
 
section
{
	font-size: 36px;
	font-weight: bold;	
	position: relative;
	display: block;
	top: 10%;
	text-align: center;
}
 
header {
	position: abolute;
	display: inline-block;
	top: 0px;
	width: 100%;
}
 
.me
{
	position: relative;
	display: block;
	width: 310px;
	top: 0;
	padding-left: 1%;
}
 
#photo
{
	position: absolute;
	right: 1em;
	top: 1em;
	border: 1px #8B4513 ridge;
	border-radius: 10px;
	width: auto;
	height: 6.2em;
	margin: 0;
	padding: 0;
}

Merci pour votre aide,

Bonne journée.

**rodolphebrd** · 07/05/2014, 15h09

Bonjour,
Pour jouer avec les superpositions utiliser z-index.

Invité · 07/05/2014, 17h49

En fait non je me suis mal exprimé, je ne veux pas qu'ils se superposent. J'aimerais que lorsque je recadre ma fenêtre, le scroll augmente et avoir le pied de page tout en bas de la page (et non de la fenêtre).

Cordialement,

Merci.