ik krijg css selector niet onder controle
in mijn website wil ik album's en de naam van de album's netjes bij elkaar hebben maar dit wil maar niet lukken.
Dit is de pagina waar ik het over heb;http://www.robcnossen.nl/
De albumnaam Belgie staat waar ik het hebben wil maar Holland zweeft ergens daarboven en krijg ik niet goed.
Mijn code was;
Code (php)
Het gaat om het stukje binnen de <h2> tags, dat zorgt voor de tekst. Dit ziet er nu zo uit;
Code (php)
omdat ik dacht dat het eerste gedeelte van deze zin voor problemen zorgde maar er veranderd niets. Ik ben nu op een punt aangekomen dat ik er meer een zooitje van maak dan dat ik iets oplos. Ook position relative of absolute wil niet helpen, de tekst en foto's verschuiven maar niet hoe ik het hebben wil.
Ziet iemand waarom de tekst zo raar staat en mij kan helpen om dit weer goed gepositioneerd kan krijgen?
Gewijzigd op 26/08/2013 11:45:18 door Rob Cnossen
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="albums">
... hier alles over Holland
<div id="albums">
... hier alles over Belgi
</div>
</div>
... hier alles over Holland
<div id="albums">
... hier alles over Belgi
</div>
</div>
Dat kan nooit de bedoeling zijn.
- Ten eerste: gebruik nooooit twee keer de zelfde id.
id moet uniek zijn.
Als je wil dat meerdere elementen een zelfde ding doen, gebruik dan class="albums".
- Die ene div hoort niet in de andere genest te worden.
Probeer eens opniew, met <div class="albums">. En niet genest, maar iets als
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div class="albums">
... hier alles over Holland
</div>
<div class="albums">
... hier alles over Belgi
</div>
... hier alles over Holland
</div>
<div class="albums">
... hier alles over Belgi
</div>
----
Hier is een mooie tutorial, in het Nederlands. Ik zet de pagina al op "positionering"
http://sceneone.nl/positionering/positie.php
Gewijzigd op 26/08/2013 11:53:52 door Kris Peeters
Ik heb deze div nu weggehaald en een andere structuur gebruikt. Het is wat overzichtelijker geworden en volgens mij werkt dit beter, alleen krijg ik de albums's nu niet naast elkaar, ik dacht dit met display:block-inline te moeten doen maar dit werkt nu niet.
Weet jij hoe de albums weer naast elkaar in plaats van onder elkaar kan krijgen?
http://www.robcnossen.nl/
De css code is;
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
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
body
{
background-color:#000;
}
#wrap{
min-height: 100%;
}
#imagebar{
position:fixed;
border:1px solid #333;
text-align:center;
top:60%;
width: 100%;
height: 200px;
background: #0F0F0F;
}
#imagebar img {
margin:8px;
display: inline-block;
border:1px solid #666;
}
#imagebar img:hover{
border:1px solid #CCC;
}
#imagebar h2 a{
text-decoration:none;
color:#666;
}
{
background-color:#000;
}
#wrap{
min-height: 100%;
}
#imagebar{
position:fixed;
border:1px solid #333;
text-align:center;
top:60%;
width: 100%;
height: 200px;
background: #0F0F0F;
}
#imagebar img {
margin:8px;
display: inline-block;
border:1px solid #666;
}
#imagebar img:hover{
border:1px solid #CCC;
}
#imagebar h2 a{
text-decoration:none;
color:#666;
}
Bedankt voor je hulp en de tutorial...
bv.
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
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
<!doctype html>
<html>
<head>
<style>
body {
background-color:#000;
}
#wrap {
min-height: 100%;
}
#imagebar {
position: fixed;
border: 1px solid #333;
text-align: center;
top: 60%;
width: 100%;
height: 200px;
background: #0F0F0F;
}
#albumwrapper {
width: 220px;
margin: auto;
display: block;
}
.albums {
float: left;
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="imagebar">
<div id="albumwrapper">
<div class="albums">
<a href="view_album.php?album_id=8"><h2>Holland</h2></a>
<a href="view_album.php?album_id=8"><img src="http://www.robcnossen.nl/uploads/thumbs/8/KONICA MINOLTA DIGITAL CAMERA_428.jpeg" title="" ></a>
</div>
<div class="albums">
<a href="view_album.php?album_id=9"><h2>Belgie</h2></a>
<a href="view_album.php?album_id=9"><img src="http://www.robcnossen.nl/uploads/thumbs/9/PICT0170.JPG" title=""></a>
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<style>
body {
background-color:#000;
}
#wrap {
min-height: 100%;
}
#imagebar {
position: fixed;
border: 1px solid #333;
text-align: center;
top: 60%;
width: 100%;
height: 200px;
background: #0F0F0F;
}
#albumwrapper {
width: 220px;
margin: auto;
display: block;
}
.albums {
float: left;
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="imagebar">
<div id="albumwrapper">
<div class="albums">
<a href="view_album.php?album_id=8"><h2>Holland</h2></a>
<a href="view_album.php?album_id=8"><img src="http://www.robcnossen.nl/uploads/thumbs/8/KONICA MINOLTA DIGITAL CAMERA_428.jpeg" title="" ></a>
</div>
<div class="albums">
<a href="view_album.php?album_id=9"><h2>Belgie</h2></a>
<a href="view_album.php?album_id=9"><img src="http://www.robcnossen.nl/uploads/thumbs/9/PICT0170.JPG" title=""></a>
</div>
</div>
</div>
</div>
</body>
</html>