PDA

Click to See Complete Forum and Search --> : Confused.Layout

calliope_ice
02-11-2007, 12:53 PM
Hey everyone,

Im having problems with a few things on the current site i'm building.

First of all, Nothing stays in place when I change the size of my window, text over laps the backround picture, How do I keep everything in place ?

I made the over all layout picture as the backround and, Is this bad? Should it all be just a normal Picture file or what -.0?

Heres the site ;
http://www.freewebs.com/peruvian-diva/

Heres a picture of the Layout;

http://img.photobucket.com/albums/v394/Black_Oranda/site/layout.gif

Heres the HTML/codeing for that front page :

<html>
<head>
<body bgcolor=white>
<Style type="text/css"> body{ background-image:url(http://www.freewebs.com/peruvian-diva/peruvian%2Ddivalayoutt%20copy.jpg); background-position:top right ; background-attachment:fixed; background-repeat:no-repeat; } Table, Td{ background-color:transparent; } </Style> <br/><br/> <br/><br/>
<br>
<br>
<br>
<br>
<br>
<br>

<TABLE border="1" bgcolor="#F7F7F7" FRAME=BOX RULES=NONE>
<TD>
<font size="7" face="Georgia, Arial" color="#FFCC00">W</font>elcome to Peruvian-Diva!,
<br>
The Biggest Dedicated Fan site for The Queen of Exotic Yma Sumac
<br>
and her fans on the Net!.Here at Peruvian-Diva you may share and
<br>
read about fan stories from all over the world ,and interact with other
<br>
dedicated fans like yourself .
<br>
<br>
Come visit our explicit Exclusive Photo Gallery and our rare collection
<br>
of Videos. We Also have a wide Variety of Yma Sumac facts, and
<br>
recent News ! With constant Updates, it's no wonder Peruvian-diva
<br>
is becoming one of the most active Fan sites for Yma and her fans
<br>
on the net!
<center>
<A HREF="http://someplace.com/page2.htm" onMouseover="lightup('pic4')" onMouseout="turnoff('pic4')">
<IMG SRC="http://img.photobucket.com/albums/v394/Black_Oranda/site/enterbutton1.jpg" name="pic4" width="120" height="42" border="0"></A> </center>
</TD>
</TABLE>
</head>

<HEAD>
<SCRIPT language="JavaScript">
<!--

if (document.images)
{
pic1on= new Image(101,17);
pic1on.src="http://img.photobucket.com/albums/v394/Black_Oranda/site/buttonnews2.gif";
pic2on= new Image(101,17);
pic2on.src="http://img.photobucket.com/albums/v394/Black_Oranda/site/buttonaboutsite2.gif";
pic3on= new Image(101,17);
pic3on.src="http://img.photobucket.com/albums/v394/Black_Oranda/site/buttontrouble2.gif";
pic4on= new Image(120,42);
pic4on.src="http://img.photobucket.com/albums/v394/Black_Oranda/site/enterbutton2.jpg";

pic1off= new Image(101,17);
pic1off.src="http://img.photobucket.com/albums/v394/Black_Oranda/site/buttonews1.gif";
pic2off= new Image(101,17);
pic2off.src="http://img.photobucket.com/albums/v394/Black_Oranda/site/buttonaboutsite1.gif";
pic3off= new Image(101,17);
pic3off.src="http://img.photobucket.com/albums/v394/Black_Oranda/site/buttontrouble.gif";
pic4off= new Image(120,42);
pic4off.src="http://img.photobucket.com/albums/v394/Black_Oranda/site/enterbutton1.jpg";

}

function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}

function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}

//-->
</SCRIPT>
</HEAD>
<body>
<A HREF="http://someplace.com/page1.htm" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">
<IMG SRC="http://img.photobucket.com/albums/v394/Black_Oranda/site/buttonews1.gif" name="pic1" width="101" height="17" border="0"></A>


<A HREF="http://someplace.com/page2.htm" onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')">
<IMG SRC="http://img.photobucket.com/albums/v394/Black_Oranda/site/buttonaboutsite1.gif" name="pic2" width="101" height="17" border="0"></A>

<A HREF="http://someplace.com/page2.htm" onMouseover="lightup('pic3')" onMouseout="turnoff('pic3')">
<IMG SRC="http://img.photobucket.com/albums/v394/Black_Oranda/site/buttontrouble.gif" name="pic3" width="101" height="17" border="0"></A>


</body
Centauri
02-11-2007, 05:48 PM
When the background is "attached" to the top right corner of the page, normal behaviour would be for the background to slip under the text when the screen is resized smaller. <Style type="text/css">
body {
background-image: url(peruvian%2Ddivalayoutt%20copy.jpg);
background-position:top left;
background-attachment:fixed;
background-repeat:no-repeat;
}
table, td {
background-color:transparent;
}
</Style>

The above style declaration should also be within the <head> section (which hasn't been closed either) of the page. You should also use a proper doctype, encoding and title.

Cheers
Graeme