View Full Version : position absolute?


StuckonAntanDec
02-05-2005, 10:17 AM
hey there
on my page www.say-no-more.org/antanddec/antanddec.html
if you minimize the screen, or make it even a tiny bit smaller, all my tables and the iframe shift over and dont look like they are on the layout anymore. do i need to use position absolute or something? at the moment it doesnt seem to be working. i dont want all my stuff to shift over when someone resizes the screen, i want it to be stuck on to the layout (if you get what i mean!!!)

heres my HTML:

IFRAME:

</table></div>
<div style="position:absolute;top:316px;left:475px;width:0px;h eight:0px;">
<table width="340" style="position:left; top:370; left:250" valign=top cellspacing="0"><BR>
<table border="0" cellspacing="3" cellpadding="3" width="500"><tr>
<td style="bgColor="transparent" width="500" style=";">
<iframe src="main.html" name="main" width="338"
height="2000" style="border:0" frameborder=0
framespacing=0 scrolling=auto" allowtransparency="true">
</iframe>

COLUMN ON THE LEFT:

<table width="" style="position:absolute; top:532; left:20" valign=top cellspacing="0"><BR>
<table border="0" cellspacing="3" cellpadding="3" width="98%" allowtransparency="true"><tr>
<td style="BORDER-RIGHT:#000000 1px solid; BORDER-TOP:#000000 1px solid; BORDER-LEFT:#000000 1px solid;
BORDER-BOTTOM:#000000 1px solid"align="left" bgColor="#C4DCCA" width="" style=";">
<table border="0" cellspacing="0" cellpadding="3" width="100%"><tr>
<td style="BORDER-RIGHT:#000000 1px solid; BORDER-TOP:#000000 1px solid; BORDER-LEFT:#000000 1px solid;
BORDER-BOTTOM:#000000 1px solid"align="right"
</tr></table>
<img src="potm.gif" border="0">
PICTURE OF THE MONTH
</td></tr></table>

thanks! xx

JenniStar
02-05-2005, 01:27 PM
Hmm..well in places where you have

style="position:absolute; top:532; left:20

you could do with adding px, you've done that in some places but not others. So 532px, etc.

Also there is a space between '316' and 'px' on this line

<div style="position:absolute;top:316 px;left:475px;width:0px;h eight:0px;">

Not sure how much that will help though!

pb&j
02-05-2005, 03:15 PM
1. you have a repeated image which is taking a lot of coding. perhaps consider making a div, put the image as the background, and setting the width and height of the div to your desire. you then use z-index to make it "behind" the other content on your page. or you may be able to make it part of your page background with a bit of tweeking.

2. you are missing this... </head> which should appear before your starter BODY tag.

3. since you are positioning the tables, you can delete off your div surrounding them as it is doing nothing...
<div style="position:absolute;top:350px;left:170px;width:300px ;height:0px;">
and the ending div for that too...
</div>

4. you seem to have two starting table tags for each table. it should combine into one starting table tag per table. so you would take this for example...
<table width="" style="position:absolute; top:532; left:20" valign=top cellspacing="0"><BR>

<table border="0" cellspacing="3" cellpadding="3" width="98%" allowtransparency="true"><tr>
<td style="BORDER-RIGHT:#000000 1px solid; BORDER-TOP:#000000 1px solid; BORDER-LEFT:#000000 1px solid;
BORDER-BOTTOM:#000000 1px solid"align="left" bgColor="#C4DCCA" width="" style=";">

<table border="0" cellspacing="0" cellpadding="3" width="100%"><tr>
<td style="BORDER-RIGHT:#000000 1px solid; BORDER-TOP:#000000 1px solid; BORDER-LEFT:#000000 1px solid; BORDER-BOTTOM:#000000 1px solid" align="right"></tr></table>

<img src="welcome.gif" border="0">
Welcome to <b>PSYCHE!</b> - an unoffical fan site dedicated to the brilliant geordie duo Ant and Dec. This fansite is owned by <A href="mailto:always_addicted@hotmail.com">Neha</a>. Here at Ant and Dec.com you can find info on Ant and Dec, pictures, media and so much more!
Hope you enjoy your visit.</b> <br>
</td></tr></table>

<br>

and fix it to something like this...

<table border="0" style="position:absolute; top:532px; left:20px" cellspacing="3" cellpadding="3" width="98%"><tr>
<td style="border:#000000 1px solid; background-color:#C4DCCA;"><img src="welcome.gif" border="0">
Welcome to <b>PSYCHE!</b> - an unoffical fan site dedicated to the brilliant geordie duo Ant and Dec. This fansite is owned by <A href="mailto:always_addicted@hotmail.com">Neha</a>. Here at Ant and Dec.com you can find info on Ant and Dec, pictures, media and so much more!
Hope you enjoy your visit.</b>
</td></tr></table>

StuckonAntanDec
02-05-2005, 03:33 PM
argh! i really cant be bothered to do all of that. lol.
isnt there an easier way around it?

this is the layout im now working with
www.say-no-more.org/noah.html

i just dont want everything to shift when i change the size of the window
thanks anyway xxx

StuckonAntanDec
02-05-2005, 03:45 PM
argh! how would i do all that div stuff?
can someone explain it in more steps :( thanks xx

pb&j
02-05-2005, 03:45 PM
argh! i really cant be bothered to do all of that. lol.
isnt there an easier way around it?

fixing your coding would probably be the best way to fix the problem.

i use an 800 x 600 screen setting, so right now your positioning is off already.

part of that main problem is... you are using CENTER to create the background image effect and POSITION for the content areas. those two dont mix well together.

perhaps someone else may have a different solution though. good luck!

StuckonAntanDec
02-05-2005, 03:54 PM
okay.
well could you help me with the whole div thing/z index whatever thing?
i really dont get it.
id be really grateful!
xxx

edit:
ive got a background (the strippy one)
and then the image itself
then the column background thing if you know what i mean.

i could do it like this..:
<BODY BACKGROUND="back2.gif" topmargin="0" leftmargin="0">
<img border="0" src="noah.jpg" topmargin="0" leftmargin="0" >
<img border="0" src="noahbg.jpg" topmargin="0" leftmargin="0" width="672"
height="4200">

??
xxx

StuckonAntanDec
02-05-2005, 03:56 PM
ive got a background (the strippy one)
and then the image itself
then the column background thing if you know what i mean.

i could do it like this..:
<BODY BACKGROUND="back2.gif" topmargin="0" leftmargin="0">
<img border="0" src="noah.jpg" topmargin="0" leftmargin="0" >
<img border="0" src="noahbg.jpg" topmargin="0" leftmargin="0" width="672"
height="4200">

??
xxx

MaGiCSuN
02-05-2005, 05:24 PM
this line is also not proper coding:

<td style="bgColor="transparent" width="500" style=";">

also tables are transparent, when you don't insert a background color in the tags. so you can change that part to:

<td width="500">

Love,
Mirna