Dreamweaver Question RE "text area"

[munckee]

Hi everyone. I've built a small site for my portfolio and I'm having a little trouble with one aspect of it.

On my front page, I've inserted a "text area" in dreamweaver where I can put a list of text. The text is only editable on the control bar of the text area, rather than in the main page itself. I'd like to be able to add links, etc to that text area, but I can't seem to do so. Can anyone help me out on adding a link within a text area?

 

[Moria]

Hi everyone. I've built a small site for my portfolio and I'm having a little trouble with one aspect of it.

On my front page, I've inserted a "text area" in dreamweaver where I can put a list of text. The text is only editable on the control bar of the text area, rather than in the main page itself. I'd like to be able to add links, etc to that text area, but I can't seem to do so. Can anyone help me out on adding a link within a text area?

Those text areas are for when you're using forms. The box you type a reply into here is a text area. Just type where yo uwant the text to go.

 

[munckee]

Those text areas are for when you're using forms. The box you type a reply into here is a text area. Just type where yo uwant the text to go.

Yeah, but I want to maintain the scrolling capability of that box without having to scroll the whole page. Any way to do that?

 

[iMeowbot]

Instead of a textarea, you could use a div with a restricted height and auto overflow in the CSS. that should give you a lot more flexibility (and you can throw in <pre> stuff if you still want the form-like look).

<div style="border:thin dotted black; height:100px; overflow:auto">
<p>meow</p>
<p>meow</p>
<p>meow</p>
<p>meow</p>
<p>meow</p>
<p>meow</p>
</div>

(BTW, Dreamweaver may not show the scroll bar, so preview in a real browser)

 

[munckee]

Thanks, I'll have to give this a try. I have to admit though, I don't entirely understand it. What does "auto overflow in the CSS" mean? Will my scroll bar come up automatically once my text overflows the visible area, or do I have to enter certain code to allow the scroll bar?

As you can tell, coding isn't my forte. I use the design aspect of dreamweaver much more.

Instead of a textarea, you could use a div with a restricted height and auto overflow in the CSS. that should give you a lot more flexibility (and you can throw in <pre> stuff if you still want the form-like look).

<div style="border:thin dotted black; height:100px; overflow:auto">
<p>meow</p>
<p>meow</p>
<p>meow</p>
<p>meow</p>
<p>meow</p>
<p>meow</p>
</div>

(BTW, Dreamweaver may not show the scroll bar, so preview in a real browser)

 

[iMeowbot]

Thanks, I'll have to give this a try. I have to admit though, I don't entirely understand it. What does "auto overflow in the CSS" mean? Will my scroll bar come up automatically once my text overflows the visible area, or do I have to enter certain code to allow the scroll bar?

"auto" means that a scroll bar will automatically appear when there is too much text to fit inside the div. There is also a "scroll" option that can be used there, if for some reason you wanted the scroll bars to appear even when they aren't needed.

As you can tell, coding isn't my forte. I use the design aspect of dreamweaver much more.

Ain't that funny, the GUI half of Dreamweaver tends to mystify me. I mostly use it to check my work

 

[munckee]

"auto" means that a scroll bar will automatically appear when there is too much text to fit inside the div. There is also a "scroll" option that can be used there, if for some reason you wanted the scroll bars to appear even when they aren't needed.



Ain't that funny, the GUI half of Dreamweaver tends to mystify me. I mostly use it to check my work

Thanks. Is there somewhere obvious where I go to insert that, or should I just copy and paste your chunk of code into the html section (where I want it to show up)?

The design aspects of Dreamweaver leave a LOT to be desired, but I have no interest in taking the time to really learn how to properly code. My site is simple enough that it gets the job done. Eventually I may dive into flash, but we'll see.

 

[iMeowbot]

If the page is a one-off, you could just leave the "style=" thing there as I did, but that's often considered bad form (there are accessibility issues).

It's not worth doing a separate CSS file for just this much stuff, so let's go with the top of the page. You'll want to put this part somewhere between your <head> and </head> tags:

<style type="text/css">
div.scrolly {
    height:100px;
    overflow:auto;
    background-color:#660066;
    color:#FFFF00;
    padding:0.0em 1.0em 0.0em 1.0em;
}
</style>

I added basic color and padding so you don't have to go look them up (and made them ugly because I felt like it). The numbers in the padding are for the top, right, bottom, left respectively.

There is a handy dandy CSS cheat sheet here, see the menu on the left of the page.

----

So anyway, back down in the body, when you go to replace your textarea, it will be written as so to pick up the div.scrolly style:

<div class="scrolly">
blah blah blah blah
</div>

----

Is that enough to get you going?

[edit: oh yeah, look up margins in the cheat sheet if you didn't want this thing to span the whole page width.]

 

[munckee]

Is that enough to get you going?

We'll find out tonite when I get home to work on it. THanks for the help.

 

[munckee]

Awesome! Got it working. One more question though; is there some way to change the background color of just the defined area? For example, if my page is grey, can I make that box white?

 

[Butters]

Awesome! Got it working. One more question though; is there some way to change the background color of just the defined area? For example, if my page is grey, can I make that box white?

change:

background-color:#660066;

to:

background-color: white;

I think that's what you're looking for?

 

[munckee]

change:

background-color:#660066;

to:

background-color: white;

I think that's what you're looking for?

Thanks, I got it.