Position de background

**Necks** · 03/08/2014, 11h33

bonjour,
j'ai mon texte de section ( en gros toute ma section ) qui remonte tout en haut alors qu'il est censé etre plus bas juste après le background et vu le menu qui est quand même dans sa section ( a propos ), j'ai l'impression que les sections recouvre le background. Que dois-je faire pour que les sections restent toujours après le background ( en dessous )..

Merci d'avance

le screen :

http://image.noelshack.com/fichiers/...sans-titre.png

**s0h3ck** · 03/08/2014, 17h32

Bonjour Necks,

Je vous suggère de mettre le code HTML et le code CSS si possible. Votre souci doit être au niveau des techniques de positionnement en CSS (soient les propriétés float, display, box-sizing, flexbox, etc.)

Notez également que si vous mettez un background sur toute la page, votre section sera affectée aussi.

Enfin, expliquez votre définition de background (soit l'arrière-plan d'un élément par exemple), car c'est logiquement impossible d'être en dessus de son propre arrière-plan si vous voyez ce que je veux dire

.

Bonne journée!
s0h3ck.

**Necks** · 04/08/2014, 14h31

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
 
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
	<title>Necks</title>
 
	<!--[if lte IE 8]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><![endif]-->
	<!--[if gt IE 8]><script src="../../ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><!--<![endif]-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
	<script src="js/jquery.nav.js"></script>
	<script>
                $(document).ready(function() {
                        $('#nav').onePageNav();
                });
        </script>
 
 
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]--> 
 
</head>
<body>
 
 
	<header id="accueil">
		<ul id="nav">
		<li class="current"><a href="#accueil">Accueil</a></li>
		<li><a href="#apropos">À propos</a></li>
		<li><a href="#competences">Compétences</a></li>
		<li><a href="#portfolio">Portfolio</a></li>
		<li><a href="#contact">Contact</a></li>
		</ul>
 
	 </header>
 
	<div id="sec_1">
 
	<section id="apropos">
<p><img class="neckslog" src="images/logo_1.png" alt="logo" />"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
	</section>
 
	<section id="competences">
 
	</section>
 
	<section id="portfolio">
 
	</section>
 
	<section id="contact">
 
	</section>
</div>
 
	<footer>
 
 
 
	</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
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
 
html,body
{
	background-image: url("tex.jpg");
	background-size: 100%; /* Ou cover, regarde ce qui te va le mieux */
	background-repeat: no-repeat;
	margin: 0;
	height:100%;
}
 
#nav 
{
 
	margin-left: 20px;
	list-style: none;
	font-family: 'Quicksand', Helvetica, Verdana, sans-serif;
	position: fixed;
	margin-top: 200px;
}
 
#nav li {
	margin-bottom: 10px;
}
 
#nav a {
	background: #ededed;
	color: #666;
	display: block;
	font-size: 27px;
	padding: 5px 10px;
	text-decoration: none;
	border-radius: 5px;
}
 
#nav a:hover {
	background: #dedede;
}
 
#nav .current a {
	background: rgb(50,165,200);
	color: #ededed;
}
 
a
{
	color: white;
	text-decoration: none;
}
 
a:hover
{
	color:black;
}
 
h1
{
	font-family: 'Roboto Slab',Helvetica, sans-serif;
	color: rgb(12,53,78);
}
 
section
{
	height: 100%;
	background-image: url('blog-bg.png') repeat;
	font-family: 'Quicksand',Helvetica,sans-serif;
	font-size: 30px;
}
 
#sec_1
{
	height: 100%;
}
 
section#apropos
{
 
}
 
section#competences
{
 
}
 
section#portfolio
{
	}
 
section#contact
{
 
}
 
p
{
	width: 77%;
	margin-left: 290px;
	padding-top: 50px;
 
}
 
.vertical
{
    border-left: thick solid rgb(12,53,78);
  	box-shadow: 1px 1px 16px #555;
}
 
#rightcol
{
	width: 75%;
	float: right;
}
 
.neckslog
{
	float: right;
	max-width: 200px;
	max-height: 200px;
}
 
hr.style {
    border: 0;
    width: 40%;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}
 
 
@media only screen and (max-width:1400px) {
	/* Style adjustments for tablets landscape 1280 viewports */
 
}
 
@media only screen and (max-width:1280px) {
	/* Style adjustments for tablets landscape 1024 viewports */
 
}
 
@media only screen and (max-width:960px) {
	/* Style adjustments for tablets portrait viewports */
 
}
 
@media only screen and (max-width:767px) {
	/* Style adjustments for smartphones landscapes */
 
}
 
@media only screen and (max-width:479px) {
	/* Style adjustments for smartphones portraits */ 
 
}

C'est vrai que vouloir qu'une section se mettent après un ARRIERE PLAN .. Mais c'est parce que j'ai vu ça dans beaucoup d'autre site en one page design et on m'a dis que c'était possible, je veux juste qu'il y ai la photo en première page, puis après en bas les différentes sections, merci

**s0h3ck** · 05/08/2014, 00h01

J'ai peut-être fini par comprendre ce que vous vouliez vraiment.

Vous voulez un fond-d'écran comme un bandeau ? Voici un aperçu ici.

Avant de montrer les codes, je tiens à dire que vous devez rester concis la prochaine fois. Il est complètement inutile d'avoir des sections vides, c'est de la perte de temps et c'est énervant pour les autres membres. Rester le plus simpliste possible. Merci de votre collaboration.

Maintenant le code HTML (valide) :

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
        <title>Necks</title>
    </head>
<body>
 
    <header class="bandeau_fond_ecran"></header>
 
    <!-- Menu - Accueil -->
    <nav>
        <ul>
            <li><a href="#accueil">Accueil</a></li>
            <li><a href="#apropos">À propos</a></li>
            <li><a href="#competences">Compétences</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
 
    <!-- Section - Informations -->
    <section id="apropos">
        <h1>À propos</h1>
            <p><img class="neckslog"  src="http://www.google.ca/url?sa=i&amp;source=images&amp;cd=&amp;docid=QT7UmxYZQVDD7M&amp;tbnid=xfZblZEyKHgmKM&amp;ved=0CAUQjBw&amp;url=http%3A%2F%2Fwww.hypesouthflorida.com%2Fthe-hungry-pundit%2Fwp-content%2Fplugins%2Favatars%2Favatars-files%2Fimages%2Fdefault-avatar-128.png&amp;ei=Ft7fU6izGYGoyASZyIDABQ&amp;psig=AFQjCNE7H1BfeQY1tGEJ28e1zQikGmn94A&amp;ust=1407266710522463"  alt="logo" /><q  cite="http://en.wikipedia.org/wiki/Lorem_ipsum">Lorem ipsum dolor sit  amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum  dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  proident, sunt in culpa qui officia deserunt mollit anim id est  laborum.</q></p>
    </section>
 </body>
</html>

Maintenant le code CSS (valide) :

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
html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
}
 
.bandeau_fond_ecran
{
    width: 100%;
    height: 100%;
    position: relative;
    width: 100%;
    background: url("http://meriurdu.com/wp-content/uploads/2011/05/dog-wallpapers-meriurdu.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
 
/* ==-=-== Navigation ==-=-== */
 
nav
{
    width: 100%;
    text-align: center;
    /* Ajustement */
 
    display: inline-block;
    vertical-align: top;
}
 
nav ul
{
    list-style: none;
    font-family: 'Quicksand', Helvetica, Verdana, sans-serif;
}
 
nav ul li {
    display: inline-block;
}
 
nav a {
    background: #ededed;
    color: #666;
    display: block;
    font-size: 27px;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 5px;
}
 
nav a:hover {
    background: #dedede;
}
 
nav a:focus {
    background: rgb(50,165,200);
    color: #ededed;
}
 
 
/* ==-=-== Section ==-=-== */
 
section
{
    border: 1px groove black;
    margin: 10px;
    padding: 10px;
 
    /* Ajustement */
 
    display: inline-block;
    vertical-align: top;
 
    /* Personnalisation */
 
    font-family: 'Quicksand',Helvetica,sans-serif;
    font-size: 30px;
}
 
.neckslog
{
    float: left;
    margin: 10px;
}
 
/* ==-=-== Autres détails ==-=-== */
 
a
{
    color: white;
    text-decoration: none;
}
 
a:hover
{
    color:black;
}
 
p
{
    text-align: justify;
}