Confused.Layout

**calliope_ice** · 02-11-2007 11:53 AM

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/v3...ite/layout.gif

Heres the HTML/codeing for that front page :

HTML Code:

<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 04: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.

Code:

<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

Thread: Confused.Layout

Thread Tools

Display

Hybrid View

Confused.Layout

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions