Text area help please

April 18th, 2009, 1:48 pm

Alright this is the HTML and CSS.

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

And this is the HTML

Code: [ Download ] [ 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"/>
15. <embed src = "" autostart = "true" loop = "false"
16. volume = "10%" height = "10" width = "50">
17.     
18. </div>
19.     </div>
20.     <div id="mainimg">
21.      <h3>Kipling Baptist Church</h3>
22.     
25. <h4><h4>
26.     
30. </div>
31.     <div id="links">
32.         <ul>
33.          <li><a href="index.html">Home</a></li>
34.          <li><a href="youth.html">Youth Group</a></li>
35.          <li><a href="sermon.html">Sermon</a></li>
36.          <li><a href="contactus.html">Contact Us</a></li>
37.          <li><a href="links.html">Links</a></li>
38.          <li><a href="updates.html">Updates</a></li>
39.         </ul>
40.     </div>
42. <div id="contentarea">
43.      <div id="leftbar">
44.         <h2>Updates!</h2>
45.         <p>
46.         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.
47.         </p>
48.         
49.         <br />
50.         
51.         <p>
52.         <ilayer name="scroll1"> <div id="scroll3" style="width:450; height:300; border:0px red solid; background-color:#; color:orange; overflow:auto";>
53.         </textarea></div>
55.         
58.         </p>
59.         <a href="#">more ></a><br />
60.         <br />
61.      </div>
62.     
65.         <div id="rightbar">
66.         <h2>Upcoming Events</h2>
67.         <p><span class="orangetext">Add The Date</span><br />
68.          Event Here
69.          <br />
70.          <br />
71.          <span class="orangetext">Add The Date</span><br />
72.          Event here
74.          <br />
75.          <br />
76.          <span class="orangetext">Add The Date</span><br />
77.          Event Here         
78.          </p>
79.      </div>
80.     </div>
81.     
83.      <div id="bottom">
84.      <div id="email"><a href="mailto:arcfault@live.ca">By: Brandon.O</a></div>
85.      <div id="validtext">
86.      </div>
87.     </div>
88. </div>
89. </div>
90. </body>
91. </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

April 19th, 2009, 12:45 pm

Code: [ Download ] [ Select ]

textarea { overflow:scroll;
}

1. textarea { overflow:scroll;
2. }

April 19th, 2009, 5:45 pm

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.

April 19th, 2009, 6:53 pm

Well, what you can do is use an inline stylesheet:

Code: [ Download ] [ 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.

April 20th, 2009, 3:29 pm

Will I have to edit my HTML at all?

April 21st, 2009, 9:52 am

Yes, insert that between the <head></head> tags in your HTML code.

April 21st, 2009, 2:55 pm

Alright, done but still does not work. I'll need to ID it or something right?

April 22nd, 2009, 3:48 am

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: [ Download ] [ 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: [ Download ] [ Select ]

<textarea name="scroll1" style="width:450; height:300; border:0px red solid; background-color:#; color:orange; overflow:scroll";></textarea>

April 22nd, 2009, 1:36 pm

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.

April 22nd, 2009, 2:40 pm

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: [ Download ] [ 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>

April 22nd, 2009, 2:52 pm

I am new. I wasn't sure what to use.

April 22nd, 2009, 2:59 pm

No problem, let me know if it works.

[Bogey]

April 22nd, 2009, 3:27 pm

Code: [ Download ] [ 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...

April 22nd, 2009, 4:09 pm

Yeah thanks!

This is Resolved! Thank you everyone who looked at it and replied.

April 22nd, 2009, 7:26 pm

Bogey wrote:

Code: [ Download ] [ Select ]

<textarea rows="15" cols="55" READONLY></textarea>

XHTML:

Code: [ Download ] [ 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. >_<