...

View Full Version : Scrolling in Layers



muggzy
01-21-2005, 02:58 AM
i want to have 10 pics in a layer that only takes up a small part of the screen that can be scrolled left to right and NOT up and down to view each picture, the problems i am having are:

everytime i add another picture to the layer it expands and wont stay fixed.

I cant get rid of the up and down scrollbars

the layer in the dreamweaver design area looks different to the browser preview if the layer has multiple rows of pictures, the preview will use a scrollbar for up and down how in dreamweaver i can see everything and cant tell where the layer ends if you get me?

is there a better way to do this then using a layer? i want just to scroll left to right with images inside a field

thanks for your help!!!

muggzy
01-21-2005, 03:00 AM
and also when i colaspe the page the layer stays rigid and the content flys around!

rmedek
01-21-2005, 03:08 AM
I could be wrong (I hope I am), but I think the only way to do that is enclose the photos in a table.

I had the same problem, and looked everywhere for an answer... As far as I know, horizontal scrolling on a fixed-width div isn't supported cross-browser. Here's my solution (http://cathyrivers.com/photos/).

Anyone else?

muggzy
01-21-2005, 03:19 AM
Medek! thats what im trying to do! nice site, but yeah exactly what u got going on, how did u do it?

rmedek
01-21-2005, 03:29 AM
Just what I said. I put a table in a div with fixed width. Here's my HTML:


<div id="photos">
<table><tr>

<td>photo 1</td>
<td>photo 2</td>
<td>photo 3</td>

</tr></table>
</div>


and my CSS:


#photos {
margin: 0;
padding: 10px;
width: 460px;
height: 120px;
overflow:auto;
float: right;
}

#photos table {
border-collapse: collapse;
background: url(../imgs/backgrounds/filmstrip.gif) repeat-x top left #000;
height: 100px;
margin: 0; padding: 0;
}

#photos td {
margin: 0;
padding: 0 4px;
text-align: center;
font-size: 10px;
vertical-align: middle;
}


But let it be known that I'm not really using the best semantic structure, I just couldn't figure out any other way to do it...

muggzy
01-22-2005, 12:13 AM
Hey i tried your code, but im getting Vertical scroll bars as well as horizontal, any ideas how to combat that?

muggzy
01-22-2005, 12:15 AM
and also its aligning far left and i cant get it to align centre, and everything else in my page is contained in the scrollable content when i just wanted the pics like ur page, ooops!

muggzy
01-22-2005, 12:40 AM
here is the link to what it looks like, i want it to just scroll across no up and down and i want the content to just go sideways Argh!

http://www.hardyflooring.com/Andrea_new/test

Graft-Creative
01-22-2005, 01:08 AM
Try changing this



#photos td {
margin: 0;
padding: 0 4px;
text-align: center;
font-size: 10px;
vertical-align: middle; /*change to top*/
}


Gary.

Sorry if it's wrong - it's getting late - spent 16 hours already today trying to fix viruses, giving up, then re-installing everything .....concentration not at it's best :o

muggzy
01-22-2005, 02:44 AM
hey gary, thanks for the reply, i know what u mean , u get that sick feelin in ur stomach cos u been doin it so long and u wish u could find the address of the virus writer and kil....anyway.
the code u put didnt work, still is the same, how come i dont see scroll bars in dreamweaver but i do see them in the finished page?

rmedek
01-22-2005, 03:34 AM
First, please start speling rite bcauz i am havin truble reeding u when u type like this i no it saves time 2 type but not to reed.

Second, the trick is to only use one table row, put all your photos in tds, don't give the table a width, then put the table in a div with fixed width and give the div "overflow: auto." If you take another look at my code you'll see how it works.

The "float: right" and margins/padding are just extra bits to get the look right.

muggzy
01-22-2005, 06:02 AM
ok medek im almost there! just a couple of aligning problems now, take a look
http://www.hardyflooring.com/Andrea_new/test

i want it in the middle of the page, what part of the tag controls that? float?

thanks for your help man

muggzy
01-22-2005, 06:06 AM
oh and on the cathey rivers site how did you get the images to open in a window of the same size as the image?

rmedek
01-22-2005, 09:15 AM
The pop-up windows for the photo gallery is a copy and paste javascript that I found on Google. It's very old and pretty inefficient, so I'd recommend just doing a Google search for a newer one.

As far as positioning the div in the center of the page, you could apply some CSS to it. This is pretty basic stuff, I'd suggest reading a little bit on CSS at w3schools (http://www.w3schools.com) or html dog (http://htmldog.com). Once you get a hang of some basic bits, I'll help you put it together. But I won't code it for you from scratch :D. Someone else might, though! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum