By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,787 Members | 1,124 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,787 IT Pros & Developers. It's quick & easy.

having issue positiong a divrollover in another div.

P: 4
alright i have tried pretty much everything and looked everywhere and i cant seem to find out what my problem is. you guys are my last chance. ha

anyways whenever i enter my divrollover into my div no matter what positioning i have on the margins it will always get thrown to the far left of the div. now say once its on there and i wanna try and move it, it still wont move!

then just to experiment when i put a second divrollover in the div it gets thrown under the 1st div and i cant move that one either.

here is what i have. and thank you in advance for any help you all may be.

.div3 {
background-image:url(http://i11.photobucket.com/albums/a178/Travis1919/kji.gif);
background-position:center center;
background-repeat:repeat;
background-attachent:scroll;

background-color:silver; color:Black;
border:2px solid; border-color:silver;
width:800px; height:100px; overflow:hidden;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:150px; text-align:center;
visibility:visible;}

.divrollover1 {width:72px; height:100px; overflow:none;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-138px; margin-top:344px;
visibility:visible;}

.rollover1 {height: 100px; width: 72px; overflow: hidden; background: url(http://i11.photobucket.com/albums/a178/Travis1919/mattsliceddone.jpg) top left no-repeat; display: block;}
.rollover1:hover {background-position: bottom left;}


then after that i was told then to enter this code where i wanted it in the site.

<div class="div3">

<a href="http://www.myspace.com/fillatio" class="rollover1"></a>

</div>
Mar 28 '07 #1
Share this Question
Share on Google+
7 Replies


KevinADC
Expert 2.5K+
P: 4,059
maybe "top left" has something to do with it?

url(http://i11.photobucket.com/albums/a178/Travis1919/mattsliceddone.jpg) top left
Mar 29 '07 #2

P: 4
no, thats not it. i tried playing around with it and nothing.

im pretty sure that is just for the fact that the rollover top half is measure from top left down and to the right. and the bottom half is measure from bottom right to top left, you know?

another full day trying everything i can think of. i tried placing the rollover into different divs i have already and no matter which one i put it in it finds it s way to the top left corver of the div.

even if i take out the margins completly!

someone has to have an idea?
Mar 30 '07 #3

KevinADC
Expert 2.5K+
P: 4,059
Not that I can really understand what it is you are trying to do, but have you tried stuff like:

url(http://i11.photobucket.com/albums/a178/Travis1919/mattsliceddone.jpg) center center

I would remove this too:

display: block;

I don't know if that has any affect on a back-ground image, but it seems like a background image couldn't be block level anyway.
Mar 30 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
First two problems are these:
There is no such thing as background-attachent: scroll and
overflow: none.

Second problem is your html code is incomplete so we don't know anything about these rollovers. Also, you absolutely position all this with 50% or so but this is 50% of what? You must establish a parent and the parents width to use that.

We need the complete code or, preferably, a link.
Apr 1 '07 #5

P: 70
Extremely confusing scripting there.
Apr 1 '07 #6

P: 4
is there an easier way that i just don't know about?
Apr 1 '07 #7

P: 4
alright i decided to put the entire code in here so you guys can pinpoint my problem.

also one more note i tried two or three different styles of putting in my rollover and each with the same result. so i am almost sure the problem lies somewhere in my main part.
Expand|Select|Wrap|Line Numbers
  1. bbz Overlay Model Generator v0.5
  2. bbzSpace dot com
  3. </style>
  4.  
  5. <style type="text/css">
  6. body {background-color:black; background-image:none;}
  7. td, .text, div, input {color:Black !important;}
  8. a {color:blue !important;} img {border:0px;}
  9. table, tr, td {background:transparent; border:0px;}
  10. img, .contactTable { display:none; }
  11. .bbzContainer img, .comt img { display:inline; } 
  12. table div, td td td, table div div { visibility:hidden; }
  13. font, a, .bbzsc a { visibility:hidden; }
  14. marquee { visibility:visible !important; }
  15.  
  16. .bbzComment { This is where you control the position of the player. }
  17. table table embed {display:block; width:202px; height:35px; position:absolute; top:0px; left:0px; visibility:visible;}
  18. table table table embed,  .bbzContainer div embed {position:static !important; width:auto; height:auto; }
  19. .text, table table table table a,
  20. table table table table div,table table table table div a {visibility:visible;}
  21. .bbzComment { You selected to hide comments. }
  22. .bbzsc { display:none; }
  23. .text, td.text td.text table, .contactTable, .lightbluetext8 {display:none;}
  24. table table, table table td {padding:0px; height:0px;}
  25.  
  26. .div3 {
  27. background-image:url(http://i11.photobucket.com/albums/a178/Travis1919/kji.gif);
  28. background-position:center center;
  29. background-repeat:repeat;
  30. background-attachent:scroll;
  31.  
  32. background-color:silver; color:Black;
  33. border:2px solid; border-color:silver;
  34. width:800px; height:100px; overflow:auto;
  35. position:absolute; z-index:2; left:50%; top:0%;
  36. margin-left:-400px; margin-top:150px; text-align:center;
  37. visibility:visible;}
  38.  
  39. .div0 {
  40. background-image:url(http://i11.photobucket.com/albums/a178/Travis1919/4.gif);
  41. background-position:center center;
  42. background-repeat:repeat;
  43. background-attachent:scroll;
  44.  
  45. background-color:silver; color:Black;
  46. border:2px solid; border-color:silver;
  47. width:800px; height:100px; overflow:hidden;
  48. position:absolute; z-index:2; left:50%; top:0%;
  49. margin-left:-400px; margin-top:690px; text-align:center;
  50. visibility:visible;}
  51.  
  52. .div4 {
  53. background-color:; color:000000;
  54. border: ; border-color:;
  55. width:350px; height:213px; overflow:hidden;
  56. position:absolute; z-index:2; left:18%; top:-112%;
  57. margin-left:-125px; margin-top:455px; text-align:center;
  58. visibility:visible;}
  59.  
  60. .div5 {
  61. background-color:; color:000000;
  62. border: ; border-color:;
  63. width:150px; height:100px; overflow:hidden;
  64. position:absolute; z-index:2; left:74%; top:-40%;
  65. margin-left:-125px; margin-top:455px; text-align:center;
  66. visibility:visible;}
  67.  
  68. .div6 {
  69. background-color:; color:000000;
  70. border:solid ; border-color:333; border-width:1px;
  71. width:210px; height:210px; overflow:hidden;
  72. position:absolute; z-index:2; left:79%; top:-75%;
  73. margin-left:-125px; margin-top:455px; text-align:center;
  74. visibility:visible;}
  75.  
  76. .div7 {
  77. background-color:; color:000000;
  78. border: solid ; border-width:1px; border-color:333;
  79. width:210px; height:110px; overflow:hidden;
  80. position:absolute; z-index:2; left:79%; top:-112%;
  81. margin-left:-125px; margin-top:455px; text-align:center;
  82. visibility:visible;}
  83.  
  84. .div8 {
  85. background-color:; color:000000;
  86. border: solid ; border-width:1px; border-color:333;
  87. width:275px; height:144px; overflow:hidden;
  88. position:absolute; z-index:2; left:25%; top:-59%;
  89. margin-left:-125px; margin-top:455px; text-align:center;
  90. visibility:visible;}
  91.  
  92.  
  93. .div1 {
  94.  
  95. background-image:url(http://i11.photobucket.com/albums/a178/Travis1919/Florida-Fun-Spring-Break-01.jpg);
  96. background-position:center center;
  97. background-repeat:repeat;
  98. background-attachent:scroll;
  99. background-color:silver; color:Black;
  100. border:2px solid; border-color:silver;
  101. width:580px; height:400px; overflow:hidden;
  102. position:absolute; z-index:2; left:50%; top:0%;
  103. margin-left:-400px; margin-top:270px; text-align:center;
  104. visibility:visible;}
  105.  
  106.  
  107. .div2 {
  108.  
  109. background-image:url(http://i11.photobucket.com/albums/a178/Travis1919/Florida-Fun-Spring-Break-01.jpg);
  110. background-position:right;
  111. background-repeat:no repeat;
  112. background-attachent:;
  113.  
  114. background-color:silver; color:Black;
  115. border:2px solid; border-color:silver;
  116. width:200px; height:400px; overflow:hidden;
  117. position:absolute; z-index:2; left:50%; top:0%;
  118. margin-left:200px; margin-top:270px; text-align:center;
  119. visibility:visible;}
  120.  
  121. .divrollover1 {
  122. background-color:; color:000000;
  123. border: ; border-color:;
  124. width:150px; height:100px; overflow:hidden;
  125. position:absolute; z-index:2; left:-74%; top:40%;
  126. margin-left:125px; margin-top:120px; text-align:center;
  127. visibility:visible;}
  128.  
  129. .rollover1 {height: 100px; width: 72px; overflow: auto; background: url(http://i11.photobucket.com/albums/a178/Travis1919/mattsliceddone.jpg) top left no-repeat; display: block;}
  130. .rollover1:hover {background-position: bottom left;}
  131. marquee { z-index:8; }
  132. table div, span, td td td, table div div { visibility:hidden !important; }
  133. .bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a, .bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}
  134.  
  135. .bbzDiv {content:"Overlay Generator beta";}
  136. </style>
  137. <div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>
  138.  
  139.  
  140. </td></tr></table></td></tr></table></td></tr></table></div>
  141.  
  142. <div class="bbzContainer">
  143.  
  144. <div class="div3">
  145. <div class="rollover1">
  146. <a href="http://www.myspace.com/fillatio" class="rollover1"></a>
  147. </div>
  148. </div>
  149.  
  150. <div class="div0">
  151. <font size=5></font>
  152.  
  153.  
  154.  
  155. </div>
  156.  
  157. <div class="div1">
  158. <font size=5></font>
  159.  
  160.  
  161.  
  162. <div class="div4">
  163. <center><object type="application/x-shockwave-flash" data="http://www.mp3asset.com/swf/mp3/mff-mixtape.swf?myid=1780614&mycolor=0x0&mycolor2=0x666666&f=3" height="185" width="300" align="middle">
  164.   <param name="movie" value="http://www.mp3asset.com/swf/mp3/mff-mixtape.swf?myid=1780614&mycolor=0x0&mycolor2=0x666666&f=3" />
  165.   <param name="allowScriptAccess" value="never" />
  166.   <param name="allowNetworking" value="internal" />
  167.   <param name="flashvars" value="path=2007/03/18" />
  168.   <param name="menu" value="false" />
  169.   <param name="quality" value="best" />
  170.   <param name="scale" value="noscale" />
  171.   <param name="bgcolor" value="#ffffff" />
  172.   <param name="wmode" value="transparent" />
  173. </object></center><br><br>
  174. </div>
  175.  
  176. <div class="div6">
  177. <a href=http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=94969352><img src="http://i11.photobucket.com/albums/a178/Travis1919/210210.png"border="none"></a><a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=94969352
  178. " style="position:absolute; top:60px; left:0px; height:10px; width:125px; z-index:2;"><right> </a>  </a>
  179. </div>
  180.  
  181. <div class="div7">
  182. <a href=http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=94969352><img src="http://i11.photobucket.com/albums/a178/Travis1919/210110.png"border="none"></a>
  183. </div>
  184.  
  185. <div class="div8">
  186. <a href= http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=94969352><img src="http://i11.photobucket.com/albums/a178/Travis1919/viewpics1-1.gif"border="none"></a>
  187. </div>
  188.  
  189. </div>
  190. <div class="div2">
  191.  
  192. <font size=4>traveenus.</font>
  193.  
  194. <br><br><br>
  195. <img src="http://img117.imageshack.us/img117/425/travvy9.jpg">
  196.  
  197. <div class="div5">
  198. <form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">  <input name="friendID" value="94969352" type="hidden"><center><textarea name="f_comments"style="color:333; font-family:arial; font-size:11px;width:150px;height:55px;text-align:right; border-color:333; background-color:ffffff; border-style:solid; border-width:1px;line-height:22px;scroll:no;letter-spacing:1px;"> i spit hott fire. </textarea></center><center><input type="submit"value="send that shit, yo."style="color:333;font-size:10px;font-arial:large fonts;text-transform:lowercase;letter-spacing:1px;height:20px; width:150px;background-color:999999; border-color:333; border-style:solid; border-width:0.1em; line-height:11px;"></input></form></center>
  199.  
  200. </div>
  201.  
  202.  
  203. </div>
  204.  
  205. <div class="bbzsc"><table><tr><td><table><tr><td><table><tr><td>
  206.  
ill owe whoever gets this code to work a cookie, haha :)
Apr 2 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.