Hello all. I will try to make this as concise as possible, but, to me at least, it’s pretty complicated. I am fairly new to this, and completely new to XHTML. Hopefully I am posting this in the right place. It concerns XHTML and CSS almost equally.
My website is www.lostinthe60s.net, and I have passed XHTML and CSS validation. I am hosted at ByetHost24, and Using C Panel. I am using a third-party program for my menu. It is “CSS3 Menu”.
I installed the menu maker, made my menu, and uploaded it to my website. Then I accessed my website, and there was no menu. So I started looking around to see why there was no menu. The files relevant to my situation are:
index.html
<!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" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Image-Type" content="image/.jpg" />
<meta http-equiv="Content-Image-Type" content="image/.gif" />
<link rel="stylesheet" type="text/css" href="MyStyle.css" />
<link rel="stylesheet" type="text/css" href="CSS%20Menu.css3prj_files/css3menu1/style.css" />
<style type="text/css">._css3m{display:none}</style>
<title>lostinthe60s</title>
<style type="text/css">
body {background-image:url('images/NoisyBkg.jpg'); margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;}
img {position:fixed; top:0px; left:0px; width:100%; alt:Banner;}</style>
</head>
<body>
<img src="images/MainBanner.jpg" alt="IndexBanner" /> <!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="home/lostinth/public_html/index.html" target="_blank" style="width: 49px; height: 18px; line-height: 18px">Home</a></li>
<li><a href="#" style="width: 57px; height: 18px; line-height: 18px"><span>Photos</span></a>
<ul>
<li><a href="#"><span>Family & Friends</span></a>
<ul>
<li><a href="home/lostinth/public_html/Philippines.html" target="_blank">Philippines</a></li>
<li><a href="home/lostinth/public_html/U.S..html" target="_blank">U.S.</a></li></ul></li>
<li><a href="home/lostinth/public_html/Here%20&%20There.html" target="_blank">Here & There</a></li></ul></li>
<li><a href="#" style="width: 33px; height: 18px; line-height: 18px"><span>Bios</span></a>
<ul>
<li><a href="home/lostinth/public_html/Glenda.html" target="_blank">Glenda</a></li>
<li><a href="home/lostinth/public_html/Daniel.html" target="_blank">Daniel</a></li></ul></li>
<li><a href="#" style="width: 115px; height: 18px; line-height: 18px"><span>Fun & Helpful</span></a>
<ul>
<li><a href="home/lostinth/public_html/FunStuff.html" target="_blank" title="Jokes, Games, Etc.">Fun Stuff</a></li>
<li><a href="home/lostinth/public_html/HelpfulStuff.html" target="_blank" title="Tutorials, Freeware, Etc.">Helpful Stuff</a></li></ul></li>
<li><a href="home/lostinth/public_html/RambleOn.html" target="_blank" title="Just me, running my mouth about...well, everything, as usual. LOL" style="width: 90px; height: 18px; line-height: 18px">Ramble On</a></li>
<li><a href="#" title="Forums may take a while to get running." style="width: 62px; height: 18px; line-height: 18px">Forums</a></li>
<li class="toplast"><a href="home/lostinth/public_html/ContactUs.html" target="_blank" style="width: 90px; height: 18px; line-height: 18px">Contact Us</a></li></ul>
<p class="_css3m"><a href="http://css3menu.com/">CSS Web Menus Css3Menu.com</a></p><!-- End css3menu.com BODY section -->
</body>
</html>
MyStyle.css
#pos_absolute{position:absolute; top:0px; left:0px; width:100%;}
style.css
ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#beb2ff;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;zoom:1;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;
*display:inline;}
ul#css3menu1>li,ul#css3menu1 li{
margin:0;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a,ul#css3menu1 a.pressed{
display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 14px Trebuchet MS;color:#0000ff;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menu1 ul li{
float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
text-align:center;padding:4px;background-color:#beb2ff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#0000ff;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1 li:hover>a{
background-color:#a797ff;border-color:#C0C0C0;border-style:solid;font:bold 14px Trebuchet MS;color:#ffff00;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1 img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
display:none;}
ul#css3menu1 li:hover > a img.def{
display:none;}
ul#css3menu1 li:hover > a img.over{
display:inline;}
ul#css3menu1 li a.pressed img.over{
display:inline;}
ul#css3menu1 li a.pressed img.def{
display:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
background-image:url("arrowsub.png");padding-right:24px;}
ul#css3menu1 a{
padding:10px;background-color:#000000;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;color:#0000ff;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
background-color:#a797ff;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#ffff00;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
background-color:#d4ceff;background-image:none;font:14px Tahoma;color:#ffff00;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1 li.topfirst>a{
border-width:0;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.toplast>a{
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;}
CSS Menu.css3prj (XML file)
<?xml version="1.0" encoding="UTF-8"?>
<Css3Menu>
<project version="1.1">
<params>
<HasChanges>true</HasChanges>
<EmbandImg>false</EmbandImg>
<Data>var menuStyle={
"menu":{
"fontStyle":["bold 14px Trebuchet MS","bold 14px Trebuchet MS"],
"fontColor":["#000","#FFF"],
"textShadow":["#FFF 0 0 1px","#FFF 0 0 1px"],
"menuBackColor":"#dedede",
"menuBorderColor":"#5f5f5f",
"menuBorderWidth":"1px",
"menuBorderStyle":"solid",
"menuBorderRadius":"5px",
"itemBackColor":["#444444","#444444"],
"itemBackImage":["images/mainbk.png","images/mainbk.png"],
"itemBackPosY":["0","100px"],
"itemBorderWidth":"0 0 0 1px",
"itemBorderColor":["#C0C0C0","#C0C0C0"],
"itemBorderStyle":["solid","solid"],
"itemPadding":"10px",
"itemCursor":"pointer",
"arrowImageSub":["images/arrowsub.png","images/arrowsub.png"],
"arrowWidthSub":4,
"separatorImage":"images/hsep.png",
"separatorHeight":"1px",
"separatorVWidth":"1",
"separatorPadding":"0px",
"shadowLen":5
},
"topmenu":{
},
"submenu":{
"itemBackColor":["#424542","#424542"],
"itemBackImage":["none","none"],
"fontStyle":["normal 14px Tahoma","normal 14px Tahoma"],
"fontColor":["#FFF","#F2B20E"],
"fontDecoration":["none","none"],
"itemBorderWidth":"0",
"itemPadding":"4px",
"textShadow":["#FFF 0 0 0","#FFF 0 0 0"],
"menuBackColor":"#424542",
"menuBorderRadius":"6px",
"menuBorderColor":"#FFF",
"menuBorderWidth":"2px",
"itemSpacing":"10"
},
"topfirst":{
"itemBorderRadius":"4px 0 0 4px",
"itemBorderWidth":"0"
},
"toplast":{
"itemBorderRadius":"0 4px 4px 0"
}
};</Data>
<isHorizontal>1</isHorizontal>
<smMaxRows>0</smMaxRows>
<FontFamily>Trebuchet MS</FontFamily>
<FontSize>14</FontSize>
<Bold>true</Bold>
<Italic>false</Italic>
<Underline>false</Underline>
<OverUnderline>false</OverUnderline>
<FontFamily1>Tahoma</FontFamily1>
<FontSize1>14</FontSize1>
<Bold1>false</Bold1>
<Italic1>false</Italic1>
<Underline1>false</Underline1>
<OverUnderline1>false</OverUnderline1>
<TextColor0>#0000ff</TextColor0>
<TextColor1>#ffff00</TextColor1>
<SubTextColor0>#0000ff</SubTextColor0>
<SubTextColor1>#ffff00</SubTextColor1>
<ItemBackColor0>#000000</ItemBackColor0>
<ItemBackColor1>#a797ff</ItemBackColor1>
<SubitemBackColor0>#beb2ff</SubitemBackColor0>
<SubitemBackColor1>#d4ceff</SubitemBackColor1>
<itemBorderRadius0>4</itemBorderRadius0>
<itemBorderRadius1>0</itemBorderRadius1>
<menuBorderRadius0>5</menuBorderRadius0>
<menuBorderRadius1>6</menuBorderRadius1>
<itemAlign>center</itemAlign>
<itemAlignTop>center</itemAlignTop>
<smOpacity>100</smOpacity>
<menuWidth>644</menuWidth>
<menuHeight>30</menuHeight>
<fade>false</fade>
<rtl>false</rtl>
</params>
<items>
<item>
<text>Home</text>
<link>http://www.lostinthe60s.net/home/lostinth/public_html/index.html</link>
<hint></hint>
<target>_blank</target>
<pressed>0</pressed>
</item>
<item>
<text>Photos</text>
<link></link>
<hint></hint>
<target></target>
<pressed>0</pressed>
<items>
<item>
<text>Family & Friends</text>
<link></link>
<hint></hint>
<target></target>
<pressed>0</pressed>
<items>
<item>
<text>Philippines</text>
<link>http://www.lostinthe60s.net/home/lostinth/public_html/Philippines.html</link>
<target>_blank</target>
<pressed>0</pressed>
</item>
<item>
<text>U.S.</text>
<link>http://www.lostinthe60s.net/home/lostinth/public_html/U.S..html</link>
<target>_blank</target>
<pressed>0</pressed>
</item>
</items>
</item>
<item>
<text>Here & There</text>
<link>http://www.lostinthe60s.net/home/lostinth/public_html/Here&There.html</link>
<target>_blank</target>
<pressed>0</pressed>
</item>
</items>
</item>
<item>
<text>Bios</text>
<link></link>
<hint></hint>
<target></target>
<pressed>0</pressed>
<items>
<item>
<text>Glenda</text>
<link>http://www.lostinthe60s.net/home/lostinth/public_html/Glenda.html</link>
<target>_blank</target>
<pressed>0</pressed>
</item>
<item>
<text>Daniel</text>
<link>http://www.lostinthe60s.net/home/lostinth/public_html/Daniel.html</link>
<target>_blank</target>
<pressed>0</pressed>
</item>
</items>
</item>
<item>
<text>Fun & Helpful</text>
<link></link>
<hint></hint>
<target></target>
<pressed>0</pressed>
<items>
<item>
<text>Fun Stuff</text>
<link>http://www.lostinthe60s.net/home/lostinth/public_html/FunStuff.html</link>
<hint>Jokes, Games, Etc.</hint>
<target>_blank</target>
<pressed>0</pressed>
</item>
<item>
<text>Helpful Stuff</text>
<link>http://www.lostinthe60s.net/home/lostinth/public_html/HelpfulStuff.html</link>
<hint>Tutorials, Freeware, Etc.</hint>
<target>_blank</target>
<pressed>0</pressed>
</item>
</items>
</item>
<item>
<text>Ramble On</text>
<link>http://www.lostinthe60s.net/home/lostinth/public_html/RambleOn.html</link>
<hint>Just me, running my mouth about...well, everything, as usual. LOL</hint>
<target>_blank</target>
<pressed>0</pressed>
</item>
<item>
<text>Forums</text>
<link></link>
<hint>Forums may take a while to get running.</hint>
<target></target>
<pressed>0</pressed>
</item>
<item>
<text>Contact Us</text>
<link>http://www.lostinthe60s.net/home/lostinth/public_html/ContactUs.html</link>
<hint></hint>
<target>_blank</target>
<pressed>0</pressed>
</item>
</items>
<media>
<img src=""></img>
<img src="arrowsub.png">iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAYAAABirU3bAAAAHUlEQVR42mP8DwQMEMAIJqB8uCAjQgFEEKsKFDMAuFsT9m2NIKYAAAAASUVORK5CYII=</img>
<img src="hsep.png">iVBORw0KGgoAAAANSUhEUgAAAL4AAAABCAIAAADvioNqAAAAa0lEQVR42nVPQQ7AIAgrF/9msv//xRNL0EFBVhJsgaLKfOZaS0Rg2KRkAYXLTDa8cCRI3O1izJV+HF37jyAsJbek8BaqGtwiEet6VlCQPNSODa8fCRLfRLjIeK9qN4TMt7O3Pvb6Dn9/jPEC0Jix4HcuSB4AAAAASUVORK5CYII=</img>
<img src="mainbk.png">iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA4pKJyhkvMAAABsSURBVCjP7ZFBCoAwEAOn6+f8/088eWmNB2EhpVXPYg9Dkt2WQpC0BaAASHWk6mzzrEMb2OZ3O3vMsvCn8A+VwWC0h6sp4nnlM0DSGsCeWfV6qldRfVAHe+2286se3h5JJUspiQhg8Ywfr3ACj/VHLxipLh8AAAAASUVORK5CYII=</img>
</media>
</project>
</Css3Menu>
CSS Menu.css3prj.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="CSS Menu.css3prj_files/css3menu1/style.css" type="text/css" /><style>._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
</head>
<body style="background-color:#EBEBEB">
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="http://www.lostinthe60s.net/home/lostinth/public_html/index.html" target="_blank" style="width:49px;height:18px;line-height:18px;">Home</a></li>
<li><a href="#" style="width:57px;height:18px;line-height:18px;"><span>Photos</span></a>
<ul>
<li><a href="#"><span>Family & Friends</span></a>
<ul>
<li><a href="http://www.lostinthe60s.net/home/lostinth/public_html/Philippines.html" target="_blank">Philippines</a></li>
<li><a href="http://www.lostinthe60s.net/home/lostinth/public_html/U.S..html" target="_blank">U.S.</a></li>
</ul></li>
<li><a href="http://www.lostinthe60s.net/home/lostinth/public_html/Here&There.html" target="_blank">Here & There</a></li>
</ul></li>
<li><a href="#" style="width:33px;height:18px;line-height:18px;"><span>Bios</span></a>
<ul>
<li><a href="http://www.lostinthe60s.net/home/lostinth/public_html/Glenda.html" target="_blank">Glenda</a></li>
<li><a href="http://www.lostinthe60s.net/home/lostinth/public_html/Daniel.html" target="_blank">Daniel</a></li>
</ul></li>
<li><a href="#" style="width:115px;height:18px;line-height:18px;"><span>Fun & Helpful</span></a>
<ul>
<li><a href="http://www.lostinthe60s.net/home/lostinth/public_html/FunStuff.html" target="_blank" title="Jokes, Games, Etc.">Fun Stuff</a></li>
<li><a href="http://www.lostinthe60s.net/home/lostinth/public_html/HelpfulStuff.html" target="_blank" title="Tutorials, Freeware, Etc.">Helpful Stuff</a></li>
</ul></li>
<li><a href="http://www.lostinthe60s.net/home/lostinth/public_html/RambleOn.html" target="_blank" title="Just me, running my mouth about...well, everything, as usual. LOL" style="width:90px;height:18px;line-height:18px;">Ramble On</a></li>
<li><a href="#" title="Forums may take a while to get running." style="width:62px;height:18px;line-height:18px;">Forums</a></li>
<li class="toplast"><a href="http://www.lostinthe60s.net/home/lostinth/public_html/ContactUs.html" target="_blank" style="width:90px;height:18px;line-height:18px;">Contact Us</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">CSS Web Menus Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->
</body>
</html>
template.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="@DIR@">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Start @APP_NAME@ HEAD section -->
<link rel="stylesheet" href="@FILES_PATH@/style.css" type="text/css" /><style>._css3m{display:none}</style>
<!-- End @APP_NAME@ HEAD section -->
</head>
<body style="background-color:#EBEBEB">
<!-- Start @APP_NAME@ BODY section -->
@HTML@<p class="_css3m"><a href="http://css3menu.com/">@KEY@ Css3Menu.com</a></p>
<!-- End @APP_NAME@ BODY section -->
</body>
</html>
The first thing I noticed is that the last three files are not called by any other file. That is to say there are no HREF or links to these three files. I decided the first thing I needed to do was to get the [COLOR="#800000"]CSS Menu.css3prj.html[/COLOR] file to run. Understand, that I really was stepping into territory a little bit over my head here.
To the best of my knowledge, when you go to a website, the browser looks for the index.HTML file. It then calls it, or references it, or yells RUN at it, or whatever. From there on out, for any other file to run, it has to be called by a file. Since nothing referenced the CSS Menu.css3prj.html file, I assumed that was an issue. What I did was copy
<link rel="stylesheet" href="CSS Menu.css3prj_files/css3menu1/style.css" type="text/css" /><style>._css3m{display:none}</style>
and everything from
<!-- Start css3menu.com BODY section -->
to
<!-- End css3menu.com BODY section -->
from the CSS Menu.css3prj.html file, and pasted it into my index.html file.
Then I accessed my website again, and this time I had a menu. A menu that functions. A menu that sits in the top left-hand corner of my screen, and no matter how much I beg, or plead or yell at it, it refuses to move. The only file I can find that references position, is the style.css file. And that is in lines 4 and 12 of the file. I tried changing these values to position the menu where I wanted it, but it had no effect.
Lastly, I have my template .html file. And I really don’t understand it. It seems to reference the style.css file.
href="@FILES_PATH@/style.css"
, but it also seems to reference a website
@HTML@<p class="_css3m"><a href="http://css3menu.com/">@KEY@ Css3Menu.com</a></p>
As I said, I really don’t understand this file, but it seems to me that if there was a problem at that website, there would be a problem with my menu, not that I think that is my problem.
So, and that is for I stand as of now. I have the feeling that the solution is going to be something really simple, but I’ll be darned if I can find it. I have beaten my head against the wall trying to figure it out on my own, because that’s just how I am, and I think that it is the best way to learn. If anyone has any ideas, or criticisms, (I can deal with criticism) I would greatly appreciate hearing from you. Thanks for taking the time to read my post.
Apart from <meta>, <title> and links to things like CSS and JS, all your HTML elements should be between the <body></body> tags.