I need help with basic code

Discussion in 'HTML & Website Design' started by Xangular, Jul 6, 2007.

Thread Status:
Not open for further replies.
0
  1. #1
    I know this sounds funny coming from a web designer but I cant figure out how to make a scrollable box. My client wants to put his graphic design into a box that scrolls.

    Anyone know the code for a scrollable box?

    Thanks.
    Tom Swanson
    http://www.xangular.com
     
    Xangular, Jul 6, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Simply fix one or both dimensions, and make overflow auto. Eg. 
    
#picholder {
  height: 200px;
  overflow: auto;
  }
========
<p id="picholder">
  <img src="some.png" 
       alt="some big honking graphic that the silly client wants to scroll" />
</p>
    Code (markup):
    cheers,

    gary
     
    kk5st, Jul 6, 2007 IP
  3. Xangular

    Xangular Banned

    Messages:
    156
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Is there a way to do it with basic html?
     
    Xangular, Jul 6, 2007 IP
  4. rgchris

    rgchris Peon

    Messages:
    187
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You could always just throw the CSS style inline... I wouldn't recommend it, though.
     
    rgchris, Jul 6, 2007 IP
  5. Xangular

    Xangular Banned

    Messages:
    156
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Anyone else with a solution.

    Thanks.
    Tom Swanson
     
    Xangular, Jul 6, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    HTML (and XHTML) is a structural markup language. It can't handle presentation, which is what CSS is for.

    Gary presented you with the solution, though I would replace the <p></p> with <div></div> since an image by itself is not a paragraph.

    What he forgot to tell yo though is to put the CSS in the HEAD section of your Web page. There are two ways to do this. The first is to embed it directly, like so:
    
<head>
    <title>Page Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css" media="screen">
        #picholder {
            height: 200px;
            overflow: auto;
        }
    </style>
</head>
    Code (markup):
    The second way to do this is to create a separate file called screen.css and then link it into your Web page, like so:

    1. Open a text editor (if you use Notepad, save the file type as "all files", don't use Word or WordPad for this)
    2. Write out the CSS rules that Gary provided you
    3. Save as screen.css
    4. Upload to your server, putting it in a separate folder called styles. (Make sure the "styles" folder is in the main folder, where your index.html file goes, along with your images and script folders)
    Then link to your stylesheet like this:
    
<head>
    <title>Page Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen">
</head>
    Code (markup):
    In both cases, if you're using XHTML, be sure to end the link and meta tags with a space and foward slash, like so:
    
<head>
    <title>Page Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen" />
</head>
    Code (markup):
     
    Dan Schulz, Jul 6, 2007 IP
  7. Xangular

    Xangular Banned

    Messages:
    156
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks you guys. You ahve been a big help.
     
    Xangular, Jul 6, 2007 IP
Thread Status:
Not open for further replies.