Admin Admin
Posts : 44 Points : 129 Reputation : 0 Join date : 2011-05-16 Age : 33 Location : Philppines
| Subject: Horizontal Scroll Tue May 31, 2011 11:30 am | |
| This page contains code for a horizontal scroll. This enables you to create a scroll box with a horizontal scroll (but not the vertical scroll). If you need to create a scroll box with horizontal and vertical scrolling, check out this HTML scrollbox code. Basic Horizontal Scroll BoxTo make a scroll box with a horizontal scroll, you need to use overflow-x:scroll;. This basically tells your browser to create scroll bars on the x (horizontal) axis, whenever the contents of the container is too wide. Here, we make our content too wide by setting it's width to 250 percent - that's 250 percent of its parent container (the div). To prevent vertical scroll bars from appearing, you need to use overflow-y:hidden;. HTML code: - Code:
-
<!-- HTML Codes by Quackit.com --> <div style="border:1px solid black;width:200px;height:100px;overflow-y:hidden;overflow-x:scroll;"> <p style="width:250%;"> By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow. </p> </div> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/horizontal_scroll.cfm">Horizontal scroll</a></p>
live preview : http://junilstyle.ucoz.net/junilstyle12/6.html |
|