Avatar billede drinkit Praktikant
22. marts 2013 - 16:43 Der er 11 kommentarer og
1 løsning

DIV med billeder skal scrolle til højre - Virker ikke

Hej.
xup.dk/blog.php

Som I kan se har jeg lavet en div, med billeder indeni.

Der er 50 billeder indeni diven.

Det jeg vil have, er at istedet for billederne lægger sig under hinanden fordi de ikke kan være der i bredden, skal de lægge sig ved siden af hinanden, og der skal komme en scrollbar nederst, så man kan scrolle til højre for at se næste billede.

Hvordan gør jeg det her?

Display: inline;
virker ikke

White space nowrap virker ikke, overflow gør self. intet..

Jeg er på dybt vand, og jeg forstår ikke hvordan jeg er kommet herud.. Det burde være så simpelt?
Avatar billede scootergrisen Nybegynder
22. marts 2013 - 16:54 #1
overflow-x: scroll; laver vandret scrollbar.
http://netkoder.dk/netkoder/css_scrollbar.php
Avatar billede drinkit Praktikant
22. marts 2013 - 17:16 #2
Ja. Men det virker ikke.. Billederne lægger sig stadig under hinanden.
Jeg skal have dem til at fortsætte i div'en, mod højre. Giver det mening?
Avatar billede olebole Juniormester
22. marts 2013 - 17:17 #3
<ole>

Der er generel konsensus om, at horisontal scrolling så vidt muligt bør undgås, da det af de fleste opfattes som ikke-brugervenligt. Insisterer du, kan du gøre sådan:

<style type="text/css">
#indhold {
    background-color: #eee;
    height: 500px;
    width: 600px;
    white-space: nowrap;
    overflow-x: auto;
}

.tumblr_img {
    border: 1px solid #ccc;
}
</style>

- og så har jeg fjernet de ting i CSS-koden, som ikke giver mening  =)

Billederne bør beskæres, så de får den rigtige højde. HTML er uegnet til at formindske/forstørre billeder, og brugeren skal downloade bunker af unødige data, hvis du lader HTML om at formindske dem.

/mvh
</bole>
Avatar billede drinkit Praktikant
22. marts 2013 - 17:23 #4
Tak ole. Det var da lige godt underligt.. Havde allerede prøvet med white space.. Tak igen.. Points i dag?
Avatar billede olebole Juniormester
22. marts 2013 - 17:28 #5
Selvtak. white-space virker kun på block-level elementer. Ikke på inline elementer, og da du havde sat DIV'et til inline, virkede det ikke.

Fjerner du overflow-x: auto;, flytter du scrollbaren til view porten - men det er vel DIV'et, du vil scrolle(?).

Ellers tak ... heller ikke point i dag  =)
Avatar billede olebole Juniormester
22. marts 2013 - 17:31 #6
PS: Du havde endvidere givet billederne float:left, hvilket gør, at de ikke fylder noget i DIV'et. De var hevet ud af sidens naturlige flow og kunne ikke spile DIV'et ud i bredden  =)
Avatar billede drinkit Praktikant
22. marts 2013 - 17:31 #7
Har lige leget lidt med CSS'en nu.. Er ved at være ved det resultatet jeg ønskede.

Tak for bonus info. Derfor white-space ikke virkede. Så ved jeg det til næste gang.
Avatar billede drinkit Praktikant
22. marts 2013 - 17:34 #8
Lukket
Avatar billede scootergrisen Nybegynder
22. marts 2013 - 18:24 #9
Det er bedst hvis du sætter width og height i dine <img> elementer.
Første gang man går ind på siden og scroller så hopper det rundt fordi billedestørrelserne først findes efterhånden som billederne indlæses.
Avatar billede olebole Juniormester
22. marts 2013 - 18:34 #10
#9 Det skader som sådan ikke, men det er en rigtig skidt idé at formindske billederne med width og height. At billederne er så store (mange over 500KB) er hovedårsagen til, at de hopper rundt ved scrolling lige efter pageload
Avatar billede drinkit Praktikant
22. marts 2013 - 18:44 #11
Ja. Men den henter dem fra en TUMBLR, og skal så lave en click funktion så de vises i fuld str når man klikker.

Kan desværre ikke laves anderledes, når ham jeg laver det til ikke selv kan finde ud af html.. Han skal bare uploade sine billeder til tumblr.

Men kan godt se hvad du mener Ole.

Scootergrinse >> Tak. Jeg sætter det på <img> tagget istedet
Avatar billede olebole Juniormester
22. marts 2013 - 20:36 #12
Hehe ... nej, kunstnere og teknik blander ofte ligeså godt som røget sild og chokoladetrøffel  *o)

Jeg anerkender til fulde, dine hænder er ret stramt bundet, og at du gør, hvad der er muligt  =)
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