PDA

View Full Version : Taking a drop down menu into my website


Doug83
12-09-2010, 01:41 PM
Hi there

I a fairly new to Dreamweaver but very keen

I have designed a site based on a template and I want to replace the navigation bar with a hover menu I designed in CSS

I have created the navigation menu in a seperate project and want to import it into my template I have designed

How do I get the navigation bar to replace the one in the template

I have tried time and time again and it does'nt quite fit

I have included the code for my site and the navigation bar I designed seperately below


PLEASE PLEASE help as this is really confusing me any advise is greatly appreciated


Thanks for your time

D :)

navigation bar HTML code:

<!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" />
<title>Untitled Document</title>
<link href="Drop down.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#">Home</a>
<ul>

</ul> <!-- end inner UL -->

</li> <!-- end main LI -->
</ul> <!-- end main UL -->

<ul>
<li><a href="#">Gifts</a>
<ul>
<li><a href"#">Kitchenwear</a></li>
<li><a href"#">Giftwear</a></li>
<li><a href"#">Acessories</a></li>

</ul> <!-- end inner UL -->

</li> <!-- end main LI -->
</ul> <!-- end main UL --><ul>
<li><a href="#">Crafts</a>
<ul>
<li><a href"#">Wool</a></li>
<li><a href"#">Fabrics</a></li>
<li><a href"#">Sewing</a></li>
<li><a href"#">Felting and textiles</a></li>
<li><a href"#">Accessories</a></li>


</ul> <!-- end inner UL -->

</li> <!-- end main LI -->
</ul> <!-- end main UL --><ul>
<li><a href="#">Coffee Shop</a>
<ul>

</ul> <!-- end inner UL -->

</li> <!-- end main LI -->
</ul> <!-- end main UL --><ul>
<li><a href="#">About Us</a>
<ul>

</ul> <!-- end inner UL -->

</li> <!-- end main LI -->
</ul> <!-- end main UL --><ul>
<li><a href="#">Contact Us</a>
<ul>



</ul> <!-- end inner UL -->

</li> <!-- end main LI -->
</ul> <!-- end main UL --><ul>
<li><a href="#">Blog</a>
<ul>
<li><a href"#">Entries RSS</a></li>
<li><a href"#">Comment RSS</a></li>

</ul> <!-- end inner UL -->

</li> <!-- end main LI -->
</ul> <!-- end main UL -->

<br class="clearFloat" />

</div> <!-- end navMenu -->
</div> <!-- end wrapper div -->

</body>
</html>


Navigation bar CSS code:

@charset "utf-8";
#navMenu {
margin:0;
padding:0;
}

#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}

#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#006600;

}


#navMenu ul li a {
text-align:center;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#fff;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}

#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;

}

#navMenu ul li:hover ul {
visibility:visible;
}

/*************************************************/


#navMenu li:hover {
background: #09F;
}

#navMenu ul li:hover ul li a:hover {
background:#ccc;
color:#000;
}

.clearFloat {
clear:both;
margin:0;
padding:0;
}

#navMenu a:hover {
color:#000;

}

Website HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org (http://www.freecsstemplates.org/)
Released for free under a Creative Commons Attribution 2.5 License

Name : Pamphlet
Description: A three-column, fixed-width blog design.
Version : 1.0
Released : 20090405

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Karelia House: Crafts, Gifts, Courses</title>
<meta name="keywords" content="" />
<meta name="Premium Series" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
body {
background-color: #F5F3D6;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="#"><span>karelia House </span></a></h1>
</div>
<div id="splash"><img src="images/img02.gif" alt="" />&nbsp;</div>
<div id="menu">
<ul id="main">
<li class="current_page_item"><a href="index - Brown - Home.html" class="tag">Homepage</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Crafts</a></li>
<li><a href="index - Brown - About us.html">About Us</a></li>
<li><a href="index - Brown - contact.html" class="tag">Contact Us</a></li>
</ul>
<ul id="feed">
<li><a href="#">Entries RSS</a></li>
<li><a href="#">Comments RSS</a></li>
</ul>
</div>

</div>
<!-- end header -->
<div id="wrapper">
<!-- start page -->
<div id="page">
<div id="sidebar1" class="sidebar">
<ul>
<li>
<h2>Recent Posts</h2>
<ul>
<li><a href="#">New Wool</a></li>
<li><a href="#">Craft classes for December</a></li>
<li><a href="#">Winter opening hours</a></li>
<li><a href="#">Massage clinic</a></li>
<li><a href="#">New Christmas gifts</a></li>
</ul>
</li>
<li>
<h2>Recent Comments</h2>
<ul>
<li><a href="#">Shirley Shearer</a> on <a href="#">New wool</a></li>
<li><a href="#">Ewan Weir</a> on <a href="#">Winter Opening Hours</a></li>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul>
<li><a href="#">September</a> (23)</li>
<li><a href="#">August</a> (31)</li>
<li><a href="#">July</a> (31)</li>
<li><a href="#">June</a> (30)</li>
<li><a href="#">May</a> (31)</li>
</ul>
</li>
</ul>
</div>
<!-- start content -->
<div id="content">
<div class="flower"></div>
<div class="post">
<h1 class="title"><a href="#">Welcome to Our Website!</a></h1>
<p class="byline"><small>Posted on November 21st, 2010 by</small> Karelia House</p>
<div class="entry">
<p align="justify">Karelia House is the result of a real passion for all things Scandinavian and a love affair with Finland Karelia House is a modern showroom with a unique shopping experience with a new Scandinavian style coffee shop and craft centre. based in Highland Perthshire near Kenmore, Scotland.</p>
<p align="justify">There a wonderful selection of gifts including glassware from Iittala, Boda Nova and Muurla and the ubiquitous Marimekko bags, socks, nighties and kitchenware. There are modern tableware and candle holders from the Swedish company, Farg Form, beautiful blankets from Klippan and fabulous colourful wooden jewellery from Aarikka. This is the place to visit if you are looking for a gift for the person who you think has everything or the couple you want to buy an unusual wedding or anniversary present for</p>
<p>Karelia House is the ultimate destination which includes a range of woodburning stoves and log buildings. Soon you will be able to relax and enjoy our new Scandinavian themed cafe which will offer Coffee and a selection of open sandwiches served with home made soup.</p>
<p>&nbsp;</p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#">New Wool </a></h2>
<p class="byline"><small>Posted on October 1st, 2009 by <a href="#">Karelia House</a></small></p>
<div class="entry">
<p>We have recently ....... etc</p>
<h3>&nbsp;</h3>
</div>
</div>
<div class="post">
<div class="entry"> </div>
</div>
</div>
<!-- end content -->
<!-- start sidebars -->
<div id="sidebar2" class="sidebar">
<ul>
<li>
<form id="searchform" method="get" action="#">
<div>
<h2>Site Search</h2>
<input type="text" name="s" id="s" size="15" value="" />
</div>
</form>
</li>
<li>
<h2>Course Calendar</h2>
<div id="calendar_wrap">
<table summary="Calendar">
<caption>
October 2009
</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="September" colspan="3" id="prev"><a href="#" title="View posts for September 2009">&laquo; Sep</a></td>
<td class="pad">&nbsp;</td>
<td colspan="3" id="next">&nbsp;</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td id="today">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="pad" colspan="4">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
</div>
<!-- end sidebars -->
<div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
</div>
<div id="footer">
<p class="copyright">&copy;&nbsp;&nbsp;2010 All Rights Reserved </p>
<p class="link"><a href="#">Privacy Policy</a>&nbsp;&nbsp;<a href="#">Terms of Use</a></p>
</div>
<div style="text-align: center; font-size: 0.75em;"></div></body>
</html>

DWcourse
12-09-2010, 02:21 PM
It would be a lot easier if you could upload the pages and give us a link to look at.

Doug83
12-09-2010, 03:48 PM
Here you go! thanks for your help :mrgreen:

Doug83
12-09-2010, 04:15 PM
Think the other one does not work

This one does

Cheers

D :mrgreen:

DWcourse
12-09-2010, 04:16 PM
Actually, I meant upload them to a server. Folks here are naturally reluctant to open uploaded zipped files.

Doug83
12-09-2010, 04:42 PM
This is going to be difficult as there is a website in its place at the moment and I do not want to replace.

I can assure you the file is clean

Any other ideas on how I can get it uploaded

Thanks

jmichae3
12-10-2010, 06:06 AM
menu.zip is password protected. also, you don't define your CSS classes. you shouldn't expect a menu to work if you don't define your classes or include a CSS file.

gentleone
12-10-2010, 10:47 AM
This is going to be difficult as there is a website in its place at the moment and I do not want to replace.

I can assure you the file is clean

Any other ideas on how I can get it uploaded

Thanks
Create a sub directory on the server eg. 'new-site' and upload all the files to that directory. You can access the test site like so (eg. if its an index.html page):
www.domain.com/new-site/index.html

You won't interfere the live site like this.