Solved

Anchor tag CSS

Posted on 2011-02-15
17
1,091 Views
Last Modified: 2012-06-27
I have the css below for an achor tag.

I need a show the border of the box once hover how can I do that?
a.menu:link      
{
	color:#fff;
	text-decoration:none;
	border-right: solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
}
a.menu:visited   
{
	color:#fff;
	text-decoration:none;
	border-right: solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
a.menu:hover
    {color:#fff;
    text-decoration:none;
    background-color:Transparent;
    border:solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
a.menu:active    
	{color:#fff;
    text-decoration:none;
    background-color:transparent;
	border:solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}

Open in new window

0
Comment
Question by:PagodNaUtak
  • 6
  • 6
  • 4
  • +1
17 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34903950
<<I need a show the border of the box once hover how can I do that?>>
which box? and on hover on what?

Please elaborate
0
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 34903954
sorry, what I mean of box is the border of the anchor tag...

What I want to do is to show the border of the anchor tag when you hover on it...

Let me know if I am still unclear. :)
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34903977
i think i understand it now.

Just try after removing the border property from other anchor selectors other than a.menu:hover

That is, other than a.menu:hover, other anchor tag related selectors need not have the border property
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 34903987
If you have a dark background your seems to work fine.  ??
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
body { background-color: #000040; }
a.menu:link      
{
        color:#fff;
        text-decoration:none;
        border-right: solid 1px white;
        padding:0 0 0 5px;
        margin:0 0 0 0 5px;
}
a.menu:visited   
{
        color:#fff;
        text-decoration:none;
        border-right: solid 1px white;
        padding:0 0 0 5px;
        margin:0 0 0 0 5px;
        }
a.menu:hover
    {color:#fff;
    text-decoration:none;
    background-color:Transparent;
    border:solid 1px white;
        padding:0 0 0 5px;
        margin:0 0 0 0 5px;
        }
a.menu:active    
        {color:#fff;
    text-decoration:none;
    background-color:transparent;
        border:solid 1px white;
        padding:0 0 0 5px;
        margin:0 0 0 0 5px;
        } 
-->
</style>
</head>
<body>
<a class="menu" href="home.html">home.html</a>
</body>
</html>

Open in new window

0
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 34904001
http://css-lessons.ucoz.com/link-css-examples-1.htm

try
a:hover
    {color:green;
   
  border: solid inset blue;
      padding:0 0 0 5px;
      margin:0 0 0 0 5px;
      }
0
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 34904005
By default I need to have white border on the right, and once hover it will show the full border.

but it does not work. please see the image below: the mouse point is in the Home link...
titile-bar.bmp
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34904016
try something like this


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
	<style>
		a.menu:link      
{
	color:#black;
	text-decoration:none;
	border-right: solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
}
a.menu:visited   
{
	color:#black;
	text-decoration:none;
	border-right: solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
a.menu:hover
    {color:#black;
    text-decoration:none;
    background-color:Transparent;
    border:solid 1px red;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
a.menu:active    
	{color:#black;
    text-decoration:none;
    background-color:transparent;
	border:solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
	</style>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
	<a href="#"  class="menu">Same Page</a>
</BODY>
</HTML>

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34904022
this is more closer to what you have just described
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
	<style>
		a.menu:link      
{
	color:#black;
	text-decoration:none;
	border-right: solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
}
a.menu:visited   
{
	color:#black;
	text-decoration:none;
	border-right: solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
a.menu:hover
    {color:#black;
    text-decoration:none;
    background-color:Transparent;
    border:solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
a.menu:active    
	{color:#black;
    text-decoration:none;
    background-color:transparent;
	border:solid 1px white;
	padding:0 0 0 5px;
	margin:0 0 0 0 5px;
	}
	</style>
</HEAD>

<BODY BGCOLOR="#000">
	<a href="#"  class="menu">Same Page</a>
</BODY>
</HTML>

Open in new window

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 34904079
It looks to me like you have the 'menu' in a <div> and you've set the height of the <div> too small so it clips the top and bottom borders.  Try increasing the height of the <div>.
0
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 34904087
I still could not see the top and bottom border.. attached is the aspx page
#container
{
	position:relative;
	top:-8px;
	left:-8px;
	width:950px;
	height:900px;
	margin: 0 0 0 0;
}

a.menu:link        
{  
        color:black;  
        text-decoration:none;  
        border-right: solid 1px white;  
        padding:0 0 0 5px;  
        margin:0 0 0 0 5px;  
}  
a.menu:visited     
{  
        color:black;  
        text-decoration:none;  
        border-right: solid 1px white;  
        padding:0 0 0 5px;  
        margin:0 0 0 0 5px;  
        }  
a.menu:hover  
    {color:black;  
    text-decoration:none;  
    background-color:Transparent;  
    border:solid 1px white;  
        padding:0 0 0 5px;  
        margin:0 0 0 0 5px;  
        }  
a.menu:active      
        {color:black;  
    text-decoration:none;  
    background-color:transparent;  
        border:solid 1px white;  
        padding:0 0 0 5px;  
        margin:0 0 0 0 5px;  
        }  
  

#header
{
	width:950px;
	height:100px;
	border:solid 1px black;
	background-image:url('../images/BannerTop.jpg');
	background-repeat:repeat-x;
	background-position:left;
	
}

#logo
{
	background-image:url('../images/AvanadeLogo.jpg');
	background-repeat:no-repeat;
	background-position:left;
	width:250px;
	height:100px;
	border-right: solid 1px white;
}

#celebratingText
{
	border-bottom: solid 1px white;	
	height:40px;
	position:absolute;
	top:10px;
	left:251px;
	width:700px;
	color:White;
	font-family:Nina;
	font-size:26px;	
	padding:0 0 0 5px;
}

#loginStatus
{
	position:absolute;
	top:10px;
	left:890px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	font-weight:bold;
	font-size:13px;
	color:White;
}

#loginInformation
{
left:850px;	
font-weight:bold;
font-size:13px;
color:#663300;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
}

#menu 
{
	position:absolute;
	top:60px;
	left:250px;
	width:700px;
	padding:0 0 0 5px;
	height:50px;
}

#left, #middle, #right
{
	position:absolute;
	/* border:solid 1px black;	*/
}

#left
{
	margin:0 10px 0 0;
	width:250px;
	top:140px;
	left:0px;		
}

#middle
{
	width:450px;
	top:140px;
	left:250px;	
}

#right
{
	width:250px;
	top:140px;
	left:700px;
}

Open in new window

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Default.master.cs" Inherits="CelebratingPerformance.Default" %>

<!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 runat="server">
    <title>Untitled Page</title>
    <link href="css/Masterpage.css" type="text/css" rel="Stylesheet" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <div id="header">
            <div id="logo">
            </div>
            <div id="celebratingText">
                Celebrating Performance</div>
            <div id="menu">
            <a href="javascript:void(0);" class="menu">Home </a><a href="javascript:void(0);"
                    class="menu">My Account </a><a href="javascript:void(0);" class="menu">Recognize
                </a><a href="javascript:void(0);" class="menu">Anniversary </a><a href="javascript:void(0);"
                    class="menu">Program </a><a href="javascript:void(0);" class="menu">Rewards
                </a><a href="javascript:void(0);" class="menu">Help </a><a href="javascript:void(0);"
                    class="menu">Contact Us </a>
            </div>
            <div id="loginStatus">
                <asp:LoginStatus ID="LoginStatus1" runat="server" Font-Underline="false" ForeColor="White" LogoutText="Log out" />
            </div>
        </div>
        <div id="loginInformation">
            <b>Home</b><br />
            <asp:LoginName ID="LoginName1" runat="server" />
        </div>
        <div id="left">
            <asp:ContentPlaceHolder ID="ContentPlaceHolderLeft" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="middle">
            <asp:ContentPlaceHolder ID="ContentPlaceHolderMiddle" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="right">
            <asp:ContentPlaceHolder ID="ContentPlaceHolderRight" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </form>
</body>
</html>

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34904096
please confirm if were able to see the same in the code that i had shared.
0
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 34904103
@grvinder372,

I tried the code it is still the same no top and bottom border.
0
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 34904107
The code that you provided is what I posted in this thread: ID:34904087
0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 34904125
Add a line-height to the CSS like below.
a.menu:link        
{  
        color:black;  
        text-decoration:none;  
	line-height: 26px;  
        border-right: solid 1px white;  
        padding:0 0 0 5px;  
        margin:0 0 0 0 5px;  
}

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34904128
but i am able to see the same on IE8 and Safari4.

I am not able to see my code any where else in this post. Please point me to that post where you had already posted this code
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 34904132
And the problem only shows up in IE, Firefox displayed it the way you wanted to begin with.
0
 
LVL 8

Author Closing Comment

by:PagodNaUtak
ID: 34904195
Thanks
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now