1 reply [Last post]
wburling
Offline
Regular
Last seen: 15 years 23 weeks ago
Joined: 2005-03-10
Posts: 15
Points: 0

Hello,

I am green(newbie) and have a projectseven menu that I want to keep in full original contact (only changing the links or adding more menu items down the line if needed)

I would like to use an external .css link for the menu.css file that will be separate from the rest of my style.css file

Now I have been having a problem inserting the .shtml file menu into the page. Everytime I enter it in the page I get a </head> html code error. I might be trying to enter it wrong? I have been creating a new page in DW2004 >HTML (XHTML Compliant) , creating the projectseven menu, save it, view it and it works fine, so then I resave as a SSI(.shtml) file, and then insert it into a layout page created on this site. Url is http://www.csscreator.com/version2/pagelayout.php

I will post the css creator page .html and the .css files here... and the projectseven pages below them.
css creator page HTML CODE
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CssCreator-->HTML 4.01 Strict Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" >
<link rel="stylesheet" href="wburling58464.css" type="text/css" >
<link href="CSS/wburling58372.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Generated at www.csscreator.com -->
<div id="pagewidth" >
<div id="header" >
<div class="content"> Head </div>
</div>
<div id="outer" >
<div id="inner">
<div id="leftcol" >
<div class="content"> Left Column </div>
</div>
<div id="maincol" >
<div class="content"> Main Content Column </div>
</div>
<div id="rightcol" >
<div class="content"> Right Column </div>
</div>

<div class="clr"></div>
<!-- close inner and outer -->
</div>
</div>
<div id="footer" >
<div class="content"> Footer </div>
</div>
<div class="clr"></div>
</div>
</body>
</html>
[/code]

css creator page Now the css code

/* *** Generated by www.csscreator.com *** */
html, body{ 
 margin:0; 
 padding:0; 
 } 
 
#pagewidth{ 
 width:100%; 
  min-width: 500px; 
  
} 
 
#header{ 
 height:30px; 
 width:100%; 
 background-color:#000000; 
 } 
 
#leftcol{
	width:160px;
	float:left;
	position:relative;
	margin-left:-160px;
	margin-right:1px;
	background-color: #CCCCCC;
 }
 
#outer{ 
 border:solid white 0px; 
  /*/*/ border-left-width: 160px ;  /* left column width. NN4 hack to hide borders */ 
border-left-color: #000000;   /* left column colour */ 
border-left-style: solid; 
 /*/*/ border-right-width: 130px; /* right column width. NN4 hack to hide borders */ 
border-right-color: #000000;  /* right column colour */ 
border-right-style: solid; 
  background-color: #999999; /* center column colour */ 
width: auto; 
 } 
 
#rightcol{
	width:130px;
	float:right;
	position:relative;
	margin-right:-130px;
	margin-left:1px;
	background-color: #CC0000;
} 
 
#footer{
 height:30px; 
 width:100%; 
 background-color:#000000; 
} 
 
#inner{margin:0; width:100%;}
 
#maincol{ 
 float: left; 
 width: 100%; 
 position: relative; 
 margin: 0 -8px 0 -2px; 
 }
 
#outer>#inner { border-bottom: 1px solid #FFFFFF;  }
 
.clr{clear:both;}
 
.content{padding:5px;} /*padding for content */ 
 
#header .content{padding-bottom:0;} /*padding bottom 0 to remove space in IE5 Mac*/ 
 

 
 /*printer styles*/ 
@media print{ 
/*hide the left column when printing*/
#leftcol{display:none;} 
#outer{border-left:0;} 

/*hide the right column when printing*/
#rightcol{display:none;} 
#outer{border-right:0;} 
}

Project seven 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=iso-8859-1" />
<title>Untitled Document</title>
<!--[if IE 6]>
<style>
#navlist a {height: 1em;}
</style>
<![endif]-->
<!--[if IE 5]>
<style>
#navlist a {
height: 1em;
float: left;
clear: both;
width: 100%;
}
</style>
<![endif]-->

<link href="imagerollovermenu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="navlist"><ul>
<li><a href="#">Home</a></li>
<li><a href="#">Computer Repair</a></li>
<li><a href="#">Networking</a></li>
<li><a href="#">Annual Service Contracts</a></li>
<li><a href="#">Domains & Servers</a></li>
<li><a href="#">Web Page Design</a></li>
<li><a href="#">Data Backups & Recovery</a></li>
</ul>
</div>
</body>
</html>

projectseven css file code

/* CSS Document */
#navlist {
position:absolute;
left: 36px;
top: 86px;
width: 186px;
}
#navlist ul {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
font-size: .9em;
}
#navlist li {
margin: 0;
}
#navlist a {
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid;
border-color: #ddd #000 #000 #ddd;
background-color: #999999;
background-image:  url(l1_down.jpg);
background-repeat: no-repeat;
background-position: 0% 50%;
}
#navlist a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}

#navlist a:hover, #navlist a:active {
background-color: #9F6F9F;
background-image:  url(l1_over.jpg);
background-repeat: no-repeat;
background-position: 0% 50%;
color: #2D1E2D;
}
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
background-color: #9F6F9F;
background-image:  url(l1_over.jpg);
background-repeat: no-repeat;
background-position: 0% 50%;
color: #2D1E2D;
}

Sorry for the huge list of code but I thought it would help.

thanks,

Wayne

Tags:
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How do i insert a SSI(.shtml ) file or a make a php file ?

That's a lot of code there wayne!

I can't see where you are attempting to insert this ssi file in all that , but if you are trying to include the 'project seven html' as is, then that will be your problem as you will be adding another set of head tags which you can't have.

The include needs to be the actual code only required for the menu from the <div id="navlist"> the file your inserting into will take care of all main html/body tags.

I would use PHP over SSI for this you could also include the 'conditional comments' into the head as well.

So you would take this :

<div id="navlist"><ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Computer Repair</a></li> 
<li><a href="#">Networking</a></li> 
<li><a href="#">Annual Service Contracts</a></li> 
<li><a href="#">Domains & Servers</a></li> 
<li><a href="#">Web Page Design</a></li> 
<li><a href="#">Data Backups & Recovery</a></li> 
</ul> 
</div>


name it navmenu.inc

then you include it at the point that you wish it to appear in your main HTML file using:

<?php include ("navmenu.inc"); ?>

You could for extra security call navmenu navmenu.inc.php and wrap the navmenu code in php tags which will prevent anything else reading the file except the php engine but it's probably not really required here.

The CSS for this menu is already an include as such just link to it in the head as normal.

I must say that this is really not a question concerning CSS and would have been better suited to being put in 'Off Topic'
To where I'll move it for you.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me