Positionnement d'une DIV (image) et du footer

**Giv3rs** · 19/09/2013, 01h24

Bonsoir à tous,

Je réalise actuellement ce qui est destiné à devenir une maquette (pour le moment, très simplifiée) d'un site internet et je rencontre quelques problèmes que je n'arrive pas à résoudre seul. Je me tourne donc vers vous afin de solliciter votre aide.

Voici ces problèmes :

- Lorsque je redimensionne la fenêtre de mon navigateur, la div qui contient l'image (cf. Mire de barre sur la prévisualisation) passe en dessous de la div "menu 01 - Menu 02 - etc.", ce que je ne souhaite pas. J'ai essayé de modifier de nombreux paramètres, toutefois, rien y fait, je n'arrive pas à résoudre ce problème.

- L'autre soucis concerne le footer, en fait, je souhaiterais que celui soit positionné "par rapport au bas de la page". Je m'explique : j'aimerais que le footer ne soit pas dépendant de la taille de l'image (notamment lorsque celle-ci est plus petite que la page). Avec le code ci-desous, lorsque j'insert une image plus petite dans la page, le footer remonte… Malheureusement, je n'ai pas trouvé d'alternative à ce soucis (mis à part "position : fixed;" mais qui ne correspond pas à mon besoin).

Ci-dessous, les codes HTML et CSS ainsi qu'une visualisation :

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
86
87
88
<!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>Mon Super Site</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link href="style.css" rel="stylesheet" type="text/css">
 
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet">
	<style type="text/css">
        </style>
 
</head>
 
 
<body>
<div class="container">
<header id="navtop">
        <nav class="fleft">
        <p class="alignright">
        	<h6>MON</h6>
        	<h2>SUPER</h2>
        	<h6>SITE</h6></p>
        </nav>
 
        <nav class="fright">
        	<br> 
        	<br>
        	<img src="images/RLD.png">
        </nav>
</header>
 
 
 
<div class="home-page main">
	<section class="grid-wrap" >
      <div class="grid col-one-half mq2-col-full">
            	<p class="alignright"><img src="images/RLC.png" width = "15px" height="370px"></p>
            </div>
 
	  <div class="slider grid col-two-half mq2-col-full">
                <br>
                <br>
                <br>
                <br>
                <br>
                <p class="alignleft"><a href="menu01.html">MENU 01</a></p>
                <p class="alignleft"><a href="menu02.html">MENU 02</a></p>
                <p class="alignleft"><a href="menu03.html">MENU 03</a></p>
                <p class="alignleft"><a href="menu04.html">MENU 04</a></p>
	       <br>
               <br>
               <br>
           </div>
 
 
  	<div class="slider grid col-three-half mq2-col-full">
    <img src="images/image.jpg" width = "800px" height="380px">
	</div>
 
</section>
</div>
 
<div class="divide-top">
	<hr />
	<footer class="grid-wrap">
		<ul class="grid col-one-third social">
			<li><a href=" ">RSS</a></li>
			<li><a href=" ">Facebook</a></li>
			<li><a href=" ">Twitter</a></li>
		</ul>
 
        <div class="up grid col-one-third ">&nbsp;</div>
 
		<nav class="grid col-one-third">
			<ul>
				<li><a href="menu01.html">MENU 01</a></li>
				<li><a href="menu02.html">MENU 02</a></li>
				<li><a href="menu03.html">MENU 03</a></li>
				<li><a href="menu04.html">MENU 04</a></li>
			</ul>
		</nav>
	</footer>
</div>
</div>
</body>
</html>

Code css :

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
126
127
128
129
130
131
132
133
134
135
136
html {
	font-family: andale mono;
	font-weight: 400; /* spécifier la graisse de la fonte (gras) - 400 = normal */
	background-color: #1B118B;
	font-smooth:always;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;}
 
body {width:100%;
	height:100%;
	margin: 0px;
	font-size: 13px;
	line-height: 1.6;} /* spécifier la hauteur d'une ligne d'un bloc de texte */
 
a {    color:#999999; 
	font-weight: 400;
	cursor: pointer;  
	text-decoration: none; 
	transition:color 0.2s ease; 
	-moz-transition:color 0.2s ease; 
	-webkit-transition:color 0.2s ease; 
	-o-transition:color 0.2s ease;}
 
a:hover {color:#FF0; 
	text-decoration:none; 
	text-shadow: 0px 0px 10px #FF0;
	background: rgba(0, 0, 0, .025);} 	
 
a:active, a:focus{color:#FF0; 
	text-decoration:none; 
	text-shadow: 0px 0px 10px #FF0;
	background: rgba(0, 0, 0, .025);}
 
p{margin: 0 0 1em;}
 
p:last-child {margin-bottom: 0;}
 
hr{				/* ligne de separation */
	display:block; 
	height:1px; 
	border:0px; 
	border-top:1px solid #FF0; 
	margin:1em 0; 
	padding:0}  
 
pre, code, kbd, samp{				/*affiche le code (alinéas et tabulations, nombres espaces) comme il est écrit dans le fichier source */
	font-family:monospace,monospace; 
	_font-family:  andale mono;
	font-size:1em} 
 
ul, ol{list-style:none; 
	list-style-image:none; 
	margin:0; 
	padding:0;}
 
/* -- TYPO
------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{margin:0 0 1em; font-weight: normal;}
 
h1 {font-size: 4.1em; 
	letter-spacing: -0.075em; 
	text-transform: uppercase; 
	line-height: 0.9; 
	color: #555;
	margin: 0 0 0.5em; 
	font-weight: normal; }
h2 { font-size: 2.5em; margin: 0 0 5px; letter-spacing: -0.1em;  color: #FF0; line-height: 0.5; }
h3 { font-size: 1.75em;}
h4 { font-size: 1.5em; }
h5 { font-size: 1.17em; text-transform: uppercase; margin: 0; color: #555; }
h6 { font-size: 1em; margin-bottom: 2px; font-weight: 700; color: #ffffff;}
 
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#333; text-decoration: none;}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#0078CF;text-decoration: underline;}
 
/* -- GRID  https://github.com/mattberridge/Proportional-Grids/
------------------------------------------------------------- */
.container {position:relative; 				
   width: 90%; 
   margin: 3em auto 0em auto; 
   max-width: 1100px; min-width: 300px;}
 
 
.grid-wrap {margin-left: -3em; 
  overflow: hidden;
  *zoom:1;}
 
.grid-wrap:before, .grid-wrap:after{content:""; display:table}
.grid-wrap:after{clear:both}
 
.grid {float: left;
  padding-left: 0; 
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}
 
.col-one-half {position: absolute; left: 90px; width: 30px; margin-top:100px;}
 
.col-two-half {margin-left: 160px; width: 90px; margin-top:100px;margin-bottom:160px;}
 
.col-three-half {margin-left: 2px; width:800px; height:380px; margin-top:100px; margin-bottom:10px;}
 
.col-one-third {width: 33.333%; padding-left:3.5em;}
 
.divide-top{margin-top: 12em;
	 position:absolute; 
	 width:100%; 
	 min-width:1100px; 
	 padding-right:30px;}
 
.fright{position: absolute; margin-right: 90px; margin-left:180px;} 
.fleft{position: absolute; padding-top: 20px; left: 80px; width: 150px;} 
 
.alignleft{float: left;clear: left;margin: 0.38em 1.62em 0.38em 0;}
.alignright {float: right;clear: right;margin: 0.38em 0 0.38em 1.62em;}
.aligncenter {margin: 0 auto 1.62em;display: block;}
 
/* -- HEADER
------------------------------------------------------------- */
header nav ul { float: left; overflow: hidden; padding: 0 3em 0 2em; border-left: 1px solid #ddd; line-height: 2em; }
nav a, menu a { text-decoration: none; color: #555; }
.navactive { color: #0078CF }
.logo {margin-bottom: 3em;}
.logo:hover {background: none;}
 
/* -- FOOTER
------------------------------------------------------------- */
footer  {color: #000000; margin-bottom: 1em; }
footer nav ul { float: right; overflow: hidden; }
footer a {color: #999999;}
footer li { float: left; margin-right: 1em; padding-right: 1em; border-right: 1px solid #DDD; font-size: 0.8em; }
footer li:last-child { margin-right: 0; padding-right: 0; border-right: none; }
/* -------------------------------------------------------------
======	END
------------------------------------------------------------- */

D'avance merci pour votre aide et votre temps,

**rodolphebrd** · 19/09/2013, 11h37

Bonjour,

pris par le temps je vous transmets un lien pour votre footer à coller en bas de page: http://css.developpez.com/faq/?page=...ooter_bas_page

On verra le reste après

**Giv3rs** · 21/09/2013, 19h18

Bonjour,

Merci pour le lien, en reprenant le tout à tête reposée, j'ai compris et résolu le problème du footer

Il ne reste plus que ce problème de DIV qui se déplace (et qui commence à me rendre dingue) !

Encore merci,

**rodolphebrd** · 21/09/2013, 19h23

Avez-vous une page en ligne ?

**Giv3rs** · 21/09/2013, 19h40

Malheureusement non, je travaille en local.

**rodolphebrd** · 21/09/2013, 20h29

Je verrais votre problème sous cet angle avec la propriété table/table-cell :

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
<section >
<div class="menu">
                <p>
                  <a href="menu01.html">MENU 01</a></p>
                <p class="alignleft">
                  <a href="menu02.html">MENU 02</a></p>
                <p class="alignleft">
                  <a href="menu03.html">MENU 03</a></p>
                <p class="alignleft">
                  <a href="menu04.html">MENU 04</a></p>
  </div>
  <div class="img">
    <img src="http://lorempixel.com/800/380" width = "800px" height="380px">
	</div>
</section>

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
a {   
  color:#999999; 
	font-weight: 400;
	}
 
a:hover {
  color:red; 
	text-decoration: none; 		
}
section{
  display:table;
  margin:100px;
}
.img, .menu{
  display:table-cell;
  padding-left:20px;
}
.menu{
  vertical-align:middle;
  position:relative;
  min-width:80px;
}
.menu:before{
  content:"";
  position: absolute;
  top:0;
  left:-20px;
  display:block;
  width: 15px;
  height: 387px;
  background: url(http://lorempixel.com/15/387);
}

http://codepen.io/anon/pen/zEjhw

**Giv3rs** · 26/09/2013, 21h28

Bonsoir,

Effectivement, je n'avais pas pensé à la propriété table/table-cell, celle-ci fonctionne (à priori) parfaitement pour ce que je souhaite faire

De même, je n'avais pas pensé à la propriété .menu:before, cette dernière s'avère très utile plutôt que de créer une autre DIV (pour l'utilisation que je souhaite en faire en tout cas).

Merci beaucoup pour votre aide et votre temps,

PS : Désolé pour le délai de réponse, je n'avais pas reçu de notification.

**rodolphebrd** · 26/09/2013, 21h40

Envoyé par Giv3rs

PS : Désolé pour le délai de réponse, je n'avais pas reçu de notification.

Il faut le sélectionner dès la création de la discussion ou même en cours de route en éditant votre message et en choisissant cette option (qui par défaut est désactivée).

**Giv3rs** · 26/09/2013, 21h53

C'est noté, merci

Positionnement d'une DIV (image) et du footer

Positionnement en CSS

Discussions similaires

Partager

Partager