CSS Menu and positioning - Page 1

User 472422 Photo


Registered User
111 posts

Greetings

I have added a CSS menu to my webpage. When I added the css menu, the table in the page shifted down the page! What did I do wrong?

Tony
User 122279 Photo


Senior Advisor
14,455 posts

We need to see the code, so please post an url. If the page in question has not been uploaded, then post attach the code here.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 472422 Photo


Registered User
111 posts

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta name="generator" content="Traditional Martial Artists - International Network of Traditional Martial Arts">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title> Traditional Martial Artists - International Network of Traditional Martial Arts </title>

<style type="text/css">
.textstyle0 {font-family:Arial;font-weight:bold;font-style:normal;font-size:8pt;text-decoration:none;color:#000000;}
.textstyle1 {font-family:Arial;font-weight:bold;font-style:normal;font-size:8pt;text-decoration:none;color:#800000;}
.textstyle2 {font-family:Arial;font-weight:normal;font-style:normal;font-size:8pt;text-decoration:none;color:#c8c8c8;}
.textstyle3 {font-family:Arial;font-weight:bold;font-style:normal;font-size:8pt;text-decoration:none;color:#ff0000;}
.textstyle4 {font-family:Arial;font-weight:normal;font-style:normal;font-size:8pt;text-decoration:none;color:#000000;}
.textstyle5 {font-family:Arial;font-weight:bold;font-style:normal;font-size:10pt;text-decoration:none;color:#000000;}
#subscribe {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
color: #000;
}
.shopping {
font-size: small;
}
#UPDATED {
color: #000;
}
#sponsor {
font-size: 12px;
}
#sponsor {
font-size: 12px;
}
#UPDATED {
font-size: 9px;
}
body {
background-image: url();
background-repeat: no-repeat;
}
#tranimage {
background-attachment: fixed;
background-image: url(files/images/trans.jpg);
background-repeat: no-repeat;
background-position: center center;
position: absolute;
}
#trans {
}
#trans {
}
#left {
text-align: left;
}
.updated {
color: #000;
font-size: 10px;
}
.optin1 {
font-size: 12px;
font-weight: bold;
}
.optin2 {
font-size: 12px;
}
optin3 {
font-weight: bold;
}
.optin3 {
font-weight: normal;
}
.boldred {
font-weight: bold;
color: #900;
}
.blackbold {
font-weight: bold;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.bodytext {
font-size: 12px;
font-weight: normal;
}
.visit {
font-size: 10px;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#FFFFFF">

<IMG SRC="files/images/iatmabanner.jpg" alt="Martial Arts Network" STYLE="position:absolute; TOP:0px; LEFT:139px; WIDTH:980px; HEIGHT:135px">
<IMG SRC="files/images/menumap.jpg" alt="Martial Arts Network" STYLE="position:absolute; TOP:138px; LEFT:140px; WIDTH:181px; HEIGHT:101px">

<!-- BEGINNING OF MENU SCRIPT -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<TITLE>Pure Css Menu by Deluxe-Menu.com, (c) 2009. Generated by Deluxe Tuner.</TITLE>

<link type="text/css" href="iatma-css-menu.files/style.css" rel="stylesheet">

</head>

<body bgcolor="#FFFFFF">

<!-- Deluxe Css Menu -->

<ul id="cssMenu">
<li><a href="http://www.iatma.org" title="Africa Martial Arts Network">Africa</a></li>
<li><a href="http://deluxe-menu.com/css-menu/" title="Japanese Martial Arts">Americas</a></li>
<li><a href="http://deluxe-menu.com/css-menu/" title="Martial Arts network">Asia-Pacific</a></li>
<li><a href="#">Europe</a></li>
<li><a href="#">Middle East</a></li>
<li><a href="#">South Asia</a></li>
<li><a href="#">UK</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Member benefits</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Have your say (Blog)</a></li>
<li><a href="#">Images, videos and audio</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Live chat</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Dojo directory</a></li>
<li><a href="#">Dan/Kyu registery</a></li>
<li><a href="#">Classified ads</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Maxims</a></li>
<li><a href="#">Test yourself (quiz)</a></li>
<li><a href="#">Your name in kanji</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Hall of fame</a></li>
<li><a href="#">Events calendar</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Online store</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Guest book</a></li>
<li><a href="#">Contact information</a></li>
</ul>


<!-- (c) 2009, Deluxe-Menu.com -->



<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</HTML>
<!-- END OF MENU SCRIPT -->

<!-- REST OF BODY CONTENT BELOW HERE -->

<table width="980" align="center" style="height:400px; font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 11px; text-align: left; font-weight: bold;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="980"><table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" bgcolor="white">
<tr valign="top">
<td valign="top" width="870">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="1010"></td></tr>
<tr>
<td width="1010">
</td>
</tr>
<tr>
<td width="980">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
</td></tr>
</table>
</td>
</tr>
</table>
<table width="100%" height="1153" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="899" colspan="5">
<table border="0" width="980">
<tr>
<td width="3" rowspan="9">
<p>&nbsp;</p>
</td>
<td width="13" height="120">&nbsp;</td>
<td width="157" height="120"><h1>&nbsp;</h1>
</td>
<td width="53" align="right" valign="middle" height="120">
<p>&nbsp;</p></td>
<td width="449" height="120">
<h1>Traditional Martial Arts Network</h1>
</td>
<td width="3" height="0" align="right">
</td>
<td width="272" height="120">
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td height="5" align="left" valign="top">&nbsp;</td>
<td width="157" height="5" align="left" valign="top">&nbsp;</td>
<th height="5" colspan="4" align="left" valign="bottom"><p class="updated">Last Updated:&nbsp;<script language="JavaScript">
<!--
// ==============================================
// Copyright 2009 by www.webcreations1.com
// Source: www.webcreations1.com
// Author: www.webcreations1.com
// ==============================================

// Set the font color, face, size, and style...
// Acceptable TheFontFace values are those you
// normally use in HTML, for instance:
// Arial
// TimesRoman
// Courier

// Acceptable TheFontColor values are any #RRGGBB
// same as HTML. Remember to use the # sign and
// enclose in quotes. Typical values:
// #FF0000 is red
// #00FF00 is green
// #0000FF is blue

// Acceptable TheFontSize values are 2-7.

// Acceptable TheFontStyle values are (exactly!):
// plain
// bold
// italic
// bolditalic

var TheFontFace = "Arial";
var TheFontColor = "#000000";
var TheFontSize = "1.25";
var TheFontStyle = "bold";

// Set the separator between the date elements;
// usually use either - or /.

var TheSeparator = "-";

// Show or do not show the day of the week; set
// yes to show, no not to show.

var ShowDay ="yes";

// Do Not Edit Below This Line
// ==============================================

var Days = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var TheDate = new Date();

var TheWeekDay = TheDate.getDay();
var Day ="";
if (ShowDay == "yes"){
Day = Days[TheWeekDay];
Day += " ";}

var TheMonth = TheDate.getMonth() + 1;
if (TheMonth < 10) TheMonth = "0" + TheMonth;

var TheMonthDay = TheDate.getDate();
if (TheMonthDay < 10) TheMonthDay = "0" + TheMonthDay;

var TheYear = TheDate.getYear();
if (TheYear < 1000) TheYear += 1900;

var FontTagLeft = "";
var FontTagRight = "";

if (TheFontStyle == "bold"){
FontTagLeft = "<b>";
FontTagRight ="</b>";}

if (TheFontStyle == "italic"){
FontTagLeft = "<i>";
FontTagRight ="</i>";}

if (TheFontStyle == "bolditalic"){
FontTagLeft = "<b><i>";
FontTagRight = "</i></b>";}

var D = "";
D += "<font color='"+TheFontColor+"' face='"+TheFontFace+"' size='"+TheFontSize+"'>";
D += FontTagLeft+Day+TheMonth+TheSeparator+TheMonthDay+TheSeparator+TheYear+FontTagRight;
D += "</font>";

document.write(D);

//-->
</script>
</p>
<ul class="MenuBarHorizontal" id="MenuBar1" name="MenuBar1">
<li><a class="MenuBarActive" href="#">Countries</a>
<ul>
<li><a href="#">Africa</a></li>
<li><a href="#">Americas</a></li>
<li><a href="#">Asia Pacific</a></li>
<li><a href="#">Europe</a></li>
<li><a href="#">Middle East</a></li>
<li><a href="#">South Asia</a></li>
</ul>
</li>
<li><span class="MenuBarItemSubmenu"><a href="#" class="MenuBarItemSubmenu">Membership</a></span>
<ul>
<li><a href="#">Benefits</a></li>
<li><a href="#">Join</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Community</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Store</a>
<ul>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Resources</a>
<ul>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Contact</a>
<ul>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
</ul></th>
</tr>
<tr>
<td height="30" align="left" valign="top">&nbsp;</td>
<td width="157" height="30" align="left" valign="top"></td>
<td align="left" valign="middle" class="boldred">Latest:
</td>
<td height="40" align="left" valign="top" class="boldred"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="410" height="28" id="CoffeeCupNewsReader" align="top">
<param name="wmode" value="transparent">
<param name="movie" value="mynews.swf"/>
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#ffffff" />
<embed src="mynews.swf" quality="high" bgcolor="#ffffff" width="410" height="28"
name="CoffeeCupNewsReader" scale="noscale" salign="lt" align="top" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></td>
<td align="left" valign="top">&nbsp;</td>
<td width="272" height="250" rowspan="3" valign="top"><p><img src="files/images/SUNRISE.jpg" width="272" height="198" alt="sunrise"></p>
<p class="blackbold">Join Our Sponsors</p>
<p class="bodytext" style="color: #000; font-weight: normal;">If you have found the INTMA website useful, we invite you to make a donation to help us continue to develop and expand our network and to support projects for martial artists around the world. We welocme and need your support.</p>
<p class="bodytext" style="color: #000; font-weight: normal;">Make your donation online via PayPal - it's easy and secure!</p><form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_s-xclick"><input type="hidden" name="hosted_button_id" value="974547"><input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt=""><img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></form>
<p class="optin1"><span class="blackbold">Sign Up</span></p>
<p class="optin2"><span class="updated"><span class="bodytext">Sign up to receive updates on new products, promotions and great educational information. It's the best way to stay in touch with the latest news and information from The INTMA. </span></span></p>
<h3 class="optin2"><span class="optin3">Read Our <span class="boldred">Privacy Policy</span></span> <img src="files/images/redarrow.jpg" alt="privacy" width="10" height="12"></h3>
<p class="optin2">
<script language="javascript" src="/files/scripts/newsletter/load.php"></script></p></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
<td width="157" align="left" valign="top">&nbsp;</td>
<td colspan="2" align="left" valign="top" bgcolor="#FFFFFF"><p class="blackbold">
<h2>Welcome to the International Network of Traditional Martial Artists Website</h2>
<span class="bodytext">The International Network of Traditional Martial Artists (INTMA) is a world-wide community of traditional martial arts practiotners who engage in a process of collective learning through the sharing of information and experiences online. In this way, INTMA members learn from each other and each person has an opportunity to develop their martial arts knowledge.</span><br>
<h3 class="blackbold">Participation Sets Us Apart</h3>
<p class="bodytext">The International Network of Traditional Martial Artists is unlike most martial arts membership organizations in that 1) our identity is defined by a shared commitment and competence in the traditional Japanese martial arts traditions; 2) members engage in joint activities and discussions, help each other, and share information; and 3) members develop a shared repertoire of experiences, explanations, documents, videos and other resources. The idea that learning involves a deepening process of communication and participation from the entire member community sets us apart from the more common pyramid type (hierarchical) membership organizations with a top-down approach to communications and information sharing.</p>
<h3 class="blackbold">Everyone is Welcome</h3>
<p class="bodytext">The International Network of Traditional Martial Artists welcomes all instructors and students from all traditional Japanese martial arts styles to network and share information together and further expand our knowledge of these martial traditions.</p>
<p class="bodytext">There is no need to change or to resign other affiliations as we feel strongly that members can benefit from a broad range of fellowships.</p>
<p class="bodytext">Membership in the International Network of Traditional Martial Artists is FREE! If you are a teacher or student of any of the traditional Japanese martial arts - Register today.</p>
<p>&nbsp; </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
<td height="250" align="left" valign="top"><p>&nbsp;</p></td>
</tr>
<tr>
<td height="1" align="left" valign="top"></td>
<td height="1" align="left" valign="top"></td>
<td height="1" align="left" valign="top"></td>
<td height="1"></td>
<td height="1" align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="50" align="left" valign="top">&nbsp;</td>
<td width="157" align="left" valign="top"><p class="blackbold">&nbsp;</p></td>
<td height="0" align="left" valign="top">&nbsp;</td>
<td>&nbsp;</td>
<td align="left" valign="top">&nbsp;</td>
<td width="272" align="left" valign="top"><h3 class="blackbold">Contact Information: </h3>
<p class="bodytext"><span class="blackbold">INTMA</span><br>
honbu@iatma.org<br>
(443) 603-9840 </p>
<p class="bodytext">Committed to creating the most open and accessible Martial Arts Network on the web.</p></td>
</tr>
<tr>
<td height="45" colspan="2" align="left" valign="bottom">&nbsp;</td>
<td height="45" align="left" valign="top">&nbsp;</td>
<td>&nbsp;</td>
<td align="left" valign="top">&nbsp;</td>
<td width="272"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" name="starspoll2" width="111" height="45" hspace="0" vspace="0" align="middle" id="starspoll">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://www.iatma.org/files/scripts/starrate/starsrate.swf?id=1&owner=phpjabbers.com&phpURL=www.iatma.org/files/scripts/starrate/&subid=" />
<param name="quality" value="high" />
<embed src="http://www.iatma.org/files/scripts/starrate/starsrate.swf?id=1&owner=phpjabbers.com&phpURL=www.iatma.org/files/scripts/starrate/&subid=" width="111" height="45" hspace="0" vspace="0" align="middle" quality="high" name="starspoll2" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></td>
</tr>
<tr>
<td colspan="2" align="center" valign="top">&nbsp;</td>
<td align="left" valign="top">&nbsp;</td>
<td>&nbsp;</td>
<td align="left" valign="top">&nbsp;</td>
<td valign="bottom"><table border="0">
<tr>
<td width="15"><img src="files/images/visitednow.jpg" width="19" height="23" alt="online"></td>
<td width="180"><?
include("http://www.iatma.org/files/scripts/online/users.php");
?></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2" align="center" valign="top">
<p>&nbsp;</p> </td>
<td width="53" align="left" valign="top">&nbsp;</td>
<td width="449">
<p>&nbsp;</p>
</td>
<td width="3" align="left" valign="top">&nbsp;</td>
<td width="272" valign="bottom">
<table border="0">
<tr>
<td width="53" valign="top"><img src="files/images/visitedall.jpg" width="48" height="25" alt="visited"></td>
<td width="30" valign="middle" class="visit"> <img src="count.php" alt="CJ Hit Counter" border="0" /></td>
<td width="168"><span class="visit"> Visitors Accessed This Site</span></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
<tr><td width="12" height="2"></td><td width="534"></td><td width="43"></td><td width="289"></td><td width="21"></td></tr></table></td>
</tr>

<tr><td><table border="0" cellpadding="0" cellspacing="0" width="100%" height="10">
<tr valign="top">
<td height="20" align="center" valign="middle" bgcolor="#990000"><a class="menu01"><font color="white" size="2">&copy; All Rights Reserved; International Network of Traditional Martial Artists</font></a></td>
</tr>
</table></td>
</tr>
</table>

</td>
</tr>
</table>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
User 463058 Photo


Ambassador
1,073 posts

You have this code inserted within the body of your page:
<!-- BEGINNING OF MENU SCRIPT -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<TITLE>Pure Css Menu by Deluxe-Menu.com, (c) 2009. Generated by Deluxe Tuner.</TITLE>

<link type="text/css" href="iatma-css-menu.files/style.css" rel="stylesheet">

</head>

<body bgcolor="#FFFFFF">

<!-- Deluxe Css Menu -->

<ul id="cssMenu">
<li><a href="http://www.iatma.org" title="Africa Martial Arts Network">Africa</a></li>
<li><a href="http://deluxe-menu.com/css-menu/" title="Japanese Martial Arts">Americas</a></li>
<li><a href="http://deluxe-menu.com/css-menu/" title="Martial Arts network">Asia-Pacific</a></li>
<li><a href="#">Europe</a></li>
<li><a href="#">Middle East</a></li>
<li><a href="#">South Asia</a></li>
<li><a href="#">UK</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Member benefits</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Have your say (Blog)</a></li>
<li><a href="#">Images, videos and audio</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Live chat</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Dojo directory</a></li>
<li><a href="#">Dan/Kyu registery</a></li>
<li><a href="#">Classified ads</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Maxims</a></li>
<li><a href="#">Test yourself (quiz)</a></li>
<li><a href="#">Your name in kanji</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Hall of fame</a></li>
<li><a href="#">Events calendar</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Online store</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Guest book</a></li>
<li><a href="#">Contact information</a></li>
</ul>


<!-- (c) 2009, Deluxe-Menu.com -->



<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</HTML>
<!-- END OF MENU SCRIPT -->


Try this code instead:
<!-- BEGINNING OF MENU SCRIPT -->
<!-- Deluxe Css Menu -->
<ul id="cssMenu">
<li><a href="http://www.iatma.org" title="Africa Martial Arts Network">Africa</a></li>
<li><a href="http://deluxe-menu.com/css-menu/" title="Japanese Martial Arts">Americas</a></li>
<li><a href="http://deluxe-menu.com/css-menu/" title="Martial Arts network">Asia-Pacific</a></li>
<li><a href="#">Europe</a></li>
<li><a href="#">Middle East</a></li>
<li><a href="#">South Asia</a></li>
<li><a href="#">UK</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Member benefits</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Have your say (Blog)</a></li>
<li><a href="#">Images, videos and audio</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Live chat</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Dojo directory</a></li>
<li><a href="#">Dan/Kyu registery</a></li>
<li><a href="#">Classified ads</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Maxims</a></li>
<li><a href="#">Test yourself (quiz)</a></li>
<li><a href="#">Your name in kanji</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Hall of fame</a></li>
<li><a href="#">Events calendar</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">Online store</a></li>
<li><a href="#">&nbsp</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Guest book</a></li>
<li><a href="#">Contact information</a></li>
</ul>
<!-- (c) 2009, Deluxe-Menu.com -->
<!-- END OF MENU SCRIPT -->


And insert this code into the head of your page:
<link type="text/css" href="iatma-css-menu.files/style.css" rel="stylesheet">
User 122279 Photo


Senior Advisor
14,455 posts

It is a bit difficult to understand what the page was supposed to look like. As it is now, it has two menus, and most of the items are the same.

Anyway, it would be wise to clean up the page by editing out the doctype, html, title and body from the menu, as Cary suggests. Further cleaning could be going through the mass of nested tables and see which are necessary and which not.

Then it would be a good idea to remove all the styles from the html document and make it into a separate file, linking it to the main document as Cary has described.

The code you submitted bears no trace of any CoffeeCup applications having been used, so I think it would be an idea to go to the support forum of your website builder and ask further questions there.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 472422 Photo


Registered User
111 posts

Thanks for your support

I put the code within a table and now it is positioned correctly.

BTW, the forum title does not suggest that the topics evolve around CC products but rather CC product users, which I am. Am I correct?

Thanks again

Tony
User 122279 Photo


Senior Advisor
14,455 posts

Hi Tony, yes you are correct - in principle. The reason for my suggestion was that you might get a better answer, more related to the software you are using if you go to the forum of that software.

Those of us who answer questions in here do know a lot of things - combined, ;)
But we might not know the software if it is non-CC.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2076949 Photo


Registered User
34 posts

I added a CSS menu to my site, but it isn't positioned correctly. (It moves over and down about 3 px.) Does anyone have a link to an easy-to-understand CSS primer re: positioning elements?

Thanks in advance!
User 364143 Photo


Guest
5,410 posts

It's probably a doctype, padding, or margin issue.

http://www.w3schools.com/css/css_boxmodel.asp

CoffeeCup... Yeah, they are the best!
User 38401 Photo


Senior Advisor
10,951 posts

got a link Sarah? That always helps for people to be able to actually look at your code online and see how it's setup to help you decipher what could be wrong with it :)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.