Responsive design et position

**wezerex** · 11/02/2016, 21h23

Bonjour, bonsoir
Dans une optique d’apprentissage du responsive design je suis en train de créer un site ayant un contenue en latin tout a fait abstrait et dont je ne comprend pas le traître mot.
Cependant avant de commencer a faire du code responsive, j'ai pris la mauvaise habitude de mettre des "position:relative,absolute..." sur tout les block pour pouvoir les placer sans me poser trop de question. Désormais cela me pose problème avec mon code css actuelle, alors évidement je pourrais essayer plein de chose et ça finirais pas fonctionner. Cependant je recherche une explication, voici mon problème :

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
 
header
{
	text-align: center;
	height: 200px;
}
header h1
{
	font-size: 3.5em;
	text-shadow:2px 2px 2px white;
}
nav
{
	position:absolute;
	position: fixed;
	background-color: rgb(110, 110, 100);
	width: 10%;
	color: white;
	background-attachment: fixed;
}
nav li 
{
	font-style: italic;
	font-size: 12px;
}
nav h3
{
	font-style: normal;
	font-size: 2em;
}
nav a:hover
{
	color:red;
}
section
{
	width:60%;
	position:absolute;
	margin-left: 11%;
}
section h2
{
	text-align: center;
}
article
{
	box-shadow: 3px 3px 2px black;
}
a
{
	color:white;
	text-decoration: none;
}
aside
{   
	position:absolute;
	right:0px;
	width:28%;
	float:left;
}
aside img 
{  
	position:relative;
	padding-bottom: 50px;
	margin-bottom: 0px;
	margin-right: 30px;
	margin-left: 30px;
	width:175px;
	height:50px;
}
aside p
{
	position:relative;
	width: 200px;
	height: 100px;
	display: inline-block;
	margin-right: 25px;
	margin-left: 25px;
	border:3px black solid;
	border-radius: 10px;
	box-shadow: 3px 3px 2px black;
}
aside p:hover
{
	box-shadow: none;
}
 
article h2:hover
{
	height: 50px;
	background-image: url("http://www.pimliko.fr/img/typo_plus_vert.gif");
	background-position: top right;
	background-repeat: no-repeat;
}
footer
{
	width:200px;
	height:75px;
	top:0px;
	position:absolute;
	position:fixed;
	margin-left: 1px;
}
footer p 
{
	position:relative;
	background-color:rgba(150, 150, 150, 0.8);
	width:180px;
	height:50px;
	display: inline-block;
	float:left;
	border:1px black solid;
	border-radius: 10px;
	visibility:hidden;
}
footer p:hover
{
	width:200px;
	height: 600px;
	visibility:visible;
}
footer p img 
{
	margin-left: 10px;
	width:50px;
	height:50px;
	float:left;
	visibility: visible;
}
footer p a 
{
    display: inline-block;
}
#menu1
{
	margin-top: 90px;
}
@media screen and (max-width: 1024px)
{
	section
	{
		width:auto;
	}
	aside
	{
		float:none;
		width:auto;	
	}
}

Je suis persuadé qu'il n'y a pas qu'un seul problème, cependant je cherche ici a faire en sorte que lorsque la taille de l'écran est inférieur à 1024px le "aside" soit afficher en dessous du "section" et non pas par dessus.
Merci d'avance pour les réponses et l'explication de mon erreur qui d’après moi viens de tout ces "position:...;".

Invité · 11/02/2016, 21h54

Bonjour,

à moins d'y être obligé (= si vraiment nécessaire de placer un élément en "absolu"* ou "fixed"*), il faut éviter les position:absolute; ou position:fixed; !

Rappel : un élément est positionné en "absolu" ou "fixed"* PAR RAPPORT à son plus proche parent POSITIONNE (position:relative; ou autre)

EN REGLE GENERALE :

garder les éléments DANS LE FLUX (positionné en "absolu" ou "fixed" = hors flux)

N.B. Pour les float:left; float:right; (eux aussi sortant du flux), on peut les réintégrer dans le flux avec une astuce :

Code :

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

1
2
3
4
<div class="clearfix">
   <div style="float:left;">blabla</div>
   <div style="float:right;">blabla</div>
</div>

Avec en CSS, la class "clearfix" :

Code css :

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

1
2
.clearfix:before, .clearfix:after { display:table; content:''; }
.clearfix:after { clear:both; }

* il existe un tas de cas où c'est nécessaire (positionner des icônes, par exemple) , mais rarement pour de la mise en page.

**wezerex** · 12/02/2016, 02h48

Tout d'abord merci pour cette réponse.

Ce que je ne comprend pas c'est que là si je n'utilise pas le paramètre "position", enfin pas autant, que doit-je utiliser pour le remplacer car sans ce paramètre les blocs sont mal placés.
Enfin en ce qui concerne mon code si il est possible de me montrer comment j'aurais due le faire pour qu'il fasse ce que je souhaite (<aside> en dessous de <section> sur le rendue) ça serait sympa. Oui je sais j'en demande beaucoup mais c'est là toute l'utilité d'un forum il me semble.

Et encore merci d'avance pour les futurs réponse.

Invité · 12/02/2016, 07h47

Bonjour,

Sans le code HTMLassocié au CSS, on ne peut rien faire.

A part te conseiller vivement d'aller consulter :
- les cours CSS
- la FAQ CSS
- le glossaire CSS, en particulier le positionnement des blocs

**wezerex** · 13/02/2016, 06h48

Dans ce cas je vous envoie le code html, évidement je vais souvent essayer de régler mes problèmes avec les cours concerné (pas trop le temps en ce moment). Cependant les cours me dise de faire tel chose de tel manière mais je ne comprend pas toujours pourquoi. C'est pourquoi je vous envoie le code html associé. Le contenue n'as pas d'importance, c'est du Lorem ipsum les 3/4 du temps.

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
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"></code>
	<link rel="stylesheet" href="style.css"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<title>Dit folio</title> <!-- titre de la page-->
</head>
<body>
	<header>
		<h1><strong> Dit folio </strong></h1>
	</header>
	<nav>
		<ul>
			<li><a href="#DGH"><h3> DGH </h3></a></li>
				<ul>
					<a href="#DGH1.1"><li> DGH 1.1 </li></a>
					<a href="#DGH1.2"><li> DGH 1.2 </li></a>
					<a href="#DGH1.3"><li> DGH 1.3 </li></a>
					<a href="#DGH1.4"><li> DGH 1.4 </li></a>
				</ul>
			<li><a href="#VPC"><h3> VPC </h3></a></li>
				<ul>
					<a href="#VPC1.1"><li> VPC 1.1 </li></a>
					<a href="#VPC1.2"><li> VPC 1.2 </li></a>
					<a href="#VPC1.3"><li> VPC 1.3 </li></a>
					<a href="#VPC1.4"><li> VPC 1.4 </li></a>
				</ul>
			<li><a href="#ETA"><h3> ETA </h3></a></li>
				<ul>
					<a href="#ETA1.1"><li> ETA 1.1 </li></a>
					<a href="#ETA1.1.5"><li> ETA 1.1.5 </li></a>
				</ul>
			<li><a href="#TRVC"><h3> TRVC </h3></a></li>
				<ul>
					<a href="#TRVC1.1"><li> TRVC 1.1 </li></a>
					<a href="#TRVC1.2"><li> TRVC 1.2 </li></a>
					<a href="#TRVC2.0"><li> TRVC 2.0 </li></a>
				</ul>
			<li><a href="#MMP"><h3> MMP </h3></a></li>
				<ul>
					<a href="#MMP1.0"><li> MMP 1.0 </li></a>
					<a href="#MMP2.4"><li> MMP 2.4 </li></a>
					<a href="#MMP3.1"><li> MMP 3.1 </li></a>
				</ul>
			<li><a href="#CCF"><h3> CCF </h3></a></li>
		</ul>
	</nav>
	<section>
		<article>
			<h2 id="DGH"> DGH </h2>
			<h3 id="DGH1.1"> DGH 1.1 </h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet libero nisl. Cras efficitur sed nisl quis mattis. Aenean ullamcorper quis quam at eleifend. Vivamus enim massa, pretium id lorem nec, vulputate tempus diam. Praesent tincidunt dui ut quam posuere pulvinar. Aliquam sit amet neque nisl. Vestibulum euismod lorem sit amet sem eleifend ultricies. </p>
 
			<h3 id="DGH1.2"> DGH 1.2 </h3>
		<p>Nunc finibus orci vel tempor molestie. Curabitur commodo pellentesque egestas. Proin a libero ac odio fringilla mollis nec varius ante. Donec in scelerisque ex, sed maximus metus. Curabitur et varius tellus, in interdum nulla. Sed at tortor id erat mollis tincidunt laoreet eget justo. Donec non tortor ut tellus vehicula tincidunt eget ac lorem. Mauris a lorem id lectus tempus feugiat.</p>
 
			<h3 id="DGH1.3"> DGH 1.3 </h3>
		<p>Vestibulum id hendrerit metus, et gravida lectus. Nam sodales mi euismod porta viverra. Aliquam risus justo, suscipit quis turpis ac, commodo facilisis lacus. Proin lectus tortor, maximus et mi ut, iaculis hendrerit nisl. Sed quis hendrerit urna, eget tincidunt mauris. Nulla eu velit elit. Sed ac libero fringilla, viverra neque at, elementum massa. Praesent nec accumsan nibh. Aliquam luctus neque in odio vestibulum, molestie sodales mi ornare. Integer ut nisi facilisis, viverra justo in, ultricies risus. Nam bibendum elementum dolor, in dignissim turpis finibus id. Phasellus imperdiet odio vitae neque mollis maximus. Aliquam ut pretium orci. Curabitur tempor magna in eros eleifend, nec tristique tortor hendrerit. Nam hendrerit faucibus nunc, nec maximus est.</p>
 
			<h3 id="DGH1.4"> DGH 1.4 </h3>
		<p>Donec ut pulvinar quam, at cursus lacus. Sed mattis ullamcorper nisl, placerat condimentum nibh molestie ut. Donec luctus risus non mi lacinia tempor. Sed molestie dolor quis posuere imperdiet. Aliquam non faucibus odio. Nunc pretium velit non ligula feugiat venenatis. Suspendisse potenti. Pellentesque suscipit tellus ex, non iaculis lorem faucibus sit amet. Nam eget purus at lacus rhoncus blandit. Integer nunc nisl, aliquam sed mattis vel, vulputate vitae mauris. Phasellus vitae fringilla nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor nunc ut erat euismod pulvinar.</p>
		</article>
		<article>
			<h2 id="VPC"> VPC </h2>
			<h3 id="VPC1.1"> VPC 1.1</h3> 
		<p>Morbi vitae tincidunt massa, id rhoncus justo. Aenean dui justo, accumsan vel ullamcorper semper, placerat nec mi. Cras nunc nulla, feugiat ut elit imperdiet, aliquam consectetur turpis. Vestibulum vel mi nisl. Cras at nibh tincidunt, dictum erat et, porttitor est. Praesent sed tortor elementum, sagittis lectus eget, pellentesque justo. Suspendisse potenti. Fusce volutpat nisl at diam fringilla varius. Pellentesque vulputate ligula mi. Quisque imperdiet lacinia nibh, sit amet condimentum diam lacinia id. Suspendisse at porta eros.</p>
 
			<h3 id="VPC1.2"> VPC 1.2</h3> 
		<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi eu sem non augue pretium scelerisque. Etiam imperdiet dolor et nisl interdum, sed rhoncus ante dignissim. Praesent mattis blandit euismod. Nullam eget neque vel magna porta faucibus at a libero. Curabitur vel velit ac mauris semper cursus ac eget lacus. Ut augue purus, aliquet a risus nec, lacinia elementum libero. Nullam semper dolor mauris, a porta tortor consectetur quis. Curabitur eu magna porttitor, convallis felis non, molestie ligula. Morbi mauris justo, fringilla nec erat ut, malesuada malesuada est.</p>
 
			<h3 id="VPC1.3"> VPC 1.3</h3> 
		<p>Pellentesque pretium neque ante, eu tempus purus consectetur sed. Fusce purus orci, cursus et metus vel, eleifend lacinia diam. Etiam tempus ante nec sapien luctus, mattis porttitor quam elementum. Curabitur pretium luctus quam, nec auctor nunc luctus at. In sed ante diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce cursus ipsum vel arcu lacinia pulvinar. Ut congue commodo libero, at tristique risus elementum vel. Duis venenatis faucibus elit. Phasellus vel ultrices orci, in dictum quam. Fusce a condimentum erat. Phasellus eget molestie velit.</p>
 
			<h3 id="VPC1.4"> VPC 1.4</h3> 
		<p>Aliquam sagittis placerat dui quis finibus. Integer feugiat augue quis dui tempor sodales. Mauris tortor leo, imperdiet eget justo ac, lacinia elementum quam. Proin eu ante urna. Aliquam turpis ligula, commodo quis egestas vel, accumsan in libero. Nullam porta tellus vitae metus ornare, ut viverra tortor venenatis. Vestibulum facilisis enim eu porttitor bibendum. Sed ut nulla quis risus pellentesque pellentesque. Curabitur fermentum lorem et nisi vehicula faucibus. Phasellus ultrices pretium odio, sed mattis eros venenatis at. Etiam consectetur vel enim et vulputate.</p>
		</article>
		<article>
			<h2 id="ETA"> ETA </h2>
			<h3 id="ETA1.1"> ETA 1.1 </h3>
		<p>Mauris eu ipsum et nulla pretium interdum. Fusce malesuada ultricies arcu, in maximus est commodo vel. Maecenas scelerisque ligula vel ex ornare, non tincidunt est ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse efficitur aliquet dolor eget dignissim. Curabitur luctus erat finibus velit tempor, nec congue turpis pulvinar. Suspendisse quis eleifend mi, auctor tempus felis. Vivamus vel nisl et libero tempus luctus. Cras quis iaculis sem.</p>
 
			<h3 id="ETA1.1.5"> ETA 1.1.5 </h3>
		<p>Aliquam molestie mauris eleifend eleifend tincidunt. Sed sed lorem sagittis, molestie erat id, consectetur purus. Nullam vel lectus porta, vestibulum neque vel, semper sem. Mauris blandit, ex id pharetra commodo, tortor dolor porttitor sapien, id viverra sem purus a tortor. Aenean euismod eget justo aliquam accumsan. Etiam vel sem sodales, vulputate arcu vel, ullamcorper leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam ac leo sit amet dui dignissim accumsan. In sit amet dui elementum, faucibus mauris et, commodo velit. Ut pretium fermentum iaculis. Morbi et interdum quam. Phasellus bibendum rutrum accumsan.</p>
		</article>
		<article>
			<h2 id="TRVC"> TRVC </h2>
			<h3 id="TRVC1.1"> TRVC 1.1 </h2>
		<p>Etiam quis egestas lectus. Donec luctus neque convallis eleifend maximus. Cras faucibus mi nec ipsum efficitur, in efficitur quam venenatis. Nam cursus imperdiet libero nec egestas. Etiam tristique felis sed metus molestie, sit amet dictum ipsum vulputate. Quisque tempor vel nunc quis tristique. Ut in magna imperdiet, placerat lorem et, pretium justo. Sed facilisis sit amet lorem id semper. Vivamus a urna ex. Aenean commodo, nisl ac consectetur condimentum, magna turpis egestas nisl, vel consectetur lorem odio et justo. Maecenas ac scelerisque mauris, vitae consequat arcu. Praesent vulputate metus vitae lectus sodales mattis. Donec laoreet consequat rutrum. Nam molestie sagittis dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
			<h3 id="TRVC1.2"> TRVC 1.2 </h2>
		<p>Maecenas lacinia suscipit quam, a iaculis quam aliquet eu. Curabitur eros tellus, dapibus ut sem quis, feugiat rhoncus nunc. Fusce venenatis augue eget sem ultrices auctor. Nunc gravida nisl tincidunt tellus accumsan, a egestas quam tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ullamcorper accumsan facilisis. Nulla egestas nulla non arcu malesuada facilisis. Ut et porttitor sapien, ac consequat libero. Duis a tincidunt nisl, at porttitor odio.</p>
 
			<h3 id="TRVC2.0"> TRVC 2.0 </h2>
		<p>Morbi purus libero, porttitor nec leo non, suscipit viverra velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque sed orci vel augue eleifend eleifend ut at ex. Donec vel neque at est commodo commodo id ac ex. Cras pretium nisi sit amet aliquam aliquam. Cras vulputate ex neque, sed fermentum nulla sollicitudin sed. Phasellus urna odio, tincidunt ut pharetra et, scelerisque eu arcu. Aenean consequat orci in mauris cursus feugiat. Donec a leo eget lectus facilisis iaculis id at nibh. Curabitur cursus suscipit porta.</p>
		</article>
		<article>
			<h2 id="MMP"> MMP </h2>
			<h3 id="MMP1.0"> MMP 1.0 </h2>
		<p>Sed egestas elit dictum mauris viverra tincidunt. Aenean cursus fringilla neque pellentesque gravida. Nulla gravida tellus tristique massa venenatis, sed convallis tellus laoreet. Ut ut elit sit amet mauris pharetra sodales. Sed imperdiet dui lacus, ac vulputate nisl aliquet eget. Aenean convallis justo quam, non imperdiet ipsum varius vitae. Cras non ipsum neque. Nullam placerat ac odio vitae aliquet. Phasellus consequat hendrerit pretium. Curabitur molestie fermentum vehicula. Fusce fringilla ipsum vel eros posuere mollis. Proin non dui sit amet lectus hendrerit tincidunt. Nulla et pharetra sem, vitae accumsan odio. Quisque scelerisque mauris est, nec accumsan risus aliquam nec.</p>
 
			<h3 id="MMP2.4"> MMP 2.4 </h2>
		<p>Integer feugiat neque sit amet est viverra luctus. Sed vulputate urna lacinia justo vehicula ultrices. Etiam fringilla finibus ex in pharetra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam suscipit neque vel sem hendrerit, nec condimentum enim placerat. Suspendisse non arcu tortor. Morbi congue, lectus id vestibulum malesuada, enim diam dapibus dui, a lacinia sem purus et diam. Quisque ut aliquam massa. Pellentesque id elementum elit, id congue lacus.</p>
 
			<h3 id="MMP3.1"> MMP 3.1</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ligula, mattis quis diam ac, sagittis imperdiet erat. Aenean tincidunt orci ac orci sagittis facilisis. Nunc venenatis tellus ut mi ullamcorper tincidunt sit amet ac justo. Pellentesque odio mi, volutpat quis pretium nec, ultrices vel ipsum. Curabitur blandit efficitur quam et tincidunt. Maecenas mauris dui, tincidunt quis tellus vel, laoreet finibus eros. Sed vel ipsum est. Quisque fringilla mattis rutrum. Aenean aliquet aliquet lorem vitae laoreet. Fusce luctus sagittis sapien, in varius eros accumsan varius. Phasellus ullamcorper, nulla ut condimentum auctor, ante ante scelerisque tortor, nec maximus neque mauris ut est.</p>
		</article>
		<article>
			<h2 id="CCF"> CCF </h2>
			<p>
				Donec ultrices magna tellus, a cursus ipsum imperdiet et. Nulla euismod vehicula bibendum. Aliquam ultrices ut nulla eget ultrices. Etiam vitae ipsum elementum, pulvinar felis at, blandit metus. Morbi aliquam eros sed turpis imperdiet pharetra. Donec eu elit dignissim, fermentum nibh id, mollis nulla. Nam imperdiet libero pretium fringilla finibus. Nunc pharetra pellentesque commodo. Sed luctus turpis tincidunt lorem egestas, sit amet varius enim cursus. Vivamus tortor augue, placerat quis iaculis vel, fermentum ut neque. Quisque tristique risus nec augue sodales, nec vulputate sapien ultrices. Phasellus id felis dignissim, ultrices elit pharetra, scelerisque lacus. Vestibulum magna dolor, tincidunt in euismod et, tristique vulputate eros.
			</p>
			<p>
				Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tortor ante, vehicula non feugiat varius, laoreet quis ex. Maecenas elit mi, tempor non consectetur nec, finibus et elit. Aenean ut commodo est. Phasellus malesuada eleifend eros non mattis. Duis vestibulum aliquam massa at lacinia. Nam faucibus est ac scelerisque ultricies. Suspendisse sed posuere ipsum. In vel nunc a lorem volutpat lacinia. Donec ac nisl eget nibh facilisis vulputate auctor ac magna. Praesent mi ante, condimentum sit amet placerat a, molestie a nisl. Donec vel dolor nec ligula varius pharetra sit amet.
			</p>
		</article>
 
	</section>
	<aside>
		<!-- Simulation de proposition d'article similaire et de pub qui seras ensuite gérer par du php une fois que j'en aurais fini avec le html et le css-->
		<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet libero nisl. </p>
		<p> Nunc finibus orci vel tempor molestie.  Curabitur commodo pellentesque egestas. </p>
		<p> Vestibulum id hendrerit metus, et gravida lectus. Nam sodales mi euismod porta viverra.</p>
		<p> Donec ut pulvinar quam, at cursus lacus. Sed mattis ullamcorper nisl, placerat condimentum nibh molestie ut.</p>
		<p> Morbi vitae tincidunt massa, id rhoncus justo. Aenean dui justo, accumsan vel ullamcorper semper, placerat nec mi. </p>
		<p> Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi eu sem non augue pretium scelerisque.</p>
		<p> Pellentesque pretium neque ante, eu tempus purus consectetur sed. Fusce purus orci, cursus et metus vel, eleifend lacinia diam.</p>
		<p> Aliquam sagittis placerat dui quis finibus. Integer feugiat augue quis dui tempor sodales. </p>
		<p> Mauris eu ipsum et nulla pretium interdum. Fusce malesuada ultricies arcu, in maximus est commodo vel.</p>
		<p> Aliquam molestie mauris eleifend eleifend tincidunt. Sed sed lorem sagittis, molestie erat id, consectetur purus.</p>
		<a href="http://w3af.org/" target="_blank"><img src="http://w3af.org/wp-content/uploads/w3af4.png"/></a> <!-- Je savais pas quoi mettre comme fausse pub -->
		<a href="https://subgraph.com/vega/" target="_blank"><img src="http://2.bp.blogspot.com/-Q7X12ke2kQA/Ufo4SgzbJPI/AAAAAAAAANQ/QvwAdvgpOcE/s1600/vega_scanner.jpg" /></a>
		<a href="https://www.kali.org/" target="_blank"><img src="https://www.kali.org/wp-content/uploads/2015/03/kali-website-logo-2015b.png" /></a>
		<a href="https://manjaro.github.io/" target="_blank"><img src="https://wiki.manjaro.org/images/8/81/Skin2.png" /></a>
		<a href="http://www.metasploit.com/" target="_blank"><img src="https://www.nicolashug.com/wp-content/uploads/2015/01/msf.png"/></a>
	</aside>
	<footer>
		<p><img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png"/>
			<a href="osef.html" class="titresnav">1</a></br>
			<a href="osef.html">1.0</a></br>
			<a href="osef.html">1.3</a></br>
			<a href="osef.html">1.6</a></br>
			<a href="osef.html">1.9</a></br>
			<a href="osef.html" class="titresnav">2</a></br>
			<a href="osef.html">2.0</a></br>
			<a href="osef.html">2.3</a></br>
			<a href="osef.html">2.6</a></br>
			<a href="osef.html">2.9</a></br>
			<a href="osef.html" class="titresnav">3</a></br>
			<a href="osef.html">3.0</a></br>
			<a href="osef.html">3.1</a></br>
			<a href="osef.html">3.2</a></br>	
		</p>
		<p><img src="http://static.wixstatic.com/media/d464eb_fcafe6695d7423aebe49410c7fb16964.png_256"/>Nulla vel eros vel justo pretium convallis. Pellentesque vestibulum, ipsum ut consectetur auctor, massa tortor sagittis mi, aliquet laoreet dui lectus eu est. Fusce luctus, dui sed iaculis ullamcorper, sem elit sollicitudin ante, at consequat ligula libero sit amet massa. Suspendisse pretium mattis urna. Vestibulum at libero leo. Suspendisse in enim sodales, aliquet erat at, tincidunt metus. Suspendisse in elit eu leo euismod vulputate. Maecenas gravida at nibh et pulvinar. Proin eleifend justo ut ipsum molestie sodales. Curabitur cursus metus sem, ut facilisis erat pulvinar id. Nulla facilisi. Sed condimentum quis quam vel auctor. Integer tristique felis nec elit accumsan blandit. Praesent mollis metus vitae turpis sagittis convallis. Nullam a tempor mauris.</p>
		<p><img src="http://nilz.fr/wp-content/uploads/2011/05/shutdown.png"/>Fusce non vehicula eros. Integer commodo feugiat fermentum. Suspendisse sed enim facilisis, fringilla eros a, consectetur est. Duis ut diam nisi. Integer feugiat enim.</p>
	</footer>
</body>
</html>

Je vous joins également la partie "body" du code css que j'avais oublié de mettre et qui utilise une image en 1920/200 pour faire une sorte de bandeau en haut de la page web.

Code :

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

1
2
3
4
5
6
body
{
	background-image: url("Melbourne_Docklands_-_Yarras_Edge_-_marina_panorama.jpg");
	background-repeat: no-repeat;
	margin: 0px;
}

Merci beaucoup d'avoir la patience de m'aider

Ps: pour la suite de cet apprentissage du responsive design j'aurais besoin de la taille standard des types d'écran pouvant être utiliser (tv, tablette, portable ...) je n'ai pas encore fait de recherche mais si quelqu'un a un lien sur lequel je pourrais trouver ces informations, je suis preneur. Merci d'avance.

Invité · 13/02/2016, 08h39

Bonjour,

Envoyé par wezerex

... (pas trop le temps en ce moment)...

Dire qu'on n'a pas le temps et réclamer des autres qu'ils prennent sur leur temps...

On ne peut pas apprendre à ta place.

1/ Ton code HTML(5) est faux :

Code html :

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

1
2
3
4
5
6
7
8
9
			<li><a href="#DGH"><h3> DGH </h3></a>
				<ul>
					<li><a href="#DGH1.1"> DGH 1.1 </a></li>
					<li><a href="#DGH1.2"> DGH 1.2 </a></li>
					<li><a href="#DGH1.3"> DGH 1.3 </a></li>
					<li><a href="#DGH1.4"> DGH 1.4 </a></li>
				</ul>
			</li>
			......

Code html :

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

1
2
3
4
5
6
		<article>
			<header>
				<h2 id="DGH"> DGH </h2>
			</header>
			<h3 id="DGH1.1"> DGH 1.1 </h3>
			......

2/ En plus de ceux déjà fournis, voici un lien pour tes recherches.

Envoyé par wezerex

... j'aurais besoin de la taille standard des types d'écran pouvant être utiliser (tv, tablette, portable ...)...

Voir lien ci-dessus.

Responsive design et position

Responsive design en CSS

Vue hybride

Discussions similaires

Partager

Partager