HTML Help Forum Index HTML Help
Please Search for the answer to your question before asking it! Thanks.
 

Links Pushing Layout Apart
Post a Reply to this Topic Ask a New Question
Click here to go to the original topic
       HTML Help Forum Index -> General HTML
View previous topic :: View next topic  
Author Message
alex21



Joined: 01 Oct 2009
Posts: 7

Posted: Thu Oct 01, 2009 5:15 pm     Links Pushing Layout Apart  

The Page Can Be Viewed At:
http://www.hinterlandceremonies.com/

My layout looked absolutly fine until i added <a> tags around my menu images, then they all pushed apart making the page look completly distorted.

Please Help, Thank you.

Code:
<?php
  include("PHP/session.php");
 
  $frame_page = "home.php";
  if(isset($_GET['frame_page'])) {
    $frame_page = $_GET['frame_page'];
  }
 
  $frame_style = "overflow-x: hidden;";
  if(isset($_GET['frame_style'])) {
    $frame_style = $_GET['frame_style'];
  }
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Hinterland Ceremonies</title>
  <link href="Style/parent_style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="Script/swapimage.js"></script>
</head>

<body onload="LoadImage('menu_home_over.jpg'), LoadImage('Images/menu_general_information_over.jpg'), LoadImage('Images/menu_services_over.jpg'), LoadImage('Images/menu_services_weddings_over.jpg'), LoadImage('Images/menu_services_child_naming_over.jpg'), LoadImage('Images/menu_services_child_naming_over.jpg'), LoadImage('Images/menu_services_coming_of_age_over.jpg'), LoadImage('Images/menu_services_hand_fastings_over.jpg'), LoadImage('Images/menu_services_commitment_ceremonies_over.jpg'), LoadImage('Images/menu_services_vow_renewals_over.jpg'), LoadImage('Images/menu_services_divorce_over.jpg'), LoadImage('Images/menu_services_funerals_over.jpg'), LoadImage('Images/menu_contact_us_over.jpg')">
  <div align="center">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr valign="top">
        <td colspan="1" style="background:url(Images/banner_top.jpg); width:900px; height:20px;">
        </td>
      </tr>
      <tr valign="top">
        <td colspan="1">
          <table border="0" cellpadding="0" cellspacing="0">
            <tr valign="top">
              <td colspan="1" style="background:url(Images/banner_middle_left.jpg); width:205px; height:180px;">
              </td>
              <td colspan="1" style="background:url(Images/banner_middle_between.jpg); width:10px; height:180px;">
              </td>
              <td colspan="1" style="background:url(Images/banner_middle_middle.jpg); width:485px; height:180px;">
              </td>
              <td colspan="1" style="background:url(Images/banner_middle_placeholder.jpg); width:180px; height:180px;">
              </td>
              <td colspan="1" style="background:url(Images/banner_middle_right.jpg); width:20px; height:180px;">
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr valign="top">
        <td colspan="1" style="background:url(Images/banner_bottom.jpg); width:900px; height:17px;">
        </td>
      </tr>
      <tr valign="top">
        <td colspan="1">
          <table border="0" cellpadding="0" cellspacing="0">
            <tr valign="top">
              <td colspan="1" style="background:url(Images/page_left.jpg); width:10px; height:732px;">
              </td>
              <td colspan="1" style="width:195px; height:732px;">
                <table border="0" cellpadding="0" cellspacing="0">
                  <tr valign="top">
                    <td colspan="1">
                      <a href="home.php" target="main_frame">
                        <img name="menu_home" id="menu_home" src="Images/menu_home.jpg" alt="Menu Home" border="0" onmouseover="ReplaceImage('menu_home', 'Images/menu_home_over.jpg')" onmouseout="ReplaceImage('menu_home', 'Images/menu_home.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="general_information.php" target="main_frame">
                        <img name="menu_general_information" id="menu_general_information" src="Images/menu_general_information.jpg" alt="Menu General Information" border="0" onmouseover="ReplaceImage('menu_general_information', 'Images/menu_general_information_over.jpg')" onmouseout="ReplaceImage('menu_general_information', 'Images/menu_general_information.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="Services/services.php" target="main_frame">
                        <img name="menu_services" id="menu_services" src="Images/menu_services.jpg" alt="Menu Services" border="0" onmouseover="ReplaceImage('menu_services', 'Images/menu_services_over.jpg')" onmouseout="ReplaceImage('menu_services', 'Images/menu_services.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="Services/weddings.php" target="main_frame">
                        <img name="menu_services_weddings" id="menu_services_weddings" src="Images/menu_services_weddings.jpg" alt="Menu Services Weddings" border="0" onmouseover="ReplaceImage('menu_services_weddings', 'Images/menu_services_weddings_over.jpg')" onmouseout="ReplaceImage('menu_services_weddings', 'Images/menu_services_weddings.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="Services/child_naming.php" target="main_frame">
                        <img name="menu_services_child_naming" id="menu_services_child_naming" src="Images/menu_services_child_naming.jpg" alt="Menu Child Naming" border="0" onmouseover="ReplaceImage('menu_services_child_naming', 'Images/menu_services_child_naming_over.jpg')" onmouseout="ReplaceImage('menu_services_child_naming', 'Images/menu_services_child_naming.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="Services/coming_of_age.php" target="main_frame">
                        <img name="menu_services_coming_of_age" id="menu_services_coming_of_age" src="Images/menu_services_coming_of_age.jpg" alt="Menu Coming of Age" border="0" onmouseover="ReplaceImage('menu_services_coming_of_age', 'Images/menu_services_coming_of_age_over.jpg')" onmouseout="ReplaceImage('menu_services_coming_of_age', 'Images/menu_services_coming_of_age.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="Services/hand_fasting.php" target="main_frame">
                        <img name="menu_services_hand_fasting" id="menu_services_hand_fasting" src="Images/menu_services_hand_fasting.jpg" alt="Menu Hand Fastings" border="0" onmouseover="ReplaceImage('menu_services_hand_fasting', 'Images/menu_services_hand_fasting_over.jpg')" onmouseout="ReplaceImage('menu_services_hand_fasting', 'Images/menu_services_hand_fasting.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="Services/commitment_ceremonies.php" target="main_frame">
                        <img name="menu_services_commitment_ceremonies" id="menu_services_commitment_ceremonies" src="Images/menu_services_commitment_ceremonies.jpg" alt="Menu Commitment Ceremonies" border="0" onmouseover="ReplaceImage('menu_services_commitment_ceremonies', 'Images/menu_services_commitment_ceremonies_over.jpg')" onmouseout="ReplaceImage('menu_services_commitment_ceremonies', 'Images/menu_services_commitment_ceremonies.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="Services/vow_renewals.php" target="main_frame">
                        <img name="menu_services_vow_renewals" id="menu_services_vow_renewals" src="Images/menu_services_vow_renewals.jpg" alt="Menu Vow Renewals" border="0" onmouseover="ReplaceImage('menu_services_vow_renewals', 'Images/menu_services_vow_renewals_over.jpg')" onmouseout="ReplaceImage('menu_services_vow_renewals', 'Images/menu_services_vow_renewals.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="Services/divorce.php" target="main_frame">
                        <img name="menu_services_divorce" id="menu_services_divorce" src="Images/menu_services_divorce.jpg" alt="Menu Divorce" border="0" onmouseover="ReplaceImage('menu_services_divorce', 'Images/menu_services_divorce_over.jpg')" onmouseout="ReplaceImage('menu_services_divorce', 'Images/menu_services_divorce.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="Services/funerals.php" target="main_frame">
                        <img name="menu_services_funerals" id="menu_services_funerals" src="Images/menu_services_funerals.jpg" alt="Menu Funerals" border="0" onmouseover="ReplaceImage('menu_services_funerals', 'Images/menu_services_funerals_over.jpg')" onmouseout="ReplaceImage('menu_services_funerals', 'Images/menu_services_funerals.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="gallery.php" target="main_frame">
                        <img name="menu_gallery" id="menu_gallery" src="Images/menu_gallery.jpg" alt="Menu Gallery" border="0" onmouseover="ReplaceImage('menu_gallery', 'Images/menu_gallery_over.jpg')" onmouseout="ReplaceImage('menu_gallery', 'Images/menu_gallery.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="testimonials.php" target="main_frame">
                        <img name="menu_testimonials" id="menu_testimonials" src="Images/menu_testimonials.jpg" alt="Menu Testimonials" border="0" onmouseover="ReplaceImage('menu_testimonials', 'Images/menu_testimonials_over.jpg')" onmouseout="ReplaceImage('menu_testimonials', 'Images/menu_testimonials.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1">
                      <a href="contact_us.php" target="main_frame">
                        <img name="menu_contact_us" id="menu_contact_us" src="Images/menu_contact_us.jpg" alt="Menu Contact Us" border="0" onmouseover="ReplaceImage('menu_contact_us', 'Images/menu_contact_us_over.jpg')" onmouseout="ReplaceImage('menu_contact_us', 'Images/menu_contact_us.jpg')" />
                      </a>
                    </td>
                  </tr>
                  <tr valign="top">
                    <td colspan="1" style="background:url(Images/menu_bottom.jpg); width:195px; height:254px;">
                    </td>
                  </tr>
                </table>
              </td>
              <td colspan="1" style="background:url(Images/page_between.jpg); width:10px; height:732px;">
              </td>
              <td colspan="1" style="background:url(Images/page_content.jpg); width:675px; height:732px;">
                <iframe name="main_frame" id="main_frame" src="<? echo $frame_page; ?>" style="margin-top:5px; <? echo $frame_style; ?>" width="670" height="720" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0"></iframe>
              </td>
              <td colspan="1" style="background:url(Images/page_right.jpg); width:10px; height:732px;">
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr valign="top">
        <td colspan="1" style="background:url(Images/footer_top.jpg); width:900px; height:7px;">
        </td>
      </tr>
      <tr valign="top">
        <td colspan="1" style="background:url(Images/footer.jpg); width:900px; height:38px;">
        </td>
      </tr>
      <tr valign="top">
        <td colspan="1" style="background:url(Images/footer_bottom.jpg); width:900px; height:6px;">
        </td>
      </tr>
    </table>
  </div>
</body>
</html>
PayneLess Designs



Joined: 28 Feb 2007
Posts: 3599
Location: Biloxi, MS

Posted: Thu Oct 01, 2009 6:16 pm      

Hi: First let me say that is a nice page. Only 1 CSS and HTML coding error which are minor. Nicely done. I looked at your link codes. You need to put those codes all on one line. You have too much white space and some browsers can not tolerate that. Also, DO NOT use compound words in your folder and file names. Either run the names together or use either a "_" or "-" between the words of the folder file name.

You have: Code:             |
            <a href="PDF/Change of name through marriage.pdf" target="main_frame">
              Change of Name Through Marriage
            </a>
            |
Should be similar to this: Code:  | <a href="PDF/Change-of-name-through-marriage.pdf" target="main_frame">Change of Name Through Marriage</a> | Looks like you have a couple of those malformed links.

Will check the problem you are having soon.

You might want to look into CSS Frames instead. Very Search Engine friendly. Example Here
alex21



Joined: 01 Oct 2009
Posts: 7

Posted: Thu Oct 01, 2009 6:24 pm      

Thank you. Im really not a wiz at CSS nore do i really understand what it does, i simply manage a few things using it.

Is it the solution to the menu links pushing apart?

Thank you very much for your help. :)
PayneLess Designs



Joined: 28 Feb 2007
Posts: 3599
Location: Biloxi, MS

Posted: Thu Oct 01, 2009 8:43 pm      

I haven't work on your posted code to see if it is a solution to the menu links pushing apart yet. May be later before I can get to it.

Correcting your link code for those 2 links will help clear the errors. Will work on it as soon as I can.

Your Gallery and Testimonials links are not valid.
PayneLess Designs



Joined: 28 Feb 2007
Posts: 3599
Location: Biloxi, MS

Posted: Thu Oct 01, 2009 9:59 pm      

Back up your original file and try this one in its place:

http://paynelessdesigns.pastebin.com/m786a2d1d

Also, corrected your frame page:

http://paynelessdesigns.pastebin.com/mda6b70f

Download links at top of each page.
alex21



Joined: 01 Oct 2009
Posts: 7

Posted: Fri Oct 02, 2009 3:29 pm      

PayneLess Designs wrote: Back up your original file and try this one in its place:

http://paynelessdesigns.pastebin.com/m786a2d1d

Also, corrected your frame page:

http://paynelessdesigns.pastebin.com/mda6b70f

Download links at top of each page.

Man that worked but i can't see what you changed :P

what did i do wrong?

Thanks so much for the help, o and i havn't done the gallery and testimonials sections yet, they are going to be dynamic so there is some behind the scenes to be done first.
alex21



Joined: 01 Oct 2009
Posts: 7

Posted: Fri Oct 02, 2009 3:59 pm      

Wow, ok figured it out...

Pretty silly really, i was reading line breaks inside <a>? just needed the links on one line?

Thank you so much for your help.
PayneLess Designs



Joined: 28 Feb 2007
Posts: 3599
Location: Biloxi, MS

Posted: Fri Oct 02, 2009 7:18 pm      

You're welcome. Glad I could help. Have a great weekend.
 
 
DARFUR
HOSTING / DESIGN
MAKE MONEY

       HTML Help Forum Index -> General HTML
Page 1 of 1


Powered by phpBB Search Engine Indexer
Powered by phpBB 2.0.19 © 2001, 2002 phpBB Group