|
CSS - Possible To Control The Scroll Position Of A Box Element?
I have a sad feeling that its not possible, but I thought I'd ask anyway...
I have a box element that is 150px x 400px with overflow: scroll; The box contains a large list of links. Now, the user can scroll down and click on a link in the box, which causes the page to refresh. Is there a way of making the scroll bar in the box "drop down" to the element that was clicked when the page is refreshed? It would be very similar to how named anchors work to force a whole page to scroll to a certain position.... Similar TutorialsI 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. i made a nice pop up div with object details. when i control scroll and resize the browser contents everything follows except this pop up div. so the content inside explodes or shrinks where the actual div height and width stay the same. what have you guys done to fix this? thanks Hi. I want to have full control over the colors of a SELECT element. Example: I want to control the color behind the arrow at the right in the SELECT (the area where you click to expand the SELECT). Is that doable using CSS? If not.. any other way to control this (not from client browser, but from developer code)? Hi all, im having a css scrollbar within a table and on refresh of that page,i want 2 position the scroll,at the end of the table. By default the scroll is always at the top. But how do i refer to the scroll position,to bring it to the end of the table? Hi there, What I am looking to do is have a layer that is in front of the rest of the page, that is always there and doesn't move when the rest of the page is scrolled. Basically I want an overlay at the bottom of the browser that shows an image, but this image should always be on screen at that exact position in the browser. The site in question is he earlybirdarts.co.uk Sorry if I am explaining myself badly, I can be bad with words sometimes. Any help is greatly appreciated :-) Regards, Lawrence Title sounds a bit contradictory, I know, but please bear with me... I'm building a simple chat application with html, javascript php and mysql. The technical stuff (php/ajax etc) i'm absolutly fine with; what I'm struggling with is the CSS to make it behave how I want. I've got a prrof-of-concept page working 90% how I want, here http://chris.loyaltymatters.co.uk/chat-demo/ This works by having an outer div of position:relative and an inner div of position:absolute; bottom:0px so that as new content gets added to the bottom, older text goes up. So far so good....but I want a scroll bar so that I can scroll up to see previous comments. Giving the inner div a height value gives me a scroll bar, but the position remains at the top and new content gets hidden towards the bottom html: Code: <div id='container'> <div id='chatRoom'> </div> </div> css Code: #container {
width:500px;
height:500px;
margin:50px auto;
border:1px solid black;
position:relative;
overflow-y:scroll;
overflow-x:hidden;
}
#chatRoom {
position:absolute;
bottom:0px;
margin:5px;
width:100%;
}
To summarise, all I need now is a scroll bar so that I can scroll up many thanks in advance Hello people I'm trying to enable a scroll on a div with position absolute but with negative pixels on the left atribute. Something like this: .intro{ position:absolute; top:100px; left:-190px; } the div will start from the back and it's content won't be seen without a scroll.. I've tried with the overflow:auto; but it doesn't work.. i think it only works to the right and not to the left Can anyone help me ? By the way, whats the diference between these declarations on a css: .intro{ #intro{ intro{ Hoping someone can help. I'm trying to figure out a way to align something to the left of an existing element within a container of variable height. The existing element is already aligned to the left edge of the container. To be more specific, I am trying to place a helper graphic to the left of the email text-field in the "Leave a Comment" form (not the "Email this Zing" form) on this page: http://www.zingfu.com/?zing=4419693e9e98f If it's possible to the place the helper graphic right next to the text field in the code, but then to break it out of the container div to move to the left of the text field, that would be great. Or if I could apply positioning to the helper graphic based on the positioning of the text field, that'd be fine too. But I'm not sure if either is possible. Little help? I have a "see details" link over in the bottom right of a table cell - exactly were I want it. But when I resize the browser window to make it smaller and squish it together the link does not stay in its cell but goes left crashing into content. How do I keep it wrapping but still hugging the right wall of the rightmost cell? Using Mozilla. I have the code below - you'll see. Thanks <html> <table border 1px> <tr> <td>Configuration Management System</td> <td><ahref=http://ms.fc.na.bz/>http://ms.fc.na.bz/</a></td> <td>Source for configuration management documents and drawings from many projects. These are primarily engineering design documents. Each Directorate must be searched separately... <a STYLE="position: absolute; right: 20px; color:red;" href=details. php?id=3&Type_view= detail&Type_Submit=&key_word= > see details</a> </td> </tr> </table> <html> I don't know why but for some reason I thought if you give an element a position of absolute the margin is irrelevant. Not so in FF huh? Tom For most of my webpages, I use a few element templates for body, div, etc. I'm using more positioning in my pages, and so for the sake of nested div's, I want to add some standardized positioning to my template:
Code: div{
padding: 0;
margin: 0;
border: 0 #000000 solid;
/*** added positioning atributes ***/
position: relative;
top: 0;
left: 0;
z-index: 0;
}
I know that some of this is "standard", but I want to be absolutely sure the browser is going to render my page as I want it. My question is, will/should adding this positioning increase the processing/rendering time of the page (as using table-less design uses a lot of divs)? It's probably a silly thing to worry about, but I'm also interested in what atributes are more processing intensive. Please look at this page - http://www.mts-diesel.com/index.php?cPath=20_23_42 The breadcrumb trail links on the main page in FF are higher up than the same element in Chrome and IE. If anyone can shed some light it would be greatly appreciated. Thanks so much, Tom *** After posting I have been playing with other options, but would still love to know why the bg position on .container_12 does not work. Please look at this page http://www.mts-diesel.com/index.php?cPath=20_24_56 There is an element w/ an class of container_12 that I have put an inline style declaration of style="background:transparent url(images/container_12_bg.jpg) 0 1000px !important;" I am trying to push the background down below the navigation but for some reason I can only move the background image to the right, and not down as needed. Thank you for any help. Tom Hey, I've got a quick question - I know this must have a common workaround to it, I just can't seem to find it. I have a div positioned absolutely within several parent divs making up the rest of the page. To put the issue simply, it seems to be positioning this child div relative to the body. top:20; and left:20; will put it 20 from the top and left of the body of the page rather than he top and left of the block level div it's nested within. There's no positioning applied to its direct parent. The issue is the same in both IE5.5+ and FF. I can whip up a code example, but I think this is a simple issue that would be easier interpreted as I've put it. Thanks in advance for any help on this. =) I can't figure out why the ul with the id #two is not responding to my position attempt. It is child of an li in the ul w/ a class .menu on www.eagletransmission.net If you mouse over Gallery the dropdown should be flush with the left side of the parent li but it is not. Aaaaargh Tom 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 I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
hello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help... I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!! Code:
body {
margin:0px;
padding:0px;
font-family: Georgia;
color:#333;
background-color:#FFFFD2;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}
p {
font:11px/20px Georgia;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#ffffd2;
font-size:13px;
text-decoration:none;
/*font-weight:600;*/
font: Georgia;
}
a:link {color:#ffffd2;}
a:visited {color:#ffffd2;}
a:hover {background-color:#A4AA54;}
a.blue {
color:#0000CC;
font-size:11px;
text-decoration:none;
font-weight:600;
font: Georgia;
}
a.blue:link {color:#0000CC;}
a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#eee;}
#logodiv {
position:absolute;
top:6px;
left:14px;
width:91px;
height:126px;
background-image: url(../images/logo/gglogoweb.gif);
background-position: 1% 2px;
background-repeat:no-repeat;
visibility: visible;
z-index:1;
}
#slogandiv {
position:absolute;
top:0px;
left:0px;
width:100%;
height:137px;
background-color:#A4AA54;
visibility: visible;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:137px;
width:100%; /* the correct height */
}
/* "be nice to Opera 5" */
body>#slogandiv {height:137px; width:100%;}
#MenuBar {
position:absolute;
top: 136px;
left:0px;
width:100%;
height:32px;
padding-bottom:2px;
background-color:#667138;
border-bottom:0px solid #A4AA54;
line-height:17px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
height:32px;
}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}
#Content {
position:absolute;
top: 175px;
left: 185px;
width: 81%;
padding:15px;
border: 0px solid #000000;
background-color:#ffffd2;
z-index:0;
}
body>#Content {width:81%;}
#Menu {
position:absolute;
top: 166px;
left:0px;
width:150px;
padding:10px;
background-color:#667138;
border-right:2px solid #A4AA54;
border-top:0px solid #A4AA54;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
and the other Code:
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
/*Style for the background-bar
.clBar{position:absolute; width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden}
/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}
/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}
/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */
i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!! If anyone can help that would be really appreciated! Thanks very much RF I've defined three classes in this page but now I can't scroll down to the end of the page. the vertical scroll bars are missing. why is that? 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! |
|||||||