Text area help please

  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Alright this is the HTML and CSS.

Code: [ Select ]
html, body {
    margin: 0px;
    padding:0px;
    background-image:url(bg.gif);
}

h1, h2, h3, h4, h5, h6, p, form {
    margin: 0px;
    padding:0px;
}

#wrapper {
    width:800px;
    margin:0px auto;
    background-color:#FFFFCC;
}

#content {
    width:778px;
    margin:0px auto;
    background-image:url(bg_header_top.gif);
    background-repeat:repeat-x;
    background-position:top;
}

#header {
    height:96px;
}

#logo {
    width:258px;
    float:left;
}

#logo h1{
    font-family:"Trebuchet MS";
    font-size:26px;
    color:#F76B0C;
    font-weight:normal;
    text-decoration:none;
    padding-left:40px;
    padding-top:30px;
}

#logo h4 {
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#808080;
    font-weight:normal;
    text-decoration:none;
    padding-left:75px;
}

#links ul {
    margin:0px; 
}

#links li{
    float:left;
    list-style-type:none;
    width:128px;
    height:25px;
    text-align:center;
    background-color:#F4A80A;
    border-left:1px solid #FFF;
    border-top:1px solid #FFF;
    padding-top:4px;
}

#links a{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
}

#links a:hover{
    font-family:"Trebuchet MS";
    font-size:13px;
    color:#fff;
    font-weight:normal;
    text-decoration:underline;
}

#mainimg {
    background-image:url(main_img.jpg);
    background-repeat:no-repeat;
    height:132px;
    text-align:right;
}

#mainimg h3 {
    font-family:"Trebuchet MS";
    font-size:40px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
    padding:20px 40px 0px 0px;
}

#mainimg h4 {
    font-family:"Trebuchet MS";
    font-size:12px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
    padding:0px 40px 0px 0px;
}

#contentarea {
    clear:both;
    padding:25px 0px;
}

#leftbar {
    float:left;
    width:539px;
    border-right:1px solid #BCBDBC;
}

#leftbar h2{
    font-family:"Trebuchet MS";
    font-size:26px;
    color:#EE8907;
    font-weight:normal;
    text-decoration:none;
    padding-left:40px;
    padding-bottom:5px;
}

#leftbar p{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#797B7A;
    font-weight:normal;
    text-decoration:none;
    padding:0px 40px;
}

#leftbar a {
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#EE8907;
    font-weight:bold;
    text-decoration:none;
    padding:0px 40px;
}

#leftbar a:hover {
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#000;
    font-weight:bold;
    text-decoration:none;
    padding:0px 40px;
}

#rightbar {
    float:left;
    width:237px;
}

#rightbar h2{
    font-family:"Trebuchet MS";
    font-size:26px;
    color:#797B7A;
    font-weight:normal;
    text-decoration:none;
    padding-left:25px;
    padding-bottom:5px;
}

#rightbar p{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#797B7A;
    font-weight:normal;
    text-decoration:none;
    padding:0px 25px;
}

.orangetext {
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#EE8907;
    font-weight:bold;
    text-decoration:none;
}

#bottom {
    clear:both;
    height:32px;
    padding-top:25px;
}

#email {
    float:left;
    width:500px;
    background-color:#9BBE00;
    height:27px;
    padding-top:5px;
}

#email a{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:underline;
    padding:0px 40px;
}

#email a:hover{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
    padding:0px 40px;
    
}

#validtext {
    float:left;
    width:278px;
    background-color:#9BBE00;
    height:27px;
    padding-top:5px;
}

#validtext p{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
    text-align:right;
    padding-right:35px;
}

#validtext a{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:underline;
}

#validtext a:hover{
    font-family:"Trebuchet MS";
    font-size:11px;
    color:#fff;
    font-weight:normal;
    text-decoration:none;
}
  1. html, body {
  2.     margin: 0px;
  3.     padding:0px;
  4.     background-image:url(bg.gif);
  5. }
  6. h1, h2, h3, h4, h5, h6, p, form {
  7.     margin: 0px;
  8.     padding:0px;
  9. }
  10. #wrapper {
  11.     width:800px;
  12.     margin:0px auto;
  13.     background-color:#FFFFCC;
  14. }
  15. #content {
  16.     width:778px;
  17.     margin:0px auto;
  18.     background-image:url(bg_header_top.gif);
  19.     background-repeat:repeat-x;
  20.     background-position:top;
  21. }
  22. #header {
  23.     height:96px;
  24. }
  25. #logo {
  26.     width:258px;
  27.     float:left;
  28. }
  29. #logo h1{
  30.     font-family:"Trebuchet MS";
  31.     font-size:26px;
  32.     color:#F76B0C;
  33.     font-weight:normal;
  34.     text-decoration:none;
  35.     padding-left:40px;
  36.     padding-top:30px;
  37. }
  38. #logo h4 {
  39.     font-family:"Trebuchet MS";
  40.     font-size:11px;
  41.     color:#808080;
  42.     font-weight:normal;
  43.     text-decoration:none;
  44.     padding-left:75px;
  45. }
  46. #links ul {
  47.     margin:0px; 
  48. }
  49. #links li{
  50.     float:left;
  51.     list-style-type:none;
  52.     width:128px;
  53.     height:25px;
  54.     text-align:center;
  55.     background-color:#F4A80A;
  56.     border-left:1px solid #FFF;
  57.     border-top:1px solid #FFF;
  58.     padding-top:4px;
  59. }
  60. #links a{
  61.     font-family:"Trebuchet MS";
  62.     font-size:11px;
  63.     color:#fff;
  64.     font-weight:normal;
  65.     text-decoration:none;
  66. }
  67. #links a:hover{
  68.     font-family:"Trebuchet MS";
  69.     font-size:13px;
  70.     color:#fff;
  71.     font-weight:normal;
  72.     text-decoration:underline;
  73. }
  74. #mainimg {
  75.     background-image:url(main_img.jpg);
  76.     background-repeat:no-repeat;
  77.     height:132px;
  78.     text-align:right;
  79. }
  80. #mainimg h3 {
  81.     font-family:"Trebuchet MS";
  82.     font-size:40px;
  83.     color:#fff;
  84.     font-weight:normal;
  85.     text-decoration:none;
  86.     padding:20px 40px 0px 0px;
  87. }
  88. #mainimg h4 {
  89.     font-family:"Trebuchet MS";
  90.     font-size:12px;
  91.     color:#fff;
  92.     font-weight:normal;
  93.     text-decoration:none;
  94.     padding:0px 40px 0px 0px;
  95. }
  96. #contentarea {
  97.     clear:both;
  98.     padding:25px 0px;
  99. }
  100. #leftbar {
  101.     float:left;
  102.     width:539px;
  103.     border-right:1px solid #BCBDBC;
  104. }
  105. #leftbar h2{
  106.     font-family:"Trebuchet MS";
  107.     font-size:26px;
  108.     color:#EE8907;
  109.     font-weight:normal;
  110.     text-decoration:none;
  111.     padding-left:40px;
  112.     padding-bottom:5px;
  113. }
  114. #leftbar p{
  115.     font-family:"Trebuchet MS";
  116.     font-size:11px;
  117.     color:#797B7A;
  118.     font-weight:normal;
  119.     text-decoration:none;
  120.     padding:0px 40px;
  121. }
  122. #leftbar a {
  123.     font-family:"Trebuchet MS";
  124.     font-size:11px;
  125.     color:#EE8907;
  126.     font-weight:bold;
  127.     text-decoration:none;
  128.     padding:0px 40px;
  129. }
  130. #leftbar a:hover {
  131.     font-family:"Trebuchet MS";
  132.     font-size:11px;
  133.     color:#000;
  134.     font-weight:bold;
  135.     text-decoration:none;
  136.     padding:0px 40px;
  137. }
  138. #rightbar {
  139.     float:left;
  140.     width:237px;
  141. }
  142. #rightbar h2{
  143.     font-family:"Trebuchet MS";
  144.     font-size:26px;
  145.     color:#797B7A;
  146.     font-weight:normal;
  147.     text-decoration:none;
  148.     padding-left:25px;
  149.     padding-bottom:5px;
  150. }
  151. #rightbar p{
  152.     font-family:"Trebuchet MS";
  153.     font-size:11px;
  154.     color:#797B7A;
  155.     font-weight:normal;
  156.     text-decoration:none;
  157.     padding:0px 25px;
  158. }
  159. .orangetext {
  160.     font-family:"Trebuchet MS";
  161.     font-size:11px;
  162.     color:#EE8907;
  163.     font-weight:bold;
  164.     text-decoration:none;
  165. }
  166. #bottom {
  167.     clear:both;
  168.     height:32px;
  169.     padding-top:25px;
  170. }
  171. #email {
  172.     float:left;
  173.     width:500px;
  174.     background-color:#9BBE00;
  175.     height:27px;
  176.     padding-top:5px;
  177. }
  178. #email a{
  179.     font-family:"Trebuchet MS";
  180.     font-size:11px;
  181.     color:#fff;
  182.     font-weight:normal;
  183.     text-decoration:underline;
  184.     padding:0px 40px;
  185. }
  186. #email a:hover{
  187.     font-family:"Trebuchet MS";
  188.     font-size:11px;
  189.     color:#fff;
  190.     font-weight:normal;
  191.     text-decoration:none;
  192.     padding:0px 40px;
  193.     
  194. }
  195. #validtext {
  196.     float:left;
  197.     width:278px;
  198.     background-color:#9BBE00;
  199.     height:27px;
  200.     padding-top:5px;
  201. }
  202. #validtext p{
  203.     font-family:"Trebuchet MS";
  204.     font-size:11px;
  205.     color:#fff;
  206.     font-weight:normal;
  207.     text-decoration:none;
  208.     text-align:right;
  209.     padding-right:35px;
  210. }
  211. #validtext a{
  212.     font-family:"Trebuchet MS";
  213.     font-size:11px;
  214.     color:#fff;
  215.     font-weight:normal;
  216.     text-decoration:underline;
  217. }
  218. #validtext a:hover{
  219.     font-family:"Trebuchet MS";
  220.     font-size:11px;
  221.     color:#fff;
  222.     font-weight:normal;
  223.     text-decoration:none;
  224. }



And this is the HTML

Code: [ Select ]
<!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>Kipling Baptist Church</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="content">
    <div id="header">
     <div id="logo">
    <img src="kiplingchurchpic2.jpg" alt="Church Picture" height="100px" width="300px"/>

<embed src = "" autostart = "true" loop = "false"
volume = "10%" height = "10" width = "50">
    
</div>
    </div>
    <div id="mainimg">
     <h3>Kipling Baptist Church</h3>
    


<h4><h4>
    



</div>
    <div id="links">
        <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="youth.html">Youth Group</a></li>
         <li><a href="sermon.html">Sermon</a></li>
         <li><a href="contactus.html">Contact Us</a></li>
         <li><a href="links.html">Links</a></li>
         <li><a href="updates.html">Updates</a></li>
        </ul>
    </div>

<div id="contentarea">
     <div id="leftbar">
        <h2>Updates!</h2>
        <p>
        Atlast! My updates! Here you can keep track of what is happening with the site. Anything I add or do, wether it is behind the scenes and not noticable or something big like adding a page. It will be posted here.
        </p>
        
        <br />
        
        <p>
        <ilayer name="scroll1"> <div id="scroll3" style="width:450; height:300; border:0px red solid; background-color:#; color:orange; overflow:auto";>
        </textarea></div>

        


        </p>
        <a href="#">more ></a><br />
        <br />
     </div>
    


        <div id="rightbar">
        <h2>Upcoming Events</h2>
        <p><span class="orangetext">Add The Date</span><br />
         Event Here
         <br />
         <br />
         <span class="orangetext">Add The Date</span><br />
         Event here

         <br />
         <br />
         <span class="orangetext">Add The Date</span><br />
         Event Here         
         </p>
     </div>
    </div>
    

     <div id="bottom">
     <div id="email"><a href="mailto:arcfault@live.ca">By: Brandon.O</a></div>
     <div id="validtext">
     </div>
    </div>
</div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Kipling Baptist Church</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="wrapper">
  10. <div id="content">
  11.     <div id="header">
  12.      <div id="logo">
  13.     <img src="kiplingchurchpic2.jpg" alt="Church Picture" height="100px" width="300px"/>
  14. <embed src = "" autostart = "true" loop = "false"
  15. volume = "10%" height = "10" width = "50">
  16.     
  17. </div>
  18.     </div>
  19.     <div id="mainimg">
  20.      <h3>Kipling Baptist Church</h3>
  21.     
  22. <h4><h4>
  23.     
  24. </div>
  25.     <div id="links">
  26.         <ul>
  27.          <li><a href="index.html">Home</a></li>
  28.          <li><a href="youth.html">Youth Group</a></li>
  29.          <li><a href="sermon.html">Sermon</a></li>
  30.          <li><a href="contactus.html">Contact Us</a></li>
  31.          <li><a href="links.html">Links</a></li>
  32.          <li><a href="updates.html">Updates</a></li>
  33.         </ul>
  34.     </div>
  35. <div id="contentarea">
  36.      <div id="leftbar">
  37.         <h2>Updates!</h2>
  38.         <p>
  39.         Atlast! My updates! Here you can keep track of what is happening with the site. Anything I add or do, wether it is behind the scenes and not noticable or something big like adding a page. It will be posted here.
  40.         </p>
  41.         
  42.         <br />
  43.         
  44.         <p>
  45.         <ilayer name="scroll1"> <div id="scroll3" style="width:450; height:300; border:0px red solid; background-color:#; color:orange; overflow:auto";>
  46.         </textarea></div>
  47.         
  48.         </p>
  49.         <a href="#">more ></a><br />
  50.         <br />
  51.      </div>
  52.     
  53.         <div id="rightbar">
  54.         <h2>Upcoming Events</h2>
  55.         <p><span class="orangetext">Add The Date</span><br />
  56.          Event Here
  57.          <br />
  58.          <br />
  59.          <span class="orangetext">Add The Date</span><br />
  60.          Event here
  61.          <br />
  62.          <br />
  63.          <span class="orangetext">Add The Date</span><br />
  64.          Event Here         
  65.          </p>
  66.      </div>
  67.     </div>
  68.     
  69.      <div id="bottom">
  70.      <div id="email"><a href="mailto:arcfault@live.ca">By: Brandon.O</a></div>
  71.      <div id="validtext">
  72.      </div>
  73.     </div>
  74. </div>
  75. </div>
  76. </body>
  77. </html>


Now there is the one CSS page that controls 6 other pages as well but this is the only one I'm having toruble with. I am trying to make a scrolling text area for the updates. I don't want the page to expand past a certain point but I don't want to remove any updates. I want people to be able to go back and always see them.

Also, I want it to fit the parameters and text sieze of the text above it. I've been working on this one for about 3 hours now and can't seem to figure it out. I've also searched google.

So, I don't like to bother people here with simple things like this but I have no choice. Sorry. :/

Thanks,

Brandon
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

Code: [ Select ]
textarea { overflow:scroll;
}
  1. textarea { overflow:scroll;
  2. }
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

After I do that how do I ID it and stuff? I don't want to screw up any other pages. It's all on one CSS.
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

Well, what you can do is use an inline stylesheet:
Code: [ Select ]
<style type="text/css">
textarea { overflow:scroll;
}
</style>
  1. <style type="text/css">
  2. textarea { overflow:scroll;
  3. }
  4. </style>

And put that just on that one page. And what that will do is make all <textarea>'s use scrollbars if the content is bigger than the specified height/width.
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Will I have to edit my HTML at all?
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

Yes, insert that between the <head></head> tags in your HTML code.
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Alright, done but still does not work. I'll need to ID it or something right?
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

I just saw an error with your HTML. You're using an <ilayer> as an element start and </textarea> as the element end.

Replace
Code: [ Select ]
<ilayer name="scroll1"> <div id="scroll3" style="width:450; height:300; border:0px red solid; background-color:#; color:orange; overflow:auto";></textarea>


With
Code: [ Select ]
<textarea name="scroll1" style="width:450; height:300; border:0px red solid; background-color:#; color:orange; overflow:scroll";></textarea>
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Hmm, the resize isn't working. I have it set to 450 and 300. But it's showing like 20 and 80 Also, I don't want to be able to write in it. But for some reason the people visiting the site and erase what is in the box. It resets next time they visit.

Also, It does not allow html use in it.
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

If you don't want your users to be able to edit it, then why are you using a text box? Here's a <div> that does what you want...

Code: [ Select ]
<div style="width:450px;height:300px;border:0;background-color:#000;color:#ff6600;overflow:scroll;">
TEXT/HTML/WHATEVER HERE
</div>
  1. <div style="width:450px;height:300px;border:0;background-color:#000;color:#ff6600;overflow:scroll;">
  2. TEXT/HTML/WHATEVER HERE
  3. </div>
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

I am new. I wasn't sure what to use.
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

No problem, let me know if it works. :)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Code: [ Select ]
<textarea rows="15" cols="55" READONLY></textarea>

That would give you a sized, readonly textarea with a scroll bar when the content gets too big.

But if it is going to be used for regular content, I recommend you use a DIV with an overflow set to scroll like jammer2552 said...

Maybe I'm totally misunderstanding what you want... this is what I got from this post...
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Yeah thanks!

This is Resolved! Thank you everyone who looked at it and replied.
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

Bogey wrote:
Code: [ Select ]
<textarea rows="15" cols="55" READONLY></textarea>


XHTML:
Code: [ Select ]
<textarea rows="15" cols="55" readonly="readonly"></textarea>


:) And np man. The world of web design is fun. Just wait until you start worrying about cross-browser compatibility issues. >_<
  • WTF-AComputer
  • Student
  • Student
  • WTF-AComputer
  • Posts: 97
  • Loc: Canada

Post 3+ Months Ago

Heh, don't hurt my brain!
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

jammer2552 wrote:
Bogey wrote:
Code: [ Select ]
<textarea rows="15" cols="55" READONLY></textarea>


XHTML:
Code: [ Select ]
<textarea rows="15" cols="55" readonly="readonly"></textarea>

That was my quick write up of the code that I knew he wasn't going to use, so I didn't worry about Web Validity... but thanks for fixing that though.
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

Yea I know, I just don't want him coding in a deprecated manner. I hate the local web design classes that are still teaching HTML 4.01.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

jammer2552 wrote:
I hate the local web design classes that are still teaching HTML 4.01.

There are classes who teach that? They must be cheap.

Post Information

  • Total Posts in this topic: 19 posts
  • Users browsing this forum: No registered users and 40 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.