Sat, December 18th, 2004 by Jasmin
I've been attempting a full CSS layout for my photoblog and have a big, big problem. I sometimes post multiple images and display them next to each other horizontally (like Tracey, except in a much smaller scale). When trying to rebuild I discovered that while <table width=" ... nowrap> will force all your images to sit next to each other, hence creating a horizontal scrollbar, CSS doesn't quite do that. My images are now traditionally on top of each other when there are multiple images.
In Internet Explorer, putting align="left" in your <img> tag will solve the problem, but it still looks horrible in standards-compliant browsers like Firefox. A technically expert friend and I are puzzled over this.
Maybe if we can't solve it I'll abandon this cause and use tables again. In the meantime, does anyone have some remedies? If you'd like to view the layout and CSS just drop an email: jazzzmin at gmail.com
December 18th, 2004 at 11:35 am
etc
seems to do it.
December 18th, 2004 at 11:36 am
crap, that didn't even show up, here it is again:
style="white-space: nowrap;" on your surrounding div.
December 18th, 2004 at 11:42 am
Wow, that was a saviour! Worked perfectly. Thanks.
December 18th, 2004 at 11:55 am
While we're on the subject, all of my images are supposed to have a 4 pixels grey border. Clicking on the image brings you to the preceding entry which means that, unfortunately, on some PC running IE the image is instead surrounded by an butt-ugly blue or red border.
How can I change my style sheet and/or template to prevent that?
December 18th, 2004 at 12:43 pm
If you define a class for your image thus
.myImage {
border: 4px solid #666666;
}
then apply that to your image tag and get rid of your 'border=4' from inside the image tag. So you're left with something like this
http://mute.rigent.com/other/apoptosis/
if you look at the source I've added the new class on the page but you can add it to your stylesheet.
December 18th, 2004 at 6:36 pm
It would be best if I could simply use it around the tag but unfortunately the end result is not as pleasing. I'll add it manually to each image.
Merci.
December 18th, 2004 at 7:34 pm
You should get the same result if you add the style to the img tag directly, replacing the class with
style="border: 4px solid #999999;"
if that helps.
December 18th, 2004 at 7:37 pm
Nantel, try adding link attributes to your BODY tag on the page itself, rather than in the stylesheet.
link="#333333" alink="#333333" vlink="#333333"
Seems to work in IE to get rid of those ugly blue link borders on images.
About the other issue, I'm not a fan of horizontal scrolling at all, I must admit. The mouse wheel won't scroll those pages, and it's very non-intuitive web behaviour for me. I just get frustrated.
December 29th, 2004 at 12:39 pm
Forcing Horizontal Scrolling with CSS
Same thing with Internet Explorer, putting align="left" in your tag will solve the problem, but it still looks horrible in standards-compliant browsers like Firefox.
I have here two methods which can hopefully help you solve this problem. First, ...
August 27th, 2005 at 3:34 pm
This is going to solve the problem (works in FF and IE6:
Horizontal scroll only
/* This is the window you are gonna she in the web page */
#contain {
width: 400px; /* set yours */
height: 200px; /* set yours */
overflow: auto; /* key */
overflow-y:hidden; /* key */
}
/* Some frames */
.image-featured {
text-align:left;
color:#FFF;
height:auto;
width:auto;
float:left;
padding: 6px;
margin:25px 8px 25px 8px;
border:1px solid #CCC;
}
/* The box that contains the frames */
#folders {
width: 800px; /* This has to be wider than #contain. Key */
}
August 27th, 2005 at 3:36 pm
August 27th, 2005 at 3:38 pm
Oops! it seems that I cannot send source code as is.
January 19th, 2006 at 10:17 am
I too enjoy dislplaying images using a horizontal scroll here are some other ideas for horizontal scroll
January 19th, 2006 at 10:19 am
if you wan to get rid of those ugly blue link lines just add to your css div
div.your img { border: none}
and that will take care of those link borders
February 9th, 2006 at 6:13 am
Thanks for the style="white-space: nowrap;" Tip Miles. Worked a treat. Been looking at how to stop the horizontal scroll for ages.
June 1st, 2006 at 8:56 am
Yeah, sweet white-space tip Miles - thankX
October 25th, 2006 at 12:16 pm
Thanks for all the great tips on horizontal scrolling. For me the eye naturally wants to move from left to right. So thanks to this tip I could show my folio how I wanted. Thanks everyone.
March 26th, 2007 at 4:18 am
Brilliant, thanks Miles. Exactly what I was trying to solve (stubborn white-space issue)!
- Lacuna
May 1st, 2007 at 2:53 pm
Thanks to Miles, Luis (years later...) Solved some headaches for me.
July 22nd, 2007 at 5:56 pm
A whole site dedicated to horizontal scrolling is here.
http://www.thehorizontalway.com/
November 16th, 2007 at 6:16 pm
I'm still having issues with this.
I have multiple divs of different widths which are contained inside another container div. But it just scroll horizontally. Any div over the width of the container just displays below the others, very annoying.
I have been using white-space: nowrap', 'overflow: auto' among other settings...
It's being very stubborn
February 4th, 2008 at 6:07 am
Very useful for me