Avatar billede pnr Nybegynder
12. september 2005 - 13:53 Der er 33 kommentarer og
1 løsning

Hjælp til horisontal scroll ved hjælp af div

Jeg har følgende kode:

<div style="width:300px height:100px;overflow-x: scroll; overflow-y: hidden; ">
                       
<table style="width:1000px;border: 0px" cellpadding="0" cellspacing="0">
                           
<tr>
                                    <td style="width: 100;white-space:nowrap">
                                        <ul id="photoList" style="white-space:nowrap">
                                            <li><img src="108_IMG_3353.JPG" style="border: 0px" alt""></li>   

                <li><img src="108_IMG_3354.JPG" style="border: 0px" alt""></li>   

                <li><img src="108_IMG_3355.JPG" style="border: 0px" alt""></li>   

                <li><img src="108_IMG_3356.JPG" style="border: 0px" alt""></li>   
                                        </ul>                        </td>                        </tr>                   
</table>
                       
</div>

Mit problem er at istedet for at vokse horisontalt vokser det vertikalt.
Avatar billede jokkejensen Novice
12. september 2005 - 14:00 #1
<pre>
Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
</pre>

Ved dog ikke lige hvad de forsklellige standarder siger til den..
Avatar billede olebole Juniormester
12. september 2005 - 14:01 #2
<ole>

Både for din egen og for andres skyld, burde du stille din kode op på en måde, så det ser ud, somom det var meningen, den blev skrevet. Den, du viser her, ligner mest noget, der er skrevet ved et uheld  :)

Så skal du nok forklare, hvor du vil fylde indhold i  :)

/mvh
</bole>
Avatar billede Slettet bruger
12. september 2005 - 14:05 #3
width:100 er jo også at bede om problemer, hvilken enhed er det i?
Avatar billede Slettet bruger
12. september 2005 - 14:13 #4
Prøv at snuppe det og og arbejd videre med det i stedet...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
</head>
<body style="background:red">

<div style="background:blue;width:300px;height:100px;overflow:auto;">

<table style="background:green;width:284px;border:1px" cellpadding="0" cellspacing="0">

    <tr><td style="width: 100px;white-space:nowrap">

        <ul id="photoList" style="white-space:nowrap">
            <li>oj<img src="108_IMG_3353.JPG" style="border: 0px" alt""></li>
            <li>oj<img src="108_IMG_3354.JPG" style="border: 0px" alt""></li>
            <li>jj<img src="108_IMG_3355.JPG" style="border: 0px" alt""></li>
            <li>ii<img src="108_IMG_3356.JPG" style="border: 0px" alt""></li>
        </ul>

    </td></tr>

</table>

</div>

</body>
</html>
Avatar billede pnr Nybegynder
12. september 2005 - 14:19 #5
el_barto: mine <li> står side om side, så jeg har brug for horisontalt scroll
Avatar billede olebole Juniormester
12. september 2005 - 14:24 #6
Prøv med et link. Det er ikke til at vide, hvad der ellers måtte stå i koden, som har afgørende indflydelse  :)
Avatar billede jokkejensen Novice
12. september 2005 - 14:43 #7
det fjerner du ved i CSS at skrive

li{
display:inline;
}

De er pr default sat til block..
Avatar billede pnr Nybegynder
12. september 2005 - 14:50 #8
Her er et link:

http://net.ibil.dk/galleri.aspx

Problemet er at de små billeder ikke bliver vist i en lang horisontal visning.
Avatar billede olebole Juniormester
12. september 2005 - 15:03 #9
Jeg forstår ikke, at nogen kan holde ud at se på sådan en kode. Hvorfor dog ikke stille den ordentligt op?

Du risikerer desuden at introducere en bunke fejl i IE, da den er ekstremt dårlig til at håndtere white-space i koden  :)
Avatar billede Slettet bruger
12. september 2005 - 15:11 #10
Det er bare MS VS der laver smuk kode ;)
Avatar billede roenving Novice
12. september 2005 - 15:14 #11
Ikke engang Visual Studio kan finde på at skrive: alt"" !-)
Avatar billede pnr Nybegynder
12. september 2005 - 15:59 #12
Nu har jeg så rette min kode lidt til så den skulle stå lidt pænere. kan i så hjælpe mig?
Avatar billede olebole Juniormester
12. september 2005 - 16:06 #13
el_barto har jo i hvert fald givet dig ét godt råd. Uden en enhed på bredden, bliver den ignoreret (hvis browseren ellers opfører sig korrekt)  ;o)
Avatar billede olebole Juniormester
12. september 2005 - 16:07 #14
- og sætter du ikke en bredde, kan du heller ikke forvente at få scroll til at virke
Avatar billede pnr Nybegynder
12. september 2005 - 16:57 #15
Den har jeg nu rettet til 100%, men jeg stadig ingen horisontal scroll
Avatar billede roenving Novice
12. september 2005 - 17:00 #16
Både på ul- og td-tagget ?-)
Avatar billede pnr Nybegynder
12. september 2005 - 19:54 #17
jeg har nu sat width: 100% på tabellen, td og ul men det er stadig ingen horisontal scroll
Avatar billede jokkejensen Novice
12. september 2005 - 20:19 #18
nej .. de skal ligges ind i en <pre></pre> Men hvorfor vælger du en vertikal liste til at lave horizontalt scroll ?
Avatar billede jokkejensen Novice
12. september 2005 - 20:20 #19
eller en tabel med en række, den kan heller ikke tekstombrydes..
Avatar billede roenving Novice
12. september 2005 - 23:18 #20
Tjah, det virker med garanti, hvis du:

<table style="background:green;width:284px;border:1px" cellpadding="0" cellspacing="0">

    <tr>
      <td style="width: 100px;white-space:nowrap">
        oj<img src="108_IMG_3353.JPG" style="border: 0px" alt""></td>
      <td style="width: 100px;white-space:nowrap">
        oj<img src="108_IMG_3354.JPG" style="border: 0px" alt""></td>
      <td style="width: 100px;white-space:nowrap">
        oj<img src="108_IMG_3355.JPG" style="border: 0px" alt""></td>
      <td style="width: 100px;white-space:nowrap">
        oj<img src="108_IMG_3356.JPG" style="border: 0px" alt""></td>
    </tr>

</table>
Avatar billede pnr Nybegynder
13. september 2005 - 09:31 #21
Tak til alle fordi i deltager så fligtigt, det er jeg glad for.

jokkejensen: jeg kan heller ikke få det til at virke hvis jeg bruger <pre></pre>. Hvad mener mu med at jeg vælger en vertikal list til at lave en horisontal scroll?

roenving: Ja det er rigtigt hvis jeg opsætter det på den måde virker det fint, men så virker java-scriptet ikke mere :-/ Det kan jeg kun få til at virke når det står i <ul> og <li> tags.
Avatar billede roenving Novice
13. september 2005 - 11:04 #22
Hvaffet javascript ?-)
Avatar billede pnr Nybegynder
13. september 2005 - 11:21 #23
det javascript der skifter billede når man trykker på et thumbnail.
Avatar billede roenving Novice
13. september 2005 - 11:52 #24
Det kan man vel bygge om, selvom jeg ikke lige vil påtage mig at ændre et 5.3 k-script lige på en studs !-)
Avatar billede pnr Nybegynder
13. september 2005 - 11:55 #25
Så det du siger er at jeg ikke kan lave horisontal scroll med <ul> og <li>, men skal arbejde i at få skrevet scriptet om?
Avatar billede roenving Novice
13. september 2005 - 12:47 #26
For mig ser det for svært ud, og jeg kan ikke gennemskue hvad der skal være galt, hvis det ikke virker ved at du sætter tabelcellens bredde til 1000px !-)
Avatar billede pnr Nybegynder
13. september 2005 - 13:40 #27
Hvis jeg nu sætter <ul style="width: 1070px"> virker det som det skal, så er problemet bare at antallet af billeder er dynamisk...

Nogen idéer til hvordan jeg løser det, jeg kunne selvfølgelig beregne viden hver gang siden loades, men er der ikke en mere lige til måde at løse problemet?
Avatar billede roenving Novice
13. september 2005 - 14:06 #28
Kan ik' li'e finde på en, men det er vel heller ikke svært at gange antallet af thumbnails med et tal ?-)
Avatar billede pnr Nybegynder
13. september 2005 - 14:09 #29
Nej det er det ikke, men havde der været en mere lige til løsning som eks. width: 100%, var det jo rimlig overflødigt at skulle lave den udregning hvergang siden skulle vises :)
Avatar billede roenving Novice
13. september 2005 - 14:16 #30
Jepz !-)
Avatar billede pnr Nybegynder
14. september 2005 - 09:59 #31
Jeg lukker igen her, jeg ved ikke helt hvad vi gør med point, for der var ikke nogle af kommentarene der medførte den endlige løsning, Men jeg er super glad for de mange bud, så hvis i nu alle smider et svar så kan i dele pointne.

Mange tak for hjælpen.
Avatar billede pnr Nybegynder
20. september 2005 - 06:27 #32
Jeg mangler svar :-)
Avatar billede roenving Novice
20. september 2005 - 13:27 #33
Oki '-)
Avatar billede roenving Novice
25. september 2005 - 01:23 #34
-- ogtak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester