[CSS] div's inschuiven tot min-width is bereikt, werkt niet

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Kevin Zegikniet

Kevin Zegikniet

27/12/2014 12:11:39
Quote Anchor link
hoi,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<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 &#169; 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)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


index.css
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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
}
 
PHP hulp

PHP hulp

29/03/2024 03:17:06
 
Joakim Broden

Joakim Broden

27/12/2014 13:14:49
Quote Anchor link
Je maakt een menu, en een menu is een lijst gebruik dus een <ul> hiervoor ipv divjes. En lege elementen moet je zoveel mogelijk vermijden. Begin dus eerst overnieuw met je HTML en dan gaan we weer voor je verder kijken zet die seperator bijvoorbeeld als een 1px border op de <li> of dergelijke.

En waarom gebruik je de ene keer " en andere keer weer ' dat is onlogisch en vragen om fouten.
 
Eddy E

Eddy E

27/12/2014 19:47:51
Quote Anchor link
Waarschijnlijk loop jij tegen een probleem aan waarvan de oplossing dit is:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
div.seperator { box-sizing: border-box; }
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.