View Full Version : css/table/layout problems!!


Talia
02-26-2004, 07:10 PM
hey alright, i've just started working on my website and i made a layout on a graphics program and i sliced it for faster loading time and so that it could stretch to the bottom of the page. well now i'm having big problems postioning things on my page and i can't get the text to be ontop of the sliced images of the layout. i've tried doing it with tables and div layers and basically anything i can think of and its just not working! can anyone help me???
>>>>>>Talia

MaGiCSuN
02-26-2004, 07:24 PM
Note: slicing doesn't make the loading time faster :) it 'looks' like it, but the image is still as big as it was before.

You should probably use z-index. it works as the following:

<div style="position: absolute; top: #px; left: #px; z-index: 1;">
image here
</div>

<div style="position; absolute; top: #px; left: #px; z-index: 2;">
text here
</div>

as you can see the text div layer has an z-index of 2, wich means that it will be on top of the image because the image has z-index 1. So the higher the number the more it will be on top.

In this case you can just use a full graphic, because you position everything on top of each other :)

Love,
Mirna

Talia
02-26-2004, 07:30 PM
ok but if I use the layout i had originally wihtou slicing it how do i get just the bottom part to stretch to the bottom of the page. maybed i'll try it with a scrolling div layer. oh and i tried it with the z -index the text just won't show up ontop of the pictures. so if you(or anyone else) could help me with this too i'd be so grateful!(thanks to you too mirna!)
>>>>>Talia

MaGiCSuN
02-26-2004, 07:33 PM
can you post the url to the page?

for the stretching part, you could make a background of that little part and make it repeat. If it's only a certain part of the page a div with setting the image as abackground of that will probably work too.

Love,
Mirna

Talia
02-26-2004, 07:44 PM
yea ok the url of the page i'm having problems with is:
http://finalfantasydreams.bravehost.com/fanart.html you'll see the problem. feel free to view the source and look at the html if you want :)
>>>>Talia

Talia
02-26-2004, 07:56 PM
ok and now i can't even get the div layers to work(on the other page i'm trying to put the scrolling div layer on which i just started working on like 10 min ago ) but i have to go to work now unfortunately so hopefully i will be able to fix it later.

MaGiCSuN
02-27-2004, 04:09 PM
in the second layer you have this:

<div id=layer 2 style="position:absolute; top:400; left:60; width:700; height:50; z-index:2; padding:242px; border:#ffffff 2 px solid;">

that space shouldn't be in the red part :)

If you take out the background color in the first div it will be transparent so that you can see the layout behind it. If that's not what you want, then ignore this part :P

also try putting px behind sizes and absolute positioning numbers. SO instead of top:400; you have top:400px;

if you use the full layout (one image) then you don't need the table anymore, so your first div will look like this:

<div id=layer1 style="position:absolute; top:20; left:20; width:750; height:100%; z-index:1; padding:5px; border:#ffffff 2px solid; background-color:#ffffff;">
<img src="LAYOUTHERE.gif" border="0" height="HEIGHTIMAGE" width="WIDTHIMAGE">
</div>

Good luck :)

Love,
Mirna