Jump to content


Please help with my navigation box...its meshed up

Started by jatt_inder, Sep 26 2006 01:33 AM

2 replies to this topic

#1 jatt_inder

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 26 September 2006 - 01:33 AM

Firstly Hello to everyone,
Now to the point...basically i need to build a website for my coursework and i have done the layout in photoshop and done the slicing part in photoshop as well...then i did the coding in dreamweaver however i got one problem now....it's that whenever i need to expand the content box to write more stuff in it my navigation on the write gets mesh...meaning the layout gets distorted...i need help on how to solve this problem..

i have attached three images...one in slice view, another image is when the content box in not expanded and the last image is when the content box is expanded and its result....


please can someone help me....

slice view: Posted Image

good navigation view: Posted Image

bad navigation view : Posted Image


thanks a lot
cheers

#2 Davey

    P2L Jedi

  • Members
  • PipPipPip
  • 620 posts
  • Location:Perth, Scotland
  • Interests:Creativity, Adrenaline, Etc

Posted 26 September 2006 - 04:48 AM

first of all, u have mispelt the heading :P ericsson*

second of all the bad image does not load... also could u post ur html/css

#3 jatt_inder

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 26 September 2006 - 03:15 PM

ya i know about the mistake i have changed it....anyways thanks for reminding lol

i have updated the site too but still no luck with the navigation...it's still meshed...please help


here's the image of bad view (please ignore the DU Meter thing)
Posted Image


====HEREs the HTML CODE=======

<html>
<head>
<title>Sony Ericsson</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (SE2.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
SE2_03_over = newImage("images/SE2_03-over.gif");
SE2_05_over = newImage("images/SE2_05-over.gif");
SE2_07_over = newImage("images/SE2_07-over.gif");
SE2_09_over = newImage("images/SE2_09-over.gif");
SE2_11_over = newImage("images/SE2_11-over.gif");
preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->
<link href="productbox.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();" link="#EEEEEE" vlink="#EEEEEE" alink="#EEEEEE">
<!-- ImageReady Slices (SE2.psd) -->
<table id="Table_01" width="1025" height="768" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="31" background="images/SE2_01.gif" width="1024" height="158" alt=""></td>
<td background="images/spacer.gif" width="1" height="158" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="4" background="images/SE2_02.gif" width="157" height="58" alt=""></td>
<td>
<a href="#"
onmouseover="changeImages('SE2_03', 'images/SE2_03-over.gif'); return true;"
onmouseout="changeImages('SE2_03', 'images/SE2_03.gif'); return true;"
onmousedown="changeImages('SE2_03', 'images/SE2_03-over.gif'); return true;"
onmouseup="changeImages('SE2_03', 'images/SE2_03-over.gif'); return true;">
<img src="images/SE2_03.gif" alt="" name="SE2_03" width="81" height="35" border="0" usemap="#SE2_03Map"></a></td>
<td rowspan="4" background="images/SE2_04.gif" width="6" height="58" alt=""></td>
<td colspan="10" rowspan="2">
<a href="#"
onmouseover="changeImages('SE2_05', 'images/SE2_05-over.gif'); return true;"
onmouseout="changeImages('SE2_05', 'images/SE2_05.gif'); return true;"
onmousedown="changeImages('SE2_05', 'images/SE2_05-over.gif'); return true;"
onmouseup="changeImages('SE2_05', 'images/SE2_05-over.gif'); return true;">
<img src="images/SE2_05.gif" alt="" name="SE2_05" width="173" height="36" border="0" usemap="#SE2_05Map"></a></td>
<td rowspan="4" background="images/SE2_06.gif" width="5" height="58" alt=""></td>
<td rowspan="3">
<a href="#"
onmouseover="changeImages('SE2_07', 'images/SE2_07-over.gif'); return true;"
onmouseout="changeImages('SE2_07', 'images/SE2_07.gif'); return true;"
onmousedown="changeImages('SE2_07', 'images/SE2_07-over.gif'); return true;"
onmouseup="changeImages('SE2_07', 'images/SE2_07-over.gif'); return true;">
<img src="images/SE2_07.gif" alt="" name="SE2_07" width="163" height="37" border="0" usemap="#SE2_07Map"></a></td>
<td rowspan="4" background="images/SE2_08.gif" width="5" height="58" alt=""></td>
<td rowspan="3">
<a href="#"
onmouseover="changeImages('SE2_09', 'images/SE2_09-over.gif'); return true;"
onmouseout="changeImages('SE2_09', 'images/SE2_09.gif'); return true;"
onmousedown="changeImages('SE2_09', 'images/SE2_09-over.gif'); return true;"
onmouseup="changeImages('SE2_09', 'images/SE2_09-over.gif'); return true;">
<img src="images/SE2_09.gif" alt="" name="SE2_09" width="135" height="37" border="0" usemap="#SE2_09Map"></a></td>
<td rowspan="4" background="images/SE2_10.gif" width="5" height="58" alt=""></td>
<td rowspan="3">
<a href="#"
onmouseover="changeImages('SE2_11', 'images/SE2_11-over.gif'); return true;"
onmouseout="changeImages('SE2_11', 'images/SE2_11.gif'); return true;"
onmousedown="changeImages('SE2_11', 'images/SE2_11-over.gif'); return true;"
onmouseup="changeImages('SE2_11', 'images/SE2_11-over.gif'); return true;">
<img src="images/SE2_11.gif" alt="" name="SE2_11" width="123" height="37" border="0" usemap="#SE2_11Map"></a></td>
<td colspan="6" rowspan="4" background="images/SE2_12.gif" width="171" height="58" alt=""></td>
<td background="images/spacer.gif" width="1" height="35" alt=""></td>
</tr>
<tr>
<td rowspan="3" background="images/SE2_13.gif" width="81" height="23" alt=""></td>
<td background="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="10" rowspan="2" background="images/SE2_14.gif" width="173" height="22" alt=""></td>
<td background="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td background="images/SE2_15.gif" width="163" height="21" alt=""></td>
<td background="images/SE2_16.gif" width="135" height="21" alt=""></td>
<td background="images/SE2_17.gif" width="123" height="21" alt=""></td>
<td background="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2" background="images/SE2_18.gif" width="143" height="130" alt=""></td>
<td colspan="25" background="images/SE2_19.gif" width="722" height="123" alt=""></td>
<td colspan="3" rowspan="3" background="images/SE2_20.gif" width="159" height="132" alt=""></td>
<td background="images/spacer.gif" width="1" height="123" alt=""></td>
</tr>
<tr>
<td colspan="25" background="images/SE2_21.gif" width="722" height="7" alt=""></td>
<td background="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="27" background="images/SE2_22.gif" width="138" height="422" alt=""></td>
<td colspan="12" background="images/SE2_23.gif" width="222" height="2" alt=""></td>
<td colspan="15" background="images/SE2_24.gif" width="505" height="2" alt=""></td>
<td background="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td background="images/SE2_25.gif" width="1" height="1" alt=""></td>
<td colspan="10" rowspan="3" background="images/SE2_26.gif" width="220" height="42" alt=""></td>
<td rowspan="2" background="images/SE2_27.gif" width="1" height="8" alt=""></td>
<td rowspan="16" background="images/SE2_28.gif" width="1" height="286" alt=""></td>
<td rowspan="22" background="images/SE2_29.gif" width="4" height="339" alt=""></td>
<td colspan="15" rowspan="4" background="images/SE2_30.gif" width="504" height="50" alt=""></td>
<td rowspan="26" background="images/SE2_31.gif" width="155" height="420" alt=""></td>
<td background="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="14" background="images/SE2_32.gif" width="1" height="276" alt=""></td>
<td background="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="13" background="images/SE2_33.gif" width="1" height="269" alt=""></td>
<td background="images/spacer.gif" width="1" height="34" alt=""></td>
</tr>
<tr>
<td colspan="10" background="images/SE2_34.gif" width="220" height="8" alt=""></td>
<td background="images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="11" background="images/SE2_35.gif" width="17" height="227" alt=""></td>
<td width="192" height="28" colspan="5" background="images/SE2_36.gif" class="LeftNav" alt=""><strong>  <img border="0" src="images/downarrow.gif" width="5" height="3">  Mobile
Phone:<font color="#4E5257"><span style="font-size: 2pt">1</span></font></strong></td>
<td rowspan="11" background="images/SE2_37.gif" width="11" height="227" alt=""></td>
<td colspan="2" rowspan="15" background="images/SE2_38.gif" width="7" height="272" alt=""></td>
<td colspan="9" rowspan="14" background="images/SE2_39.gif" width="488" height="270" alt=""><p> </p>
<p> </p>
<p> </p></td>
<td colspan="4" rowspan="15" background="images/SE2_40.gif" width="9" height="272" alt=""></td>
<td background="images/spacer.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td width="192" height="19" colspan="5" background="images/SE2_41.gif" class="LeftNav" alt=""><strong>       <img src="images/arrow.gif" width="3" height="5">  P
Series</strong></td>
<td background="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td width="192" height="21" colspan="5" background="images/SE2_42.gif" class="LeftNav" alt=""><strong>        <img src="images/arrow.gif" width="3" height="5">  M
Series</strong></td>
<td background="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td width="192" height="19" colspan="5" background="images/SE2_43.gif" class="LeftNav" alt=""><strong>        <img src="images/arrow.gif" width="3" height="5">  K
Series</strong></td>
<td background="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td width="192" height="20" colspan="5" background="images/SE2_44.gif" class="LeftNav" alt=""><strong>        <img src="images/arrow.gif" width="3" height="5">  M
Series </strong></td>
<td background="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td width="192" height="20" colspan="5" background="images/SE2_45.gif" class="LeftNav" alt=""><strong>       <img src="images/arrow.gif" width="3" height="5">  Z
Series</strong></td>
<td background="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td width="192" height="20" colspan="5" background="images/SE2_46.gif" class="LeftNav" alt=""><strong>       <img src="images/arrow.gif" width="3" height="5">  J
Series</strong></td>
<td background="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td width="192" height="20" colspan="5" background="images/SE2_47.gif" class="LeftNav" alt=""><strong>  <img border="0" src="images/downarrow.gif" width="5" height="3">  Accessory:</strong></td>
<td background="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td width="192" height="21" colspan="5" background="images/SE2_48.gif" class="LeftNav" alt=""><strong>       <img src="images/arrow.gif" width="3" height="5">  Handsfree</strong></td>
<td background="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td width="192" height="20" colspan="5" background="images/SE2_49.gif" class="LeftNav" alt=""><strong>       <img src="images/arrow.gif" width="3" height="5">  Car</strong></td>
<td background="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td width="192" height="18" colspan="5" background="images/SE2_50.gif" class="LeftNav" alt=""><strong>       <img src="images/arrow.gif" width="3" height="5">  Multimedia</strong></td>
<td background="images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2" background="images/SE2_51.gif" width="17" height="10" alt=""></td>
<td colspan="5" rowspan="2" background="images/SE2_52.gif" width="186" height="10" alt=""></td>
<td colspan="3" rowspan="2" background="images/SE2_53.gif" width="19" height="10" alt=""></td>
<td background="images/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td rowspan="6" background="images/SE2_54.gif" width="1" height="53" alt=""></td>
<td background="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="12" rowspan="5" background="images/SE2_55.gif" width="222" height="52" alt=""></td>
<td background="images/spacer.gif" width="1" height="33" alt=""></td>
</tr>
<tr>
<td rowspan="3" background="images/SE2_56.gif" width="1" height="12" alt=""></td>
<td colspan="8" rowspan="2" background="images/SE2_57.gif" width="487" height="8" alt=""></td>
<td background="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="2" background="images/SE2_58.gif" width="3" height="10" alt=""></td>
<td rowspan="2" background="images/SE2_59.gif" width="4" height="10" alt=""></td>
<td rowspan="2" background="images/SE2_60.gif" width="2" height="10" alt=""></td>
<td colspan="3" rowspan="2" background="images/SE2_61.gif" width="7" height="10" alt=""></td>
<td background="images/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td colspan="8" background="images/SE2_62.gif" width="487" height="4" alt=""></td>
<td background="images/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td colspan="15" background="images/SE2_63.gif" width="504" height="7" alt=""></td>
<td background="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td colspan="28" background="images/SE2_64.gif" width="730" height="5" alt=""></td>
<td rowspan="4" background="images/SE2_65.gif" width="1" height="81" alt=""></td>
<td background="images/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2" background="images/SE2_66.gif" width="7" height="58" alt=""></td>
<td colspan="22" background="images/SE2_67.gif" width="715" height="51" alt=""><div align="center"><b><span style="color: #EEEEEE; font-size: 8.5pt; font-family: Tahoma; text-decoration: underline"><a href="home.html">Main
Page</a></span><font color="#EEEEEE"><span style="font-size: 8.5pt; font-family: Tahoma">    |   <u><a href="latest_product.html">Latest
Products</a></u></span></font><span style="font-size: 8.5pt; font-family: Tahoma; color: red"><font color="#EEEEEE"><span style="font-size: 8.5pt; font-family: Tahoma">    |    <span style="text-decoration: underline"><a href="phones.html">Mobile
Phones</a></span>    |    <u><a href="accessories.html">Accessories</a></u>   |    </span></font> <span style="color: #EEEEEE; text-decoration: underline"><a href="contact_us.html">Contact
Us</a></span></span></b><font face="Tahoma"><br>
<span style="font-size: 3pt"><br>
</span><font color="#EEEEEE"><span style="font-size: 9pt">Copyright © 2006
Sony Ericsson     </span></font><b> <span style="font-size: 9pt; text-decoration: underline"> <font color="#EEEEEE">Site
Desinged by Arwinder Singh</font></span></b></font></div></td>
<td colspan="3" rowspan="2" background="images/SE2_68.gif" width="8" height="58" alt=""></td>
<td background="images/spacer.gif" width="1" height="51" alt=""></td>
</tr>
<tr>
<td colspan="22" background="images/SE2_69.gif" width="715" height="7" alt=""></td>
<td background="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td colspan="28" background="images/SE2_70.gif" width="730" height="18" alt=""></td>
<td background="images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td background="images/spacer.gif" width="138" height="1" alt=""></td>
<td background="images/spacer.gif" width="1" height="1" alt=""></td>
<td background="images/spacer.gif" width="4" height="1" alt=""></td>
<td background="images/spacer.gif" width="2" height="1" alt=""></td>
<td background="images/spacer.gif" width="10" height="1" alt=""></td>
<td background="images/spacer.gif" width="1" height="1" alt=""></td>
<td background="images/spacer.gif" width="1" height="1" alt=""></td>
<td background="images/spacer.gif" width="81" height="1" alt=""></td>
<td background="images/spacer.gif" width="6" height="1" alt=""></td>
<td background="images/spacer.gif" width="97" height="1" alt=""></td>
<td background="images/spacer.gif" width="7" height="1" alt=""></td>
<td background="images/spacer.gif" width="11" height="1" alt=""></td>
<td background="images/spacer.gif" width="1" height="1" alt=""></td>
<td background="images/spacer.gif" width="1" height="1" alt=""></td>
<td background="images/spacer.gif" width="4" height="1" alt=""></td>
<td background="images/spacer.gif" width="3" height="1" alt=""></td>
<td background="images/spacer.gif" width="4" height="1" alt=""></td>
<td background="images/spacer.gif" width="1" height="1" alt=""></td>
<td background="images/spacer.gif" width="44" height="1" alt=""></td>
<td background="images/spacer.gif" width="5" height="1" alt=""></td>
<td background="images/spacer.gif" width="163" height="1" alt=""></td>
<td background="images/spacer.gif" width="5" height="1" alt=""></td>
<td background="images/spacer.gif" width="135" height="1" alt=""></td>
<td background="images/spacer.gif" width="5" height="1" alt=""></td>
<td background="images/spacer.gif" width="123" height="1" alt=""></td>
<td background="images/spacer.gif" width="7" height="1" alt=""></td>
<td background="images/spacer.gif" width="2" height="1" alt=""></td>
<td background="images/spacer.gif" width="3" height="1" alt=""></td>
<td background="images/spacer.gif" width="3" height="1" alt=""></td>
<td background="images/spacer.gif" width="1" height="1" alt=""></td>
<td background="images/spacer.gif" width="155" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
<map name="SE2_03Map">
<area shape="rect" coords="1,2,217,117" href="home.html">
</map>
<map name="SE2_05Map">
<area shape="rect" coords="1,3,303,81" href="latest_product.html">
</map>
<map name="SE2_07Map">
<area shape="rect" coords="2,0,292,83" href="mobile_phones.html">
</map>
<map name="SE2_09Map">
<area shape="rect" coords="1,2,237,80" href="accessories.html">
</map>
<map name="SE2_11Map">
<area shape="rect" coords="2,0,242,76" href="contact_us.html">
</map>
</body>
</html>

thanks a lot
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design