li's naast elkaar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Hipska BE

Hipska BE

12/01/2008 10:03:00
Quote Anchor link
Hoi allen,

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
 
PHP hulp

PHP hulp

23/01/2021 18:25:23
 
Jan Koehoorn

Jan Koehoorn

12/01/2008 10:20:00
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;}
    
?>
 
Hipska BE

Hipska BE

12/01/2008 10:29:00
Quote Anchor link
dit werkt in Firefox niet, en in safari ook niet meer.

Heb je al eens naar de opzet van mijn html gekeken?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


en dit is de 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
.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;
}

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
 
Robert Deiman

Robert Deiman

12/01/2008 11:46:00
Quote Anchor link
@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.
 
Hipska BE

Hipska BE

12/01/2008 11:54:00
Quote Anchor link
nee het lukt echt niet,

die div blijft steeds op width 100% en dat is het probleem denk ik..
 
Jan Koehoorn

Jan Koehoorn

12/01/2008 12:14:00
Quote Anchor link
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.

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.
 
J V

J V

12/01/2008 12:35:00
Quote Anchor link
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)
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)
 
Jan Koehoorn

Jan Koehoorn

12/01/2008 12:49:00
Quote Anchor link
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 blijft me verbazen dat er nog steeds webdesigners zijn die dit adviseren.
 
J V

J V

12/01/2008 12:54:00
Quote Anchor link
Jan Koehoorn schreef op 12.01.2008 12:49:
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 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)
 
Hipska BE

Hipska BE

12/01/2008 13:19:00
Quote Anchor link
Wel, stel dat met ajax de content van de ul vernieuwd wordt. daarom kan ik geen vaste breedte opgeven..

Is er dan een webdesigner die mij wel een werkend alternatief kan bieden Jan?
 
Jan Koehoorn

Jan Koehoorn

12/01/2008 13:26:00
Quote Anchor link
Ik zou de breedte van die ul gewoon op 100% zetten en de li's geen breedte meegeven. Die techniek gebruik ik hier. De li's hebben daar verschillende breedtes.
 
Pepijn de vos

pepijn de vos

12/01/2008 13:33:00
Quote Anchor link
wat dacht je van deze?
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
.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;
}

bij mij werkte dat in camino en safari... opera niet getest...
 
J V

J V

12/01/2008 13:33:00
Quote Anchor link
Wat gebeurd er als je een transparante gif als background doet in je caroussel div?
 
Martijn B

Martijn B

12/01/2008 13:44:00
Quote Anchor link
Is het niet:
.carousel{
border: 1px solid black;

width: [vaste breedte]px;
overflow: scroll;

}
 
Hipska BE

Hipska BE

12/01/2008 13:47:00
Quote Anchor link
@Jan: Dat werkt niet om ze op 1 lijn te zetten als ze meer dan de breedte zijn van je venster...

@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
 
Jan Koehoorn

Jan Koehoorn

12/01/2008 13:56:00
Quote Anchor link
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.
 
Jelmer -

Jelmer -

12/01/2008 14:03:00
Quote Anchor link
Naja, hij heet niet voor niets 'carousel' :P

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.
 
Onbekend Onbekend

Onbekend Onbekend

12/01/2008 14:04:00
Quote Anchor link
Jan Koehoorn schreef op 12.01.2008 13:56:
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 :)
 
Hipska BE

Hipska BE

12/01/2008 14:17:00
Quote Anchor link
idd, wat is een mighty mouse toch handig :p

het zou met javascript automatisch gaan scrollen als mensen in de hoeken komen.
 
Onbekend Onbekend

Onbekend Onbekend

12/01/2008 14:36:00
Quote Anchor link
Dat is nog leuker :)
 
Jan Koehoorn

Jan Koehoorn

12/01/2008 14:41:00
Quote Anchor link
@ Tommy: lees dit artikel van Jacob Nielsen maar eens.
@ 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.
 

Pagina: 1 2 volgende »



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.