Div help, how to put a scroll box in div Options

[yuffiehx]

okay i want a div in a div you see...

CODE

<div class="YOUR DIV CLASS">
TEXT TEXT TEXT
<div style="width:###px; height:###px; overflow:auto;">
TEXT WITH A SCROLLBAR HERE
</div>
TEXT TEXT TEXT
</div>

something like that but the dive code i use for the main square code is like this

CODE

<div class="content" style="position: absolute; width:400; height:450; z-index:1; left:405; top:50; backgroundcolor: D6D6D6; overflow: auto; border-color: 000000; border-style: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">

so everytime i try to put a div or scroll box thing it just makes nothing except space of how much
the square should look like...

can anyone help me please?

this is the code i use to hide my layout...


i'm sorry for the trouble :d

[Nickfury]

not sure how to debug your current situation, id suggest just using

CODE

<div id="container">
<div id="content">
text
</div>
</div>

<style type="text/css">
.container { attributes; }
.content { attributes; overflow:auto; }
</style>

[yuffiehx]

if i use this how would i be able to change the box size ect.? :]
thank you by the way

[Nickfury]

CODE

<div class="container">
text
<div class="content">
text
</div>
</div>

<style>
.container {
position: absolute;
width:400;
height:450;
z-index:1;
left:305px;
top:200px;
background-color: FF0000;
border-color: 000000;
border-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
.content {
width:380;
height:350;
background-color: D6D6D6;
border-color: 000000;
border-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
overflow:auto;
margin: 10px;
}
</style>

Reason for edit: Please use [codebox] tags instead of [code] tags when posting long codes. - Mike

[Mickey]

The codes you first posted should work fine. You just need to make sure you have enough content inside the second DIV to make the scrollbar appear.

[Nickfury]

just relized u were using myspace, u cant use div id, u have to keep it at div class

[MoneyIsDaMotive]

mike, can i show them the blog....
maybe try a new style sheet?

[yuffiehx]

it still doesn't work sorry ^^;;
and ummm the code i have doesn't work :d
i put text in it and it doesn't show and it isn't the same color as the background

[yuffiehx]

about me

CODE

<div class="content" style="position: absolute; width:400; height:450; z-index:1; left:405; top:50; backgroundcolor: D6D6D6; overflow: auto; border-color: 000000; border-style: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">

my text here

<div style="width:152px;height:96px;overflow:auto;border-width:2px;border-color:7ec1a2;border-style:dotted;">

inner box

</div>


</div>



<div class="bg" style="position: absolute; left:0px; top:0px; width:1004px; height:577px; overflow: hidden;">

<img src="http://i29.tinypic.com/213mdj7.png" width="1004" height="577" border="0" alt="" usemap="#layout_Map" />
<map name="layout_Map">
<area shape="rect" alt="" coords="859,369,948,463" href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnN1c2hpLWJsb2cuY28ubnIv" />
<area shape="rect" alt="" coords="161,58,365,492" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=485504676" />
<area shape="rect" alt="" coords="904,291,954,332" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=485504676" />
<area shape="rect" alt="" coords="852,207,901,248" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZVYzJmZyaWVuZElEPTQ4NTUwNDY3Ng==" />
<area shape="rect" alt="" coords="904,124,957,166" href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTQ4NTUwNDY3Ng==" />
<area shape="rect" alt="" coords="845,33,895,77" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" />
</map>
</div>

i'd like to meet

CODE

<style>
.{text and links properties}
body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited {color:black; color:000 !important; font-size:7pt; font-weight:normal; font-family:century gothic; }

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:94b8cb; font-size:7pt; font-weight:normal; font-family:century gothic; }

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:ffc9c9; font-size:7pt; font-weight:normal; font-family:century gothic; letter-spacing:0px; text-decoration:none !important;}

.{textarea properties}
textarea{ color:black; font-size:5pt; font-weight:normal; font-family:tahoma; text-transform:uppercase; width:430px; height:50px; letter-spacing:5px;}

.{image properties}
img {border:0px;}
a:img {border:none;}
a.img:hover{border:none;}

.orangetext15, .whitetext12, .btext, .redtext, .redbtext, .nametext{visibility:hidden;}

b{ color:e7abab; font-size:7pt; font-weight:bold; font-family:tahoma;}

i{ color:abcee7; font-size:7pt; font-weight:normal; font-family:tahoma; }

u{ color:000; font-size:7pt; font-weight:normal; font-family:tahoma; border-bottom:1px dashed; border-bottom-color:ffd9d9;}

small{color:000; font-size:8px; font-weight:normal; font-family:small fonts; text-decoration:none;}

big{font-family:Segoe Ui; font-size:18px; line-height:23px; color:ffc3c3; font-weight:normal; }

a.linkk{font-family:arial; font-size:18px; line-height:23px; color:C3C3C3; font-weight:normal; letter-spacing:-2px; }

a.linkk:hover{font-family:arial; font-size:18px; line-height:23px; color:000000; font-weight:normal; letter-spacing:-2; }



</style>


<style>
body{
background-color:ffff;
background-image:url(http://i27.tinypic.com/24v5mkj.png);
background-position:top left;
background-repeat:repeat;
background-attachment:scroll;
overflow:hidden;}
</style>

<style>
.n{ HIDE STUFF }
.userProfiledetail, .userProfileURL, .userProfileSchool,
.interestsAndDetails, .friendsComments,.extendedNetwork,
.latestBlogEntry, .friendSpace, .orangetext15, .navigationbar, .profileInfo, .contacttable { display:none;}
a.text, table div font a, table div div {visibility:hidden;}
table tr td div font {display: none;}
body div table td form {display:none!important;}
table, td, tr{ background-color:transparent;}
object, embed{ width:0px; height:0px;}
body div td div div select {width:0px !important;}
</style>

all my coding ^^;;

Reason for edit: Please use [codebox] tags instead of [code] tags when posting long codes. - Mike

[MoneyIsDaMotive]

okay mike,
maybe this will help you.
a div tut a made

here.

[Mickey]

Replace your Who I'd Like To Meet codes with this:

CODE

<style>
.{text and links properties}
body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited {color:black; color:000 !important; font-size:7pt; font-weight:normal; font-family:century gothic; }

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:94b8cb; font-size:7pt; font-weight:normal; font-family:century gothic; }

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:ffc9c9; font-size:7pt; font-weight:normal; font-family:century gothic; letter-spacing:0px; text-decoration:none !important;}

.{textarea properties}
textarea{ color:black; font-size:5pt; font-weight:normal; font-family:tahoma; text-transform:uppercase; width:430px; height:50px; letter-spacing:5px;}

.{image properties}
img {border:0px;}
a:img {border:none;}
a.img:hover{border:none;}

.orangetext15, .whitetext12, .btext, .redtext, .redbtext, .nametext{visibility:hidden;}

b{ color:e7abab; font-size:7pt; font-weight:bold; font-family:tahoma;}

i{ color:abcee7; font-size:7pt; font-weight:normal; font-family:tahoma; }

u{ color:000; font-size:7pt; font-weight:normal; font-family:tahoma; border-bottom:1px dashed; border-bottom-color:ffd9d9;}

small{color:000; font-size:8px; font-weight:normal; font-family:small fonts; text-decoration:none;}

big{font-family:Segoe Ui; font-size:18px; line-height:23px; color:ffc3c3; font-weight:normal; }

a.linkk{font-family:arial; font-size:18px; line-height:23px; color:C3C3C3; font-weight:normal; letter-spacing:-2px; }

a.linkk:hover{font-family:arial; font-size:18px; line-height:23px; color:000000; font-weight:normal; letter-spacing:-2; }



</style>


<style>
body{
background-color:ffff;
background-image:url(http://i27.tinypic.com/24v5mkj.png);
background-position:top left;
background-repeat:repeat;
background-attachment:scroll;
overflow:hidden;}
</style>

<style>
.n{ HIDE STUFF }
.userProfiledetail, .userProfileURL, .userProfileSchool,
.interestsAndDetails, .friendsComments,.extendedNetwork,
.latestBlogEntry, .friendSpace, .orangetext15, .navigationbar, .profileInfo, .contacttable { display:none;}
a.text, table div font a, table div div {visibility:hidden;}
.blurbs div div {visibility:visible!important;}
table tr td div font {display: none;}
body div table td form {display:none!important;}
table, td, tr{ background-color:transparent;}
object, embed{ width:0px; height:0px;}
body div td div div select {width:0px !important;}
</style>

That should make your second DIV scrollbox appear.

[yuffiehx]

YAY! thank you for the help it worked! <3

may i ask what was the problem in the first place? ^^