|
CSS - Scrolling Divs On Mouseover
I'm trying to scroll a div when the mouse is over the div. the div has the auto value for the overflow property. Is this possible and if so could someone help me out on how to do it? I was thinking something using the javascript document.getelementbyId() but i can't figure out what property to use. Thanks
Similar TutorialsHi all, I'm fairly new at CSS and web development in general, but I've started working on a project which needs an unknown number of divs to be nested inside an external one. What's happening at the moment is that, if the internal divs are too long, they'll wrap around to the next line. What I need to happen is that a horizontal scrollbar will appear when the internal divs go past the end of the page. I've tried putting "overflow: auto;" on every possible component of the HTML but, so far, there has been no effect. A test version of the code is below and I really hope that someone can help me with this. Thanks! CSS: Code: #main { overflow: auto; } .a { float: left; }
HTML: Code: <body> <div id="main"> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> <div class="a">supercalifragilisticexpialidocious</div> </div> </body> hey guys im having some problems getting this to work in IE 6 but it works fine in FF. Im really not sure whats wrong any help would be great. Code:
<div style="display: block; height:150px; overflow:auto;overflow-x:scroll; overflow-y:scroll; overflow:-moz-scrollbars-horizontal;">
<div style="float:left; white-space: nowrap;">
<img src=\"pic.jpg\" alt=\"gall image\" />
<img src=\"pic.jpg\" alt=\"gall image\" />
<img src=\"pic.jpg\" alt=\"gall image\" />
<img src=\"pic.jpg\" alt=\"gall image\" />
<img src=\"pic.jpg\" alt=\"gall image\" />
</div>
</div>
Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! Im new to CSS... i have created a nested set of <div> tags, the outer one is an image and the second one has a white background with an opacity set to it so you can see the image behind it, and the box has some text inside... i want to have a mouseover event that makes that second div invisible (so that the whole photo behind it will show). Either a mouseover or a mouseclick event...i would prefer a mouseclick, but i need one or the other i dont want to end up doing it in photoshop with rollover images...its so much prettier in CSS! -Thank You Hi I'm kinda new to this forum, so i'll just hope im in the right place to post my problems.. I'm from the Netherlands, so i dont know if my English is always correct.. I'll try to make it as best as i can.. ok.. that was the short intro.. now the problem: ok.. i have made the following page, using some css from a website. Code: <html>
<head>
<title>lol</title>
</head>
<style media="screen" type="text/css">
/* NAVIGATION BUTTONS */
.cssnav {
position:relative;
font-family: arial, helvetica, sans-serif;
background-image: url(overbtn2.jpg);
background-repeat: no-repeat;
white-space: nowrap;
display: block;
width: 211px;
height: 44px;
margin: 0;
padding: 0;
}
.cssnav a {
display: block;
color: #000000;
font-size: 11px;
width: 211px;
height: 44px;
display: block;
float: right;
color: black;
text-decoration: none;
}
.cssnav img {width: 211px; height: 44px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position: absolute;
left: 30px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
width: 149px;
height: 14px;
text-align: center;
}
/* END OF NAVIGATION */
</style>
<body bgcolor="#000000">
<!--MAIN NAVIGATION START-->
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="downbtn2.jpg" alt="home" /><span>home</span></a></div>
<!--MAIN NAVIGATION END-->
</body>
</html>
this was a test page for a menu i am currently making. I also wanted to make a link that works quite like this, only without the text in the buttons. Currently the idea is like.. i made a nice pic in paint of a closed book, and on a mouseover.. the other pic i made, an opened book, should appear.. but it doesnt the source is now like this Code: <html>
<head>
</head>
<style media="screen" type="text/css">
/* NAVIGATION BUTTONS */
.cssnav {
position:relative;
background-image: url(open.bmp);
background-repeat: no-repeat;
white-space: nowrap;
display: block;
margin: 0;
padding: 0;
}
.cssnav a {
display: block;
display: block;
float: right;
color: black;
}
.cssnav img {border: 0}
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
}
/* END OF NAVIGATION */
</style>
<body bgcolor="#000000">
<!--MAIN NAVIGATION START-->
<div class="cssnav"><a href="onder.html" target="onder" title="home"><img src="dicht.bmp" alt="home" /><span>home</span></a></div>
<!--MAIN NAVIGATION END-->
</body>
</html>
can anyone please tell me how i can solve this problem? thanks in advance.. -Emiel- Have a look at this menu: http://elliottback.com/wp/wp-conten...e-x/googlex.htm Is it possible to achieve that effect using a navbar (marked up as a list), and using CSS rather than javascript? Please provide examples / links. I have several small images in a row. Mouseover on each changes them to different image. However, trying to achieve paragraph of text to appear below this row - differerent <div> of text depending on which image is hovered over. My trial so far uses code below. (a) am I correct in saying I can achieve what I want with only CSS? (b) I know it's got something to do with hiding and showing a block?!? Suggestions appreciated. Thanks. <style type="text/css"> div.image1 { background: url(image1.jpg) no-repeat top left; width: 100px; height: 100px; } div.image1:hover { background: url(image1_hover.jpg) no-repeat top left; width: 100px; height: 100px; } </style> <div class="image1"> </div> Sup /css/. Here is the temporary build of my page. The links are dead on purpose: http://www.mindwallpictures.com/files/temp/mediachef If you click on "services" you'll see a drop down list appear. I have mouseovers on these links which make an image appear toward the top of the page. "web&graphic, film&video, etc..." However, the links for 'portfolio', 'about us' and 'contact us' should also have this same mouseover effect. But they do not work. I believe this is a problem with my css and not the javascript, because when I swap out a mouseover command of one of the non-working links for one of the working links, the image will appear. It seems to not want to toggle those particular divs. Here is the javascript code: Code:
<script language="Javascript" type="">
<!--
function toggleDiv(id,flagit) {
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>
The related css: Code: #webgraphic {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/webgraphic.gif);}
#filmvideo {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/filmvideo.gif);}
#musicaudio {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/musicaudio.gif);}
#photography {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/photography.gif);}
#portfolio {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/portfolio.gif);}
#about {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/about.gif);}
#contact {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/contact.gif);}
and the xhtml: Code:
<div class="sidemenu">
<div id="links">
<div><a href="/">home</a></div>
<a href="javascript:animatedcollapse.toggle('services')">services</a></div>
<div id="services">
<a href="#" onmouseover="toggleDiv('webgraphic',1)" onmouseout="toggleDiv('webgraphic',0)">web & graphic</a><br />
<a href="#" onmouseover="toggleDiv('filmvideo',1)" onmouseout="toggleDiv('filmvideo',0)">film & video</a><br />
<a href="#" onmouseover="toggleDiv('musicaudio',1)" onmouseout="toggleDiv('musicaudio',0)">music & audio</a><br />
<a href="#" onmouseover="toggleDiv('photography',1)" onmouseout="toggleDiv('photography',0)">photography</a>
</div>
<div id="links">
<div><a href="#" onmouseover="toggleDiv('portfolio',1)" onmouseout="toggleDiv('portfolio',0)">portfolio</a></div>
<div><a href="#" onmouseover="toggleDiv('about',1)" onmouseout="toggleDiv('about',0)">about us</a></div>
<div><a href="#" onmouseover="toggleDiv('contact',1)" onmouseout="toggleDiv('contact',0)">contact us</a></div>
</div>
</div>
It acts as if it's a problem with syntax, but I don't see any errors and my code is validated. Any help would be greatly appreciated. Thanks. I used a simple mouseover menu i've done houndreds of times, but I cannot get it to work in IE6 for some reason. I do not know what the problem is. Here is the page: (URL address blocked: See forum rules) Here is he css file: (URL address blocked: See forum rules) Anyone got any clue how to fix this? -Chris hi folks, i guess i have a fairly simple question for you guys & gals - but i am just not getting to the solution. i have this code: Code: <p><a class="text_menu_gray" href="products.html" onmouseover="this.className='text_menu_brown';return true;" onmouseout="this.className='text_menu_gray'">products </a></p> ... which makes the grey-colored word 'products' appear brown when the mouse is over it. thats all good - but how can i make it stay like that, when the word is clicked on? and will it change back to grey, when another word is clicked on? any advice would be greatly appreciated http://tampabay-online.org/johnruss...05-02-25/03.php That image is an imagemap and I would like to have text appear on the right (on mouseover) saying that you can look at the details of the work if you click on it. I would like the text added to the Code: <div id="contentright"> </div> Is this something I can do with css? Thanks I have a side menu I'm trying to work with. using this css code for my menu http://www.dynamicdrive.com/dynamicindex1/popit.htm It's doing what I want it to however, I have 2 questions. 1. When the mouse is over the link and the menu pops up to the right, how can I make the text larger? I can't seem to figure this out as I'm new to css. 2. I would like the popup menu to show more to the right, off the main set of links. How would I go about this. The page above in the example has all the code I used. Look at the demo and you see. I have the main links resized fine but can't get the linkset text larger thanks in advance.. any help would be much appreciated I know how to make the background of a link change but how do you do it if it isnt a link? in css... Does anybody knows how to change the bgcolor of a box when we hover the mouse over it? Go http://www.avocadolite.com/v9/ to get what i mean. In this case the avocado's bgcolor is green, i think. I've been trying to combine an image link with a mouse over cursor I made. I was created an image that led to another URL. I wanted to have a mouse over cursor appear when you put your cursor over it so it could show the extra cursor image with it(I hope that made sense). This is what I've done so far(The smile image in the code below isn't the real image I'm going to use. I'm just using it as an example in this case): ----- Code: <html>
<head>
<style type="text/css">
.smile { cursor:url(http://www.quackit.com/pix/smile.gif),auto }
</style>
</head>
<body>
<h3 class="smile">"<a href="http://www.4m4life.com">
<img src="http://i107.photobucket.com/albums/m305/Red_psn/newsigggg2.jpg"
width="530" height="126" alt="banner" border="0" />
</a>"</h3>
</body>
--- So, what I end up getting is the image link working correctly, but the mouse over cursor won't appear the way it should, it only displays the pointer on it because it's a link? Is there a way to disable the pointer in the code I gave so the mouse over image will appear instead? It seems like the mouse over image(the smile which I added for an example) will only appear in the quotation marks no nowhere else on the image link... I usually don't ever ask for help, but since I'm VERY new to HTML and CSS, I will now please ask for some help. X-D Anyway, help would be much appreciated -Red |
|||||||