Virusscanner tips?
Ik raak niet uit ul en li op 1 lijn
Ik heb een onbekend aantal li elementen in een ul momenteel 8. maar andere leden van de club kunnen er ook bijladen.
Als er meer elementen zijn dan er op 1 lijn kunnen moet er gewoon een andere lijn begonnen worden, anders blijven ze op 1 lijn staan.
dus als ik mijn venster verklein zou ik meerdere lijnen moeten krijgen:)
De overflow is er omdat ik toch zeker alles zou zien.
Mijn style:
[style]
ul{
width:80%;
font-weight: bold; overflow:auto;
}
ul li:{
width: 180px;
display:table-cell;
}
li{
list-style: none;
position: relative;
width: 180px;
text-align:left;
display:inline;
}
ul li:hover a{
color:yellow;
background-color:red;
width:180px;
}
a:link {color:blue;} /* unvisited link */
a:visited {color:blue;} /* visited link */
a:hover {color:blue;} /* mouse over link */
a:active {color:blue;} /* selected link */
a {
text-decoration:none;
width:180px;
}
[/style]
Momenteel is de style in het php bestand. eens GOED werkende wil ik dit in een ander bestand(css) steken.
Jan
een voorbeeld:
Gewijzigd op 13/11/2013 15:37:22 door Jan R
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
ul {
width:80%;
}
li {
float: left;
width: 180px;
/* dit zal het best werken als ook de height altijd gelijk is; eventueel dus ook invullen */
}
width:80%;
}
li {
float: left;
width: 180px;
/* dit zal het best werken als ook de height altijd gelijk is; eventueel dus ook invullen */
}
Mek trouwens op:
overflow: auto;
dit doet precies het omgekeerde van wat je hier wil bereiken
------
O ja, nog iets. float: left zorgt er nu voor dat de <li> elementen buiten de grenzen van <ul> komen.
Daarvoor kan je clear gebruiken.
bv. zo
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<ul>
<li>...</li>
<li>...</li>
...
<li class="clear"></li>
</ul>
<li>...</li>
<li>...</li>
...
<li class="clear"></li>
</ul>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
ul {
width:80%;
background-color: #ff9933;
}
li {
float: left;
width: 180px;
list-style: none;
}
li.clear {
clear: both;
float: none;
}
width:80%;
background-color: #ff9933;
}
li {
float: left;
width: 180px;
list-style: none;
}
li.clear {
clear: both;
float: none;
}
Gewijzigd op 13/11/2013 15:54:15 door Kris Peeters
Toch alvast bedankt
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
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
<ul>
<li> <a href="index.php?f=04_05.pgn">04_05.pgn</a> </li>
<li> <a href="index.php?f=05_06.pgn">05_06.pgn</a> </li>
<li> <a href="index.php?f=06_07.pgn">06_07.pgn</a> </li>
<li> <a href="index.php?f=07_08.pgn">07_08.pgn</a> </li>
<li> <a href="index.php?f=08_09.pgn">08_09.pgn</a> </li>
<li> <a href="index.php?f=09_10.pgn">09_10.pgn</a> </li>
<li> <a href="index.php?f=10_11.pgn">10_11.pgn</a> </li>
<li> <a href="index.php?f=test.pgn">test.pgn</a> </li>
<li class="clear"></li>
</ul>
<style>
ul {
width:80%;
background-color: #ff9933;
}
li {
float: left;
width: 180px;
list-style: none;
}
li.clear {
clear: both;
float: none;
}
</style>
<li> <a href="index.php?f=04_05.pgn">04_05.pgn</a> </li>
<li> <a href="index.php?f=05_06.pgn">05_06.pgn</a> </li>
<li> <a href="index.php?f=06_07.pgn">06_07.pgn</a> </li>
<li> <a href="index.php?f=07_08.pgn">07_08.pgn</a> </li>
<li> <a href="index.php?f=08_09.pgn">08_09.pgn</a> </li>
<li> <a href="index.php?f=09_10.pgn">09_10.pgn</a> </li>
<li> <a href="index.php?f=10_11.pgn">10_11.pgn</a> </li>
<li> <a href="index.php?f=test.pgn">test.pgn</a> </li>
<li class="clear"></li>
</ul>
<style>
ul {
width:80%;
background-color: #ff9933;
}
li {
float: left;
width: 180px;
list-style: none;
}
li.clear {
clear: both;
float: none;
}
</style>
Alles werkt nu.
Volgende code was dus absolut overbodig :)
ul li:{
width: 180px;
display:table-cell;
}
li{
position: relative;
text-align:left;
display:inline;
}
Bedankt Chris