CSS Position werkt niet
Misschien kan dit een domme vraag zijn, maar ik weet niet hoe ik dit moet oplossen (trouwens zo is hij ook makkelijker op te lossen).
Ik was bezig met mijn website stijl te geven. Dit lukte wel, maar nu wou ik mijn inlogsysteem er in verwerken. De inlogknop moet in de rechterbovenhoek en als je ingelogd bent moet de uitlogknop daar.
Alleen zet hij "inloggen" altijd bovenaan. Wat ik ook doe. Ik kan alles aanpassen, maar "inloggen" blijft bovenaan staan.
Mijn script ziet er zo uit:
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
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
<!DOCTYPE html>
<head>
<title> Mijn navigatie bar </title>
</head>
<body>
<ul class='navbar'>
<li><a href='pagina1.html'>Pagina 1</a>
<li><a href='pagina2.html'>Pagina 2</a>
<li><a href='pagina3.html'>Pagina 3</a>
<li><a href='pagina4.html'>Pagina 4</a>
</ul>
<div class='poep'>
<a href='inloggen.php'>Inloggen</a>
</div>
<style type='text/css'>
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em; }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
.topcorner{
position:absolute;
top:0;
right:0;
}
</style>
<h1> A.u.b niet kotsen, dit is een placeholder. </h1>
<br>
Een mooie tekst
<br>
<br>
<adress><i>Gemaakt 19 december 2013 <br>
(nog geen website naam) 2013 - 2014 </i></adress>
</body>
</html>
<head>
<title> Mijn navigatie bar </title>
</head>
<body>
<ul class='navbar'>
<li><a href='pagina1.html'>Pagina 1</a>
<li><a href='pagina2.html'>Pagina 2</a>
<li><a href='pagina3.html'>Pagina 3</a>
<li><a href='pagina4.html'>Pagina 4</a>
</ul>
<div class='poep'>
<a href='inloggen.php'>Inloggen</a>
</div>
<style type='text/css'>
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em; }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
.topcorner{
position:absolute;
top:0;
right:0;
}
</style>
<h1> A.u.b niet kotsen, dit is een placeholder. </h1>
<br>
Een mooie tekst
<br>
<br>
<adress><i>Gemaakt 19 december 2013 <br>
(nog geen website naam) 2013 - 2014 </i></adress>
</body>
</html>
Zoals ik al zei: ik vind het ook heel lelijk, maar het is een placeholder (plaatshouder voor de mensen die geen Engels kunnen :P)
Hoe doe je deze "fout" oplossen?
Graag in het vervolg bij code, [code] [/code] tags gebruiken.[/modedit]
Gewijzigd op 20/12/2013 17:49:38 door Wouter J
position: absolute;
}
Dit zorgt er voor dat de de <ul> los komt te staan van de rest van de layout.
Dus, <div class='poep'> is het volgende element. Dat komt dus helemaal bovenaan.
position: absolute; geeft de andere elementen het recht om de plaats in te nemen van dat element.
Als je position: absolute; verwijdert, komt <div class='poep'> opnieuw onder de <ul>
-----
Hier is iets wat je absoluut moet lezen (en de oefeningen maken!!)
http://sceneone.nl/positionering/positie.php
Lees de rest van de website ook; daar staat een schat aan goede raad.
Gewijzigd op 20/12/2013 15:59:48 door Kris Peeters
Quote:
Hier is iets wat je absoluut moet lezen (en de oefeningen maken!!)
hehe, mooie woordgrap :)
Er is behoorlijk wat mis met je code, lees eens sceneone.nl van voor tot achter door en oefen per onderdeel.
Quote:
Hier is iets wat je absoluut moet lezen (en de oefeningen maken!!)
Die opmerking kan je ook relatief zien ;)