|
CSS - Scrollable Element Without Scrollbar
Hello all,
I'm designing an element on the page that will be masked (i.e., overflow:hidden). I want it to scroll vertically (if done with the scroll wheel or trackpad) but not display a scrollbar. Any ideas? Any help at all would be greatly appreciated. Thanks so much Similar TutorialsHi there, I have set up some scollbar colours for IE. I have some scrollable divs that are using the css, but the main scrollbar to the right of the browser does not have the css applied to it. This is my css: PHP Code: scrollbar-arrow-color: #ffffff; scrollbar-3dlight-color: #d4e5ab; scrollbar-darkshadow-color: #517107; scrollbar-face-color: #719e07; scrollbar-highlight-color: #add450; Any ideas why that is? My ultimate goal: I have some content contained in a scrolling div (overflow:auto). If I hover over one of the links contained within this scrolling div, I would like to get a Netflix-style popup to come up. I want it to overlap over top of the scrolling div. My current attempts have resulted only in the popup content opening within the scrolling div, and making the scrollable region larger. This is not very good as if the user attempts to scroll too see the content they are no longer hovering over the link and the content disappears. Thus, I want the popup to happen outside of the confines of the scrolling div. My test: I have created a test to get down to the basics. In example 1, the blue div overlaps the green one. The green div remains 400px but the blue div overlaps it extends beyond it to 800px. In example 2, I add overflow:auto to the outer (green) div. In this scenario, the outer green div gets enlarged to 800px, only 400 of which is visible, and the rest hidden in the scrollable area. The inner blue div does not overlap the scrollable region so that the full 800px is visible. What I would like to see is for the green div to stay at 400px but have the blue div cover up the scroll bar and overlap the confines of the scrollable region. Is this at all possible? Any help is appreciated. I don't necessarily have to use divs.. anything I can use to get the job done would be great. Example 1: <html><body> <div style="background:green;height:200px;width:400px;z-index:0;position:absolute;"> <div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div> </div> </body></html> Example 2: <html><body> <div style="background:green;height:200px;width:400px;z-index:0;position:absolute;overflow:auto;"> <div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div> </div> </body></html> I need two scrollable div inside a table. Please help. Details: The div contains a table that should force it to show the scrollbars. This table inside the div has specific width(1180px). The div on the other hand should have its width set to 100%. As to why i'm using a table for the layout, i'm using a masterpage that uses table. Attempt #1 i set the div width to 1180px. This showed the scrollbar. But i don't want the users to be stuck to this if they have bigger resolution. Attempt #2 i added position: absolute; --> there are scrollbars but the 2 divs are overlapping HTML: Code:
<html>
<head>
<style>
.container
{
border: 2px solid red;
overflow: scroll;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<td>
<div class=container>
<table border style="width: 1800px;">
<tr>
<tr>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
</tr>
</table>
</div>
<div class=container>
<table border style="width: 1800px;">
<tr>
<tr>
<td width=200> aaaa</td>
<td width=200> bbbb </td>
<td width=200> cccc</td>
<td width=200> ddd</td>
<td width=200> eee</td>
<td width=200> fff</td>
<td width=200> ggg</td>
<td width=200> hhh</td>
<td width=200> iii</td>
<td width=200> jjj</td>
<td width=200> kkk</td>
<td width=200> lll</td>
<td width=200> mmm</td>
<td width=200> nn</td>
<td width=200> ppp</td>
</tr>
</table>
</div>
</td>
</tr></table>
</body>
</html>
I'm creating an area that will have code snippets in it, I want it to scroll horizontally (wrapping may make the code inaccurate in some languages), but vertically I want the height of the area to grow dynamically. An example can be seen on this page: http://scratchprojects.com/2006/02/sample_article_tic_tac_toe_p02.php The problem is, in IE, if there is a horizontal scroll bar, it doesn't make quite enough room, so you have to scroll vertically as well. Shrink your browser window so the code snippet at the bottom of the page doesn't fit and you'll see the two scrollbars appear. In Firefox and Opera, just the horizontal scrollbar shows up. Here's the basics of the code: Code: <div class="code">
<pre class="codeblock">Private Sub menuAboutTTT_Click(ByVal sender _
As System.Object, ByVal e As System.EventArgs) Handles menuAboutTTT.Click
MessageBox.Show("Tic-Tac-Toe v1.0" & vbCrLf & _
"See how this and other programs work at" & _
vbCrLf & "http://www.scratchprojects.com")
End Sub ' menuAboutTTT_Click</pre>
</div>
Here's the style sheet: Code: .code {
text-align: center;
margin: 15px;
}
.codeblock {
text-align: left;
background: #fff;
border: 1px;
border-style: inset;
width: 99%;
height: auto;
overflow: auto;
}
Any help would be appreciated. Thanks. I am trying to work out if its possible to have a div with overflow-x but have the height to whatever the height of the content is. Obviously the content won't have a fixed height for me to just set it. At the moment ive just got: <div style="display:block; overflow-x:auto;"> Lots of content here </div> Is this possible? Thanks So, here is the basic gist of what I'm attempting to achieve... Two main fixed-width columns: the one on the left containing my latest blog entry and the one on the right containing a menu of thumbnails. I want the menu column on the right to stop at the height of the left column and use a vertical scroll bar when the thumbnail content is too large to fit. I don't want to use a fixed height for the div containing the thumbnail menu because I want its height to reflect the height of the blog entry on the left. I started out with this tutorial but I don't think it's necessary for my purposes, or even necessarily a good starting point for this type of functionality. TLDR: It currently looks like this, and I want it to look like this. Any ideas? Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim Hi All, I have a skeleton css site here http://www.10eight-design.co.uk/temp/layout_test_float.htm You'll notice that there is a LR scroll bar at the bottom of the scrollable div. Is there a way to remove this? That's all. Rob Happy new year everybody, and hopefully with more peace then last year. I need some help with this. How can I set a block element, like a div, locked inside an area which have scrollbars? When the content scrolls horizontally the block should not move. I did try many things now for a few days, but I can't get it to work. Thanks I've been wanting to solve a table problem I've had for a long time. I want a scrollable table without needing to specify specific px widths for the headers and the table cells. I've been told there is no solution to this. What I've done is duplicate the table. I create a div, give absolute positioning to both tables, show the headers of table1 then use visibility:hidden height:0.01em on subsequent rows. I position the duplicate table - table2 1.8em (1 row) below table1. (I think something could be done with z-index too, and if someone wants to demonstrate I'd be happy to see it). This table has the same data, but skips the headers. Some work is also done to make room for the scrollbar. Here's a sample: http://restoredirect.com/test.html You'll notice I'm close, but just a little off. Can someone help me to get it right? While not ideal, I think this may help many people. Also, if someone does have a more ideal approach please speak up and let me know! Hi. I'm having a funny problem where using 100% height makes the content div scrollable, even when there's no actual content in it. I am trying to make my content div be 100% height of the window size, so I have the following css: Code:
html, body
{
background: #FFFFFF;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Trebuchet MS, Helvetica, sans-serif;
}
#wrapper
{
background: #FFFFFF;
position: relative;
width: 100%;
height: 100%;
margin: 0px auto;
}
#header
{
background-image: url("images/h-bg.png");
background-repeat: repeat-x;
margin: 0px auto;
padding: 0px;
width: 960px;
height: 107px;
}
#header .logo
{
margin-left: 10px;
}
#header .bg_l
{
float: left;
}
#header .bg_r
{
float: right;
}
#nav
{
background-image: url("images/n-bg.png");
position: relative;
margin: 0px;
width: 100%;
height: 143px;
text-align: center;
}
#nav a
{
float: left;
outline-style: none;
width: 240px;
height: 156px;
}
#nav_btn_wrapper
{
width: 960px;
margin: 0px auto;
}
#content
{
position: relative;
background-image: url("images/c-bg.png");
background-repeat: repeat-y;
width: 930px;
height: 100%;
margin: 10px auto 0px auto;
padding: 10px 15px 0px 15px;
font-size: 12pt;
}
As you can see I have height: 100% in every parent element from container up. Without the height set to 100%, the container div just cuts off, which is bad because I'm using a glowy background on it, and it just cuts off abruptly. I have used this method before on another design, but it worked only cos the wrapper and the container were both white, so when the container chopped off, the wrapper would continue, and it would look seemless. See www.landmarkmeds.com to see the problem in action. I have tried to remove the margin on the content div, but that only moved it up a bit. Also, looking at it in firebug, it reports the height as the correct value, and even shows the ruler down to the bottom of the browser window. Why then it allows me to scroll I don't know! I'm sure it's something stupid I've missed, but please help! *edit* hello all, i recently tried to implement a layout which fills the available screenspace, with the main content area as scrolling box. I thought i succeeded, because firefox shown no problem, but when looked in IE, IE is very slow to render it, making it just unusable. I've been looking for a way around ,but i'm out of luck so far, so i thought i'd seek advise on this forum. Maybe you can tip me in the right direction ! An image is worth a thousand words, so please have a look at the attached image, it summarizes the screen structure. As you can see, the only scrollable area is the center orange zone : "viewport". thank you for your time and help ! Alexandre I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! Is it possible to use css + javascript to create a scrollbar with only an arrow for scrolling down and another arrow for scrolling up and nothing else like default windows? If you can provide some links, i will appreciate. thanks colored scrollbars for the following css isn't working anyone know why?
Code: /*
style sheet (C) 2004 by Dr3am Designs, made by Dude
*/
body { background: #000000; scrollbar-face-color: #000000; scrollbar-highlight-color: #000000; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #D8DFE7; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000; margin: 0px; padding: 0px; border: 0px; text-align: left; color: #D8DFE7; font-family: Verdana, Arial, Helvetica; font-size: 7pt; }
hr { background-color: #000000; color: #D8DFE7; height: 1px; border-width: 0px; }
a:link,a:active,a:visited { color: #D8DFE7; text-decoration: none }
a:hover { text-decoration: underline; color: #D8DFE7; }
li,ul { list-style-type: square; background-image: none; list-style-position: inside; color: #D8DFE7; }
input { background: #D8DFE7; color: #000000; font: normal 11px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #666666; border-style: outset; text-align: center; text-indent: 2px; }
textarea, select { background: #D8DFE7; color: #000000; font: normal 11px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #666666; border-style: outset; text-align: center; text-indent: 2px; }
form { margin: 0px; padding: 0px; }
td { background-color: #000000; color: #D8DFE7; font-family: Verdana,Arial,Helvetica; font-size: 7pt; }
img { border: 0px; }
now strangely it is working he http://www.dr3amdesigns.com/contact.php for the textarea scrollbar, but not for the page itself or the main page http://www.dr3amdesigns.com/ - any help, please? |
|||||||