/    Sign up×
Community /Pin to ProfileBookmark

horizontal display

Copy linkTweet thisAlerts:
Jan 10.2011

Hi

Couldn’t think of a very descriptive title for this one!

I’m working on an art gallery website, the purpose of which will be to showcase a single artist. Trying to copy a design I heard about in which the browser scrolls horizontally through large thumbnails of paintings, mimicking the act of strolling along in a real gallery.

I want to be able to control the width of the element that contains each gallery image, according to the width of the browser window, in order that only one image will be displayed at a time. I know the user might resize the window and I can live with that.

The problem I’m having comes from some default feature of tables that I don’t understand. I have some JS that sets the width of the table cells according to the window width. I want to set the width of the first cell to the width of the window so that the user must scroll over to see what’s in the next cell.

When I test the design, I see the page begin to load as I intended, and then adjust itself quickly to a smaller cell width, so that I can see more content that I intend when the page loads.

There could be several elements to my problem that should be posted on different forums, including the CSS and JS forums. For the HTML forum, I guess my question is this:

I don’t usually work with tables; I use styles. I think there is some default attribute of <table> that I don’t know about that is causing the width set by my script to be overridden and set to something else. So, my HTML question is, isn’t there some element that I can easily set styles for, that has a width dimension but doesn’t cause a line break? <div>, <p> – these are elements that stack up vertically in the window, in the order they appear in the code. Isn’t there some element, some tag that doesn’t cause a line break? I thought maybe <span> would work, but it seems to cause line breaks also.

I’m having difficulty finding any online reference that deals specifically with HTML elements and how to position them next to each other horizontally. I know about float — I don’t think that’s the solution when there are so many…

So far, the only way I know how to display content horizontally is with one long <tr> with a <td> for each item. Any other ideas?

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@jwitt98Jan 10.2011 — Have you looked into jquery jcarousel? If the picture I am getting in my head is right, it should do what you are looking for.

There is a small example of it on this page if you scroll down to the featured listings:

http://midwestwebtrends.com/sample-sites/open-realty/index.php

It can easily be customized to display only 1 item in the window at a time. The width of the items can be set in CCS, but I see no reason why the widths couldn't also be controlled with your separate js script.

The html is simple enough, you just put your items in an unordered list and call the js.
Copy linkTweet thisAlerts:
@strBeanauthorJan 10.2011 — That looks interesting; I'll check it out. Thanks very much.

What about my general question about HTML elements, and whether there are any tags that give the opportunity to set the widthn of an element, but don't cause a line break? Is there anything like that in HTML?
Copy linkTweet thisAlerts:
@jwitt98Jan 10.2011 — That looks interesting; I'll check it out. Thanks very much.

What about my general question about HTML elements, and whether there are any tags that give the opportunity to set the widthn of an element, but don't cause a line break? Is there anything like that in HTML?[/QUOTE]

Have you tried:
[CODE]display: inline-block;[/CODE]
using a span tag?
Copy linkTweet thisAlerts:
@strBeanauthorJan 11.2011 — No, I've tried setting styles on a span tag with no luck, but never used the display attribute.

Thanks!! I'll let y'all know if we're getting closer. Meantime, the jcarousel thing is still looking good; haven't had time to work with it, but I'm going to.
×

Success!

Help @strBean spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...