Hyperlinks positioneren
Ik wil mijn hyperlinks op bepaalde plaatsen op mijn pagina zetten.
Ik heb al zitten knoeien met positions maar het wil niet baten. Hoe kan ik dit oplossen?
Hieronder mijn code:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<style>
.registerlink {
padding-top: 500px;
font-size: 40px;
position: relative;
left: 200px;
}
</style>
<a class="registerlink" href="../registreren.php">Registreren</a>
.registerlink {
padding-top: 500px;
font-size: 40px;
position: relative;
left: 200px;
}
</style>
<a class="registerlink" href="../registreren.php">Registreren</a>
Heb je een link / iets meer code om te zien hoe wat en waar (en misschien iets meer tekst en uitleg waar het moet komen)?
Alvast bedankt voor je snelle reactie!
Heb je iets van een screenshot? Ik word er eerlijk gezegd niet veel wijzer van :)
http://s4.postimg.org/slssw2zf1/Website.png
Ik zou de Registreren dan naar beneden willen.
Gewijzigd op 11/12/2015 15:05:52 door John De Zon
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<style>
.registerlink {
position: relative;
top:50px;
left: 200px;
font-size: 40px;
}
</style>
.registerlink {
position: relative;
top:50px;
left: 200px;
font-size: 40px;
}
</style>
(het blijft wel een beetje gissen op basis van een screenshot uiteraard :) )
Gewijzigd op 11/12/2015 15:22:52 door Max Vaessen
Als ik mijn venster kleiner maak dan overlapt de tekst. Hoe kan ik ervoor zorgen dat deze niet overlapt en dat je moet scrollen?
Ik heb de code een beetje aangepast.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<style>
.registerlink {
position: relative;
top:75%;
left: 200px;
font-size: 40px;
}
</style>
.registerlink {
position: relative;
top:75%;
left: 200px;
font-size: 40px;
}
</style>
Het gaat vooral om de opzet en de verschillende blokken die je gebruikt, dan kan ik er goed naar kijken.
Code (php)
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
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
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:300|Open+Sans:300);
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Titel</title>
</head>
<body>
<style>
body {
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<div class="content">
<div id="content">
<br/>
-------------------------------
</div>
</div>
<style>
.registerlink {
position: relative;
top:75%;
left: 200px;
font-size: 40px;
}
</style>
<a class="registerlink" href="../registreren.php">Registreren</a>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Raleway:300|Open+Sans:300);
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Titel</title>
</head>
<body>
<style>
body {
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<div class="content">
<div id="content">
<br/>
-------------------------------
</div>
</div>
<style>
.registerlink {
position: relative;
top:75%;
left: 200px;
font-size: 40px;
}
</style>
<a class="registerlink" href="../registreren.php">Registreren</a>
</body>
</html>
En voor de CSS:
Code (php)
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
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
body {
margin: 0;
font-family: 'Raleway';
}
h1 {
margin: 0px;
font-size: 45px;
}
h2 {
margin: 0px;
font-size: 20px;
}
p {
margin: 0px;
}
a {
color: white;
}
.text {
}
.content {
position: absolute;
width: 500px;
padding-left: 30%;
height: 500px;
text-align: center;
}
#content {
color: white;
}
#head {
width: 100%;
height: 350px;
background-image: url(../images/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.title {
padding-top: 75px;
margin-left: 50px;
}
.box {
margin: 20px 100px 20px 100px;
border: 1px solid #e7e8ec;
}
input.text {
height: 30px;
width: 250px;
border: 1px solid #e7e8ec;
}
textarea.message {
height: 100px;
width: 250px;
border: 1px solid #e7e8ec;
margin-left: 10px;
}
input.submit {
width: 82px;
height: 40px;
background-color: #ffffff;
color: #183951;
margin-left: 10px;
border: 1px solid #e7e8ec;
font-size: 13px;
}
input.submit:hover {
width: 82px;
height: 40px;
background-color: #e7e8ec;
color: #183951;
margin-left: 10px;
border: 1px solid #e7e8ec;
font-size: 13px;
}
input.submit:hover {
width: 82px;
height: 40px;
background-color: #e7e8ec;
color: #183951;
margin-left: 10px;
border: 1px solid #e7e8ec;
font-size: 13px;
}
#text {
margin-left: 20px;
margin-top: 10px;
}
margin: 0;
font-family: 'Raleway';
}
h1 {
margin: 0px;
font-size: 45px;
}
h2 {
margin: 0px;
font-size: 20px;
}
p {
margin: 0px;
}
a {
color: white;
}
.text {
}
.content {
position: absolute;
width: 500px;
padding-left: 30%;
height: 500px;
text-align: center;
}
#content {
color: white;
}
#head {
width: 100%;
height: 350px;
background-image: url(../images/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.title {
padding-top: 75px;
margin-left: 50px;
}
.box {
margin: 20px 100px 20px 100px;
border: 1px solid #e7e8ec;
}
input.text {
height: 30px;
width: 250px;
border: 1px solid #e7e8ec;
}
textarea.message {
height: 100px;
width: 250px;
border: 1px solid #e7e8ec;
margin-left: 10px;
}
input.submit {
width: 82px;
height: 40px;
background-color: #ffffff;
color: #183951;
margin-left: 10px;
border: 1px solid #e7e8ec;
font-size: 13px;
}
input.submit:hover {
width: 82px;
height: 40px;
background-color: #e7e8ec;
color: #183951;
margin-left: 10px;
border: 1px solid #e7e8ec;
font-size: 13px;
}
input.submit:hover {
width: 82px;
height: 40px;
background-color: #e7e8ec;
color: #183951;
margin-left: 10px;
border: 1px solid #e7e8ec;
font-size: 13px;
}
#text {
margin-left: 20px;
margin-top: 10px;
}
Gewijzigd op 11/12/2015 15:33:54 door John De Zon
En hoe moet de button zich gedragen? Want hij valt nu (responsive gezien) op een gegeven punt inderdaad over de title / text.
Als je de button altijd links wilt houden, zul je toch ergens concessies moeten doen.
Je kunt kiezen voor media-queries (om bij bepaalde breedtes van het scherm de marges e.d. aan te passen). Misschien kun je beter voor een framework als Bootstrap kiezen (alleen het grid systeem) als je een website responsive wilt maken.
Responsive sites maken met absolute posities op de containers (in jouw geval .content) werk vaak niet heel goed.
Je zou ook kunnen kiezen voor iets in deze richting:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.contentWrapper {
display:table;
margin:0 auto;
width: 500px;
}
.content {
display:table-cell;
}
.registerlink {
display:table-cell;
padding:0 50px 0 0;
margin-left:-40px;
}
display:table;
margin:0 auto;
width: 500px;
}
.content {
display:table-cell;
}
.registerlink {
display:table-cell;
padding:0 50px 0 0;
margin-left:-40px;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<div class="contentWrapper">
<a class="registerlink" href="../registreren.php">Registreren</a>
<div class="content">
<div id="content">
Duis facilisis fermentum est sit amet facilisis. Nullam varius mauris nec scelerisque rutrum. Etiam id ante et felis pharetra vehicula quis non leo.
</div>
</div>
</div>
<a class="registerlink" href="../registreren.php">Registreren</a>
<div class="content">
<div id="content">
Duis facilisis fermentum est sit amet facilisis. Nullam varius mauris nec scelerisque rutrum. Etiam id ante et felis pharetra vehicula quis non leo.
</div>
</div>
</div>
Gewijzigd op 11/12/2015 16:42:12 door Max Vaessen