to display the scroll bar with a limited display area

It – Hardware & Software | Marquis Orgovan | 2 views

Making the monopolized area narrow, it makes many items of information indicate

Seeing is believing.First, the following sample viewing.

All About new arrival article information

At pictures 1 various star levels (ranking) indication (2009/12/21)
The method of drawing up the QR cord/code with Google Chart API (2009/10/23)
Regardless of the number of letters, each line width in the chart is made equal (2009/10/5)
The pie chart the method (2009/9/25) of making indicate in simply on the web
The guide page is indicated in simultaneously with download (2009/8/29)
Foundation (2009/6/4) of one 1st compilation method of making the portable sight

Link of this sample is link to the article which exists inside All About.If there is an interest, please try looking.

The scroll bar appearing in the right hand edge of the territory where it is surrounded on the dotted line now the shank. The scroll this by the fact that it does, the information which follows under it can peruse.
In the narrow space, you can understand that many items of information are stuffed, probably will be.

Convenience to indication and the like of renewal past record

The people who publish renewal past record to the home page probably are many thing. since history is useful for updating repeater, i want to place a convenient place to view and access at the top of the. dakaratoitte, i do not want to take a wide space is to only update history.

in such a case, display style, such as the sample above is useful.
with this style, without having to own a very large area, you can post a lot of information.

comparison with the method commonly used

as a method commonly used in such a case,

use a text box
use an inline frame

there is a hand that, there are significant disadvantages both.

the text box’s, can not or decoration or to link

text box on the form (textareaelement) also use the, you can cram a lot of information into narrow spaces. but, it will be included in the text in the text box (character) just because, it may not be possible to link the character, it may not be possible to individually decorated, there are disadvantages such as not being able to adjust the line spacing.

inline frames with the, you can create links to freely decoration. but, for display in an inline frameHTMLorder must be created a separate file, has the disadvantage that troublesome work.
and inline frames, create a frame in the middle of the page, other page (HTMLfile) is the ability to read. iframeyou can create by using the element.

there, as shown in the sample at the beginning, it is recommended is to use a style sheet. in this way, while a narrow footprint, such as text box, characters or decoration, link to or to, you can cram a lot of information.

add scroll bars to a narrow area

so, to limit the area of the display area, let we introduce a way to be able to browse to scroll through the overflowing part.

how to add scroll bars to a narrow area! >>

add scroll bars to a narrow area

as shown in the sample on the previous page, to limit the area of the display area, part is overflowing, try to make can be viewed by scrolling.

to limit the display area, heightuse the property. to get a scroll bar to overflowing portion is, overflow (overflow) use the property.
to limit the length of the horizontal direction, widthuse the property.

height and overflow take advantage of the properties

sample at the beginning of the, can be achieved in the following source.
first, it may be listed in the following style sheet.

here, pelement (paragraph) to infobox create a class called, we will apply a style to it.
so, to use this style, as followsHTMLto describe the.

<p class=” infobox “>
long sentences
: :
long sentences
</p>

in this, appears as follows:.

long sentences(1line)
long sentences(2line)
long sentences(3line)
long sentences(4line)
long sentences(5line)
long sentences(6line)
long sentences(7line)
long sentences(8line)
long sentences(9line)

of the style sheet height the values in the properties 5em because you specified, the height of the display area 5one character limited to has been. and, overflowthe value of the property scroll because you specified, has become visible in that part of overflowing to scroll.
the height5one character (5em) even after the5i do not see the line is less than, and line spacing that is free, also includes the minutes from the occupation of the scroll bar.

here is further, borderborder with the property (thickness in the red1dotted line of the pixel) stood out. for greater clarity range, you may wish to add color or background, such as put a border is a good.

to remove the horizontal scroll bar?

in the above example, in addition to the vertical scroll bar, you can also see a horizontal scrollbar. at the beginning, in the sample, horizontal scroll bar was not out in only a vertical scroll bar. the horizontal scroll bar, it looks better not to smart.

how do i get rid of the horizontal scroll bar, let the next page will introduce.

to display only the vertical scroll bar? >>

without an horizontal scroll bar, before of how to display only a vertical scroll bar, overflowyou have to introduce information about the properties.

overflowproperty

overflowproperty, portion overflowing from the specified range, what should be displayed? is a property that specifies the. the value, following4you can specify any one of the.

auto : leave it to the browser
scroll : scrolling
visible: show all
hidden : (part overflows) do not show

the value auto it will leave a decision up to the browser that you specify, in a typical browser, only the vertical scroll bar to display the.

(Internet Explorer 6.0, Firefox 1.0.6, Netscape Navigator 7.1, Opera 8.5 in any, the value scroll if you specify a horizontal and vertical scroll bar is displayed, auto if you specify only the vertical scroll bar is displayed. )

overflowdisplay case by the value of the property and the source

overflowthe value of the property auto this is an example of specifying the.

All About new articles

image1like a starstar level(rank)display (2009/12/21)
Google Chart APIinQRhow to create a code (2009/10/23)
regardless of the number of characters, to equalize the width of each column of the table (2009/10/5)
how to easily display a pie chart on the web (2009/9/25)
to view the information page at the same time as the download (2009/8/29)
how to make mobile site of1time the basics of how to create (2009/6/4)

link in this sample, All Abouthere are some links to articles that actually exist in the. if you are interested, please take a look.

the source of the style sheet is as follows:.

overflowthe value of the property scroll this is an example of specifying the.

All About new articles

image1like a starstar level(rank)display (2009/12/21)
Google Chart APIinQRhow to create a code (2009/10/23)
regardless of the number of characters, to equalize the width of each column of the table (2009/10/5)
how to easily display a pie chart on the web (2009/9/25)
to view the information page at the same time as the download (2009/8/29)
how to make mobile site of1time the basics of how to create (2009/6/4)

link in this sample, All Abouthere are some links to articles that actually exist in the. if you are interested, please take a look.

the source of the style sheet is as follows:.

conclusion

this time, using style sheets, to limit the display area, we show you how to be able to read to scroll through the overflowing part.
please use the information for example, if you want to cram in a small space.

link mass is search engine spam in a narrow region
to link the entire line, including the margin!
you want to give color to the scroll bar!
to increase the line spacing?

Incoming search terms:

css p infobox long text (1)