Virusscanner tips?
Navigatie: kleine CSS review gevraagd.
Ik ben bezig met het verbeteren van mijn navigatiebalk, deze heeft op dit moment lijnen tussen de verschillende urls staan- zoals PHPhulp ook heeft. Ik vraag me echter af of, zoals ik het gedaan heb, de juiste manier is.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id = "nav">
<ul>
<li><a href = "index.php">Home</a></li>
<li><a href = "http://">Test1</a></li>
<li><a href = "http://">Test2</a></li>
<li><a href = "http://">Test3</a></li>
<li><a href = "contact.php">Contact</a></li>-->
</ul>
</div>
<ul>
<li><a href = "index.php">Home</a></li>
<li><a href = "http://">Test1</a></li>
<li><a href = "http://">Test2</a></li>
<li><a href = "http://">Test3</a></li>
<li><a href = "contact.php">Contact</a></li>-->
</ul>
</div>
De 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#nav{
background: #F4F4F4;
box-shadow: 0 1px 1px 0px black;
height: 55px;
margin-left: 1px;
width: 100%;
}
#nav ul li{
list-style: none;
display: inline;
}
#nav ul li a{
padding: 5px 0;
width: 100px;
color: #000;
float: left;
text-align: center;
border-left: 1px solid #cccccc;
height: 45px;
}
background: #F4F4F4;
box-shadow: 0 1px 1px 0px black;
height: 55px;
margin-left: 1px;
width: 100%;
}
#nav ul li{
list-style: none;
display: inline;
}
#nav ul li a{
padding: 5px 0;
width: 100px;
color: #000;
float: left;
text-align: center;
border-left: 1px solid #cccccc;
height: 45px;
}
Behalve dat je misschien nog dit moet toevoegen om bij het eerste element geen border te krijgen:
Code (css)
1
2
3
2
3
#nav ul li:first-child a{
border-left:none;
}
border-left:none;
}
Wouter J op 31/10/2013 07:57:41:
Oef, haal die display:inline; weg en ga werken met float:left; om elementen naast elkaar te krijgen. Voor de rest ziet het er goed uit.
Behalve dat je misschien nog dit moet toevoegen om bij het eerste element geen border te krijgen:
Behalve dat je misschien nog dit moet toevoegen om bij het eerste element geen border te krijgen:
Code (css)
1
2
3
2
3
#nav ul li:first-child a{
border-left:none;
}
border-left:none;
}
Thanks, ik heb de border veranderd naar border-right, maakt verder geen verschil, en zal last-child toevoegen.