Dreamweaver Question RE "text area"

Discussion in 'Web Design and Development' started by munckee, Aug 27, 2006.

  1. munckee macrumors 65816

    Joined:
    Oct 27, 2005
    #1
    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?
     
  2. Moria macrumors regular

    Joined:
    May 7, 2005
    Location:
    Glasgow, Scotland
    #2

    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.
     
  3. munckee thread starter macrumors 65816

    Joined:
    Oct 27, 2005
    #3
    Yeah, but I want to maintain the scrolling capability of that box without having to scroll the whole page. Any way to do that?
     
  4. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #4
    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).

    Code:
    <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)
     
  5. munckee thread starter macrumors 65816

    Joined:
    Oct 27, 2005
    #5
    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.

     
  6. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #6
    "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 :D
     
  7. munckee thread starter macrumors 65816

    Joined:
    Oct 27, 2005
    #7

    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.
     
  8. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #8
    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:

    Code:
    <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:

    Code:
    <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.]
     
  9. munckee thread starter macrumors 65816

    Joined:
    Oct 27, 2005
    #9
    We'll find out tonite when I get home to work on it. THanks for the help.:)
     
  10. munckee thread starter macrumors 65816

    Joined:
    Oct 27, 2005
    #10
    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?
     
  11. Butters macrumors 6502

    Joined:
    Jan 7, 2006
    Location:
    UK
    #11
    change:
    Code:
    background-color:#660066;
    to:
    Code:
    background-color: white;
    I think that's what you're looking for?
     
  12. munckee thread starter macrumors 65816

    Joined:
    Oct 27, 2005
    #12

    Thanks, I got it.
     

Share This Page