[CSS] horizontale scrollbar forceren

[Verwijderd]

Ik ben met mijn portfolio site bezig, waarin ik mijn foto's naast elkaar wil laten zien met een horizontale scrollbar als de content de viewport uitloopt. (dat doet ie nu ook).

Jammergenoeg zitten op dit moment zitten de foto's in een tabel omdat deze forceert om de content > width 100% te laten zijn, het levert wel het gewenste resultaat, nu alleen de code nog.

Op het moment dat ik de foto's in een div ga zetten dan word de boel gewrapped, hetgeen ik dus niet wil.

Hoe kan ik zonder deze tabel de horizontale scrollbar forceren ? Het liefst vervang ik deze door 1 div.

Zoektochten leveren me niet veel anders op dan mensen die juist de scrollbarren kwijt willen

Ik heb al "wrapdivjes" gebruikt met floats:left; maar ik heb eerder het idee dat het door de combinaties van width's en floats komt, wat is de juiste combinatie ?

[RobIII]

Je moet de whitespace op nowrap zetten volgens mij

HTML:

<div style="white-space:nowrap;overflow:auto;">
  <img src="/images/vicky1.jpg">
  <img src="/images/vicky2.jpg">
  <img src="/images/vicky3.jpg">
  <img src="/images/vicky4.jpg">
  <img src="/images/vicky5.jpg">
</div>

[ Voor 119% gewijzigd door RobIII op 15-05-2007 19:28 ]

[Verwijderd]

Thanx RobIII, dit doet op zich wat ik wil, ware het niet dat ik er toch nog niet ben;

binnen de <p></p> gaat het goed, ik heb alleen nog 2 <p>'s erin zitten, waarvan de 1e ervoor moet komen en de laatste erachter.

HTML:

      <div class="section">
            <p class="nav nowrap">
              <a href="#" class="sp"><img src="includes/prev1.jpg" class=
              "noborder" alt="" /></a>
              <a href="#" class="sn"><img src="includes/next1.jpg" class=
              "noborder" alt="" /></a>                
            </p>
          <p class="nowrap">
            <img src="images/vicky1.jpg" alt="" />
            <img src="images/vicky2.jpg" alt="" />
            <img src="images/vicky3.jpg" alt="" />
            <img src="images/vicky4.jpg" alt="" />
            <img src="images/vicky5.jpg" alt="" /> 
          </p>       
          <p class="info nowrap">
              MODEL<br />
              <span>VICKY</span><br />
              MAKE-UP<br />
              <span>SABRINA SAS</span>
            </p>
      </div>

[imp4ct]

't Kan misschien aan mij liggen, maar als bezoeker / gebruiker van de site vind ik het een beetje "irritant" zo naar links te moeten scrollen. Misschien is't geen slecht idee om mss de foto's in een soort slide-show / fade-effect te laten passeren. 't Maakt één je site kleiner en ook een stuk leuker om naar te kijken, maar dit is natuurlijk een puur persoonlijke mening.

[Verwijderd]

imp4ct schreef op dinsdag 15 mei 2007 @ 22:17:
't Maakt één je site kleiner en ook een stuk leuker om naar te kijken, maar dit is natuurlijk een puur persoonlijke mening.

Is idd jouw mening en jij bent wellicht niet mijn doelgroep, de mensen die interesse hebben in mijn fotos kunnen dat scrollen weinig boeien, de fotos des te meer.

Jij bezoekt de site nu als "klikker", niet als kijker.

Het horizontale scrollen vind ik voor foto presentatie het mooiste (ben ook zeker niet de enige die dit toepast, of dat dan betekend of het het beste is of niet, laat ik in het midden, maar ik vind het mooi).

maar goed, daar gaat het hier niet om

ik ben ondertussen het verhaal aan het omzetten naar een list, kijken wat dat oplevert.

[Verwijderd]

Verwijderd schreef op dinsdag 15 mei 2007 @ 19:45:
binnen de <p></p> gaat het goed, ik heb alleen nog 2 <p>'s erin zitten, waarvan de 1e ervoor moet komen en de laatste erachter.

En wat gaat er niet goed?

[Marcj]

Een <p> element wordt normaal getoond als een block-element, welke dus automatisch een linebreak maakt nadat hij wordt gesloten. Hier zijn twee mogelijke oplossingen voor, maar welke het beste werkt zou je even zelf moeten uitzoeken.

1) "display: inline", wat er voor zorgt dat er geen linebreaks omheen worden geplaatst. Dit kan echter soms wel onverwachte effecten hebben.
2) "float: left", wat er voor zorgt dat ze allemaal aan de linkerkant blijven "floaten" en dus achter elkaar blijven. Ik weet echter niet of deze dan wel breder worden dan de maximale breedte.

[Verwijderd]

@Blues, precies wat Marcj aangeeft.

@Marcj; dat floaten word niet naar geluisterd. Ik heb het het anders opgelost door het een en ander te verplaatsen; het info blockje zit er nu onder en de navigatie staat links van de fotos.

Ik ben iig geholpen, thanx!

Volgende stap; dynamisch maken dmv asp/xml/ajax.

[PhoenixT]

Het zou nog iets mooier zijn geweest als het navigatiemenu niet meescrollde. Voor de rest erg mooi

[Verwijderd]

PhoenixT schreef op woensdag 16 mei 2007 @ 19:46:
Het zou nog iets mooier zijn geweest als het navigatiemenu niet meescrollde. Voor de rest erg mooi

je brengt me op een idee ik had namelijk al problemen om de navigatie ook weer rechts neer te zetten

[Calamor]

Ziet er erg mooi uit.
Alleen net als wat hier boven gezegd wordt.
En na een paar keer zijn de pijltjes naar boven en beneden dubbel en is niet alles meer op een lijn de plaatjes.
Dan moet je ook naar beneden scrollen weer. ( het is in IE en FF )

[Verwijderd]

Calamor schreef op woensdag 16 mei 2007 @ 20:00:
Ziet er erg mooi uit.
Alleen net als wat hier boven gezegd wordt.
En na een paar keer zijn de pijltjes naar boven en beneden dubbel en is niet alles meer op een lijn de plaatjes.
Dan moet je ook naar beneden scrollen weer. ( het is in IE en FF )

nee, dat kwam omdat ik nog niet alle content had geupdate met de juiste indeling, is ondertussen gefixed.

[sOid]

Grappig, ik ben ook naar zoiets op zoek maar dan voor verticale scrollbalk, maar kan ik hier weinig mee denk ik.

Nog even iets voor op je site (ziet er mooi uit) maar ik zou als ik jou was wel ff de scrollbalk kleuren aan de website stijl aanpassen met CSS

[Mei]

Verwijderd schreef op dinsdag 15 mei 2007 @ 22:48:
[...]

Is idd jouw mening en jij bent wellicht niet mijn doelgroep, de mensen die interesse hebben in mijn fotos kunnen dat scrollen weinig boeien, de fotos des te meer.

Des te meer reden om ze het bekijken van de foto's zo aangenaam mogelijk te maken Jouw doelgroep zal jouw foto's toch wel bekijken, of je site nou verrekte irritant is om mee te werken of niet, maar waarom zou dat een reden moeten zijn niet wat tips aan te nemen en te zorgen dat je doelgroep gemakkelijk en prettig over je site kan navigeren?

sOid schreef op woensdag 16 mei 2007 @ 22:04:
Nog even iets voor op je site (ziet er mooi uit) maar ik zou als ik jou was wel ff de scrollbalk kleuren aan de website stijl aanpassen met CSS

Moet je niet doen. Scrollbars zijn onderdeel van de browser en niet van de site. Scrollbars stylen is ook IE-only, aangezien MS dacht dat dit wel fancy was. Het is niet valid en ook niet zo gebruiksvriendelijk, aangezien de scrollbars zo minder gemakkelijk te herkennen zijn.

[ Voor 29% gewijzigd door Mei op 16-05-2007 22:09 ]

[sOid]

Mei schreef op woensdag 16 mei 2007 @ 22:08:

Moet je niet doen. Scrollbars zijn onderdeel van de browser en niet van de site. Scrollbars stylen is ook IE-only, aangezien MS dacht dat dit wel fancy was. Het is niet valid en ook niet zo gebruiksvriendelijk, aangezien de scrollbars zo minder gemakkelijk te herkennen zijn.

Mja, ik vind dit ook niet erg geweldig, zo'n grijze balk in een mooi zwart design: http://www.26fps.nl/got/ss.jpg

Overigens ondersteunt Opera ook die gekleurde dingen

[Verwijderd]

Mei schreef op woensdag 16 mei 2007 @ 22:08:
Des te meer reden om ze het bekijken van de foto's zo aangenaam mogelijk te maken Jouw doelgroep zal jouw foto's toch wel bekijken, of je site nou verrekte irritant is om mee te werken of niet, maar waarom zou dat een reden moeten zijn niet wat tips aan te nemen en te zorgen dat je doelgroep gemakkelijk en prettig over je site kan navigeren?

tja dit is nu eenmaal mijn keuze geweest en daar stap ik niet vanaf

wellicht een vervanging van de scrollbar wel, maar het blijft horizontaal

[equationunequal]

Verwijderd schreef op woensdag 16 mei 2007 @ 22:59:
[...]

tja dit is nu eenmaal mijn keuze geweest en daar stap ik niet vanaf

wellicht een vervanging van de scrollbar wel, maar het blijft horizontaal

http://www.useit.com/alertbox/20050711.html

We know from user testing that users hate horizontal scrolling and always comment negatively when they encounter it. Customer satisfaction is surely reason enough to avoid horizontal scrolling.

sOid schreef op woensdag 16 mei 2007 @ 22:18:
[...]

Mja, ik vind dit ook niet erg geweldig, zo'n grijze balk in een mooi zwart design: http://www.26fps.nl/got/ss.jpg

Overigens ondersteunt Opera ook die gekleurde dingen

Scrollbars zijn onderdeel van de GUI van de browser en dienen daarom ook met rust gelaten te worden. Het stylen van scrollbars met CSS is niet standaard compliant, dus de meeste browsers zullen het netjes negeren...

[ Voor 31% gewijzigd door equationunequal op 18-05-2007 13:49 ]