Jump to content

Webdesigners

Martin

By Martin
in PC

 Share

Recommended Posts

Martin Veteran

Martin

Posted
Posted

Good evening one and all on this miserable February evening.

 

I am having a go at making a web site. I'm using Dreamweaver CS3.

 

I wanted a fancy looking menu system and found this http://cssmenumaker.com/builder/menu_info.php?menu=066

 

I went through the configuring off the menu and downloaded the source.

 

I changed the source a little bit so the gaps between links wasn't so big nor was the box on mouse over.

 

My problem now is that when I mouseover a link the text eitherside seems to move a few px.

 

If anyone could help me I'd be so appreciative I'm willing to offer a packet off cheese and onion Golden Wonders :cheers:

 

My 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" />
<title>Caithness Kuk Sool Won</title>
<link href="tdp-style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #003366;
}

</style>
</head>


<body onload="P7_initTP(3,0);P7_initTBM(1,2,1,1,200,3);PLTVC_onload()">
<div id="container">
<div id="header">
  <div align="left">Logo will go here</div>
 </div>
   <div id="menu">

<!--[if IE]>
<style media="all" type="text/css">@import "/ie.css";</style>
<![endif]-->
<div class="nav">
<div class="table">
<ul class="select"><li><a href="" target="_self"><b>One</b></a>
</li>
</ul>
<ul class="select"><li><a href="" target="_self"><b>Two</b></a>
</li>
</ul>
<ul class="select"><li><a href="" target="_self"><b>Three</b></a>
</li>
</ul>
<ul class="select"><li><a href="" target="_self"><b>Four</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="ourplans.html" target="_self">Four Point One</a></li>
<li><a href="ourservices.html" target="_self">Four Point Two</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="" target="_self"><b>Five</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="quality.html" target="_self">Five Dot One</a></li>
<li><a href="findadentist.html" target="_self">Five Dot Two</a></li>
<li><a href="faqspatient.html" target="_self">Five Dot Three</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="" target="_self"><b>Six</b></a>
</li>
</ul>
<ul class="select"><li><a href="" target="_self"><b>Seven</b></a>
</li>
</ul>
<ul class="select"><li><a href="" target="_self"><b>Eight</b></a>
</li>
</ul>
<ul class="select"><li><a href="" target="_self"><b>Nine</b></a>
</li>
</ul>
<ul class="select"><li><a href="" target="_self"><b>Ten</b></a>
</li>
</ul>
</div>
</div>
</div>
   <div id="content">Content for  id "content" Goes Here</div>
 <div id="footer">
   <div align="center">Footer</div>
 </div>
</div>


</body>
</html>

 

 

And the CSS I'm using

 

<style type="text/css">
<!--

/* General page formatting - BEGIN  */
body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #dddddd;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #dddddd;
	background-color: #003366;
}

a:link {
	color: 000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: 000000;
}
a:hover {
	text-decoration: underline;
	color: 000000;
}
a:active {
	text-decoration: none;
	color: 000000;
}
/* General page formatting - END  */

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

/* Container and DIV formatting - BEGIN  */
#container {
	width: 1000px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #003366;
	margin: -10px auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	}
	
#header {
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	padding: 0px 0px ;
	text-align: left; /* this overrides the text-align: center on the body element. */
	}
	
#menu {
	background: #ffffff;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	padding: 0px 0px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	}
	
#content {
	background: #ffffff;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	padding: 35px 20px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	}
	
#footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	text-align:center;
	color: #c0c0c0;
	background: #ffffff;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	padding: 10px 20px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	}
	

/* Container and DIV formatting - END  */

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

/* Navigation Menu - BEGIN  */
.nav {
height:35px; 
background: url(images/bg.gif) repeat-x; 
position:relative; 
font-family:arial, verdana, sans-serif; 
font-size:11px; 
width:100%; 
z-index:100;
margin:0;
padding:0;
}

.nav .table {
display:table; 
margin:0 auto;
}

.nav .select,
.nav .current {
margin:0; 
padding:0; 
list-style:none; 
display:table-cell; 
white-space:nowrap;
}

.nav li {
margin:0; 
padding:0; 
height:auto; 
float:left;
}

.nav .select a {
display:block; 
height:35px; 
float:left; 
font-weight:bold;
background: url(images/bg.gif); 
padding:0 10px 0 10px; 
text-decoration:none; 
line-height:35px; 
white-space:nowrap; 
color:#2b3238;
}


.nav .select a:hover, 
.nav .select li:hover a {
background: url(images/hover.gif); 
padding:0 0 0 15px; 
cursor:pointer; 
color:#2b3238;
}

.nav .select a b{
font-weight:bold;
}

.nav .select a:hover b, 
.nav .select li:hover a b {
display:block; 
float:left; 
padding:0 15px 0 0px; 
background:url(images/hover.gif) right top; 
cursor:pointer;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}

.nav .sub {
display:table; 
margin:0 auto; 
padding:0; 
list-style:none;
}

.nav .sub_active .current_sub a, 
.nav .sub_active a:hover {
background:transparent; 
color:#2b3238;
}

.nav .select :hover .select_sub, 
.nav .current .show {
display:block; 
position:absolute; 
width:100%; 
top:35px; 
background:url(images/back.gif); 
padding:0; 
z-index:100; 
left:0; 
text-align:center;
}

.nav .current .show {
z-index:10;
}

.nav .select :hover .sub li a, 
.nav .current .show .sub li a {
display:block; 
float:left; 
background:transparent; 
padding:0 10px 0 10px; 
margin:0; 
white-space:nowrap; 
border:0; 
color:#2b3238;
}

.nav .current .sub li.sub_show a {
color:#2b3238; 
cursor:default; 
}

.nav .select .sub li a {
font-weight:normal;
}

.nav .select :hover .sub li a:hover, 
.nav .current .sub li a:hover {
visibility:visible; 
color:#73a0d2; 
}

/* Navigation Menu - END  */
-->
</style>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...