53 users online (0 members and 53 guests)  


  Results 1 to 2 of 2

Related

  1. Layer scrolling problems    Forum: CSS Forum
    Replies: 3
  2. Scrolling in layer?    Forum: CSS Forum
    Replies: 2
  1. #1
    3-stripe's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2004
    Posts
    1

    the PERFECT scrolling layer???!?

    hello,

    i've been puzzling over how to create a proper, scrolling div layer, which is permantly fixed in size and position.... like the news scroller at www.pixelsurgeon.com for example...

    whenever i try and make something similar, i end up with a layer that has a horizontal scrollbar when it shouldn't, or is not quite in the right place depending on the broswer used.

    so how do i do it properly!!??

    the site i will be using this on is http://www.clubtng.com/pottery/launch.html by the way, which is still just a rough demo!

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there 3-stripe,

    and a warm welcome to these forums

    Here is an example, it should give you a few ideas...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>div scroller</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    
    body {
         background: #666699;
     }
    
    #scroller {
         margin: auto;
         width: 324px;
         height: 200px;
         border: inset 6px #8888bb;
         background: #ffffff;
         overflow: auto;
     }
    #scroller p {
         border: solid 1px #000000;
         background: #eeeeff;
         margin: 10px;
         padding: 10px 20px 10px 20px;
         font-family: arial;
         font-size: 16px;
         text-align: justify;
     }
    
    /*//]]>*/
    </style>
    
    </head>
    <body>
    
    <div id="scroller">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Praesent blandit venenatis purus. Integer massa libero, 
    vehicula id, consequat sed, tincidunt nec, purus. Class 
    aptent taciti sociosqu ad litora torquent per conubia nostra, 
    per inceptos hymenaeos. Suspendisse potenti. Nunc 
    vulputate magna non magna. Aenean lorem eros, adipiscing 
    quis, semper non, dictum a, nunc. Curabitur ut sem. 
    Pellentesque a est id neque hendrerit ultrices. Donec 
    vulputate tincidunt turpis. Curabitur dignissim vestibulum nunc. 
    Aliquam felis lorem, ultrices sit amet, convallis a, accumsan vel, 
    ante. Proin aliquam turpis sed augue. In pellentesque, magna 
    a pulvinar adipiscing, est orci adipiscing felis, sed laoreet urna 
    magna quis neque. Proin facilisis aliquet urna.
    </p>
    </div>
    
    </body>
    </html>
    coothead



Tags for this Thread