Jump to content


Navigation Effect


5 replies to this topic

#1 albinoAZN

    Albinos Are Extinct!!!

  • Members
  • PipPipPipPip
  • 1,139 posts
  • Gender:Male
  • Location:Mississippi, USA

Posted 24 June 2007 - 05:28 PM

Hey guys, I want to have a faux drop-shadow on my text by stacking the text on top of each other. I tried following this tutorial (Link), but I got stuck.

Here's what I've got.

<!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>Jake Moore - Portfolio</title>
<style type="text/css">
*{margin:0;auto:0;}
img{border:0}
body{
font-family:Myriad Pro;
text-align:center;
background:#c2d4e1;}
#container{
text-align:left;
margin:15px auto;
width:75%;
min-width:783px;}
#nav_bg{
background:url(images/nav_bg.png) repeat-x;
height:36px;}
#nav{
padding-top:6px;
height:30px;
line-height:30px;}
#nav a:link,
#nav a:active,
#nav a:visited,
#nav a.active{
display:block;
color:#00237A;
float:left;
font-size:16px;
font-weight:425;
text-decoration:none;
padding-right:12px;
padding-left:12px;
height:30px;}
#nav a:hover,
#nav a:link.active,
#nav a:active.active,
#nav a:visited.active,
#nav a:hover.active{
background:url(images/nav_over_bg.png) no-repeat top;}
.link_tp{
z-index:2;
color:#FFF;
position:absolute;
top:2px;
left:5px;}
.link_bt{
z-index:1;
color:#000;}
#header{
background:url(images/header_bg.png) repeat-x top;
height:122px;}
#c_header{
margin-top:15px;
background:url(images/c_header_bg.gif) repeat-x top;
height:37px;}
/*text-shadow: #00237A 0px 1px 1px;*/
</style>
</head>

<body>
<div id="container">
	<div id="nav_bg">
	<img src="images/nav_r.png" alt="" style="float:right" />
	<img src="images/nav_l.png" alt="" style="float:left" />
		<div id="nav">
	   
		<div class="link_bt"> <div class="link_tp">Home</div><a href="#">Home</a></div>
		<a href='services.htm'>Services</a>
		<a href='portfolio.htm'>Portfolio</a>
		<a href='about.htm'>About</a>
		<a href='contact.htm'>Contact</a>
		</div>
	</div>
		<div id="header">
		<img src="images/header_r.png" alt="" style="float:right;" /><img src="images/tablet.png" alt="" style="float:right;padding:12px 30px 0 0;" /><a href="index.htm"><img src="images/header.png" alt="" style="float:left" /></a>
		</div>
			<div id="c_header">
			<img src="images/c_header_r.gif" alt="" style="float:right" /><img src="images/c_header_l.gif" alt="" style="float:left" />
			</div>
</div>
</body>
</html>

Your help is greatly appreciated :)

#2 Jacorre

    P2L Jedi

  • Members
  • PipPipPip
  • 824 posts
  • Gender:Male
  • Location:USA
  • Interests:Computers, Technology, Internet, Graphic/Web Design, Music, Soccer

Posted 25 June 2007 - 09:23 AM

Try this instead as I think it gives you a better method of implementing it on a page:

The CSS would be:

#text-top {
color:#099;
position:absolute;
left:-2px;
top:-2px;
font-size:36px;
font-family:Arial, Helvetica, sans-serif;
}
#text-bottom {
color:#CCC;
position:relative;
font-size:36px;
font-family:Arial, Helvetica, sans-serif;
}

The HTML:

<div id="text-bottom">Stacking Text
<div id="text-top">Stacking Text</div>
</div>


#3 albinoAZN

    Albinos Are Extinct!!!

  • Members
  • PipPipPipPip
  • 1,139 posts
  • Gender:Male
  • Location:Mississippi, USA

Posted 28 June 2007 - 03:53 AM

doesn't work. Since only the back text is linked, you don't get the rollover effect (or the link) unless you put your mouse over the little 1px sliver of back text. When I managed to arrange it correctly, it looked good, but functioned poorly.

For now, I'm using text-shadow:#;
But that only works in Safari.

so far:
http://zerodesignz.net/jmportfolio/
///////////////////////////////////////////////////////////////////////////

Ok, I figured it out by taking a look at somebody else's code, but now I'm having a problem with all the browsers rendering the text differently. Any tips for that?

Edited by albinoAZN, 28 June 2007 - 01:39 PM.


#4 Jacorre

    P2L Jedi

  • Members
  • PipPipPip
  • 824 posts
  • Gender:Male
  • Location:USA
  • Interests:Computers, Technology, Internet, Graphic/Web Design, Music, Soccer

Posted 28 June 2007 - 05:37 PM

Oh I didn't know you wanted to use it with rollovers. You could create the text as images, one for the normal state and one for the rollover state. Then use javascript for the rollover effect. That works on across all browsers, unless of course javascript is disabled.

#5 albinoAZN

    Albinos Are Extinct!!!

  • Members
  • PipPipPipPip
  • 1,139 posts
  • Gender:Male
  • Location:Mississippi, USA

Posted 28 June 2007 - 11:12 PM

I just wanted a simple way to do it with CSS. I hate using images for navigation rollovers.

Besides, if I was gonna use images, I wouldn't even need javascript, I would just use css.

any tips for having the font the same across all browsers?

Edited by albinoAZN, 28 June 2007 - 11:12 PM.


#6 Diaz

    Young Padawan

  • Members
  • Pip
  • 76 posts

Posted 29 June 2007 - 05:56 AM

Use images, it will be better for you.





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users