Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Creating Navigation

This is a discussion on Creating Navigation, within the CSS section. This forum and the thread "Creating Navigation" are both part of the Designing Your Website category.

 
 Reply to this topicStart new topic
> Creating Navigation, What am I doing wrong when creating this navigation
friendd
post Mar 29 2008, 02:35 PM
Post #1


New Squeeze
*

Group: Members
Posts: 9
Joined: 14-February 08
From: York
Member No.: 54
I cant see where i am going wrong when creating this navigational bar.
The button names are underlined and I have forgot how to get the background image to change when hovered, rather that using rollover with 2 images.

HTML
CODE
<div id="nav">
  <a href="#">Button 1</a>
  <a href="#">Button 2</a>
  <a href="#">Button 3</a>
  </div><!--nav -->


CSS
CODE
#nav {
width: 150px;
position: absolute;
margin-top: 130px;
height: 340px;
text-align: center;
vertical-align: middle;
}
#nav a {
height: 44px;
background-image: url(images/navbutton.gif);
background-repeat: no-repeat;
width: 150px;
display: block;
padding-top: 5px;
  font-size: 18px;
text-decoration: none;
color: #666666;
}



All help will be greatly appricated

Cheers

Dan

This post has been edited by friendd: Mar 29 2008, 02:50 PM
Go to the top of the page
 
+Quote Post
jackfranklin
post Mar 29 2008, 02:42 PM
Post #2


Rapid Squeezer
****

Group: Members
Posts: 102
Joined: 16-February 08
Member No.: 163
Firstly there is no need for the <h2> inside the links - just style the links if you need them a bigger size than normal.


--------------------
Jack Franklin | Eportfolio & Weblog
Go to the top of the page
 
+Quote Post
rewake
post Mar 29 2008, 02:45 PM
Post #3


Rapid Squeezer
****

Group: Mentor
Posts: 223
Joined: 14-February 08
From: NY, USA
Member No.: 127
Hi Dan,

You would just need to use :hover... something like this....

a { background-image:url(/path/to/image.jpg); }
a:hover { background-image:url(/path/to/hover-image.jpg); }

Hope this helps!

Rich


--------------------
QUOTE
if ($name=='will') echo '/(bb|[^b]{2})/';

Raineri Jewelers | MySpace | Facebook | deviantART
Go to the top of the page
 
+Quote Post
friendd
post Mar 29 2008, 03:05 PM
Post #4


New Squeeze
*

Group: Members
Posts: 9
Joined: 14-February 08
From: York
Member No.: 54
Spot on rewake.

Cheers
Go to the top of the page
 
+Quote Post
Justify
post Mar 31 2008, 04:44 AM
Post #5


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76
A better way to do this is by creating an image with the two buttons like so

---------
HOME
---------
home
---------

Then make a movement. So if the buttons were 30px tall.


#nav a:hover{
background-image: url('images/nav/homebutton.gif')
background-position: 0px 0px 30px 0px;
}

This will reduce loading times and make the rollover instant rather than waiting to load the new image.
Go to the top of the page
 
+Quote Post
« Next Oldest · CSS · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No new   17 902 400 22nd February 2008 - 11:11 AM
Last post by: Stuart
No new   15 902 472 25th February 2008 - 04:06 AM
Last post by: JasonStanley
No New Posts   11 emjayjay 428 23rd February 2008 - 04:49 PM
Last post by: emjayjay
No new   14 Monie 172 16th March 2008 - 11:27 PM
Last post by: Monie
No New Posts   2 902 130 12th April 2008 - 08:47 AM
Last post by: 902