li's naast elkaar
Ik zit met een vervelend stukje css waar ik maar niet uit geraak.
Ik heb een div, met daarin een ul met li's..
Die LI's moeten naast elkaar staan op 1 lange rij, ze mogen niet op een 2de lijn komen.
Ik heb nu een stukje css waarin het werkt maar enkel in Safari, Firefox doet het niet en maakt er 2 lijnen van...
Kan iemand mij helpen zodat het overal goed werkt?
http://casteleyn.no-ip.info:8080/~Hipska/Yargo/test.html
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<?php
div#jediv ul {list-style-type: none;}
div#jediv ul li {float: left; width: 200px;}
div#jediv ul li a {display: block; padding: 3px; text-decoration: none;}
?>
div#jediv ul {list-style-type: none;}
div#jediv ul li {float: left; width: 200px;}
div#jediv ul li a {display: block; padding: 3px; text-decoration: none;}
?>
Heb je al eens naar de opzet van mijn html gekeken?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<div class="carousel" id="carousel1">
<ul>
<li><img alt="Image0" class="thumb" src="graphics/dest/Items/0_0.png" /></li>
<li><img alt="Image1" class="thumb" src="graphics/dest/Items/1_0.png" /></li>
<li><img alt="Image2" class="thumb" src="graphics/dest/Items/2_0.png" /></li>
...
<li><img alt="Image48" class="thumb" src="graphics/dest/Items/48_0.png" /></li>
<li><img alt="Image49" class="thumb" src="graphics/dest/Items/49_0.png" /></li>
</ul>
<hr />
</div>
<ul>
<li><img alt="Image0" class="thumb" src="graphics/dest/Items/0_0.png" /></li>
<li><img alt="Image1" class="thumb" src="graphics/dest/Items/1_0.png" /></li>
<li><img alt="Image2" class="thumb" src="graphics/dest/Items/2_0.png" /></li>
...
<li><img alt="Image48" class="thumb" src="graphics/dest/Items/48_0.png" /></li>
<li><img alt="Image49" class="thumb" src="graphics/dest/Items/49_0.png" /></li>
</ul>
<hr />
</div>
en dit is 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.carousel{
border: 1px solid black;
white-space: nowrap;
display: inline-block;
}
.carousel ul {
margin: 0px;
padding: 0px;
}
.carousel li {
list-style: none;
float: left;
border: 1px solid red;
}
.carousel hr{
clear: both;
border: 0px;
}
border: 1px solid black;
white-space: nowrap;
display: inline-block;
}
.carousel ul {
margin: 0px;
padding: 0px;
}
.carousel li {
list-style: none;
float: left;
border: 1px solid red;
}
.carousel hr{
clear: both;
border: 0px;
}
Edit:
Voorlopig werkt het enkel in beide browsers als ik een width opgeef aan .carousel .. maar aangezien later deze content variabel moet zijn, vind ik een width opgeven niet ideaal.
Gewijzigd op 01/01/1970 01:00:00 door Hipska BE
Als je bij een link-tag een display:block; meegeeft, dan moet je er ook nog een float:left bij meegeven om ze wel allemaal op 1 rij te kunnen krijgen. Anders schijnt dit niet te werken.
die div blijft steeds op width 100% en dat is het probleem denk ik..
Robert_Deiman schreef op 12.01.2008 11:46:
@Jan
Als je bij een link-tag een display:block; meegeeft, dan moet je er ook nog een float:left bij meegeven om ze wel allemaal op 1 rij te kunnen krijgen. Anders schijnt dit niet te werken.
Als je bij een link-tag een display:block; meegeeft, dan moet je er ook nog een float:left bij meegeven om ze wel allemaal op 1 rij te kunnen krijgen. Anders schijnt dit niet te werken.
Nee, dat klopt niet. Door de float op de li's gaan ze naar links. Die display: block op de a's binnenin de li's zorgt er voor dat de hele oppervlakte binnen de li aanklikbaar wordt als link en niet alleen de tekst.
Toevallig ben ik net begonnen met een nieuwe klus waarin deze techniek ook weer voorkomt.
(het mag niet, maar mischien is dit wel de simpelste oplossing)
Zou je het niet kunnen doen met minimale breedte en maximale breedte?
Want het moet variabel zijn, maar waar denk je dan aan? En waarom wil je eigenlijk alles op 1 rij als ik vragen mag? (want zo'n grote horizontale scrollbalk heb ik nog nooit gezien :P)
Jordy schreef op 12.01.2008 12:35:
Lastig probleem dit, maar waarom doe je niet alles niet in een tabel zetten?
(het mag niet, maar mischien is dit wel de simpelste oplossing)
(het mag niet, maar mischien is dit wel de simpelste oplossing)
Het blijft me verbazen dat er nog steeds webdesigners zijn die dit adviseren.
Jan Koehoorn schreef op 12.01.2008 12:49:
Het blijft me verbazen dat er nog steeds webdesigners zijn die dit adviseren.
Jordy schreef op 12.01.2008 12:35:
Lastig probleem dit, maar waarom doe je niet alles niet in een tabel zetten?
(het mag niet, maar mischien is dit wel de simpelste oplossing)
(het mag niet, maar mischien is dit wel de simpelste oplossing)
Het blijft me verbazen dat er nog steeds webdesigners zijn die dit adviseren.
Ik zou me diep moeten schamen dat weet ik. Maar ik vroeg ook waarvoor hij het ging gebruiken en waarom hij variabel moest zijn. Als ik antwoord daarop heb, kom ik terug op mijn simpele oplossing ;). (die dan nog wel steeds fout is natuurlijk)
Is er dan een webdesigner die mij wel een werkend alternatief kan bieden Jan?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.carousel{
border: 1px solid black;
white-space: nowrap;
display: inline-block;
width:auto;
}
.carousel ul {
margin: 0px;
padding: 0px;
}
.carousel li {
list-style: none;
display:inline;
border: 1px solid red;
}
border: 1px solid black;
white-space: nowrap;
display: inline-block;
width:auto;
}
.carousel ul {
margin: 0px;
padding: 0px;
}
.carousel li {
list-style: none;
display:inline;
border: 1px solid red;
}
bij mij werkte dat in camino en safari... opera niet getest...
.carousel{
border: 1px solid black;
width: [vaste breedte]px;
overflow: scroll;
}
@pepijn: Bedankt, ik kijk even.
@Jordy: Dat is naast de kwestie. Waarom wil je dat weten?
@martijn: nee, ik wel geen vaste breedte omdat ik variabele content heb en scroll wil ik ook niet om andere redenen..
Gewijzigd op 01/01/1970 01:00:00 door Hipska BE
Hipska schreef op 12.01.2008 13:47:
@Jan: Dat werkt niet om ze op 1 lijn te zetten als ze meer dan de breedte zijn van je venster
Kan hij breder worden dan je venster? Da's niet aan te raden. Horizontaal scrollen houden je bezoekers niet van.
Jan's oplossing met width:100% & overflow: hidden of auto zou het truucje moeten doen, afhankelijk van wat voor manier je gaat aanbieden om de uithoeken van je carousel bereikbaar te maken.
Jan Koehoorn schreef op 12.01.2008 13:56:
Kan hij breder worden dan je venster? Da's niet aan te raden. Horizontaal scrollen houden je bezoekers niet van.
Hipska schreef op 12.01.2008 13:47:
@Jan: Dat werkt niet om ze op 1 lijn te zetten als ze meer dan de breedte zijn van je venster
Kan hij breder worden dan je venster? Da's niet aan te raden. Horizontaal scrollen houden je bezoekers niet van.
Dat klopt, ik ook niet, maar als je een muis hebt waarmee dat makkelijk kan is het niet erg :)
het zou met javascript automatisch gaan scrollen als mensen in de hoeken komen.
@ Hipska: als dat menu voor je navigatie is, zou ik het niet laten bewegen. Werkt verwarrend voor veel mensen. Als je een menu met veel items hebt, zou ik het gewoon onderverdelen in een hoofd- en een submenu.