[CSS] div's inschuiven tot min-width is bereikt, werkt niet
Dit is de homepage van mijn privesite, en op de bovenkant heb ik een balk met 5 links naar de submappen. Het ziet er ongeveer zo uit:
| LINK | LINK | LINK | LINK | LINK |
Nu heb ik dus voor | en LINK een aparte div, waarbij de | div een width van 2px heeft, en die andere een min, max en vaste width.
Mijn bedoeling is, als je je browserscherm smaller maakt, dat dan de ruimte tussen | LINK | minder wordt, tot een bepaalde minimumwaarde. Wat ik echter ondervind, is dat op de helft van de maximale ruimte, het laatste streepje al op een nieuwe regel wordt gezet...
(en stel dat je onder een bepaalde minimumwaarde komt, dan moet het lettertype kleiner worden, maar ik denk niet dat je een zo smal scherm gaat gebruiken dat het echt klein wordt)
HTML
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
<html>
<head>
<title>KevinAchternaam.nl - Homepage</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="std.css" />
<link rel="icon" type="image/png" href="favicon.png" />
</head>
<body>
<div id="menu">
<div id="separator">|</div>
<div id="menuline">
<a href='/personal'>KevinAchternaam.nl</a>
</div>
<div id="separator">|</div>
<div id="menuline">
<a href='/dating'>Dating Site</a>
</div>
<div id="separator">|</div>
<div id="menuline">
<a href='/video'>Video Database</a>
</div>
<div id="separator">|</div>
<div id="menuline">
<a href='/forum'>Forum Site</a>
</div>
<div id="separator">|</div>
<div id="menuline">
<a href='/fileserver'>FileServer</a>
</div>
<div id="separator">|</div>
</div>
<div id="wheretogo">Waar wilt u heen gaan?
<div id="imagesbar">
<div id="imagetile">
<a href='personal/'><img src='plaatjes/myface.jpg' height=640 width=480 /></a>
</div>
<div id="imagetile">
<a href='dating/'><img src='plaatjes/dating.png' height=366 width=511 /></a>
</div>
<div id="imagetile">
<a href='video/'><img src='plaatjes/mytube.png' height=98 width=250 /></a>
</div>
<div id="imagetile">
<a href='forum/'><img src='plaatjes/forum.png' height=289 width=415 /></a>
</div>
<div id="imagetile">
<a href='fileserver/'><img src='plaatjes/fileserver.png' height=512 width=512 /></a>
</div>
</div>
</div>
<div id="copyright">
<p>CopyRight © 2012 - <?php echo date("Y"); ?> Kevin<br>
Contact: <a href='mailto:[email protected]'>E-mail</a></p>
</div>
</body>
</html>
<head>
<title>KevinAchternaam.nl - Homepage</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="std.css" />
<link rel="icon" type="image/png" href="favicon.png" />
</head>
<body>
<div id="menu">
<div id="separator">|</div>
<div id="menuline">
<a href='/personal'>KevinAchternaam.nl</a>
</div>
<div id="separator">|</div>
<div id="menuline">
<a href='/dating'>Dating Site</a>
</div>
<div id="separator">|</div>
<div id="menuline">
<a href='/video'>Video Database</a>
</div>
<div id="separator">|</div>
<div id="menuline">
<a href='/forum'>Forum Site</a>
</div>
<div id="separator">|</div>
<div id="menuline">
<a href='/fileserver'>FileServer</a>
</div>
<div id="separator">|</div>
</div>
<div id="wheretogo">Waar wilt u heen gaan?
<div id="imagesbar">
<div id="imagetile">
<a href='personal/'><img src='plaatjes/myface.jpg' height=640 width=480 /></a>
</div>
<div id="imagetile">
<a href='dating/'><img src='plaatjes/dating.png' height=366 width=511 /></a>
</div>
<div id="imagetile">
<a href='video/'><img src='plaatjes/mytube.png' height=98 width=250 /></a>
</div>
<div id="imagetile">
<a href='forum/'><img src='plaatjes/forum.png' height=289 width=415 /></a>
</div>
<div id="imagetile">
<a href='fileserver/'><img src='plaatjes/fileserver.png' height=512 width=512 /></a>
</div>
</div>
</div>
<div id="copyright">
<p>CopyRight © 2012 - <?php echo date("Y"); ?> Kevin<br>
Contact: <a href='mailto:[email protected]'>E-mail</a></p>
</div>
</body>
</html>
CSS
std.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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
html, body {
font-family: "Arial";
padding: 0px;
margin: 0px;
}
a:link {
color: #0000CC;
text-decoration: none;
}
a:visited {
color: #00FF00;
text-decoration: none;
}
a:hover {
color: #00FFFF;
text-decoration: none;
}
a:active {
color: #FFFF00;
text-decoration: underline;
}
font-family: "Arial";
padding: 0px;
margin: 0px;
}
a:link {
color: #0000CC;
text-decoration: none;
}
a:visited {
color: #00FF00;
text-decoration: none;
}
a:hover {
color: #00FFFF;
text-decoration: none;
}
a:active {
color: #FFFF00;
text-decoration: underline;
}
index.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
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
html, body {
background-color: #d0e4fe;
}
#menu {
background-color:#888;
height: 37px;
font-size: 30px;
position: fixed; /* keeps it on top of the window */
top: 0px; /* keeps it stuck to the top, instead of a gap */
width: 100%;
white-space: no-wrap;
}
#menuline {
display: inline-block; /* in combo met white-space: no-wrap; */
width: 18.9%;
max-width: 18.9%;
min-width: 7.3%;
text-align: center;
}
#separator {
display: inline-block;
width: 2px;
text-align: center;
}
#wheretogo {
font-size: 50px;
text-align: center;
margin-top: 35px; /* keeps it underneath the starting point of #menu */
}
#imagesbar {
width:100%;
white-space: no-wrap;
}
#imagetile {
display: inline-block;
text-align: center;
}
#copyright {
margin: 0px auto;
background-color:#DDD;
}
#copyright p {
font-style: italic;
text-align: center;
font-size: 20px
}
background-color: #d0e4fe;
}
#menu {
background-color:#888;
height: 37px;
font-size: 30px;
position: fixed; /* keeps it on top of the window */
top: 0px; /* keeps it stuck to the top, instead of a gap */
width: 100%;
white-space: no-wrap;
}
#menuline {
display: inline-block; /* in combo met white-space: no-wrap; */
width: 18.9%;
max-width: 18.9%;
min-width: 7.3%;
text-align: center;
}
#separator {
display: inline-block;
width: 2px;
text-align: center;
}
#wheretogo {
font-size: 50px;
text-align: center;
margin-top: 35px; /* keeps it underneath the starting point of #menu */
}
#imagesbar {
width:100%;
white-space: no-wrap;
}
#imagetile {
display: inline-block;
text-align: center;
}
#copyright {
margin: 0px auto;
background-color:#DDD;
}
#copyright p {
font-style: italic;
text-align: center;
font-size: 20px
}
En waarom gebruik je de ene keer " en andere keer weer ' dat is onlogisch en vragen om fouten.