Horizontal scrolling with captioned images?

Hey everybody I'm helping a friend with his new site and need help figuring this out:
- I want to add left-aligned text captions below each of the horizonal scrolling images.
- I also want the images/captions to automatically resize to fit every window size (as the images currently do) - would be great if the image caption texts would automatically resize and become smaller with smaller window sizes.
Example here (this is a test without captions): http://briankokoska.com/indextest2.html
If somebody could please try to code the page including the word "caption" left-aligned underneath each of the images I would be very greatful. This way i can add the proper captions myself.
Thanks in advance for your help!!!

Horizontal scrolling and fixed divisions don't work well in mobile devices.
Try this code in a new, blank document and SaveAs test.html. This works much better in mobile/tablet devices.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BRIAN KOKOSKA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
body {
width: 98%;
color: #000;
padding: 0 1%;
font-size: 125%;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
header {
position: fixed;
top: 0;
right: 3%;
margin: 0;
width: 35%;
font-weight: bold;
text-align: right;
background: rgba(255,255,251,0.5)
header * { padding-right: 1% }
header address a {
padding-top: 25px;
margin-bottom: 0;
color: red
header p { margin-top: 25px; }
header h2 a {
color: blue;
font-size: 75%;
margin-top: -10px;
section { display: table; }
article { display: table-row; }
/**Captions**/
article p {
display: table-cell;
vertical-align: middle;
margin: 2%;
padding: 2%;
color: red;
/**re-usable classes**/
.center { text-align: center }
.right { text-align: right }
.red { background: rgba(255,0,0,0.5); }
.white { background: rgba(204,204,204,0.5) }
.blue { background: rgba(0,102,204,0.5) }
/**links**/
a img { border: none }
a {
text-decoration: none;
color: #000;
display: block;
line-height: 2em;
a:hover, a:active, a:focus { text-decoration: underline }
/* Special Rules for Mobile, Tablets */
@media only screen and (max-width: 1024px) {
body { font-size: 90% }
img { width: 100% }
header {
width: 100%;
position: static;
padding: 0.5%
article p {
display: block;
padding: 0;
font-size: 90%
</style>
</head>
<body>
<header>
<h1 class="right">BRIAN KOKOSKA</h1>
<address>
<a href="mailto:[email protected]">[email protected] </a>
</address>
<h2><a href="http://mfineart.ca/artists/brian-kokoska-selected-works/" target="_blank">Macaulay & Co. Fine Art</a></h2>
<p class="blue"><a href="http://briankokoska.com/installationviews">INSTALLATION VIEWS</a><p>
<p class="white"><a href="http://briankokoska.com/selectedworks">SELECTED WORKS</a></p>
<p class="red"><a href="http://briankokoska.com/info">INFORMATION</a></p>
</header>
<section>
<article>
<p>Caption goes here...</p>
<p><a href="http://lvl3gallery.com/post-hope-1262013-2172013/#1" target="_blank">
<img src="http://briankokoska.com/briankokoska_posthope_smallest.jpg">
</a> </p>
<p>Caption goes here...</p>
<p><a href="http://lvl3gallery.com/post-hope-1262013-2172013/#1" target="_blank">
<img src="http://briankokoska.com/briankokoska_posthope_smallest2.jpg">
</a> </p>
<p>Caption goes here...</p>
<p><a href="http://voxpopuligallery.org/exhibitions/painting-bitten-by-a-man/" target="_blank">
<img src="http://briankokoska.com/briankokoska_paintingbittenbyaman_smallest.jpg">
</a> </p>
<p>Caption goes here...</p>
<p><a href="http://voxpopuligallery.org/exhibitions/painting-bitten-by-a-man/" target="_blank">
<img src="http://briankokoska.com/briankokoska_paintingbittenbyaman_smallest2.jpg">
</a></p>
<p> Caption goes here... </p>
<p>image here</p>
Etc.....
</article>
</section>
</body>
</html>
Nancy O.

Similar Messages

Horizontal scrolling with mouse wheel?

I have built a website for a client that scrolls only horizontally. Is it possible to scroll with the mouse wheel horizontally?
Is there certain HTML I need to add?
Thank you

Hi,
There is no out of the box solution to force horizontal scrolling with mouse wheel. However, you can add your own code to your Muse site after exporting it. These docs should be helpful :
http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
http://stackoverflow.com/questions/2346958/how-to-do-a-horizontal-scroll-on-mouse-wheel-sc roll
Regards,
Aish

Horizontal scrolling with mousewheel

I was wondering if anyone knew how to create horizontal scrolling with the mousewheel in Adobe Muse.
So that instead of the page moving up/down when the mousewheel is used, it moves left to right so that the user dosen't have to manually scroll.
Is there any HTML I can insert that will allow me to do this?

My apple mouse that came with my iMac G5 started sticking which was causing problems when I tried to double-click. I bought a Logitech Optical Mouse which works fine on my iMac even if it was intended to be used with a PC. I can even right-click to bring up the options you would get by ccontrol-click an apple mouse. Also the Logitech mouse is cheap compared with an apple mouse.
http://www.amazon.com/gp/product/B0001LTT64/ref=dpcp_ob_title0/104-2556526-6719156

Horizontal Scroll with CSS ? ? ?

Hi All:
I did a search on the forum and cannot find what I am looking for so I am posting this question: I built a phot gallerey based upon the Stu Nichols tutorial I found posted online. It works fine and can be seen here:
http://www.chartoonz.com/test/imgGalleryTEST02Scroll.html
My problem is too many photo buttons. I have 32 buttons for the photos but I don't want them all to show. I just want to line them all up, horizontally and allow a user to scroll through the top line. I would really like the scroll to stay put when they click a button and let them continue to scroll. Is that possible?
I tried using "overflow-x:scroll;" in the ".gallery" style but I cannot restrict the height as of now; so it didn't work. Not sure what's going wrong and I sure could use some help...
Thanks
ACC

Qusi success!
I had to set .gallery's width up to 250% but I finally got the scroll I wanted hooray and thank you! It can be seen at http://www.chartoonz.com/test/imgGalleryTEST05ScrollKeepingimagesInplace.html
So thanks a LOT.
However the results are not what I intended, the scroll shifts all the LI items when one scrolls which means that the images, scroll along with them and I was hoping to keep them stuck in one position. I HAD thought that the
.gallery li a img {
position:absolute;
top:-390px;
left:80px;
would do that but having researched absolute positioning I see the folly of my ways. Is there a way with the css to decouple the image's (.gallery li a img) from the positioning of the actual .gallery li a positioning? Or am I barking up the worng tree. It's frustrating to be 66.66% done. If there was a way to get the scroll, to scroll, but the images to stay put DESPITE the fact that they are all part of the same unorderd list it wouyld be awesome. I have looked through the forums but I cannot get any information that seems to be helpful.

Horizontal scrolling with a vertical scroll wheel

Recently I sadly had to ditch my mighty mouse. Good by little friend.
I couldn't justify spending 45 minutes of my day trying to clean the wheel.
I miss horizontal scrolling now. I've been told that one can get horizontal scrolling by holding the shift key, but that doesn't work for me.
Any ideas?

My apple mouse that came with my iMac G5 started sticking which was causing problems when I tried to double-click. I bought a Logitech Optical Mouse which works fine on my iMac even if it was intended to be used with a PC. I can even right-click to bring up the options you would get by ccontrol-click an apple mouse. Also the Logitech mouse is cheap compared with an apple mouse.
http://www.amazon.com/gp/product/B0001LTT64/ref=dpcp_ob_title0/104-2556526-6719156

How do I eliminate horizontal scrolling with wireless mouse?

Is there a way to disable just the horizontal scrolling on a wireless mouse? I have Mac OS X 10.6.8. I've searched Google and found several sources that recommend typing "defaults write com.apple.driver.Apple BluetoothMultitouch.mouse MouseHorizontalScroll -bool NO" in the Terminal window but it does not work. Any help would be appreciated.

It will only last until the next startup, but
Open Terminal (in your Applications/Utilities folder):
Copy/paste and hit Return:
defaults write com.apple.driver.AppleBluetoothMultitouch.mouse MouseHorizontalScroll -bool NO
For this to take effect, turn your mouse off and then on again from the power switch
To reverse
defaults write com.apple.driver.AppleBluetoothMultitouch.mouse MouseHorizontalScroll -bool YES
Message was edited by: WZZZ

Manual thumbnail scroller with enlarged images opening next to them

I would like to make something like
http://www.eleanorstravels.com/inTensaSite/index.htm
, where the image opens next to the scrolling thumbnails, except
less impossible to code, because unlike eleanor I am stupid.

I'll stick Steve with that....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
": Nadia : ** Adobe Community Expert **"
<[email protected]> wrote in message
news:[email protected]...
> Ha ha ha - rub it in why donchya !!
> A round of margaritas is on me - but I'll let you pick
up the tab ;-)
>
>
> --
> Nadia
> Adobe® Community Expert : Dreamweaver
> ----------------------------------------
> CSS Templates |Tutorials |SEO Articles
>
http://www.DreamweaverResources.com
> ~ Customisation Service Available ~
>
http://www.csstemplates.com.au
> ----------------------------------------
>
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>> Or - come to TODcon (
http://www.todcon.org) and let
master Steve tell you
>> how....
>>
>
>
>> --
>> Murray --- ICQ 71997575
>> Adobe Community Expert
>> (If you *MUST* email me, don't LAUGH when you do
so!)
>> ==================
>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
>> ==================
>>
>>
>> ": Nadia : ** Adobe Community Expert **"
>> <[email protected]> wrote
in message
>> news:[email protected]...
>>> These may help you build a gallery of your own:
>>>
http://www.projectseven.com/tutorials/images/showpic/index.htm
>>>
>>>
http://www.tjkdesign.com/articles/gallery/photo_gallery.asp
>>>
>>> (no code, you'll have to learn how to do these
on your own by reading
>>> the articles, but at least they're free :)
>>>
>>>
>>> --
>>> Nadia
>>> Adobe® Community Expert : Dreamweaver
>>> ----------------------------------------
>>> CSS Templates |Tutorials |SEO Articles
>>>
http://www.DreamweaverResources.com
>>> ~ Customisation Service Available ~
>>>
http://www.csstemplates.com.au
>>> ----------------------------------------
>>> ~ Forum Posting Guidelines ~
>>>
http://www.adobe.com/support/forums/guidelines.html
>>> CSS Tutorials for Dreamweaver:
>>>
http://www.adobe.com/devnet/dreamweaver/css.html
>>>
>>>
>>>
>>> "thighmister"
<[email protected]> wrote in message
>>> news:[email protected]...
>>>>I would like to make something like
>>>>
http://www.eleanorstravels.com/inTensaSite/index.htm
, where the image
>>>> opens
>>>> next to the scrolling thumbnails, except
less impossible to code,
>>>> because
>>>> unlike eleanor I am stupid.
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>
>>>
>>
>>
>
>

Can't horizontal scroll with PC desktop glidepoint touch pad or dell lap top touchpad.

I can scroll vertically but not horizontally on firefox with desktop PC glidepoint touchpad and with dell laptop touchpad. Desk-and-lap tops work fine with internet explorer.
== This happened ==
Every time Firefox opened
== From first moment firefox was downloaded

I cant get my T530 to boot on the discrete graphics card either (Nvidia) unless I add (EDIT: to the kernel boot line in grub.cfg):
noapic
Note that I did NOT write noacpi, but noapic. See this thread:
https://bbs.archlinux.org/viewtopic.php?id=175672
**EDIT2** Actually, you might try noacpi and noapic, and then both at the same time considering your mention of acpi in your OP.
Last edited by GSF1200S (2014-05-29 17:08:07)

Horizontal scrolling with a table that is 100% width of window/container

Hello,
I'm a bit perplexed - it seems to me that the only way that I can have both fixed and scrollable columns in a table, with a table that resizes to the width of the user's screen, is to have percentage widths for all the entries.
Warning imminent rant
This seems to me to almost defeat the purpose. I want to be able to show more columns if the user has a large screen, and less if they have a small screen, keep certain key fields always showing and have the space avaliable for each column fixed to the size of the column contents. Having percentages of the screen for all columns just means that the column will get wider and thinner, not more or less!
Is there any hope that this might come along with client side scrolling in NetWeaver EhP2? Or does anyone have a cunning solution to the problem?
Now, I can sort of understand why this functionality has been build like this (the ABAP not having any real idea of how wide the screen actually is) - but why deliever such a solution at all? I can almost understand a fixed width situation, although all that code for a minimal improvement over just specifying the number of scrollable columns is suprising - but I struggle to see the use case for setting all the columns in a table to display as percentage widths.
Rant over -
If anyone does have any ideas how to have a 100% width table with fixed width columns - please do let me know.
Cheers,
Chris

Can this work:
Emebed your table UI element in Transparent Container UI element ( give it a fixed width ), now make table width as 100 % and make each column width as Width of Transparent Container / No of Columns.
Although I'm suggesting this but in my opinion giving fixed width to any UI element height width property is not advisable and recommended. It is because when browser will be resized by the user then if there is a fixed width settings then scrollbars would appear and layout may also go haywire.
If on the other hand if we are giving % (relative of window ) in width height of UI elements then layout will be adjusted automatically.
Regards
Manas Dua

Horizontal scrolling with page control

Hello,
in my application I use Page Control for switching from page to page (at the moment it is only possible when you touch on the dots). But I want that when the user scrolls left/right the next/previous page is displayed. I know that the class UIScrollView is to use, but I have no idea how!!
Can somebody post an example code?
Message was edited by: mpxl

I am trying to implement a similar scrollview/pagecontrol, but I want to retain vertical scrolling capabilities on each pane (non-paginated). Would this be easy to implement?

IWeb 08: Static horizontal menu with background image

Hi
I want to make a static horizonal menu bar. I want to have a 800px x 40px black bar that has a background image from the same size. The reason of a background image is because I want a logo to be in that menu. I have searched in google for samples but I haven´t been able to find one that is simple and that I can incorporate the logo in the background. Can somebody tell me a link to a place to get this or tell me a code ? I don´t know html thou
thank you in advance

Don't really understand exactly what you are asking here? Why do you need any code to create a menu bar? You can do this very easily in iWeb.
To create a menu bar:
1. Open your page in iWeb and then open the Inspector and go to Page and click on 'Hide from menu' and 'Don't include in menu and this will turn off the iWeb built in template navigation menu.
2. To create your own menu bar, simply use either a text box or a shape and make it 800px by 40px and then place it on your page where you want your nav menu to be and type in your links and then hyperlink them to your pages by opening the Inspector and opening Hyperlink - 2nd from the end and then highlighting the text and linking to relevant pages and then setting the colours via the format link.
Don't quite understand why you want a background image in a nav menu? It will be very hard to get anything of those sizings and people do not usually have a background image in a nav menu - normally a colour. A nav menu is not the place for background images or logos - it is too small and all this should be in your header section instead.
If you want more help, then please be precise about what you are asking.

One-page website and horizontal scrolling

Can someone please tell me how I can have the horizontal
scrolling of the images while the title and the menu above are
fixed and static? I'm trying to design a very simple photo website
with minimal HTML pages. Two examples are below. Thanks
http://www.rohai.com/sf1.html
http://eliotshepard.com/set/group-swim

You can learn a lot about a web site and how it was created
by simply
viewing the page source and CSS. Another really great tool to
have is
Firefox's Web Developer Toolbar. Can't live without it.
In answer to your question. Frames are one way to do this
(but not
optimal). A scrolling division is another way to do this. But
I have to
tell you that having lots of scrollbars on a page is annoying
as hell and
not very user friendly. People who can't use a mouse for
whatever reasons
won't enjoy your site much either.
CSS:
#photos {
overflow:scrolling}
HTML:
<div id="photos">
your photos go here
</div>
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"tinglers" <[email protected]> wrote in
message
news:g6lmc0$6rk$[email protected]..
> Can someone please tell me how I can have the horizontal
scrolling of the
> images while the title and the menu above are fixed and
static? I'm trying
to
> design a very simple photo website with minimal HTML
pages. Two examples
are
> below. Thanks
>
>
http://www.rohai.com/sf1.html
>
>
http://eliotshepard.com/set/group-swim
>

Disabling Horizontal Scroll in Mountain Lion (Magic Mouse)?

So I've tried pretty much everything and can't seem to this.
The following things used to work under Lion and before, it seems but having tried all of them, I'm at a loss for what to do. I like the magic mouse, but
when doing any development like coding or doing something in illustrator or Photoshop. The horizontal scroll makes my content jump all over the place.
Very frustrated hope someone can help. Here are all the things I've tried.
Open a terminal shell:
defaults write com.apple.driver.AppleBluetoothMultitouch.mouse MouseHorizontalScroll -bool NO
This no longer does anything.
I tried installing MagicPrefs to try and 'overwrite' the scroll functionality for horizontal movement... it doesn't work
I tried installing BetterTouchTool (BTT) to also overwrite the scroll functionality for horizontal movement... again it doesn't work.
What does work:
It seems I can go into System Preferences > Accessibility > Mouse & Trackpad > Mouse Options > uncheck scrolling.
But this gets rid of all scrolling even vertical.
Now if MagicPrefs or BTT had a vertical scroll action you could bind to up/down swipes this would be fine, but they don't.
So, at a loss for what to do.

If you have windows 7 this might work for you. Found from another forum post here.
Ra1n
Re: how to disable horizontal scrolling with magic mouse in win7?
Mar 19, 2013 8:30 AM (in response to lexa_xxx)
I use MagicMouse on iMac with Windows 7 running (installed through BootCamp). Got sick of annoying horizontal scrolling. The solution described above has helped me to disable it. Here is what I've done in steps:
1) go to http://www.autohotkey.com/ and download an app (a script editor).
2) Install and run the program - please note that it will not open as it runs in the background
3) Rightclick on the desktop -> choose "New" -> "AutoHotkey Script" (a new script file will be created on the desktop) -> name it as you wish (e.g. "Mouse_HScroll")
4) Rightclick on the file you've just created and choose "Edit Script" from the menu.
5) Add these three lines below existing text in the file:
WheelLeft::return
WheelRight::return
#MaxHotkeysPerInterval 5000
6) Save file
7) Run "Convert .ahk to .exe" program from the package installed earlier and browse the file you've just created, hit ">Convert<" -> .exe file should be created. Run this file -> the scrolling should be disabled now.
7) You may wish to move this file to Start/"Autorun" folder, so it would be launched automatically each time you reboot your Mac/PC.
Hope this helps! Good Luck

Another mouse/horizontal scrolling question

not to threadjack another posts thread, but i have a Kensington Expert Mouse (black four button scroll around th e trackball) i was wondering if theres a way to activate horizontal scrolling with that mouse?
thanks!

Two ways:
1) Hold down Shift while turning the scroll-ring.
2) You can set one of the buttons to switch the scrolling direction in the "Buttons" tab of "MouseWorks" system preference. In the "Scrolling" tab you can have it show the scrolling direction in the menu bar.
Make sure you have MouseWorks 3.0
<http://us.kensington.com/html/1385.html#mac30>

How to adjust the space between images in a carousel or images with horizontal scroll

I use the next steps to create a carousel or horizontal scroll of images:
Webcenter portal: Spaces
Spaces
Manage Settings
Pages
Create page
Content management
Content presenter
Add images with Plus Icon
It works, but between every image has a lot of space, can you tell me how to reduce the space between every image.
My Oracle Version 11gR1 (11.1.1.3.0)
Regards
Tomas Reyes

Remove line 234 in your HTML code.
<p>& n b s p</p>
This is a redundant line of code. Your spacing should get resolved.
PS: I've given spaces between the tag because otherwise this forum would not display the line correctly.

Horizontal scrolling with captioned images?

Similar Messages

Maybe you are looking for