Jump to content

Dropdown textbox on mouseover????


Sevir

Recommended Posts

I'm on Myspace www.myspace.com/frailman.I wanted to put the content under the Interests, Music, Books, and Movies sections in a dropdown textbox so there would just be one div. with those headings and I could put more information in these fields and the page would still look reasonibly good.~Note~ This content contains some links, but most of it is plaintext~Thanks for your help, ~Sevir

Link to comment
Share on other sites

What im understand is that you have those sections in divs, and when someone hovers there mouse over it you want it to display the rest of it? You will need to create 2 seperate custom classes for this. here is how you do it anyways:

<style type="text/css">.interests:link {height: 10px; //The height of the Interests text so they can see thatoverflow: hidden;}.interests:hover {height: Npx; //Height of div with all contentposition: absolute; //needed for z-indexz-index: 10;}</style><div class="interests"> Interests Camping, Gaming, Shooting random things,  Reading, Wrighting, and Loitering.</div>

Now thats just for one, now you will need to customize that for every thing you want.. Have fun lol!

Link to comment
Share on other sites

Thanks reportingsjrerests,It's not working fo me {most likely due to Myspace's layout} or I just don't know what the ###### I'm doing.This is my code\|/, to look at the output go to myspace.com/frailmanIn the "about me" section:

<style type="text/css">.general{position:absolute;top:200px;left:50%;margin-left:-400px;width:293px;height:100px;z-index:3;padding:0px;border:1px solid black;background-color:4a4a4a;}.music{position:absolute;top:305px;left:50%;margin-left:-400px;width:144px;height:133px;z-index:3;padding:0px;border:1px solid black;background-color:4a4a4a;}.books{position:absolute;top:305px;left:50%;margin-left:-251px;width:144px;height:133px;z-index:3;padding:0px;border:1px solid black;background-color:4a4a4a;}.movies{position:absolute;top:443px;left:50%;margin-left:-400px;width:293px;height:105px;z-index:3;padding:0px;border:1px solid black;background-color:4a4a4a;}.photo{position:absolute;top:148px;left:50%;margin-left:-100px;width:460px;height:345px;z-index:3;padding:0px;border:1px solid black;background-color:4a4a4a;background-image:url('http://img473.imageshack.us/img473/2117/steve003qt4.jpg');background-position:top left; background-repeat:no-repeat; background-attachment:scrool;}.contact{position:absolute;top:493px;left:50%;margin-left:-100px;width:460px;height:55px;z-index:3;padding:0px;border:1px solid black;background-color:4a4a4a;}.fill{position:absolute;top:148px;left:50%;margin-left:360px;width:38px;height:346px;z-index:3;padding:0px;border:1px solid black;background-color:4a4a4a;background-image:url('http://img473.imageshack.us/img473/2117/steve003qt4.jpg');background-position:top left; background-repeat:no-repeat; background-attachment:scrool;}.fill2{position:absolute;top:494px;left:50%;margin-left:360px;width:40px;height:55px;z-index:3;padding:0px;border:0px solid black;background-color:4a4a4a;}table table embed{position:absolute; top:148px; left:50%; margin-left:-400px;}.blankslate{position:absolute;top:148px;left:50%;margin-left:-600px;width:1200px;height:1500px;z-index:2;padding:0px;border:0px solid black;background-color:1c1c1c;background-image:url('http://img218.imageshack.us/img218/345/bluestf1.jpg');}.comments{position:absolute;top:700px;left:50%;margin-left:-400px;width:800px;z-index:3;padding:0px;border:0px solid black;background-color:1c1c1c;}td.text td.text table .orangetext15{display:none;}td.text td.text table table table{width:3px;}td.text td.text table br{display:none}td.text td.text .redlink,td.text td.text span.btext {width:auto;}td.text td.text table {background-color:transparent;}td.text td.text table td,td.text td.text table {width:700px;padding:0;border:0;}td.text td.text table table td {padding:3;background-color:4a4a4a; border:0px solid black;}td.text td.text table table br {display:inline;}.redtext{color:660000;}.blacktext10{color:660000;}.x{This defines the background of the entire page.}body { background-color:1c1c1c; background-position:bottom left; background-repeat:repeat; background-attachment:fixed; border-width:0px; border-color:black; border-style:solid; }.x{This defines the tables.} table table table {background-image:url('If you put an image here, it will appear in all of your tables.');background-color:1c1c1c;border:2px solid black;} .x{This section defines the text.}td, .whitetext12, .lightbluetext8, .blacktext12, .btext,  .text, .orangetext15, .nametext, .redbtext, .redtext, A:link, A:visited, A:active,a.redlink:link,a.redlink:active, a.redlink:visited,  a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:hover, a.font, table td div div font, div table tr td font {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:8pt;color:660000; }a.navbar, a.navbar:link,a.navbar:active, a.navbar:visited{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:7pt;color:ghostwhite;}a.navbar:hover{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:7pt;color:88bbff;}a.redlink:hover, A:hover{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:8pt; text-decoration:none;color:88bbff;}.x{Comment Text; makes it look neater.}.blacktext10 {color:4a4a4a;font-size:8pt;font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;border:0px;border-top:2px solid black; display:block; width:500px;background-color:black;} .x{You shouldn't change anything past here unless you know what you're doing.}input {background-color:white;} img{border:0px}table, tr, td {background:transparent;border:0px;}table table table table {border:0px;} table table td.text table, table table td.text table td {width:100%;} table table table table div {width:298px;}td.text td.text table table table td a img {width:100px;}td.text td.text table table table td div img {width:80px;}td.text td.text table table td img {width:260px; max-width:260px; width:auto;}td.text td.text table table td div img {width:80px;}* html td.text td.text table table td img {width:100px;}* html td.text td.text table table td a img {width:80px;}* html td.text td.text table table td div img {width:80px;}</style>

In the"I'd like to meet"section:

 <div class="blankslate"></div><div class="general"> <html>  <head>   <style type="text/css">	h1 {color: 660000} 	h4 {color: 660000}   </style>  </head>  <body>   <h1>	<b> Interests</b>   </h1>	<h4>	  Camping, Gaming, Shooting random things,		  Reading, Wrighting, and Loitering.	</h4>   </body>  </html></div><div class="books"> <html>  <head>   <style type="text/css">	h1 {color: 660000} 	h4 {color: 660000}   </style>  </head>  <body>   <h1>	<b> Books</b>   </h1>	<h4>	  Snow Crash<br>	  the Time Mechine<br>	  the Invisible Man<br>	  	</h4>  </body> </html></div><div class="music"> <html>  <head>   <style type="text/css">	h1 {color: 660000} 	h4 {color: 660000}   </style>  </head>  <body>   <h1>	<b> Music</b>   </h1>    <h4>	<a href="http://www.demonhunter.net">	  <u>Demon Hunter</u></a><br>	<a href="http://www.showbread.net">	  <u>Showbread</u></a><br>	<a href="http://www.systemofadown.com">	  <u>System of a Down</u></a><br>	<a href="http://www.pillarmusic.com/main.htm">	  <u>Pillar</u></a><br>	<a href="http://www.heartagram.com/">	  <u>HIM</u></a><br>   </h4>  </body> </html></div><div class="movies"> <html>  <head>   <style type="text/css">	h1 {color: 660000} 	h4 {color: 660000}   </style>  </head>  <body>   <h1>	<b> Movies</b>   </h1>   <h4>	 Scarface,the Man who Knew too Much,	 the Fast and the Furious, Young Guns (1&2),	 Rear Window, Secret Window, Ghost Ship,	 Event Horizon, Singing in the Rain, My Fair Lady,					  	 State Fair, Oklahoma, Music Man, and so on.   </h4>  </body> </html></div><div class="photo"> <html>  <head>   <style type="text/css">	h1 {color: 660000}	h4 {color: 660000}   </style>  </head>  <body>   <h1>	<b>frailman<br>Male<br>22<br>Single</b></h1>  </body> </html></div><div class="contact"> <html>  <head>   <style type="text/css">	h1 {color: 660000}	h4 {color: 660000}   </style>  </head>  <body>   <h4>	 Aim Screen Name:  frailman90        <a href="http://collect.myspace.com/index.cfm?fuseaction=invite.          addfriend_verify&friendID=67588264" id="ctl00_Main_ctl00_UserContactLinks1_AddFriendLink">               <u>Make me your friend</u>         </a><br>	 <a href="mailto:frailman@gmail.com?subject=Myspace">	   <u>E-mail</u>:	 </a>	   frailman@gmail.com<br>	 Visit my	 <a href="http://blog.myspace.com/frailman">	  <u>blog</u>	 </a>   </h4>  </body> </html></div><div class="comments" align="center"><table><tr><td><table><tr><td>

~Btw, have you tried Opera?

Link to comment
Share on other sites

Thanks reportingsjrerests,It's not working fo me {most likely due to Myspace's layout} or I just don't know what the ###### I'm doing.This is my code\|/, to look at the output go to myspace.com/frailman~Btw, have you tride Opera?
You need .class: hover like I did, just format it the way I did and you will be fine.Also, in your divs and such you have <html><body> etc.., but those go around the entire body of the document, not inside divs and such :).I have tried opera, and its.. ok. I did not think it was as nice as firefox for various reasons. Mainly I didnt like the curved look and such.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...