transparency at the side of the navigation bar

Page 1 of 1

2 Replies - 436 Views - Last Post: 31 January 2012 - 11:26 AM

Topic Sponsor:

#1 codydaniel  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 29-January 12

transparency at the side of the navigation bar

Posted 30 January 2012 - 11:23 AM

hello,

i have trouble with my navigation bar that i have some sort of transpartcy at the right hand side and i want to get rid of it. My website is at the bottom if you wanted to view it and diagnose.

Here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="Onsitus.it" />
<style type="text/css">

body
{
background-color: #D1D1D1;
padding:0px;
behavior: url(csshover2.htc);

}

p

{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:20%;
background-color:#98bf21;
text-align:left;
padding:8px;

}

h2
{
background-color: #98bf21;
width:130px;
text-align:center;
}

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow:hidden;
}

ul li {
  display: block;
  position: relative;
  float: none;
}

li ul {

display: none; 
}

ul li a {
  display: block;
  width:7%;
  text-decoration: none;
  color: purple;
  border: 1px solid gray;
  padding: 5px;
  background: #98bf21;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover

{ 
background: #617F8A;
}

li:hover ul {
  display: block;
  position: relative;
}

li:hover li {
  float: none;
  font-family: Arial, Verdana;
  font-size: 16px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }


</style>
</head>
<body>
<h1 style="text-align:center;">
<font size="5" face="Beatnik SF" color="Black">Welcome</h1>
</font>
<iframe src="http://free.timeanddate.com/clock/i2ybxoty/tluk/fn17/tcd1d1d1/pcd1d1d1/ahl/ftb/th2" frameborder="0" width="74" height="19"></iframe>
<br>
<iframe src="http://free.timeanddate.com/clock/i2ybz8tx/tluk/fn17/tcd1d1d1/pcd1d1d1/ahl/ftb/tt1" frameborder="0" width="256" height="19"></iframe>
<h2><font size="5" face="Beatnik SF" color="Purple">Navigation</h2>
</font>
<ul id="menu">
<font size="3" face="verdana" color="">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="blog.html">Blog</a>
<ul>
<li><a href="log.html">Log</a></li>
</ul>
</li>
<li><a href="feedback.html">Feedback</a></li>
</font>
</ul> 
<p style="text-align:center;">
<font size="" face="Verdana" color="purple">Hello</p></font>
<p style="text-align:center;">
<font size="" face="Verdana" color="purple">This website is being developed as we speak</p></font>

</body>
</html>


Also i have a website up so you can view the problem : www.dawatts.co.uk

thank you

Is This A Good Question/Topic? 0
  • +

Replies To: transparency at the side of the navigation bar

#2 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 380
  • View blog
  • Posts: 961
  • Joined: 08-March 09

Re: transparency at the side of the navigation bar

Posted 30 January 2012 - 12:14 PM

Hi,

I'm not seeing any transparency with your nav bar. Could you be more specific?
Was This Post Helpful? 0
  • +
  • -

#3 codydaniel  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 29-January 12

Re: transparency at the side of the navigation bar

Posted 31 January 2012 - 11:26 AM

hi,

so i was trying to turn a horizontal navigation bar into a vertical one

Horizontal Nav Bar:Horizontal Nav bar

my code for it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="Onsitus.it" />
<style type="text/css">

body
{
background-color: #D1D1D1;
padding:0px;
behavior: url(csshover2.htc);

}

p

{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:20%;
background-color:#98bf21;
text-align:left;
padding:8px;

}

h2
{
background-color: #98bf21;
width:130px;
text-align:center;
}

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow:hidden;
}

ul li {
  display: block;
  position: relative;
  float: left;
}

li ul {

display: none; 
}

ul li a {
  display: block;
  text-decoration: none;
  color: purple;
  border: 1px solid gray;
  padding: 5px;
  background: #98bf21;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover

{ 
background: #617F8A;
}

li:hover ul {
  display: block;
  position: relative;
}

li:hover li {
  float: none;
  font-family: Arial, Verdana;
  font-size: 16px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }


</style>
</head>
<body>

<h2><font size="5" face="Beatnik SF" color="Purple">Navigation</h2>
</font>
<ul id="menu">
<font size="3" face="verdana" color="">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="blog.html">Blog</a>
<ul>
<li><a href="log.html">Log</a></li>
</ul>
</li>
<li><a href="feedback.html">Feedback</a></li>
</font>
</ul> 
</body>
</html>


then i changed the float:left; to float:none; in the ul il bit in the css.

Vertical Nav Bar : Vertical Nav Bar

Code for Vertical Nav Bar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="Onsitus.it" />
<style type="text/css">

body
{
background-color: #D1D1D1;
padding:0px;
behavior: url(csshover2.htc);

}

p

{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:20%;
background-color:#98bf21;
text-align:left;
padding:8px;

}

h2
{
background-color: #98bf21;
width:130px;
text-align:center;
}

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow:hidden;
}

ul li {
  display: block;
  position: relative;
  float: none;
}

li ul {

display: none; 
}

ul li a {
  display: block;
  text-decoration: none;
  color: purple;
  border: 1px solid gray;
  padding: 5px;
  background: #98bf21;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover

{ 
background: #617F8A;
}

li:hover ul {
  display: block;
  position: relative;
}

li:hover li {
  float: none;
  font-family: Arial, Verdana;
  font-size: 16px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }


</style>
</head>
<body>

<h2><font size="5" face="Beatnik SF" color="Purple">Navigation</h2>
</font>
<ul id="menu">
<font size="3" face="verdana" color="">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="blog.html">Blog</a>
<ul>
<li><a href="log.html">Log</a></li>
</ul>
</li>
<li><a href="feedback.html">Feedback</a></li>
</font>
</ul> 
</body>
</html>


then i saw green links across the screen so then i set the width to 7% in the ul il a bit of the css

New vertical nav bar : New vertical nav bar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="Onsitus.it" />
<style type="text/css">

body
{
background-color: #D1D1D1;
padding:0px;
behavior: url(csshover2.htc);

}

p

{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:20%;
background-color:#98bf21;
text-align:left;
padding:8px;

}

h2
{
background-color: #98bf21;
width:130px;
text-align:center;
}

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow:hidden;
}

ul li {
  display: block;
  position: relative;
  float: none;
}

li ul {

display: none; 
}

ul li a {
  display: block;
  width:7%;
  text-decoration: none;
  color: purple;
  border: 1px solid gray;
  padding: 5px;
  background: #98bf21;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover

{ 
background: #617F8A;
}

li:hover ul {
  display: block;
  position: relative;
}

li:hover li {
  float: none;
  font-family: Arial, Verdana;
  font-size: 16px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }


</style>
</head>
<body>

<h2><font size="5" face="Beatnik SF" color="Purple">Navigation</h2>
</font>
<ul id="menu">
<font size="3" face="verdana" color="">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="blog.html">Blog</a>
<ul>
<li><a href="log.html">Log</a></li>
</ul>
</li>
<li><a href="feedback.html">Feedback</a></li>
</font>
</ul> 
</body>
</html>


then if you move your mouse over the right hand side of the nav bar it highlights but i only want it to highlight when the navigation bar is mouse-overed not off the nav bar and it highlights

hope this makes it easier to understand and you can solve my problem

thanks
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1