PDA

View Full Version : layers problem


mikefeil
08-24-2005, 04:45 AM
Hi guys, great forum you have here, lots of great information.
Anyway

I'm currently designing a site for some friends and what I have is cutenews going for the news, which is hooked into news_include.html. This page has a layer ( I followed that css scrollbar article) with the cutenews code in it.

news_include.html is an ssi file that is included onto the main page of http://www.menacingproductions.com/test/index_test.php ('http://www.menacingproductions.com/test/index_test.php') ( where the news is) now my problem;

- the layer doesnt stay inside (it moves when there is different resolutions or the window is resized) the table it was included into?

anyway im sure its easy, just some positioning problem, just learning as I go :D


thanx guys

mikefeil
08-24-2005, 05:53 PM
okay so I worked out the above problem by using the power of iframes. Now all I want to do is get the scroll bar colours. The page is here

http://www.menacingproductions.com/new/ ('http://www.menacingproductions.com/new/')

(turn sound down, u might get a shock from the flash content)

and this is the page im including in the iframe

http://www.menacingproductions.com/new/frameX.php ('http://www.menacingproductions.com/new/frameX.php')

here is also the css I'm using on the framex page (I heard you have to use the scrollbar code on the iframe source page, not the actual page your calling it from, in my case the index page)

.news {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
padding: 2px;
position: absolute;
height: 235px;
width: 537px;
overflow: auto;
left: 386px;
top: 165px;
right: auto;
bottom: auto;
scrollbar-base-color:#C0CC8F;
scrollbar-face-color:#C0CC8F;
scrollbar-arrow-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-track-color:#C0CC8F;
scrollbar-highlight-color:#C0CC8F;
scrollbar-darkshadow-Color:#C0CC8F;
}

domedia
08-24-2005, 06:30 PM
Actually using iframes is doing it a little backwards. The CSS scroller tutorial you read was made in order for people not to have to use iframes ( with the implications that brings) in order to achieve the scrollbar effect.

The problem with your first page was that your page had it's contents positioned relatively (it would always be in horizontal center of the page). While your layer was positioned absolutely (always the same distance from top left corner of viewport.

The fix for this is really simple. Just moce your code to the area you want it to output and makew sure you're not using absolute position on your layer. :)

mikefeil
08-25-2005, 05:03 AM
domedia - thankyou so much, that almost worked perfect.

okay so here it is now http://www.menacingproductions.com/new/index_2.php ('http://www.menacingproductions.com/new/index_2.php')

in firefox it works awesome (aside from the scoller bar colour, but I cant help that) however in ie everthing stretches out and yeah...no pretty. I'm sure you will see.


Thankyou once again

mikefeil
08-25-2005, 08:18 AM
here is the css code now too

.news {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
padding: 0px;
position: relative;
height: 244px;
width: 537px;
overflow: auto;
left: 0;
top: 0;
right: 0px;
bottom: 0px;
scrollbar-base-color:#C0CC8F;
scrollbar-face-color:#C0CC8F;
scrollbar-arrow-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-track-color:#C0CC8F;
scrollbar-highlight-color:#C0CC8F;
scrollbar-darkshadow-Color:#C0CC8F;
background-color: #C0CC8F;
margin: 0px;
}

jool
08-25-2005, 10:33 AM
I have the same problem I think. I've changed from absolute position to relative but there is now a big space ( I think the size of the column) above my table (from where I'd like the page to start). This space is visible in the dreamweaver environment and when viewed through firefox and internet explorer.

The page - with space is at:

http://www.privatelesson.co.uk/template.php ('http://www.privatelesson.co.uk/template.php')

The code I'm using for my div layer is

<div id=layer1 style="position:relative; top:420px; left:210px; width:271px; height:290px; z-index:1; padding:5px; border: #000000 2px solid; background-color: #CCCCCC; layer-background-color: #CCCCCC;">
<p>lllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllllllllllllllllllllllllllllll lll</p>
<p>this is the div layer which I would like to be placed inside the table. </p>
</div>


Many thanks for reading this post.

Thanks

Adam

jool
08-25-2005, 12:44 PM
I've found the following tutorial has helped me with this query:

http://css.maxdesign.com.au/floatutorial/tutorial0801.htm ('http://css.maxdesign.com.au/floatutorial/tutorial0801.htm')


Perhaps using tables and div layers isn't the best way to go about doing what I was trying to do....

domedia
08-25-2005, 02:34 PM
jool,
please dont hijack this thread. make you own one and we'll see if we can solve it there. :)

domedia
08-25-2005, 02:38 PM
mikefile,
you have one loooong word with no spaces in it
sadsadsadsakdaksjdksadjskadjksajdksajdkjsakdjksajd ksajdksakjdassadsadsadsakdaksjdksadjskadjksajdksaj dkjsakdjksajdksajdksakjdasv
remove that word an you should be fine. Put actual content in there instead of random keyboard hammering ;)

mikefeil
08-25-2005, 06:25 PM
i manage to fix it..

yeah I wanted to give the news thing a test...but yeah everything has worked out good. Anyway what do you guys think of the site, its my first go a paid work in designing sites (I usually do 3d animation)

anyway fun fun fun and I have learnt heaps, thanx for all your help aswell

- Mike

domedia
08-25-2005, 07:33 PM
http://www.menacingproductions.com/ ('http://www.menacingproductions.com/')

Pretty cool :)
I still think you should remove the 'sadsads' asap, gives an amateur impression to put things like that live. ;)

I Like the colors as well. But where is this? Great Britain?

zemez_man
08-31-2005, 10:38 AM
ohh using css is really great ... im using it too ....