PDA

View Full Version : How do you get a scroll bar on the div layer

dizzydolphin
03-24-2004, 09:41 AM
Is that possible?
acsinclair
03-24-2004, 09:52 AM
Set Overflow to Auto.

Hugs,
Erica
dizzydolphin
03-24-2004, 09:56 AM
<div id=layer1 style="position:absolute; top:200; left:300; width:400; height:300; z-index:1; padding:5px; border: #000000 0px solid; background-color:#29AEF3">




</div>

there isnt overflow there
acsinclair
03-24-2004, 10:03 AM
In your external Style Sheet place something like this:

.scrollbar {
padding: 5px;
overflow: auto; /*COULD ALSO BE SCROLL*/
position: absolute;
width: 400px;
top: 200px;
bottom: 300px;
}


Then in your html file:

<div class="scrollbar"></div>

Hugs,
Erica
dizzydolphin
03-24-2004, 10:08 AM
i have this in my html editor



<html>

<STYLE>
<!--
body {
SCROLLBAR-ARROW-COLOR: #FFFFFF;
SCROLLBAR-BASE-COLOR: #29AEF3;
SCROLLBAR-TRACK-COLOR: #29AEF3;
}
.scrollbar {
padding: 5px;
overflow: scroll;
position: absolute;
width: 400px;
top: 200px;
bottom: 300px;
}

-->
</STYLE>
<BODY TEXT="#FFFFFF" BGColor="#FFFFC0" LINK="#FFFFFF" ALINK="#FFFFFF" VLINK="#FFFFFF" BACKGROUND="http://img6.photobucket.com/albums/v16/lemonglitter/LAYOUT1.jpg">

<div id=layer1 style="position:absolute; top:200; left:300; width:400; height:300; z-index:1; padding:5px; border: #000000 0px solid; background-color:#29AEF3"><div class="scrollbar">





</div>
</div>




</body>
</html>



but the scroll bar isnt in the right place :(
acsinclair
03-24-2004, 10:20 AM
I bet you are using either FP or DW right? First, think of Content & Style as two completely different things. Use the stylesheet to control the entire style of the page & how things look...and HTML to control the content. Kinda like a sandwich.

So the HTML would look like:

I have posted a live example of this code here:

CODED EXAMPLE (http://www.txgraphics.net/test/testing88.htm)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="testing88.css" type="text/css">
</head>

<body>

<div class="scrollbar">
<p>Here is the content that you want to scroll. If you add enough info to this box
it should scoll. What does it look like now? Has it started scrolling yet?
When will it scroll? </p>
<p>Here is the content that you want to scroll. If you add enough info to this
box it should scoll. What does it look like now? Has it started scrolling
yet? When will it scroll? </p>
<p>Here is the content that you want to scroll. If you add enough info to this
box it should scoll. What does it look like now? Has it started scrolling
yet? When will it scroll? </p>
<p>Here is the content that you want to scroll. If you add enough info to this
box it should scoll. What does it look like now? Has it started scrolling
yet? When will it scroll? </p>
<p>Here is the content that you want to scroll. If you add enough info to this
box it should scoll. What does it look like now? Has it started scrolling
yet? When will it scroll? </p>
<p>Here is the content that you want to scroll. If you add enough info to this
box it should scoll. What does it look like now? Has it started scrolling
yet? When will it scroll? </p>
<p>&nbsp;</p>
</div>
</body>
</html>




And the CSS would look like:


.scrollbar {
padding: 5px;
overflow: auto; /*COULD ALSO BE SCROLL*/
position: absolute;
width: 400px;
height: 300px;
top: 200px;
border: #000000 0px solid;
background-color:#29AEF3
}


Usually WYSIWYG editors add lots of unnecessary code. It's simpler to do it by hand. To change the position of the scrolling layer, just play with the values of top (you can also add left, right, & bottom).

Hugs,
Erica

EDIT:
One More thing...the position like Top, Left, Right, & Bottom is how many pixels from each. Absolute Positioning can be tough on some browsers though...so be sure to check your design at several resolutions in several browsers.

CODED EXAMPLE (http://www.txgraphics.net/test/testing88.htm)
acsinclair
03-24-2004, 10:23 AM
One More thing...the position like Top, Left, Right, & Bottom is how many pixels from each. Absolute Positioning can be tough on some browsers though...so be sure to check your design at several resolutions in several browsers.

CODED EXAMPLE (http://www.txgraphics.net/test/testing88.htm)
dizzydolphin
03-24-2004, 10:28 AM
That has sorted my problem
thanx so much for helping me
emma xxxxxxxxxxxxxx
acsinclair
03-24-2004, 10:40 AM
Oh...and I updated the example to include your site image & stuff. I didn't see that in your code at first :)

Hugs,
Erica
dizzydolphin
03-24-2004, 10:44 AM
cool
thanx for your time
acsinclair
03-24-2004, 10:52 AM
My Pleasure :)

Hugs,
Erica
dizzydolphin
03-24-2004, 11:28 AM
one more thing







<html>
<head>
<title>The Gift</title>
<style> .scrollbar {
SCROLLBAR-FACE-COLOR: #29AEF3;

SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;

SCROLLBAR-SHADOW-COLOR: #FFFFFF;

SCROLLBAR-3DLIGHT-COLOR: #29AEF3;

SCROLLBAR-ARROW-COLOR: #FFFFFF;

SCROLLBAR-TRACK-COLOR: #29AEF3;

SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;

padding: 5px;
overflow: auto;
position: absolute;
width: 400px;
height: 300px;
top: 200px;
left: 300px;
border: #FFFFFF 0px solid;
background-color:#29AEF3
}

BODY TEXT="#FFFFFF" LINK="#00CCFF" ALINK="#00CCFF" VLINK="#FFFFFF"
</style>

</head>

<body>

<div class="scrollbar">
<font color=#FFFFFF><font face="arial"><font size="1"></font>
</div>

</body>
</html>




thats my htm and i wanna know how to make http://tooclose.sphosting.com/images/LAYO.jpg mu background
please help
acsinclair
03-24-2004, 04:57 PM
Dizzy,

I updated the example page with the background you wanted.

Hugs,
Erica