Jump to content

Drop down text


Recommended Posts

I found some posts on drop down menus; but, being very new to CSS i am not able to carry that information over to what I want.I am trying to have a couple paragraphs, that start in a box with hidden overflow and when the user hovers the mouse over that box, it expands downwards to a much greater length, and a scroll bar also appears.My first question is simple: is this possible to do? I have gotten the boxes to look right, but getting the text to behave inside the boxes has been a nightmare.Thanks for the help!

Link to post
Share on other sites

I think I figured out what to do what you are trying to do with a combination of both CSS and Javascript. I went to one of the Try-It-Out Editors and experimented a little and came up with this. This is copied and pasted straight from the editor I used.

<html><head><script type="text/javascript">function showOverflow(){document.getElementById("over").style.overflow="auto";}</script><style type="text/css">div {background-color:#00FFFF;width:150px;height:150px;overflow: hidden}</style></head><body><p>The overflow property decides what to do if the content inside an element exceeds the given width and height properties.</p><div id="over" onmouseover="java script:showOverflow()">You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, scroll, auto, or inherit and see what happens. The default value is visible.</div></body></html>

Link to post
Share on other sites

I'm not exactly sure if this does what you're asking, but you can try it:

.box { height: 80px; overflow: hidden; }.box:hover { height: auto; }

The only drawback is that it won't work in Internet Explorer 6.

Link to post
Share on other sites

Awesome, thanks for the tips-- I'm gonna try those out right away.While you guys were investing I was busy getting myself into more trouble...(FYI I hadn't touched any HTML, CSS, or any web related stuff before last monday, and now I have the sole respsoblility of redoing the company website... word)I'm also trying to make a cool effect where you highlight different aspects of our software analsyis, and it displays different pictures of those results. Basically I am butchering up some .pngs and trying to get them to :hover over a base image.The CSS:.dropdown { position: absolute; width: 1000px; height: 200px; top: 200px; background: #eee; }.dropdown ul{ margin: 0; list-style: none; padding: 0; } .dropdown li{ display: inline; position: absolute; overflow: show; margin: 0 2px 0 0; padding: 0; top: -100px; width: 200px; } .dropdown li:hover{ position: absolute; top: 0px; height: 200px; padding: 0; background: #d10000; color: #d10000; }The HTML:<html><link href="drop.css" rel="stylesheet" type="text/css"/> <body><div class="dropdown"><ul><li>Fluid Flow</li><li style="left: 200px;">Porosity</li><li style="left: 400px;">Strength</li><li style="left: 600px;">Thermal/Solidification</li><li style="left: 800px;">Automatic Meshing</li></ul></div></body></html>It basically works, the colors change like I want to and they are all in the right place. Thing is, if anyone were to view this in a dimly lit room they would immeaditly plunge into a grand mal seizure. I left overflow: show so that I could pop the words up above the images, something tells me this is the root of the problem. Is there a way to get the images to stop fighting with each other?

Link to post
Share on other sites
I'm not exactly sure if this does what you're asking, but you can try it:
.box { height: 80px; overflow: hidden; }.box:hover { height: auto; }

The only drawback is that it won't work in Internet Explorer 6.

Hrm, this is similar to something I tried before. I believe, not sure if it's true, that since the overflow is hidden, in the .box part, the hover is a component of that and the hover's "height: auto" is simply stuck inside the "overflow:hide" from the first part.I remember seeing confusing stuff about block level elements and such. I think if there were some way to keep the .box:hover from being stuck inside the overflow:hide from the .box part, that it could work.
Link to post
Share on other sites

The overflow isn't the important part of the code. It's the height attribute.The overflow is always hidden, whether the mouse is over the box or not. When the mouse is over the box, the box will extend to its full height, while when the mouse isn't over the box it will stay at 80px tall.

Link to post
Share on other sites
The overflow isn't the important part of the code. It's the height attribute.The overflow is always hidden, whether the mouse is over the box or not. When the mouse is over the box, the box will extend to its full height, while when the mouse isn't over the box it will stay at 80px tall.
Hrm, it doesn't seem to be working for me. this is the exact .html and .css i am using.CSS:.box { height: 200px; width: 250px; overflow: hidden; background: #eee; overflow: hidden; } .box:hover{ height: auto; background: #eee; }HTML:<html><link href="expand.css" rel="stylesheet" type="text/css"/> <div class="box">adjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld gadjg akgjd lkajdgkd kd dk kkakldgj g k a adgjld g</div></html>Did I put something in wrong?
Link to post
Share on other sites

You probably are using Internet Explorer 7, and your document isn't running in Standards Compliant mode. To make it run in Standards Compliant mode you need to give a correct Doctype declaration and use correct HTML or XHTML.Here's the code you should use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Document Title</title><link href="expand.css" rel="stylesheet" type="text/css"></head><body><div class="box">Some text<br>Some text<br>Some text<br>Some text<br>Some text<br>Some text<br>Some text<br>Some text<br>Some text<br>Some text<br>Some text<br>Some text<br></div></body></html>

Link to post
Share on other sites

Yesssss, totally worked. I'm on firefox 2 actually. Your suggestion still did the trick though. That may explain many of my problems...I would also like to add that sonic the hedgehog was(is?) a sweet game. Although, still hard to say if he could beat mario in a fight.

Link to post
Share on other sites
I would also like to add that sonic the hedgehog was(is?) a sweet game. Although, still hard to say if he could beat mario in a fight.
Is a sweet game. People do still play it. As for Mario vs. Sonic? Go play Super Smash Bros. Melee :)
Link to post
Share on other sites
  • 2 months later...

I have been struggling with the OVERFLOW property since I changed my PC at work and think you have identified my problem. I used to have IE6 and now have IE7, and the OVERFLOW property seems to no longer work in IE7. I went to W3Schools example of the OVERFLOW property and it seems to work until you take the example and include the DOCTYPE declaration, at which time it stops working. What can you tell me about this? How did you know it doesn't work in IE7? How could I have know this?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...