Web Analytics Made Easy -
StatCounter Scroll Box in Container - CodingForum

Announcement

Collapse
No announcement yet.

Scroll Box in Container

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Scroll Box in Container

    http://www.angelfire.com/wv/TheScorpionLair/index.html

    That's the front page, which is fine, but what I need is a scrolling box in the container that is smaller than the BG just slightly so that I can post my news, trip diaries, images, etc. in that, and have the scroll bar inside the container and thus appear inside the BG boarder. How? I've tried a few things, but i dont' seem to know what i'm doing (again).

    And can I make the box BG 'transparent' so that it just shows the already there BG?

  • #2
    Your problem isn't quite clear, but I'm guessing that you just want a box with a scroll-bar. The below code does that. The default value of the background-color property is transparent, so you shouldn't have to modify anything to get the background behind it to show through.
    Code:
    [font="sans-serif"][b]CSS:[/b][/font]
    div {
      height: 100px;
      overflow: auto;
      }
    
    [font="sans-serif"][b]HTML:[/b][/font]
    <div>
      <!-- content taller than 100 pixels -->
    </div>
    By the way, your page has two doctype declarations and duplicate html, head, and title tags. Looks like a pasting error.
    Last edited by Arbitrator; Oct 14, 2006, 11:52 PM.

    Comment


    • #3
      Thanks, I believe that is exactly what I needed!

      And, yeah, I just noticed the duplicate tags. I did that the other day during copy/pasting, thought I had fixed it all.

      Comment


      • #4
        Okay, that is kind of what I needed, but I only want it to scroll in the 'content' div, since if I just put the

        Code:
        CSS:
        div {
          height: 100px;
          overflow: auto;
          }
        in, It screws with the ads and such. Is there a way to only have one <div> be the one that scrolls?

        Comment


        • #5
          did you put it all inside these tags? <style type="text/css"></style>

          or you could do inline css...

          <div style=" height: 100px; overflow: auto;"></div> i dont have a problem with it, but Some People (cough* Arbitrator *cough*) say this is incorrect and makes stuff hard to read

          Comment


          • #6
            Originally posted by ClintBeavers View Post
            Okay, that is kind of what I needed, but I only want it to scroll in the 'content' div, since if I just put the in, It screws with the ads and such. Is there a way to only have one <div> be the one that scrolls?
            What was given was just an example. Break the habit of copying and pasting. You need to use and id or a class on the div that you want to scroll. It effects everything else because its applied to all divs. Go read some CSS tutorials so you actually understand what we give you.
            ||||If you are getting paid to do a job, don't ask for help on it!||||

            Comment


            • #7
              and what is wrong with
              overflow: scroll; ?

              it doesnt display correctly in firefox, but it also doesn't display correctly in ie.

              help me now lol.

              Comment


              • #8
                Scroll should make two scrollbars both horizontal and vertical. They will be greyed out if not in use.
                ||||If you are getting paid to do a job, don't ask for help on it!||||

                Comment


                • #9
                  Go read some CSS tutorials so you actually understand what we give you.
                  I read a tutorial before I came here, but thanks. I didn't just copy and paste, btw. I went in and edited it in in a way that I thought would work. I tried 'and [sic] ID or Class', but I still had problems with the ads and that was why I came back here to ask for more.

                  What I got from the W3C tutorial didn't seem to help me, and just as an FYI, not everyone can just read something, even being given examples, and still get it right the first time. Some of us need to be shown in a different way, so try and remember that the next time you tell someone to 'go and read a tutorial'.

                  Comment


                  • #10
                    you could use the example i posted a second ago...but, could you post your code so i can see what the problem is?

                    Comment


                    • #11
                      I'm actually working with your example right at the moment . We'll see how it goes.

                      Comment


                      • #12
                        ok, if it doesn't work then i guess post the code and we can figure it out. and btw what is your website about?

                        and did someone report my post above about arbitator? lol i was just joking...
                        Last edited by <?austin ?>; Oct 15, 2006, 03:14 PM.

                        Comment


                        • #13
                          If you want any div to scroll vertically, you have to fix the height of the div and the content would have to exceed the height. Then, for example:
                          CSS
                          Code:
                          div#content {margin-left: 80px; margin-top: 100px, width: 400px; height: 550px; overflow: auto;}
                          html
                          Code:
                          <div id="content">
                          Here is where the content comes
                          </div>
                          will make a vertical scoll-bar on the right appear if the content of the content div is longer than 550px. Adjust size as you require.

                          Comment


                          • #14
                            cool, i tried it and that works. thanks

                            Comment

                            Working...
                            X