/    Sign up×
Community /Pin to ProfileBookmark

CSS to Create Navigation Menu

Copy linkTweet thisAlerts:
Apr 07.2011

All,
I have the following template:
[url]http://livedemo00.template-help.com/wt_33208/index.html[/url]

This is in Flash but I’d like to achieve the same result of when you rollover a link it changes colors like that. Obviously the text won’t move but I’m trying to get the rollover affect. Also, I’m not sure how to get the spacing for it. I tried to get it with some floats but was unsuccessful. If you could point me in the right direction on how to set that up as well I’d really appreciate it. Thanks in advance!

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangApr 10.2011 — [CODE]a {display:inline-block;padding:3em 1em 1em 1em;font-weight:bold;}
a:link {color:#00f;background:#000;}
a:hover {color:#f60;background:#c90;}
[/CODE]
Copy linkTweet thisAlerts:
@PhoubersApr 11.2011 — This could point you in the right direction.

Navigation - wcTutorials

To achieve rollover effects you can use the css selector ":hover"
[code=html]a:hover{color:#555;} [/code]

Hope that helps.
Copy linkTweet thisAlerts:
@treeleaf20authorApr 11.2011 — Those suggestions helped but now my problem is that I used the margin to position the link towards the bottom of the table. When I hover it goes to from the top of the link to the bottom, but I need it to go from the bottom of the link to the top. Here is the code so you can see what I mean:
[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.navigation_color{
height:100px;
background:#FFFFFF;
display:block;
font-size:16px;
margin:0 0 0 0;
}

.navigation_color a{
height:100px;
display:inline-block;
color:#000000;
padding:0 20px 0 0;
margin:40px 0 0 0;
text-transform:lowercase;
background:#FFFFFF;
text-decoration:none;
text-align:center;
}

.navigation_color a:hover{
background:#FCE8D0;
color:#F49855;
}

.logo_name {
font-size:30px;
color:#000000;
vertical-align:center;
margin:10px 0 0 0;
}
</style>
</head>

<body>
<table align="center" border="1" width="865">
<tr>
<td width="400"><div class="logo_name">Website</div></td>
<td align="right"><div class="navigation_color"><a href="login.php">Login</a><a href="contact.php">Contact Us</a></div></td>
</tr>
</table>
</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@FangApr 11.2011 — [CODE].navigation_color{
height:100px;
background:#FFFFFF;
display:block;
font-size:16px;
margin:0 0 0 0;
}

.navigation_color a{
display:inline-block;
color:#000000;
padding:40px 20px 0 0;
text-transform:lowercase;
background:#fff;
text-decoration:none;
text-align:center;
}

.navigation_color a:hover{
background:#FCE8D0;
color:#F49855;
}

.logo_name {
font-size:30px;
color:#000000;
vertical-align:middle;
margin:10px 0 0 0;
}
[/CODE]
Copy linkTweet thisAlerts:
@treeleaf20authorApr 11.2011 — That works great, now one additional question. When I scroll over them the text is aligned to the left. Is there anyway I can get that to align in the middle? I see the text-align property is set to center but the text is still aligned to the left of the background changed color box.
Copy linkTweet thisAlerts:
@FangApr 12.2011 — [CODE].navigation_color a{
display:inline-block;
[COLOR="Blue"]width:20&#37;;[/COLOR]
color:#000000;
padding:40px [COLOR="blue"]0[/COLOR] 0 0;
text-transform:lowercase;
background:#fff;
text-decoration:none;
text-align:center;
}
[/CODE]
Copy linkTweet thisAlerts:
@treeleaf20authorApr 12.2011 — That worked great. Thank you so much.
×

Success!

Help @treeleaf20 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...