Textpattern CMS

#1 2006-07-23 15:32:01

reptilerobots

Member

Registered: 2005-08-20

Posts: 72

image gallery that scrolls left to right.

Hello – I need help setting up the page so that it scrolls from left to right, and not top to bottom. I am using the hak article image plug in so that there are 2 or 3 images per article. Each image is always going to be 400 px high, but have variable widths.

I was using for the css

<code>
body {
margin: 0px 0px 0px 0px;
background-color: #666;
overflow: auto;

}

.floatRight {
float: right;
background-color: #333;
display: inline;
}

.articleContainer {
float: left;
background-color: #ff00ff;
display: inline;

}

.articleListContainer {
float: left;
background-color: #00ff00;
display: inline;
}
</code>

my page has this code

<code>
<div class=“articleListContainer”>
<txp:article_custom form=“Xvault_body” section=“news” sortby=“Posted” sortdir=“desc” />
</div>
</code>
and the form Xvault_body has the code
<code>
<div class=“articleContainer”>
<txp:hak_article_thumb poplink=“1” limit=“2” class=“floatRight” />
<txp:body />
</div>
</code>

I can get it to work, insofar that if I stretch my browser window to accomodate every div, they all line up next to eachother, but when any of the divs extends beyond the boundaries of the page, it breaks to the next line. I assume that if one of them had a set width it would be easier to fix this mess… but my problem is that I won’t know how wide it is all going to be, and I would hate to have to add a new width to my css every time…

my ‘testing’ page is here
http://www.wearetherobots.com/pages/news

Ive been working on and off with this for half a day and looking up html, and I just cant seem to find a solution (except mentioned above and / or use a table)

#2 2006-07-23 19:04:37

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: image gallery that scrolls left to right.

Generally wrapping behaviour is normal unless you specifically define the width of an element.

You could add a min-width value in your css. Note though that IE ignores min-width.

One way you could avoid this during testing is to set an empty DIV at the top of your document with a large fixed width to create the scrolling space. This is a bit of a hack to simulate the behaviour of min-width.

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;

#3 2006-07-24 00:22:31

reptilerobots

Member

Registered: 2005-08-20

Posts: 72

Re: image gallery that scrolls left to right.

so what you are saying is make an empty div that is equal to the width of all my images and use that until I know how wide everything is going to be? that works, but just as well as making the body width the same as the widths of all the images added up… so that means I have to change the width every time I add a new image/article…
have you had any experience with the css “white-space: nowrap” ? I tried using that in the body css, but it doesn’t work.

#4 2006-07-24 01:18:22

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: image gallery that scrolls left to right.

No if you say set minwidth at 1024px, if someone resizes the browser below that they get the scrill bars, regardless of the size of the page width. I may have misunderstood what you are trying to accomplish.

Is this more along the lines you mean? … http://www.alistapart.com/articles/magazinelayout

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;

#5 2006-07-24 01:37:49

reptilerobots

Member

Registered: 2005-08-20

Posts: 72

Re: image gallery that scrolls left to right.

I am trying to accomplish something like this – http://www.babakradboy.com/ click on any of the links below, Voices of Color for example…. I know he’s using frames and also tables. In my ‘drawing’ gallery, I just wanted to have my article list form output all of the thumbs next to eachtother in a row on the top, that go from left to right.

#6 2006-07-24 16:31:58

els

Moderator

From: The Netherlands

Registered: 2004-06-06

Posts: 7,458

Re: image gallery that scrolls left to right.

Like TxpMag? Ask Alexandra.