How To - HTML/CSS & NeoHome Help

Forum Options:	my.neoforum register members prefs search faq

Options:

remove

NeoPM

Topic: How To

Threads List « Next Newest Next Oldest »

FusionWeapons

Im Back...
Hooked on Neo

since: Jul 2007

Nov 01, 08 at 4:15pm

How To

How do you put two scroll bars beside each other.

-------------------
Currently Playing: Final Fantasy Tactics [Playstation 1]

quote

quick quote

edit

quick edit

del

posts in thread

report

Artificer

Renovatio
(moderator)

Archived Forum Bug Reports
Archived Site Bug Reports
Forum Bug Reports
NAMFox for Moderators
Neoseeker Automated Markup
Site Bug Reports
Web Coding

since: Jun 2002

Nov 01, 08 at 4:20pm

re: How To

While it's possible, it would help if you share what you want to do that requires multiple side-by-side scrollbars. I only ask because it's a bit unusual.

-------------------
100% of innovation—from business to politics—is inspired not by "market analysis" but by people who are supremely pissed off by the way things are.

Tom Peters

quote

quick quote

edit

quick edit

del

posts in thread

report

FusionWeapons

Im Back...
Hooked on Neo

since: Jul 2007

Nov 01, 08 at 4:23pm

re: How To

Well it is going to be a part of my About Me section. And my About Me section is going to have Sub Sections. Basically it is going to look similiar to Gray Shadows About me section.

-------------------
Currently Playing: Final Fantasy Tactics [Playstation 1]

quote

quick quote

edit

quick edit

del

posts in thread

report

Artificer

Renovatio
(moderator)

Archived Forum Bug Reports
Archived Site Bug Reports
Forum Bug Reports
NAMFox for Moderators
Neoseeker Automated Markup
Site Bug Reports
Web Coding

since: Jun 2002

Nov 01, 08 at 6:37pm

re: How To

OK, I see what you're saying. You want to have multiple scrollboxes next to each other, right?

The first step is to make a scrollbox itself, which you can do like this:

code

<div style="overflow: auto; height: 300px; width: 150px;">
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
</div>

The only thing special about this <div> element is that it has an explicit height and width, which determines how big the scrollbox area is, and a special attribute called "overflow" set to "auto", which tells the browser to put the content in a scrollbox if the content overflows the predefined area (150x300).

You can also achieve this using CSS to refactor your styling information:

code

<style type="text/css">
div.scrollbox {
    overflow: auto;
    height: 300px;
    width: 150px;
}
</style>
<div class="scrollbox">
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
</div>

Now that we have one scrollbox, we need to make multiple that exist side-by-side. To do that, we have two options: 1) use a table or 2) use divs to emulate the table layout. It's actually much easier to do the table here, especially if you want to center it.

code

<style type="text/css">
.center {
  margin: 0px auto;
}
div.scrollbox {
  overflow: auto;
  height: 300px;
  width: 150px;
}
</style>

<table class="center">
  <tr>
    <td>
      <div class="scrollbox">
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
      </div>
    </td>
    <td>
      <div class="scrollbox">
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
      </div>
    </td>
    <td>
      <div class="scrollbox">
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
      </div>
    </td>
  </tr>
</table>

Hope this helps.

[size=1][color=#666666]This message was edited by Artificer on Nov 02 2008.

-------------------
100% of innovation—from business to politics—is inspired not by "market analysis" but by people who are supremely pissed off by the way things are.

Tom Peters

quote

quick quote

edit

quick edit

del

posts in thread

report

FusionWeapons

Im Back...
Hooked on Neo

since: Jul 2007

Nov 02, 08 at 3:04pm

re: How To

Thanks I also found another way I can do it using Tables. But ill try your way.

Also I have one more question. I understand how to make a Navbar but I do not get how and where you put your information in it. I know this is a dumb question.

-------------------
Currently Playing: Final Fantasy Tactics [Playstation 1]

quote

quick quote

edit

quick edit

del

posts in thread

report

[All dates in (PT) time]

Threads List « Next Newest Next Oldest »