PDA

View Full Version : Dreamweaver MX Scroll Box Help


blksteeda
07-09-2007, 03:26 PM
Hey everyone, I'm trying to figure something out in Dreamweaver MX for my index page of my site

What I'm looking to do is place a scrolling window on my index page to place my text information inside. I've got the window in place and I thought everything looked great on my computer in IE6 but when viewing it on my GF's computer in IE6 as well, my scrolling window was shoved all the way over to the right. My resolution is 1920x1200 and she is running 1024x768. My site is designed to be 1024x768 and my site is not made to autostretch. This is the code that controls the position of the layer as well as the other attributes minus the text information:

div id="TextBox" style="position:absolute; left:0; top:350; width:900; height:175; z-index:1; overflow: scroll; background-color: #000000; layer-background-color: #000000; border: 1px none #000000; visibility: visible;"

Dreamweaver has "L" and "T" settings which are the "0" and "350" values I was using to push my box to the location I wanted it but it appears that's not going to do it. The left is currently set to 0 right now but did have it at 512 which caused it to be centered on my site but pushed it to the right on the other computer. Is this the hard way to create a scolling box or is there a way to anchor the box so it doesn't move?

Thanks
Gordon
charlesgan
07-09-2007, 04:34 PM
when in different resolution, the absolute path will not align it at the centre. As its using pixel counting.

use the div align="centre" ... replace the top and left thing.
blksteeda
07-10-2007, 07:57 AM
Thanks, I'll give that a try and see if it works
blksteeda
07-10-2007, 08:49 AM
I tried taking the div align="center" and replacing the left:0; top:350 value in the code as follows:

div id="TextBox" style="position:absolute; div align="center"; width:900; height:175; z-index:1; overflow: scroll; background-color: #000000; layer-background-color: #000000; border: 1px none #000000; visibility: visible;"

but what that did is it completely removed my scroll box properties...the scroll bars were completely removed and the entire text contents were visible in the layer...it also pushed the text content all the way to the top of the page. I also tried the following as well:

<div align="center">
div id="TextBox" style="position:absolute; left:0; top:350; width:900; height:175; z-index:1; overflow: scroll; background-color: #000000; layer-background-color: #000000; border: 1px none #000000; visibility: visible;"

but what that did was center the text inside the scroll box. Is there something that I am missing?

Thanks
Basil
07-10-2007, 11:28 AM
Set your doctype to strict
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
In case you don't know what to do with that, put it as the very first thing in the code (before <html>).

Then set the style like this..

<div id="TextBox" style="margin: 0 auto; width:900; height:175; z-index:1; overflow: scroll; background-color: #000; layer-background-color: #000; visibility: visible;">

I removed a few things that really had no reason to be there.. you don't need "visibility: visible" either unless there's some specific reason for it.

Oh yeah, and this is to center it horizontally, if you want to center it vertically as well that's a little bit more complicated.

And really you should be declaring the style in a style sheet not in the tag. Separate style and layout.
blksteeda
07-10-2007, 03:50 PM
I replaced the codes as you specified but what happens now is it takes away my scroll properties of my layer to where I can see all of the text and no scroll bars and it puts the entire layer at the very top of my page above everything else. Is there a better route to help me get this done? I'm fairly new to html so I apologize for the lack of knowledge here.

Thanks!