www.webdeveloper.com
Results 1 to 2 of 2

Thread: Confused.Layout

Hybrid View

  1. #1
    Join Date
    Feb 2007
    Posts
    6

    Confused.Layout

    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

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles