Dreamweaver8 Scrollable text for Dummies

dench82 · #1 May 2nd, 2007, 20:18

Please Help... I Am Very New To Web Design And Have To Build A Site For A Uni Project My Site Is Built But Id Really Like To Put A Scrollable Text Box Onto The Page As Space Is Limited

I Have Tried Various Codes On Various Forums But To No Avail

please could Someone Please Post A Code And An Idiots Guide To Insert It For Me Please!!!

Im Desperate!!!

Im Using Dreamweaver 8 Im On Ie6

Many Thanks In Advance

Dench

karinne · #2 May 3rd, 2007, 12:01

CSS

Code: Select all

.scrollable {
    display: block;
    width: 300px;
    height: 250px;
    overflow: auto;
}

HTML

Code: Select all

<div class="scrollable"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam mattis mauris eget lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ante. Mauris sapien ante, ultricies sit amet, gravida non, blandit non, massa. Integer tempor pellentesque ligula. Sed tempor. Sed feugiat, diam ac mollis viverra, sem libero gravida mi, ac cursus lacus mauris eu sem. Quisque consectetuer bibendum lacus. Vivamus quis metus. Duis velit nibh, auctor ac, pretium quis, mattis et, nibh. Proin eu pede. Vivamus mauris.</p></div>

dench82 · #3 May 3rd, 2007, 13:37

Quote:

Originally Posted by karinne

CSS

Code: Select all

.scrollable {
    display: block;
    width: 300px;
    height: 250px;
    overflow: auto;
}

HTML

Code: Select all

<div class="scrollable"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam mattis mauris eget lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ante. Mauris sapien ante, ultricies sit amet, gravida non, blandit non, massa. Integer tempor pellentesque ligula. Sed tempor. Sed feugiat, diam ac mollis viverra, sem libero gravida mi, ac cursus lacus mauris eu sem. Quisque consectetuer bibendum lacus. Vivamus quis metus. Duis velit nibh, auctor ac, pretium quis, mattis et, nibh. Proin eu pede. Vivamus mauris.</p></div>

Thanks you for the codes and forgive my stupidity but where exactly do i put them??

thank u

karinne · #4 May 3rd, 2007, 13:43

The CSS you put either put in an external stylesheet or in the <head> of your document. See my article Integrating CSS in your website for examples.

And the <div> ... well ... where ever you want you scrollable text to appear.

dench82 · #5 May 3rd, 2007, 14:19

Quote:

Originally Posted by karinne

The CSS you put either put in an external stylesheet or in the <head> of your document. See my article Integrating CSS in your website for examples.

And the <div> ... well ... where ever you want you scrollable text to appear.

I just cant seem to put the CSS in write place??

I know its incredibley cheeky but could you put it in the right place off the code and repost it for me please??

the code is:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TITLE  -->
<title>Share The Love - Dear Johnny</title>
<!-- GLOBAL CSS -->
<link href="style/global.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- JAVASCRIPT -->
<!-- <script type="text/javascript" src="js/global.js"></script> -->
<!-- FAV ICON -->
<link rel="Shortcut Icon" href="http://www.webforumz.com/images/favicon.ico" type="image/x-icon" /> 
<!-- META DATA -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="distribution" content="GLOBAL" />
<meta name="revisit-after" content="7 Days" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="all" />
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="title" content="title" />
<meta name="subject" content=" " />
<meta name="description" content=" " />
<meta name="keywords" content=" " />
<meta name="author" content=" " />
<meta name="rating" content="safe for kids" />
<meta name="Language" content="en-GB" />
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<body onload="MM_preloadImages('images/b_links1.gif')">
<!-- BODY -->
<div id="bodybg">
 <!-- CONTAINER -->
 <div id="container">
  <!-- CONTENT -->
  <div id="header">
  <img src="http://www.webforumz.com/images/i_logo.gif" alt="Share The Love" />
   
  <!-- EO CONTENT -->
  </div>
  
  
  <!-- CONTENT -->
   <div id="content">
  
  <div id="left"><img src="http://www.webforumz.com/images/i_nav_top.gif" alt="Share The Love" width="188" height="18" style="margin:0; padding:0;" /><div class="whiteBG">
  <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/b_home1.gif',1)"><img src="http://www.webforumz.com/images/b_home.gif" name="Image13" width="188" height="13" border="0" id="Image13" class="navBut" /></a><br />
  <a href="whatis.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/b_what1.gif',1)"><img src="http://www.webforumz.com/images/b_what.gif" name="Image14" width="188" height="12" border="0" class="navBut" id="Image14" /></a><br />
  <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/b_symp1.gif',1)"><img src="http://www.webforumz.com/images/b_symp.gif" name="Image15" width="188" height="12" border="0" class="navBut" id="Image15" /></a><br />
  <a href="amisafe.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/b_safe1.gif',1)"><img src="http://www.webforumz.com/images/b_safe.gif" name="Image16" width="188" height="12" border="0" class="navBut" id="Image16" /></a><br />
  <a href="where.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/b_where1.gif',1)"><img src="http://www.webforumz.com/images/b_where.gif" name="Image17" width="188" height="12" border="0" class="navBut" id="Image17" /></a><br />
  <a href="johnny.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','images/b_jonny1.gif',1)"><img src="http://www.webforumz.com/images/b_jonny.gif" name="Image18" width="188" height="12" border="0" class="navBut" id="Image18" /></a><br />
  <a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','images/b_links1.gif',1)"><img src="http://www.webforumz.com/images/b_links.gif" name="Image19" width="188" height="12" border="0" class="navBut" id="Image19" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','images/b_links1.gif',1)"></a><br />
  </div>
  <img src="http://www.webforumz.com/images/i_nav_bot.gif" alt="Share The Love" style="margin:0; padding:0;" />
  </div>
  
  <div id="right"><img src="http://www.webforumz.com/images/main_dear.gif" width="447" height="78" /><div class="whiteBG">
    <div align="center"><img src="http://www.webforumz.com/images/pics/girl typing.jpg" width="266" height="186" /></div>
    <div class="contentText"><div class="scrollable"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam mattis mauris eget lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ante. Mauris sapien ante, ultricies sit amet, gravida non, blandit non, massa. Integer tempor pellentesque ligula. Sed tempor. Sed feugiat, diam ac mollis viverra, sem libero gravida mi, ac cursus lacus mauris eu sem. Quisque consectetuer bibendum lacus. Vivamus quis metus. Duis velit nibh, auctor ac, pretium quis, mattis et, nibh. Proin eu pede. Vivamus mauris.</p></div>
<br />
    <br />
    </div>
  </div>
  <div align="right"><img src="http://www.webforumz.com/images/i_content_bot.gif" alt="Share The Love" />
     </div>
  </div>
  
  <br class="clearBoth" /> 
  
  <!-- EO CONTENT -->
  </div>
 <!-- EO CONTAINER -->
 </div>
<!-- EO BODY -->
</div>
</body>
</html>

karinne · #6 May 3rd, 2007, 14:21

Quote:

Originally Posted by dench82

I just cant seem to put the CSS in write place??

Probably because your missing your </head>

just put it before that.

dench82 · #7 May 3rd, 2007, 14:26

Quote:

Originally Posted by karinne

Probably because your missing your </head>

just put it before that.

clearly im a retard, i cant get it to work.

please could you?

karinne · #8 May 3rd, 2007, 14:30

Did you code this site? Or did you let a WYSIWYG do it?

A basic XHTML Transitional document has these basic parts

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
</head>

<body>

</body>
</html>

If you go to the link I provided earlier it will show you where to put your CSS

dench82 · #9 May 3rd, 2007, 15:06

Quote:

Originally Posted by karinne

Did you code this site? Or did you let a WYSIWYG do it?

A basic XHTML Transitional document has these basic parts

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">
 
<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
</head>
 
<body>
 
</body>
</html>

If you go to the link I provided earlier it will show you where to put your CSS

a what? a friend and i built it

and i still cant get it to work

dench82 · #10 May 3rd, 2007, 15:26

Quote:

Originally Posted by karinne

Did you code this site? Or did you let a WYSIWYG do it?

A basic XHTML Transitional document has these basic parts

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">
 
<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
</head>
 
<body>
 
</body>
</html>

If you go to the link I provided earlier it will show you where to put your CSS

I have to hand in a complete fully functional site tomorrow

im desperate please can u fix it??

karinne · #11 May 3rd, 2007, 15:31

I've given you all the information already ... all you need to do is READ! Go to the link I gave you earlier (Integrating CSS in your website) and read it! Your answer to implement the CSS is in there.

The members of this forum are not going to do your homework for you.

dench82 · #12 May 3rd, 2007, 17:17

Quote:

Originally Posted by karinne

I've given you all the information already ... all you need to do is READ! Go to the link I gave you earlier (Integrating CSS in your website) and read it! Your answer to implement the CSS is in there.

The members of this forum are not going to do your homework for you.

My homework as u so politely put is done (and by the way I go to a university not high school!) i'm just having a problem (which by the way - nothing on your page has resolved) and i need to fix ASAP!

I had hoped that someone who know's what theyr doing (because frankly i dont) could take five mintues to help me

karinne · #13 May 3rd, 2007, 17:24

Oh well ... you go to University! That changes everything!!!

Funny but when I go to the link I gave you to my site and the information in my second posts

Quote:

Originally Posted by karinne

The CSS you put either put in an external stylesheet or in the <head> of your document. See my article Integrating CSS in your website for examples.

And the <div> ... well ... where ever you want you scrollable text to appear.

I found this:

Quote:

External CSS

Last but not least, the external stylesheet is the way to go. Once you've settled on the styles you like for your site, create another page and put them all in there. The whole concept of Web Standards is to separate Markup from Presentation right? So ... separate your CSS from your HTML/XHTML.

Code: Select all

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="all" />

Then in your stylesheet.css you would have your styles

Code: Select all

h1 {

    font-size: 22px;

    color: #090;

}

Remember NOT to put the <style> ... </style> tags in the stylesheet.css page.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS for dummies.	mcdanielnc89	Web Page Design	13	Jan 15th, 2008 20:32
Scrollable text viewing area	WebMan76

		Webforumz.com > Main Forums > Program Your Website > Scripts and Online Services
Dreamweaver8 Scrollable text for Dummies