Wheres my menu gone?

HTML & CSS
1

Hi,

I have racked my brains to try and work out why i cant see my menu. It was there last week but now (after fiddling about ta bit with the code it has disappeared. You can see how it should look here (on the live page the menu is seen:)

www.web-writer-articles.co.uk

I think this must be a css problem. Below you can see the html area for the navigation and css pages:

<body>
<div id="wrapper">
<div id="header"><div id="headleft"><img src="myimages/copywriter_redone.png" alt="Web writer  converts interest to sales and enhances traffic to your website" border="0" usemap="#Map4" title="web writer, web text and internet marketing. Web content at very reasonable prices. Ask me." />
<map name="Map4" id="Map4"><area shape="rect" coords="781,101,936,133" href="http://www.web-writer-articles.co.uk/contact.php" />
</map>

</div><!--headleft-->

  <ul class="menu">
            <li><a href="index.php">Home</a></li>
            <li><a href="webcontentservices.php">Web Writer</a></li>			
            <li><a href="thisisme.php">About me </a></li>
            <li><a href="ghost_writer.php">Ghostwriter</a></li>
            <li><a href="http://www.web-writer-articles.co.uk/blog/"> SEO Guide</a></li>
            <li><a href="contact.php">Contact me</a></li>
    </ul>
</div><!--header-->
<div id="mainNav">
<img src="myimages/bookshelf2.jpg" alt="web writer allows you to get on with your business" width="158" height="789" />
</div><!--mainNav-->
<div id="content">
<div id="mainContent">

CSS:

/* CSS Document */
/* to get the secondaryNav the same as the main nav width you need to find out what 23% (it was 23% instead of 25% to give 2% gutter) of the content area is. You do this by dividing 23 by 75 and then multiplying by 100. For padding add in %. this may have to be a guess at first, but what ever you add in padding take away in overall width in %*/
html,body{
margin:0;
padding:0;
}
body{
background-color: #D7DFD8;
padding:15px 0;
}

#wrapper{
width:98%;
margin:0 auto;
border:ridge thick #666666;
max-width:1150px;
min-width:800px;}

#header{
float:left;
width:100%;

background-color:#FFFFFF;
}


#headleft{float:left; width:49%; }
#headright{float:left; width:49%}
/*--------------------------------------------menu------------------------------------------*/
ul.menu {
    clear:both;
    margin:0 0 1px;
    padding:0 2%;
    list-style:none;
    line-height:28px;
    background: url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
}
ul.menu li {
    display:inline;
}
ul.menu a {
    text-decoration:none;
    line-height:28px;
    font-size:93%;
    color: #fff;
    outline:0;
    font-weight:bold;
    padding:0 20px;
}
ul.menu a:hover {
    color:#FFFF00;
}
/*---------------------------------------end menu------------------------------------------*/

#mainContent{
float:left;
width:1000px;
background-color:#ffffff;
}





.dept{float:left; width:33%; background-color:#ffffff; }
.intro{float:left; background-color:#ffffff; margin-top:10px; }
.service{float:left; background-color:#ffffff; margin-top:10px;}

#footer{
clear:both;
background: #666666;
}

/*------------------------------------------pages-----------------------------------------*/
#mainNav{
float:left;
width:15%;
background-color:#99CC66;
}

#content{
float:left;
width:85%;
background-color:#ffffff;
margin-bottom:20px;

}


#mainContent{
float:left;
width:65%;
background-color:#ffffff;
padding-top:30px;
padding-left:20px;
padding-right:28px;
}
.maincontent{float:left; width:95%; background-color:#00CC66; font-size:16px; color:#ffffff; padding:3px; margin-bottom:20px;}
.maincontent1{float:left; width:95%; background-color:#ffffff; font-size:14px; color:#333333; padding:17px; margin-bottom:20px;}
.maincontent2{float:left; width:70%; background-color: #FDFEC5; color:#CEFCFF; padding:22px; margin-left:15%; margin-bottom:30px; border:medium outset #FF3300;}
.maincontent3{float:left; width:90%; background-color: #FDFEC5; color:#CEFCFF; padding:17px; margin:15%; margin-bottom:10px; border:medium outset #FF3300;}
.maincontent4{float:left; width:95%; background-color:#00CC66; font-size:16px; color:#ffffff; padding:8px; margin-bottom:20px; margin-left:20px;}
.maincontent5{float:left; width:95%; background-color:#ffffff; border:medium outset #FF3300; font-size:14px; color:#333333; padding:17px; margin-top:30px; margin-bottom:20px;}
.maincontent6{float:left; width:95%; background-color: #0099FF; font-size:16px; color:#ffffff; padding:8px; margin-bottom:20px; margin-left:20px;}
.maincontent7{float:left; width:80%; background-color:#ffffff; border:medium outset #FF3300; font-size:14px; color:#333333; padding:17px; margin-left:70px; margin-top:30px; margin-bottom:20px;}

.secondaryNav{
float:right;
width:28%;
background-color:#FFFF99;
padding-left:8px;
padding-top:30px;
}


#contactform{width: 85%; margin-left:25px; height:900px; float:left;  border:medium outset #00cc66;}


a.newlink:link{color:#ffffff; text-decoration:underline;}
a.newlink:visited{color:#ffffff;text-decoration:underline}
a.newlink:hover{ color:#FFFF00; text-decoration:underline;}

a.general:link{color:#0099CC; text-decoration:none;}
a.general:visited{color:#0099CC; text-decoration:none}
a.general:hover{ color:#0033CC; text-decoration:underline;}

.contacttext{padding:7px; color:#333333;}
#textbody{float:left; width:95%; }

thanks for your help

2

Your page can’t be accessed:

HTTP Error 500.19 - Internal Server Error
The requested page cannot be accessed because the related configuration data for the page is invalid.

3

This page is now accessible. Again I have changed the code offline and the menu which you can see online now cannot be seen. but I cannot track down what i have done.

thanks

4

lol - you lost me there.:slight_smile:

You are saying your menu has disappeared but then you show an example of it working?

I’m a little confused and we’d need to see an example of where its not working to help resolve the issue. Unless I misunderstood the question which is quite likely

5

Sorry. I didn’t explain myself well. The website is up at the moment. I have been trying to change certain things to the index page such as add a footer offline. When testing this offline the menu disappeared. (you can see how the menu should appear on the live version. I can tsee why the menu is now not working offline. the code i apptached is how the code now looks offline.

Does this make more sense?

6

Hi,

I’m still not sure what you mean by changing the code offline?

If you are working with a local copy then we would need to see the full html and css for that local copy. The html and css that you posted above seems to show the horizontal menu ok.

It would be easier if you posted a live version of the non working menu and we could then debug it very quickly for you.:slight_smile:

7

Hm, I’m still getting this, at another location:

Service Unavailable

HTTP Error 503. The service is unavailable.

8

Ok, I put the ite up live and the menu suddenly appeared. Beats me.

Thanks for your help anyway.

Ralph: I checked with the host and there was a problem with the server and they seemed to have put it back up. however I was a little concerned that you cannot see it at another location? where do you mean?

9

Is it happening in all your browsers locally or is it just one browser?

10

[ot]

Sorry, I meant that I first tired to view the site at my office, then later at home, with the same result, so was pointing out that it wasn’t just a problem with my own computer. But I see it was just a temporary server problem, so forget it. :slight_smile: [/ot]

11

It was really just on my local browser. The other thread i have put up is a website I have had up for a long time. but I have only noticed a problem with it since the host had an issue with the server and they had to migrate both of my websites to another server. I think it may be a coincidence they were both menu problems. however the problem with my website louandelcats under the thread “Another menu gone awol” is still a problem. im sure this is a css issue :frowning:

12

Hi,

I’m still at a loss as to what the real issue is. If the site is working online then there’s no problem is there?

If your local site isn’t working then you probably have not reproduced the same structure or are indeed accessing data that is online and not available offline. Or you could have cache issues if the site has been moved so clear your browser cache.

Until we can see an example of the broken page there is little we can do but guess I’m afraid.

13

For reference, this is the other thread:

Is your site relying on any PHP? That will cause issues running locally, unless you have some kind of virtual environment set up (such as XAMPP [Windows] or MAMP [Mac]).