VNC stopt er mee :(
menu image probleem
ik ben bezig met een menu en ik blijf vast zitten bij het volgende:
ik wil tussenstukkje maken tussen home | vereniging enz
ik heb dit nu ook maar ik kan ze niet positioneren.
ik zou de code hieronder neer zetten
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
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
<div id="menu-balk"><!-- begin menu -->
<div class="positie">
<ul class="navigatie">
<a href="index.php">
<li class="nav">Home</li>
</a>
<a href="index.php">
<li class="nav">Vereniging</li>
</a>
<a href="index.php">
<li class="nav">Teams</li>
</a>
<a href="index.php">
<li class="nav">Gallery</li>
</a>
<a href="index.php">
<li class="nav">Gastenboek</li>
</a>
<a href="index.php">
<li class="nav">Contact</li>
</a>
</ul>
</div>
</div><!-- einde menu -->
<div class="positie">
<ul class="navigatie">
<a href="index.php">
<li class="nav">Home</li>
</a>
<a href="index.php">
<li class="nav">Vereniging</li>
</a>
<a href="index.php">
<li class="nav">Teams</li>
</a>
<a href="index.php">
<li class="nav">Gallery</li>
</a>
<a href="index.php">
<li class="nav">Gastenboek</li>
</a>
<a href="index.php">
<li class="nav">Contact</li>
</a>
</ul>
</div>
</div><!-- einde menu -->
css menu:
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
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
.positie {
position: absolute;
width: auto;
height: auto;
border: 0px solid red;
}
/* positie menu text */
.navigatie {
margin-left: -43px;
}
/* ------------------------ */
ul.navigatie li {
float: left;
list-style: none;
margin-top: -3px;
color: #fff;
font-family: Calibri;
font-size: 16px;
}
/* tussen ruimte voor menu */
ul.navigatie li.nav {
margin-left: 28px;
}
/* ------------------------ */
li.nav {
background: url(../images/split.png);
background-repeat: no-repeat;
background-position: right center;
}
position: absolute;
width: auto;
height: auto;
border: 0px solid red;
}
/* positie menu text */
.navigatie {
margin-left: -43px;
}
/* ------------------------ */
ul.navigatie li {
float: left;
list-style: none;
margin-top: -3px;
color: #fff;
font-family: Calibri;
font-size: 16px;
}
/* tussen ruimte voor menu */
ul.navigatie li.nav {
margin-left: 28px;
}
/* ------------------------ */
li.nav {
background: url(../images/split.png);
background-repeat: no-repeat;
background-position: right center;
}
het gaat hier om het laatste stukje css code li.nav
ik heb de tussenstukjes al rechts van de linkjes staan van het menu
maar nu moten ze nog in het midden
ik heb veel dingen geprobeerd margin-left, left.
als ik padding gebruik verschuift alles.
wie weet hoe ik nu enkel de tussen stukjes verschuif naar links
zonder dat de rest van het menu gaat schuiven.
hieronder een plaatje hoe het menu is met de tussen stukjes
die ik mooi tussen home en vereniging wil hebben en tussen
vereniging en teams enzovoort
plaatje:
http://oi52.tinypic.com/23ih010.jpg
Vervang al eens dit in je code:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
/* tussen ruimte voor menu */
ul.navigatie li.nav {
margin-left: 14px;
padding-right: 14px;
border-right: 1px solid green;
}
ul.navigatie li.nav {
margin-left: 14px;
padding-right: 14px;
border-right: 1px solid green;
}
Die border heb ik toegevoegd omdat ik je split image niet heb.
Je zult misschien nog wat moeten aanpassen.
Hier staat trouwens een schat aan informatie over css
http://www.sceneone.nl/
EDIT:
Ik heb een image split.png gemaakt. Bestaande uit een verticaal streepje helemaal rechts.
Met de aanpassing die ik je toonde, staat het streepje dan mooi in het midden.
Je kan dus die border-right: 1px solid green; verwijderen.
Gewijzigd op 13/01/2011 13:56:19 door Kris Peeters