Help with picture in div overlay, div overlay Options

[djdaveoc]

I have this code in my about me:

<div class="bg" style="position: absolute; left:500px; top:500px; width:500px; height:500px; overflow: hidden;">
<img src="http://i47.photobucket.com/albums/f155/djdaveoc/business11.jpg">
</div>

I have a lot of other code in there too, but what I need to know is why this div doesn't show on my page. I'm just trying to place a photo from photobucket.com onto my page and play around with the coordinates for positioning. Am I missing some code that I need besides this? Thanks.

My page is myspace.com/davidpoggi

[stay infinite]

What are you trying to do? Also to put up images its probably better to upload them to imageshack.us on photobucket they usually resize them so its better to use imageshack.

[FoxLucky]

Try putting
visibility="visible"
style="position:absolute; z-index:2pt; top:300px; left:200px; ETC"

[djdaveoc]

I'm just trying to put a picture in a div overlay and be able to move it around on my page. I used to do it but erased all my custom code and forgot how to get a picture to show up. I know how to resize the area or move the coordinates once I just have the code right to get the picture to show in a small div on my page. If I remember correctly, I just had some code in my "about me" and that's all I needed. Please help if you can. Thank you.

Where would I put that lucky? Can you show me the full code for the div that you think would work? Thanks.

[freeflow]

Post your entire layout code. You add it in the part of the code she stated. (Aka the second line :])

[djdaveoc]

Here is the code for the div again.

<div class="bg" style="position: absolute; left:500px; top:500px; width:500px; height:500px; overflow: hidden;">
<img src="http://i47.photobucket.com/albums/f155/djdaveoc/business11.jpg">
</div>

Please repost all this code with the part I need to add, added into the correct place. I still don't understand based on your description. Sorry Toyo but thank for very much for helping. You too lucky.

[clarity]

^ We need to see ALL your codes so we can help ya, so please post them.

[djdaveoc]

Here is my "about me"

<style>.ORANGETEXT15{DISPLAY:NONE;VISIBILITY:HIDDEN;}
.NAMETEXT{DISPLAY:NONE;VISIBILITY:HIDDEN;}
.BLACKTEXT12{DISPLAY:NONE;VISIBILITY:HIDDEN;}
.WHITETEXT12{DISPLAY:NONE;VISIBILITY:HIDDEN;}
.lightbluetext8{DISPLAY:NONE;VISIBILITY:HIDDEN;}
.btext{DISPLAY:NONE;VISIBILITY:HIDDEN;}
.redlink{DISPLAY:NONE;VISIBILITY:HIDDEN;}
.redtext{DISPLAY:NONE;VISIBILITY:HIDDEN;}
.blacktext10{DISPLAY:NONE;VISIBILITY:HIDDEN;}
.orangetext15{DISPLAY:NONE;VISIBILITY:HIDDEN;}
</style>

<style
type="text/css">
table tbody td table tbody tr td.text table {visibility:hidden;}
table tbody td table tbody tr td.text table table, table tbody td table
tbody tr td.text table table tbody td.text {visibility:visible;}
</style>

<style type="text/css">
table table table { width: 300px; }
table table td.text table, table table td.text table td { width: 100%; }
</style>

<style type="text/css">table table table table div {visibility:hidden;}div table table table table table div input, div a, td.text div {visibility:visible;}</style>

<br><table bordercolor="ffcc99" cellspacing="0" cellpadding="0" width="435" bgcolor="ffcc99" border="0"><tr><td><table bordercolor="000000" cellspacing="3" cellpadding="3" width="435" align="center" bgcolor="ffffff" border="0"> <tr> <td valign="top" align="left" width="435" bgcolor="ffffff" style="word-wrap:break-word"> <span class="orangetext15">About me:</span><br></style>

<style type="text/css">
table {float:left; padding-left:0; margin-left:0;}
table table table {margin-bottom:5px;}
table table table table {margin-bottom:0;}
</style>

<style>td td object {position:absolute; left:0px; top:-100px; display:block; width:228px; height:39px;}</style>

<style type="text/css">

table, td {
background-color:transparent;
border:none;
border-width:0;}

body {
background-color:000000;
background-image: url('http://i47.photobucket.com/albums/f155/djdaveoc/Extreme_Elegance_PC_Back.jpg');
background-repeat: no-repeat;
background-position: 570px 176px;}

</style>

<style type="text/css">

table table table table{border:0px}

table table table{ border-color:; border-style:solid ; border-width:0px; background-color:; filter:; opacity:; -moz-opacity:; background-image:url(http://); background-position:Top Left; background-repeat:repeat; } table table table table, table table table td{ border-style:none; }
table, tr, td{background-color:transparent; }

.nametext {
font-size:10pt;
color:FFFFFF;
font-weight:bold;
}

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{ color:FFFFFF ; font-size:10pt; font-weight:bold; font-style:bold; font-family:; }

a, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.redlink, a.redlink:visited{ color:FF0000; font-size:8pt; font-weight:bold; font-style:bold; font-family:; } a:hover, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{ color:; font-size:8pt; font-weight:none; font-style:none; font-family:; }

.orangetext15, .whitetext12, .btext, .redtext, .redbtext{ color:FF0000; font-size:8pt; font-weight:bold; font-style:normal; font-family:Arial, verdana, arial, sans-serif; }

.lightbluetext8{ color:; font-size:8pt; font-weight:bold; font-style:normal; font-family:Arial, verdana, arial, sans-serif; }

table table td.text table td.text table table table a {color: ;
}
table, tr, td { border: none; background-color: transparent; padding: 0; }

.blacktext12{color:;}

a.navbar{sans-serif;font-size:8pt; font-weight:none} a.navbar:link{color:;font-size:8pt; } a.navbar:active{color:;} a.navbar:visited{color:;} a.navbar:hover{color: ;}

</style>

<style>.contactTable {width:300px !important; height:150px !important;
padding:0px !important;background-image:url(http://i87.photobucket.com/albums/k156/jnds/contact_tables/baseball/angels.jpg);
background-attachment:scroll;
background-position:center center;
background-repeat:no-repeat;
background-color:transparent;}.contactTable table, table.contactTable td { padding:0px !important;border:0px;
background-color:transparent; background-image:none;}.contactTable a img {visibility:hidden; border:0px !important;}.contactTable a {display:block; height:28px; width:115px;}.contactTable .text {font-size:1px !important;}.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}</style>

<center>
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input type="hidden" name="friendID" value="37381214">
<textarea name="f_comments" cols="50" rows="10"></textarea><br>
<input type="submit" value="Type a message and click here."> <input type="reset" value="Click here to reset your comment text."></form><br>
</center>

<style type="text/css">
textarea {background-color:FFFFFF;
background-image:url(http://i47.photobucket.com/albums/f155/djdaveoc/la);
border-width:0px; border-style:solid;
border-color:000000; color: FF0000; font-family:;}
input {background-color: 000000; border-width:0px; border-style:solid; border-color:000000; color: FF0000; font-family:;}
</style>

<div class="bg" style="position: absolute; left:500px; top:500px; width:500px; height:500px; overflow: hidden;">
<img src="http://i47.photobucket.com/albums/f155/djdaveoc/business11.jpg">
</div>

Here is my "interests"

<style>
.div1 {
background-color:000000; color:FFFFFF;
border:0px solid; border-color:silver;
width:560px; height:180px; overflow:auto;
position:absolute; z-index:2; left:0%; top:0%;
margin-left:15px; margin-top:565px;
visibility:visible;}
</style>

<style>
.div2 {
background-color:000000; color:FFFFFF;
border:0px solid; border-color:FFFFFF;
width:390px; height:180px; overflow:auto;
position:absolute; z-index:2; left:0%; top:0%;
margin-left:200px; margin-top:210px;
visibility:visible;}
</style>

<style>
.div3 {
background-color:000000; color:FFFFFF;
border:0px solid; border-color:FFFFFF;
width:190px; height:150px; overflow:auto;
position:absolute; z-index:2; left:0%; top:0%;
margin-left:335px; margin-top:404px;
visibility:visible;}
</style>

Here is my "music"

<div class="div1">
This past week was pretty mellow. I got some work done and got to spend some time with friends and other other cool people. It's funny how the very little time is never enough. My parents are away in Italy for a couple weeks so I couldn't do anything for Mom. I worked last night in Buena Park and today I'm planning to get more work done of course and maybe see some friends. I'm going to get rid of my G6 within a few months and get a big truck to haul my gear around in. And maybe I'll move a little closer to work, which is down in Irvine. We'll see. I should be DJing some bars and clubs by sometime this summer. More to come.
</div>

<div class="div2">Marital status: Single<br>
Occupation: IT Helpdesk by day and DJ at night and on the weekends.<br>
Sign: Aquarius (Yes we're the bomb!)<br>
Hobbies: Working out, snowboarding, traveling, DJing, anything music related.<br>
Age: 31 going on 21 and proud of it.<br>
Current project/time killer: Getting my DJ business up and running and DJing every weekend.<br><br>
Scroll down to see the rest of my page.
</div>

<div class="div3">Recent accomplishments:<br><br>1. Working out almost daily. Lost about 28 pounds so far.<br><br>
2. Getting my business to a legit status within the last few weeks.
</div>

[freeflow]

Can you re-explain the problem. With the code you gave me
http://i47.photobucket.com/albums/f155/djd.../business11.jpg

image does show up on your page. Its on the far right.

[djdaveoc]

The picture for my business on the right side is actually my background. I also want to add other pictures below that and be able to position them using coordinates like 100px -200px etc. So I need the complete code for a simple picture div overlay. I just want to be able to put pictures all over my page and move them around. The code should be short if I remember right, like about a paragraph long.

[freeflow]

All divs are the same. I suggest you add z-indexes to all of yours. (giving each a diff number) but a div code is the same for image and text.

.divname{
position: absolute;
left: #px;
top: #px;
width: #px;
height: #px;
z-index: #;
}

(in style tags)

<div class="divname"><img src="blah"></div>

[djdaveoc]

Thanks, I'll try it in the morning. Does it matter what area I put the 2 parts of code? Thanks.

[freeflow]

First one - needs to be in style tags. It doesn't matter what section. I would usually say about me.
Second - About me, I'd like to meet. Doesn't matter.

[djdaveoc]

I appreciate everyone's help but I don't think anyone has understood so far. I need 100% of the exact code to use for the whole div. I know I can change the number of px to move the div around on the screen and set the width and height. Instead of telling me to add style tags, which I don't know how to do, just include it in the code you're giving me. I need everything since I'm not a web programmer and I know very little html and no other languages. I also don't know what a z index is or how to implement it into the code for the div. So that's why I need everything. Thank you all for trying. Here is the code I'm trying for the div, but nothing shows up. Maybe someone can just tell me what I'm missing. Thanks everyone.

I have this in my INTERESTS area:

<style>
.div3 {
position: absolute;
left: 15px;
top: 800px;
width: 500px;
height: 400px;
}
</style>

And I have this in my MUSIC area:

<div class="div3"><img src="http://i47.photobucket.com/albums/f155/djdaveoc/full_denon_djset1.jpg"></div>

Thanks again for the help. My page is myspace.com/davidpoggi

[freeflow]

Style tags :
<style type="text/css"> code </style>
When people say "insert between style tags" that means put what they give you where it says code.

A z-index, is a way of organizing your divs. You start off by giving your original div the z-index of 0. Then next 1. The next 2 . The following 3 and so on.

I suggest you read this full div tutorial so you understand how they work better, it may make this A LOT easier for you as well:
http://www.createblog.com/forums/index.php?showtopic=142922

[djdaveoc]

I guess I will try to go through that tutorial again. I'm sure I've seen it 50 times and it didn't answer my questions. The tutorials are not very helpful for people like me that don't know some web programming languages. It seems like they're written by people who know what they're doing, to people who somewhat know what they're doing.

I have this code in my INTERESTS area:

<style>
.div1 {
background-color:000000; color:FFFFFF;
border:0px solid; border-color:FFFFFF;
width:380px; height:250px; overflow:auto;
position:absolute; z-index:2; left:0%; top:0%;
margin-left:200px; margin-top:210px;
visibility:visible;}
</style>

<style>
.div2 {
background-color:000000; color:FFFFFF;
border:0px solid; border-color:FFFFFF;
width:280px; height:150px; overflow:auto;
position:absolute; z-index:2; left:0%; top:0%;
margin-left:335px; margin-top:460px;
visibility:visible;}
</style>

<style type="text/css">
.div3 {
position: absolute;
left: 15px;
top: 800px;
width: 500px;
height: 400px;
}
</style>

and this code in my MUSIC area:

<div class="div1">Whatup people? How goes it?<br> Quick note: I've cancelled text messaging and internet on my cell phone. Any text sent to me as of Tuesday afternoon on the 22nd won't be received. So if you need me, call me like a normal human being. Screw that whole pushing buttons for five minutes just to send 4 sentences. Memorial Day weekend is coming up. I'll hopefully be taking a 4-day weekend to do the usual thing in the usual place up in S.F. Anyone going to be in town hit me up.<br>I'm in the process of finding a new pad in south county so I can be near all the best venues. That will be taking up much of my rare free time over the next couple weeks.
</div>

<div class="div2">Recent accomplishments:<br><br>1. Working out and lost over 30 pounds in 2 months.<br><br>
2. Extreme Elegance is running.<br><br>3. Got my funk back. It's funny how a few words can change so much.
</div>

<div class="div3"><img src="http://i47.photobucket.com/albums/f155/djdaveoc/full_denon_djset1.jpg"></div>

Only div 1 and 2, which are text divs, are showing up on the page. I need someones help with the 3rd div. I'm just trying to get this picture to show up on my page. Then I can play around with the coordinates to move it to the exact position I'd like. Can anyone tell me what is wrong exactly with my code for div 3 that is not allowing this picture to show on my page?

[freeflow]

Just code div 3 like you did 1 and 2 so your consistant.

CODE

<style>
.div1 {
background-color:000000; color:FFFFFF;
border:0px solid; border-color:FFFFFF;
width:380px; height:250px; overflow:auto;
position:absolute; z-index:2; left:0%; top:0%;
margin-left:200px; margin-top:210px;
visibility:visible;}

.div2 {
background-color:000000; color:FFFFFF;
border:0px solid; border-color:FFFFFF;
width:280px; height:150px; overflow:auto;
position:absolute; z-index:2; left:0%; top:0%;
margin-left:335px; margin-top:460px;
visibility:visible;}

.div3 {
background-color:000000; color:FFFFFF;
border:0px solid; border-color:FFFFFF;
width:280px; height:150px; overflow:auto;
position:absolute; z-index:2; left:0%; top:0%;
margin-left:335px; margin-top:460px;
visibility:visible;}
</style>

Use that and just edit the positions of the div.

[djdaveoc]

Woo hoo! It worked! Thank you. Now I can add text divs or picture divs anywhere on my page, which is what I wanted.

Reason for edit: Thats great to hear. If you need this thread again PM ME - Toya (freeflow)