Help, Div layout Options

[momo9041]

Ok i designed this out but i need help putting contect boxes over the pictures.but i want the pictures to be seen when i put the content boxes over them.can you help?


Heres a picture of my design

[xklynn9x]

couldn't you just create a div layer on top of the pictures and put links in it? like this. and just edit it to the specifications that you want?

CODE

<div style="position: absolute; left:783px; top:85px; width:75px; height:35px; overflow: auto; background-color:transparent;">

<a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=FRIENDID" class="add"></a>
</div>


<div style="position: absolute; left:825px; top:130px; width:66px; height:30px; overflow: auto; background-color:transparent;">

<a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&amp;friendID=FRIENDID" class="msg"></a>
</div>

<div style="position: absolute; left:880px; top:160px; width:70px; height:29px; overflow: auto; background-color:transparent;">

<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=FRIENDID&MyToken=951b28c8-9940-479f-8a37-8af5119081d4" class="comment"></a>

<style>

a.msg {
width: 66px;
  height: 30px;
  background-image: url();
background-repeat: no-repeat;
  }

a.msg:hover {
  background-image: url();
  }




a.add {
width: 75px;
  height: 35px;
  background-image: url();
background-repeat: no-repeat;
  }

a.add:hover {
  background-image: url();
  }





a.comment {
width: 70px;
  height: 29px;
  background-image: url();
background-repeat: no-repeat;
  }

a.comment:hover {
  background-image: url();
  }



</style>

</div>

[momo9041]

no really what i was looking for.maybe like a scroll box that is transparent.so you can see the picture

[freeflow]

First thumb your image please:

CODE

[thumb]img[/thumb]

Secondly if you use a normal div code, (if you are planning to use a div layout) they automatically are transparents unless you change it. Read here.

[momo9041]

ok sorry you guys arent getting my Q so heres the codes so maybe you can help me out better or understand better

About me

CODE

.. begin code provided by createblog.com -->
<style>
{sets the default style for the body, table data, list data, divisions and text areas}
{ body, well you know what that is}
{ div, p, and xmp are classes}
{ table, tr, td, and th are table properties}
body,div,p,xmp,table,tr,td,th{
background-color:FFFFFF;
scrollbar-arrow-color:FFFFFF;
scrollbar-track-color:FFFFFF;
scrollbar-shadow-color:CCFFFF;
scrollbar-face-color:FFFFFF;
scrollbar-highlight-color:FFFFFF;
scrollbar-darkshadow-color:FFFFFF;
scrollbar-3dlight-color:FFFFFF;
font-family:tahoma;
font-size:8pt;
color:000000;
border:none;}

input, select, textarea, .textfield, .button {
font-family:tahoma;
font-size:8pt;
color:000000;
border: 1px dashed 000000;
background-color:transparent;
text-align:center;}

{ TEXT DEFAULTS }
{class for the basic font for the page}
.text {
font-family:tahoma; font-size:8pt; line-height:10pt; color:000000;text-align:justify;}

b,i,strong,em,u,s {
font-family:tahoma; font-size:8pt;color:000000;font-weight:normal;cursor:help;}

{style for the number of friends you have.}
.redbtext{font-family:tahoma; font-size:8pt; line-height:10pt; color:000000;border:0px solid 000000; }

{repeat of the style for how many comments you have}
.redbtext{font-family:tahoma; font-size:8pt; line-height:10pt; color:000000; border:0px solid 000000;}

{"Blurbs", "About Me", "Who I’d like to Meet", "Friend Space", and "Friend’s Comments" style}
.orangetext15{font-family:courier new; text-transform:uppercase; font-size:11px; color:000000; font-weight:bold;background:000000; border:0px solid 000000;text-decoration:underline;}

{"General", "Music", "Movies", "Television", "Books", "Heros", "Status", "Here for", "Hometown", "Body Type", "Ethnicity", "Religion", "Sign", "Smoke/Drink", "Children", "Education", "Occupation", and "Income" title style}
.lightbluetext8{font-family:courier new; text-transform:uppercase; font-size:11px; color:000000; font-weight:bold;background:000000;border:0px solid 000000;text-align:right;}

{"In your extended network" style}
.blacktext12{font-family:courier new; font-size:16px; color:FFFF00; font-weight:bold;text-decoration: underline; text-transform:uppercase;}

{"Contacting", "Interests", "Details", and "Schools" title styling}
.whitetext12{font-family:courier new; font-size:16px; color:000000; font-weight:bold;text-decoration: underline; border:0px solid 000000; text-transform:uppercase;}

{Stylizing of your name above your picture; appears you can’t change the color of your name from here. Suggestions?}
.nametext{font-family:courier new; font-size:16px; color:000000; font-weight:bold;text-decoration:underline;border:none;text-transform:uppercase;}

{date stamp on comments}
.blacktext10{font-family:tahoma; font-size:8pt; line-height:10pt; color:000000;border:0px solid 000000;}

{This is how all anchor points will be displayed; anchor points appear before all links.}
a, a:link,a:active,a:visited{font-family:tahoma; font-size:8pt; line-height:10pt; color:000000;text-decoration:none}
a:hover{border-bottom:1px dashed 000000; font-family:tahoma; font-size:8pt; line-height:10pt; color:000000;}

{not used on profile}
a.readmail,a.readmail:link,a.readmail:active,a.readmail:visited{font-family:tahoma; font-size:8pt; line-height:10pt; text-decoration:none;color: 000000;}
a.readmail:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:000000;border-bottom:1px dashed 000000; }

{ "View all friends" and "invite more" link style}
a.redlink,a.redlink:link,a.redlink:active,a.redlink:visited{font-family:tahoma; font-size:8pt;font-weight:bold;color:000000;text-decoration:none}
a.redlink:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:000000;border-bottom:1px dashed 000000;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar,a.navbar:link,a.navbar:active,a.navbar:visited{font-family:tahoma; font-size:8pt;color:000000;text-decoration:none}
a.navbar:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:000000; border-bottom:1px dashed 000000;}

{ TEXT FORMATTING
DEFAULT FONT, SIZE 8, BLACK }
{ btext used for "latest blog entry" and "USERNAME has * friends"}
.btext, .itext{font-family:tahoma;  font-size:8pt; line-height:10pt; color:000000;border:0px solid 000000;}

{ DEFAULT FONT, SIZE 8, COLORS }
{unused on profile}
.bwtext, .rtext, .rbtext, .subhead{font-family:tahoma; color:000000;font-size:8pt;font-weight:bold;}

{ DEFAULT FONT, SIZE 8 }
{unused on profile}
.stext, .sbtext, .swtext{font-family:tahoma; color:000000;font-size:8pt;}

{ DEFAULT FONT, SIZE 11 }
{unused on profile}
.head11, .text11{font-family:tahoma; color:000000;font-size:8pt;}

{ TABLE COLORS }
{apparently unused?}
table.grey, tr.grey, td.grey{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid 000000;}
table.white, tr.white, td.white{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid 000000;}
table.accent_light, tr.accent_light,
td.accent_light{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid 000000;}
table.accent_dark, tr.accent_dark,
td.accent_dark{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid 000000;}
table.action, tr.action, td.action{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid 000000; }
table.blue_light, tr.blue_light,
td.blue_light{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid 000000;}
table.blue_dark, tr.blue_dark, td.blue_dark{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid 000000;}


{"Help" and "Signout" in very top in right corner}
a.man,a:link,a:active,a:visited{font-family:tahoma; font-size:8pt;color:000000; text-decoration:none;}
a:hover{font-family:tahoma;
font-size:8pt;color:000000; text-decoration:none;border-bottom:1px dashed 000000;}
</style>
.. end code provided by createblog.com -->

Who i'd like to meet

CODE

<div class="bg" style="position: absolute; left:100px; top:100px; width:1024px; height:768px; overflow: hidden;">
<img src="http://i135.photobucket.com/albums/q154/333_043/nnfg.jpg">
</div>

<div class="content" style="position: absolute; left:100px;  top:400px; width:270px; height:300%; overflow: visible;hidden"><center>
lalalalala this is your content!fdafafsafasfaadsdfsfsdfsfsf
</div>

[freeflow]

You asked how to add content boxes but make the pictures still visible. We told you how.. you did it.

CODE

<div class="content" style="position: absolute; left:100px;  top:400px; width:270px; height:300%; overflow: visible;hidden"><center>
lalalalala this is your content!fdafafsafasfaadsdfsfsdfsfsf
</div>

Is the code you use. You need to position the text. First the height needs to be in px not %. Then you messed up. You put overflow: visible hidden; You need remove all of that. Just end the div after height: 300px.

[momo9041]

didnt work !! i've tryed every thing and nothing works.i need a code. and you guys are giveing me the same thing over and over. i know you trying to help and all but it does not work.

You asked how to add content boxes but make the pictures still visible. We told you how.. you did it.

CODE

<div class="content" style="position: absolute; left:100px;  top:400px; width:270px; height:300%; overflow: visible;hidden"><center>
lalalalala this is your content!fdafafsafasfaadsdfsfsdfsfsf
</div>

Is the code you use. You need to position the text. First the height needs to be in px not %. Then you messed up. You put overflow: visible hidden; You need remove all of that. Just end the div after height: 300px.

ok i did what you said and it took out the hole picture.
and for your info i got this DIV layout version 1.0 from you people so i didnt mess up.they need to get there stuff traitend out because none of there codes work

[freeflow]

First off don't seriously start that. I'm not trying to be rude but obviously that div tutorial has helped many. Before you try to blame it on us you should try checking if you did it right. Which you didn't. So don't start talking trash on us. Everyone makes mistakes so I don't see why its so hard for you to understand that you did make one.

I'm not trying to be rude I'm just stating.

The reason it covers part of your image is because you set the background to white. In this part of your code:

CODE

body,div,p,xmp,table,tr,td,th{
background-color:FFFFFF;
scrollbar-arrow-color:FFFFFF;
scrollbar-track-color:FFFFFF;
scrollbar-shadow-color:CCFFFF;
scrollbar-face-color:FFFFFF;
scrollbar-highlight-color:FFFFFF;
scrollbar-darkshadow-color:FFFFFF;
scrollbar-3dlight-color:FFFFFF;
font-family:tahoma;
font-size:8pt;
color:000000;
border:none;}

You set the div background to white. I suggest you remove the word div ( with the comma behind it) to fix your problem.

[momo9041]

First off don't seriously start that. I'm not trying to be rude but obviously that div tutorial has helped many. Before you try to blame it on us you should try checking if you did it right. Which you didn't. So don't start talking trash on us. Everyone makes mistakes so I don't see why its so hard for you to understand that you did make one.

I'm not trying to be rude I'm just stating.

The reason it covers part of your image is because you set the background to white. In this part of your code:

CODE

body,div,p,xmp,table,tr,td,th{
background-color:FFFFFF;
scrollbar-arrow-color:FFFFFF;
scrollbar-track-color:FFFFFF;
scrollbar-shadow-color:CCFFFF;
scrollbar-face-color:FFFFFF;
scrollbar-highlight-color:FFFFFF;
scrollbar-darkshadow-color:FFFFFF;
scrollbar-3dlight-color:FFFFFF;
font-family:tahoma;
font-size:8pt;
color:000000;
border:none;}

You set the div background to white. I suggest you remove the word div ( with the comma behind it) to fix your problem.

thanks. and i'm only acting this way because seems like all of you mods are being rude to me.and i know there not trying to but it gets on my nerves.and i wasnt trash talking so please dont asume.i was just telling you were i got it.

[freeflow]

I know where you got it because I know the codes. ( and because they have a few errors in them that are noticeable ) Trust me no one is trying to be rude , if it comes out that way don't think of it that way.

[momo9041]

ok nother problem

i did what you said but know i'm haveing problems putting the words in the right position.also i dont know how to make the content boxes scroll.

I know where you got it because I know the codes. ( and because they have a few errors in them that are noticeable ) Trust me no one is trying to be rude , if it comes out that way don't think of it that way.

sorry lately i've been of to a bad start.

[freeflow]

Ok where are you trying to get the box? What spot?
Basically what you will do is make the left number higher to move the text more to the right and lower to move more to the left. Then you will make the top number lower to move higher up and higher to move farther down the page.

To make the textbox scroll add overflow:auto; to your div before the ">

[momo9041]

Ok where are you trying to get the box? What spot?
Basically what you will do is make the left number higher to move the text more to the right and lower to move more to the left. Then you will make the top number lower to move higher up and higher to move farther down the page.

To make the textbox scroll add overflow:auto; to your div before the ">

o just over the pictures of an cafe.and thanks