Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Apr 2004
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Scrolling in Layers

    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!!!

  • #2
    New Coder
    Join Date
    Apr 2004
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    and also when i colaspe the page the layer stays rigid and the content flys around!

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

    Anyone else?

  • #4
    New Coder
    Join Date
    Apr 2004
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Medek! thats what im trying to do! nice site, but yeah exactly what u got going on, how did u do it?

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Just what I said. I put a table in a div with fixed width. Here's my HTML:
    Code:
    <div id="photos">
    <table><tr>
    
    <td>photo 1</td>
    <td>photo 2</td>
    <td>photo 3</td>
    
    </tr></table>
    </div>
    and my CSS:
    Code:
    #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...

  • #6
    New Coder
    Join Date
    Apr 2004
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey i tried your code, but im getting Vertical scroll bars as well as horizontal, any ideas how to combat that?

  • #7
    New Coder
    Join Date
    Apr 2004
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #8
    New Coder
    Join Date
    Apr 2004
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try changing this

    Code:
    #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

  • #10
    New Coder
    Join Date
    Apr 2004
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #12
    New Coder
    Join Date
    Apr 2004
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #13
    New Coder
    Join Date
    Apr 2004
    Posts
    80
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #14
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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 or html dog. 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 . Someone else might, though!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •