Forums > what is the significance of...

dreamsbecomereality

Sep 26 2008, 10:55 PM

step three in making a div/overlay layout? here's the code that i hav 4 that step.

CODE

 <div class="bg" style="position: absolute; left:0px; top:165px; width:320px; height:240px; overflow: hidden;">
<img src="<a href=" /><img src="http://img228.imageshack.us/img228/9761/basketballvl9.th.jpg" border="0" alt="Free Image Hosting at www.ImageShack.us" /></a><br /><br /><a href="http://www.msplinks.com/MDFodHRwOi8vaW1nNjA0LmltYWdlc2hhY2sudXMvY29udGVudC5waHA/cGFnZT1ibG9ncG9zdCZmaWxlcz1pbWcyMjgvOTc2MS9iYXNrZXRiYWxsdmw5LmpwZw==" title="QuickPost"><img src="http://imageshack.us/img/butansn.png" alt="QuickPost" border="0" /></a> Quickpost this image to Myspace, Digg, Facebook, and others!"&gt;
</div> 

9001

Sep 26 2008, 11:31 PM

CODE

Thats how it should look.

And it gives you a positionable background for your divs.

Anarchy

Sep 27 2008, 11:05 AM

Step three is for putting up the main/background image of your DIV layout. You can change its different attributes according to your liking. You can place as much images to construct your DIV layout as you can by repeating that code, as well, in case you want to slice up images and upload them separately.

dreamsbecomereality

Sep 27 2008, 01:45 PM

QUOTE(Anarchy @ Sep 27 2008, 11:05 AM)

Step three is for putting up the main/background image of your DIV layout. You can change its different attributes according to your liking. You can place as much images to construct your DIV layout as you can by repeating that code, as well, in case you want to slice up images and upload them separately.

ok so like, there r 2 backgrounds on a div then? because in step one i believe, you get 2 put up a background. so is step three 4 those little boxes that you put whatever u want n them? n also, on my layout rite now, i hav some yellow boxes in front of the background image (i made the boxes yellow i think). is that where some of my information will go? and the boxes are not all the same size. i think the boxes came up n step one when it asked if we wanted comments 2 show or not. n i said no so i put n a code that hid my whole profile...

Anarchy

Sep 27 2008, 02:01 PM

It's technically having an image inside a DIV, which is usually used to position it properly. So it's just one background, really. What you're calling the other background is the image that is placed inside it. That's actually the layout image, not the background image.

Yes, step three is for the little boxes where you can put whatever you want inside. Step three is basically step four, except step three is for the layout image while step four is for the content that you're putting OVER the layout image.

The yellow boxes should be where your information will go. They don't have to be all the same size, but you can have it that way if you like.

I don't really understand your last question, if that's a question. Do you mind clarifying?

dreamsbecomereality

Sep 27 2008, 08:35 PM

QUOTE(Anarchy @ Sep 27 2008, 02:01 PM)

It's technically having an image inside a DIV, which is usually used to position it properly. So it's just one background, really. What you're calling the other background is the image that is placed inside it. That's actually the layout image, not the background image.

Yes, step three is for the little boxes where you can put whatever you want inside. Step three is basically step four, except step three is for the layout image while step four is for the content that you're putting OVER the layout image.

The yellow boxes should be where your information will go. They don't have to be all the same size, but you can have it that way if you like.

I don't really understand your last question, if that's a question. Do you mind clarifying?

ok. so can i hav as many layout images as i want?

n yes, i want all the yellow boxes the same size sorta.

ok like n step one, that's how u hide the profile rite? well on my pg., after i decided i didn't want comments 2 show n i put n the code, nothing was on my page but 5 little boxes. there was one skinny one on the top left, then a bigger one under that, n one about the same size under it. then there was another skinny one on the right n a medium sized one on the right. i'm saying is that where u would put ur information n the layout image? n is it possible to stretch them out?

Anarchy

Sep 28 2008, 03:27 AM

Yes, you can have as much layout images as you want. If you want your yellow boxes to be the same size, please post your code so it's easier for me to help.

That code wasn't the one that added 5 little boxes. Those are what you call DIV scrollboxes. They're the same as for the layout image. It's used to place content on your page, so that's where you would put your information. By changing a DIV scrollbox's attributes, you can have it look how you want:

CODE

<div class="content" style="position: absolute; left:50%; margin-left:0px; top:0px; width:0px; height:0px; overflow: auto;"><center>
CONTENT HERE
</div>

To change its positioning, change the margin-left and the top pixels. To change its height and width, change the height and width pixels. It's basically replacing the 0's. Just don't mess with left:50%; because that helps to have your profile look right on other resolutions.

To add information to a DIV scrollbox, just replace the text that says CONTENT HERE with your information.

dreamsbecomereality

Sep 28 2008, 12:09 PM

QUOTE(Anarchy @ Sep 28 2008, 03:27 AM)

Yes, you can have as much layout images as you want. If you want your yellow boxes to be the same size, please post your code so it's easier for me to help.

That code wasn't the one that added 5 little boxes. Those are what you call DIV scrollboxes. They're the same as for the layout image. It's used to place content on your page, so that's where you would put your information. By changing a DIV scrollbox's attributes, you can have it look how you want:

CODE

<div class="content" style="position: absolute; left:50%; margin-left:0px; top:0px; width:0px; height:0px; overflow: auto;"><center>
CONTENT HERE
</div>

To change its positioning, change the margin-left and the top pixels. To change its height and width, change the height and width pixels. It's basically replacing the 0's. Just don't mess with left:50%; because that helps to have your profile look right on other resolutions.

To add information to a DIV scrollbox, just replace the text that says CONTENT HERE with your information.

ok. well here's my entire code. idk which part put the yellow boxes up though.

CODE

 <style>
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style>

<style>

body {
background-color: CC3300;
background-image: url("http://i282.photobucket.com/albums/kk243/superstarborn11/HSM3-1.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:FF9900;
scrollbar-track-color: FFFFFF;
scrollbar-shadow-color: 999966;
scrollbar-face-color:CC3300;
scrollbar-highlight-color:000000;
scrollbar-darkshadow-color:FF9900;
scrollbar-3dlight-color:CCCC99;}

table, tr, td {background-color: transparent; border: 2px; padding:2;}
table table {border: 2px;}
table table table table{border: 2px;}

{The actual modules}
table table table {border: 1px solid; border-color: 000000; background-color: FFCC33; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 14px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 14px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}  

 

{This is how all anchor points will be displayed; anchor points appear before all links.}  
a{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:12px; color: 000000; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}


{2 links in very top on the left, and the 13 links above your picture with make the navigation bar} 
a.navbar{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:1px; text-transform: uppercase;}  
a.navbar:link{font-family:arial; font-size:10px; color: FFCC00; font-weight:none;border:1px; text-transform: uppercase;}  
a.navbar:active{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:visited{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:hover{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:1px; text-transform: uppercase;}  

{Default Links}
a:link, a.man{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase; letter-spacing: 2px;}  
a:active{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase;}  
a:visited{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase;} 
a:hover{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase;} 

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:10px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }

</style>




<style>a.links:link, a.links:active, a.links:visited {font:bold 12pt Arial; color:FFFF00; letter-spacing:-2px;}
a.links:hover {font:bold 20pt Arial; color:FF3300; background-image:url("http://carondelet.net/Music/music%20notes.gif"); background-repeat:repeat; background-position:center; letter-spacing:-2px;}
</style>

<div style="position:absolute; top:250px; left:50%; margin-left:-350px; height:200px; width:200px;">
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0zNjgwMjkyMjU" class="links">PICS</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTM2ODAyOTIyNSZN
VRva2VuPWEwNjI5MTBhLTliNmItNGU4MS1iNTJmLTMwZTVlYmYxYTBjYw" class="links">COMMENT</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0zNjgwMjkyMjUmTXlUb2tlbj1lZWQ4NjAyNS1jYTBkLTRiOGQtYjM1OC1mMDVmZ
RiNzcyNjI" class="links">MESSAGE</a>
</div>


<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="1" width="1" style="width:1px; visibility:visible; height:1px;" border="0" data="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black_shuffle.xml&mywidth=1&myheight=1&file=http://www.myplaylist.org/loadplaylist.php?playlist=31763731">
  <param name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="internal" />
  <param name="movie" value="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black_shuffle.xml&mywidth=1&myheight=1&file=http://www.myplaylist.org/loadplaylist.php?playlist=31763731" />
  <param name="menu" value="false" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
</object>


<div class="bg" style="position: absolute; left:0px; top:165px; width:320px; height:240px; overflow: hidden;">
<img src="http://img228.imageshack.us/img228/9761/basketballvl9.th.jpg" border="0" />
</div> 

Anarchy

Sep 28 2008, 12:21 PM

If you want to remove the yellow stuff, look for this part in your codes:

CODE

{The actual modules}
table table table {border: 1px solid; border-color: 000000; background-color: FFCC33; }

Remove it and the yellow boxes should go away.

dreamsbecomereality

Sep 28 2008, 12:21 PM

QUOTE(dreamsbecomereality @ Sep 28 2008, 12:09 PM)

ok. well here's my entire code. idk which part put the yellow boxes up though.

CODE

 <style>
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style>

<style>

body {
background-color: CC3300;
background-image: url("http://i282.photobucket.com/albums/kk243/superstarborn11/HSM3-1.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:FF9900;
scrollbar-track-color: FFFFFF;
scrollbar-shadow-color: 999966;
scrollbar-face-color:CC3300;
scrollbar-highlight-color:000000;
scrollbar-darkshadow-color:FF9900;
scrollbar-3dlight-color:CCCC99;}

table, tr, td {background-color: transparent; border: 2px; padding:2;}
table table {border: 2px;}
table table table table{border: 2px;}

{The actual modules}
table table table {border: 1px solid; border-color: 000000; background-color: FFCC33; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 14px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 14px arial; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px;}  

 

{This is how all anchor points will be displayed; anchor points appear before all links.}  
a{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:12px; color: 000000; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:12px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
{2 links in very top on the left, and the 13 links above your picture with make the navigation bar} 
a.navbar{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:1px; text-transform: uppercase;}  
a.navbar:link{font-family:arial; font-size:10px; color: FFCC00; font-weight:none;border:1px; text-transform: uppercase;}  
a.navbar:active{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:visited{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:hover{font-family:arial; font-size:10px; color:FFCC00; font-weight:none;border:1px; text-transform: uppercase;}  

{Default Links}
a:link, a.man{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase; letter-spacing: 2px;}  
a:active{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase;}  
a:visited{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase;} 
a:hover{font-family:arial; font-size:11px; color:FFFFFF; font-weight:none;border:1px; text-transform: uppercase;} 

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:10px; color:000000; font-weight:none;border:0px; text-transform: uppercase; }

</style>
<style>a.links:link, a.links:active, a.links:visited {font:bold 12pt Arial; color:FFFF00; letter-spacing:-2px;}
a.links:hover {font:bold 20pt Arial; color:FF3300; background-image:url("http://carondelet.net/Music/music%20notes.gif"); background-repeat:repeat; background-position:center; letter-spacing:-2px;}
</style>

<div style="position:absolute; top:250px; left:50%; margin-left:-350px; height:200px; width:200px;">
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0zNjgwMjkyMjU" class="links">PICS</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTM2ODAyOTIyNSZN
VRva2VuPWEwNjI5MTBhLTliNmItNGU4MS1iNTJmLTMwZTVlYmYxYTBjYw" class="links">COMMENT</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0zNjgwMjkyMjUmTXlUb2tlbj1lZWQ4NjAyNS1jYTBkLTRiOGQtYjM1OC1mMDVmZ
RiNzcyNjI" class="links">MESSAGE</a>
</div>
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="1" width="1" style="width:1px; visibility:visible; height:1px;" border="0" data="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black_shuffle.xml&mywidth=1&myheight=1&file=http://www.myplaylist.org/loadplaylist.php?playlist=31763731">
  <param name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="internal" />
  <param name="movie" value="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black_shuffle.xml&mywidth=1&myheight=1&file=http://www.myplaylist.org/loadplaylist.php?playlist=31763731" />
  <param name="menu" value="false" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
</object>
<div class="bg" style="position: absolute; left:0px; top:165px; width:320px; height:240px; overflow: hidden;">
<img src="http://img228.imageshack.us/img228/9761/basketballvl9.th.jpg" border="0" />
</div> 

also, do u hav n e suggestions 4 the pixels on the content?

Anarchy

Sep 28 2008, 12:25 PM

Mind clarifying your question?

dreamsbecomereality

Sep 28 2008, 12:33 PM

QUOTE(Anarchy @ Sep 28 2008, 12:21 PM)

If you want to remove the yellow stuff, look for this part in your codes:

CODE

{The actual modules}
table table table {border: 1px solid; border-color: 000000; background-color: FFCC33; }

Remove it and the yellow boxes should go away.

ok so tell me again. the layout images r used 2 place content inside of them rite?

QUOTE(Anarchy @ Sep 28 2008, 12:25 PM)

Mind clarifying your question?

like the pixels 4 the content code u just gave me. i'm not sure where 2 start. like wat should i place in like the left or right or sumthing 2 make the content at least visible 4 now?

Anarchy

Sep 28 2008, 12:41 PM

Ah, that code. What you first need to do is put a lot of random text inside the DIV. Just for now, so you can clearly see where your DIV is going or what's happening to it. It should look like this:

CODE

Remember, it's just for now. Once you've positioned it to your liking, you can go ahead and change the words into your own information. What you first need to do is change the height and width pixels. That'll determine how big your DIV scrollbox will be. Then, start playing around with the margin-left and top pixels, which will determine where your DIV scrollbox will be.

dreamsbecomereality

Sep 28 2008, 12:46 PM

QUOTE(Anarchy @ Sep 28 2008, 12:41 PM)

Ah, that code. What you first need to do is put a lot of random text inside the DIV. Just for now, so you can clearly see where your DIV is going or what's happening to it. It should look like this:

CODE

Remember, it's just for now. Once you've positioned it to your liking, you can go ahead and change the words into your own information. What you first need to do is change the height and width pixels. That'll determine how big your DIV scrollbox will be. Then, start playing around with the margin-left and top pixels, which will determine where your DIV scrollbox will be.

ok and the content ends up on top of the layout image rite?

Anarchy

Sep 28 2008, 12:48 PM

It can end up anywhere you want it to be. If you wanted it over the layout image, sure. It depends on the amount of pixels you put in the code that I provided.

Anyway, do you mind not quoting my every post? It seems like I'm the only one helping you anyway. I'm sure you're talking to me. Plus, the codeboxes are causing the page to stretch a bit. Thanks!

dreamsbecomereality

Sep 28 2008, 12:57 PM

QUOTE(Anarchy @ Sep 28 2008, 12:48 PM)

It can end up anywhere you want it to be. If you wanted it over the layout image, sure. It depends on the amount of pixels you put in the code that I provided.

Anyway, do you mind not quoting my every post? It seems like I'm the only one helping you anyway. I'm sure you're talking to me. Plus, the codeboxes are causing the page to stretch a bit. Thanks!

ummmm... srry. well wat do u want me 2 do nstead of quoting u?

ok so if i didn't want a layout image i don't hav 2 hav 1 do i?

Anarchy

Sep 28 2008, 12:59 PM

Simply just post your reply by clicking on the Fast Reply or Add Reply button. You don't have to quote me every time you post an answer.

No, you don't need to.

dreamsbecomereality

Sep 28 2008, 01:03 PM

ok thnx! u've been such a help 2 me! i appreciate ur patience because i kno i ask a lot of ?s

. if i need n e thing else (which i probably will. lol), i'll b coming 2 u! thnx again Anarchy.

decaydancefbr

Sep 28 2008, 01:05 PM

TOPIC CLOSED

I wish I could do that, hahahaha.

jaeminnie

Sep 28 2008, 01:14 PM

Everything fixed? Topic closed and moved to MySpace Resolved. PM me if you need this reopened.