having issues positioning a divrollover in another div.

[travis1919]

alright. i have been having this issue for over two weeks now and its driving me crazy! i have tried three or four different styles of divrollovers and they all do the same thing. which is no matter where i put the margin-left and margin-top they get squished to the far left of the div i'm trying to put it in. (or any other div, i tried them all just to see). if i then change the margins to the extreme the other way the rollover doesn't budge.

 

i've decided to put in my entire code for anyone that can help mes benefit. so thank you in advance.

 

bbz Overlay Model Generator v0.5
bbzSpace dot com
</style>

<style type="text/css">
body {background-color:black; background-image:none;}
td, .text, div, input {color:Black !important;}
a {color:blue !important;} img {border:0px;}
table, tr, td {background:transparent; border:0px;}
img, .contactTable { display:none; }
.bbzContainer img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .bbzsc a { visibility:hidden; }
marquee { visibility:visible !important; }

.bbzComment { This is where you control the position of the player. }
table table embed {display:block; width:202px; height:35px; position:absolute; top:0px; left:0px; visibility:visible;}
table table table embed, .bbzContainer div embed {position:static !important; width:auto; height:auto; }
.text, table table table table a,
table table table table div,table table table table div a {visibility:visible;}
.bbzComment { You selected to hide comments. }
.bbzsc { display:none; }
.text, td.text td.text table, .contactTable, .lightbluetext8 {display:none;}
table table, table table td {padding:0px; height:0px;}

.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:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:150px; text-align:center;
visibility:visible;}

.div0 {
background-image:url(http://i11.photobucket.com/albums/a178/Travis1919/4.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:690px; text-align:center;
visibility:visible;}

.div4 {
background-color:; color:000000;
border: ; border-color:;
width:350px; height:213px; overflow:hidden;
position:absolute; z-index:2; left:18%; top:-112%;
margin-left:-125px; margin-top:455px; text-align:center;
visibility:visible;}

.div5 {
background-color:; color:000000;
border: ; border-color:;
width:150px; height:100px; overflow:hidden;
position:absolute; z-index:2; left:74%; top:-40%;
margin-left:-125px; margin-top:455px; text-align:center;
visibility:visible;}

.div6 {
background-color:; color:000000;
border:solid ; border-color:333; border-width:1px;
width:210px; height:210px; overflow:hidden;
position:absolute; z-index:2; left:79%; top:-75%;
margin-left:-125px; margin-top:455px; text-align:center;
visibility:visible;}

.div7 {
background-color:; color:000000;
border: solid ; border-width:1px; border-color:333;
width:210px; height:110px; overflow:hidden;
position:absolute; z-index:2; left:79%; top:-112%;
margin-left:-125px; margin-top:455px; text-align:center;
visibility:visible;}

.div8 {
background-color:; color:000000;
border: solid ; border-width:1px; border-color:333;
width:275px; height:144px; overflow:hidden;
position:absolute; z-index:2; left:25%; top:-59%;
margin-left:-125px; margin-top:455px; text-align:center;
visibility:visible;}


.div1 {

background-image:url(http://i11.photobucket.com/albums/a178/Travis1919/Florida-Fun-Spring-Break-01.jpg);
background-position:center center;
background-repeat:repeat;
background-attachent:scroll;
background-color:silver; color:Black;
border:2px solid; border-color:silver;
width:580px; height:400px; overflow:hidden;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:270px; text-align:center;
visibility:visible;}


.div2 {

background-image:url(http://i11.photobucket.com/albums/a178/Travis1919/Florida-Fun-Spring-Break-01.jpg);
background-position:right;
background-repeat:no repeat;
background-attachent:;

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

.divrollover1 {width:72px; height:100px; overflow:none;
position:absolute; z-index:5; 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;}
marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidden !important; }
.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;}

.bbzDiv {content:"Overlay Generator beta";}
</style>
<div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>



</td></tr></table></td></tr></table></td></tr></table></div>

<div class="bbzContainer">

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

<div class="div0">
<font size=5></font>



</div>

<div class="div1">
<font size=5></font>



<div class="div4">
<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">
<param name="movie" value="http://www.mp3asset.com/swf/mp3/mff-mixtape.swf?myid=1780614&mycolor=0x0&mycolor2=0x666666&f=3" />
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="flashvars" value="path=2007/03/18" />
<param name="menu" value="false" />
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
</object></center><br><br>
</div>

<div class="div6">
<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
" style="position:absolute; top:60px; left:0px; height:10px; width:125px; z-index:2;"><right> </a> </a>
</div>

<div class="div7">
<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>
</div>

<div class="div8">
<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>
</div>

</div>
<div class="div2">

<font size=4>traveenus.</font>

<br><br><br>
<img src="http://img117.imageshack.us/img117/425/travvy9.jpg">

<div class="div5">
<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>

</div>


</div>

<div class="bbzsc"><table><tr><td><table><tr><td><table><tr><td>

[emehrkay]

can you provide us with an example? some kind of basic image with colored rectangles?

[travis1919]

hmm i dont know if i can do that on this site? im new. ill try though. if it doesnt work ill describe it. its a picture that was created in photoshop with a splice. the top half of the picture is a person, then the bottom half has another picture with text on it as well. ill try and upload the picture...

 

[emehrkay]

i still dont understand what you are trying to do

 

are you trying to put the 'raechele' div on top of the picture div?

[travis1919]

ha sorry. well i want it to be just the picture of her whithout the hover. then when you hover over her picture the bottom half of the picture shows up with her name.

 

i actually have that part working fine. its just the positioning of the picture is my problem. like i want it in div3 with is 800wx100h but no mater where i move the margins it is stuck in the far far left of that div.

[emehrkay]

absolute positioning sucks, but if you must use it make the parent container position: realitive.

 

are you trying to center the pic div? if so do

 

margin-left: auto;

margin-right: auto;

width: whatever px;

 

and get rid of the positioning