Jump to content

[SOLVED] Decapitated Princess. Will you help her?


Recommended Posts

Hi everyone,

 

It's funny how much you learn while creating a website from scratch.  What's not funny is stumbling across the first few bits of code you did and realizing it's absolute CRAP.  I need some help fixing something that's kinda complicated (to me at least).

 

At the top of my site is my main logo.  I chopped this image up and spanned it across tables so that I could fit a search bar into the site.  I AM using CSS, but my CSS knowledge is limited.  I had tried to anchor the search bar with some absolute positioning - it looked great in Firefox, but this positioning seemed to differ greatly when the site was viewed in I.E.

 

Anyway, I used tables for everything.  Not the smartest idea, but it's what I knew at the time.  I'm sure I need to use <div> or CSS absolute positioning, but I'm not sure how.  The site looks good in IE and Firefox, but I've had complaints that when viewed with an Apple... the princesses' head is cut off!

 

http://www.thefrogandtheprincess.com/

 

Here's the code that makes up the top portion of the site.  Yes, I know it's ugly... I need suggestions as to the best way to fix it:

 

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="125" background="../Images/topbar1.jpg"></td>
    <?php
    $topbar2="\"../Images/topbar1b.jpg\"";
    if (isset($_SESSION['cust_name'])) $topbar2="\"../Images/topbar1b2.jpg\"";
    ?>
    <td width="270" <?php echo "background=".$topbar2; ?> class="hello">
    <?php if (isset($_SESSION['cust_name'])) echo "  <i>Hello ".$_SESSION['cust_name']."!</i>"; ?>
    </td>
    <td width="58"><a href="http://www.thefrogandtheprincess.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../Images/topbar2_rollover.jpg',1)"><img src="../Images/topbar2.jpg" alt="Home" name="Home" width="58" height="30" border="0" id="Home" /></a></td>
    <td width="161"><a href="../customer_service.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Customer Service','','../Images/topbar3_rollover.jpg',1)"><img src="../Images/topbar3.jpg" alt="Customer Service" name="Customer Service" width="161" height="30" border="0" id="Customer Service" /></a></td>
    <td width="83"><a href="../login.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Account','','../Images/topbar4_rollover.jpg',1)"><img src="../Images/topbar4.jpg" alt="Account" name="Account" width="83" height="30" border="0" id="Account" /></a></td>
    <td width="103"><a href="https://thefrogandtheprincess.com/view_cart.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('View Cart','','../Images/topbar5_rollover.jpg',1)"><img src="../Images/topbar5.jpg" alt="View Cart" name="View Cart" width="103" height="30" border="0" id="View Cart" /></a></td>
  </tr>
</table>
<form action="../search_results.php" method="post" name="searchform" id="searchform" style="margin:0;">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="535" height="30" background="../Images/choplogo1.jpg"> </td>
    <td width="210" height="30" background="../Images/choplogo2.jpg" class="search">
    Search: <input name="srch" type="text" id="srch" size="18" maxlength="50" />
    </td>
    <td width="40" height="30" background="../Images/background7.jpg" class="gobutton"><input type="image" src="../Images/choplogo3.jpg" name="send" value="send" /></td>
    <td width="15" height="30" background="../Images/choplogo4.jpg"> </td>
  </tr>
</table>
</form>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="800" height="120" background="../Images/choplogobase.jpg"> </td>
  </tr>
  <tr>
    <td width="800" height="20" bgcolor="#FFFFFF"></td>
  </tr>
</table>

 

This code exists in my main template so it exists on all my pages.  Getting it right is important.  Getting it to load as fast as possible is a huge bonus too.

 

Oh, I have a class of 'search' associated with the searchbar.  The code exists in an external file, and looks like this:

 

td.search {
    font-family: Verdana, Arial, Helvetica, sans-serif;
color: #4B4B4B;
font-size: 15px;
border: 0px;
}

 

Thanks in advance for the help!

 

I'm viewing in IE6 and it looks almost exactly to that of Firefox. Her head is definitely fully intact.

 

You can place each image in a seperate div or table if you wish, then add onto your html table code a "id" such as

<table width="800" border="0" align="center" id=table1
or
<div id="div1"></div>

 

In css you would position them such as below, with "top" and "left", so they would line up. Deamweaver or similar software with a design interface feature helps a bunch.:

table1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
color: #4B4B4B;
font-size: 15px;
border: 0px;
top:197px;
left:186px;
width:401px;
height: 343px;
position:absolute;
z-index: 1;
border: none;
}

 

I hope that helps.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.