Lostinthe60s
01-24-2012, 03:12 PM
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.cssul#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;}
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.cssul#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;}