Author Topic: Navigation  (Read 2326 times)

Misty0625

  • Guest
Navigation
« on: October 13, 2011, 02:24:17 pm »
I am trying to get my navigation to work right. I have it set up to look the way I want it to, only now I need to apply a hover effect, which I just want it to have the text change to black when hovered over.

Even after doing the DW-CIB tutorials, I am having trouble with this.

Please help!

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: Navigation
« Reply #1 on: October 13, 2011, 03:18:35 pm »
You would need to add a style like this to get that working:

#navigation a:hover {
      background-color:black;
    }

That will target the "navigation" <div> you have created and will apply that hover effect to all links within that <div>.
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

Misty0625

  • Guest
Re: Navigation
« Reply #2 on: October 13, 2011, 08:38:31 pm »
Ok. I was trying to do it from the CSS Styles instead of doing it through the actual external style sheet. I will try it.

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: Navigation
« Reply #3 on: October 14, 2011, 07:55:18 am »
Ok, let us know if you still need some help with it.  :)
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

Misty0625

  • Guest
Re: Navigation
« Reply #4 on: October 21, 2011, 08:11:55 am »
This is driving me crazy!!!

I am going to upload this again. I can't see what I'm doing wrong here. My navigation just will not work right. When switching to live view, it adds in bullets that I thought gets taken out with the "list-style-type:none;" but it isn't. It's all jumbled and I don't know how to fix it.


erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: Navigation
« Reply #5 on: October 21, 2011, 08:36:03 am »
I would first check it in your browser...don't trust what the Live View looks like inside of Dreamweaver, always test it in your browser.

But yeah, that is still showing the list bullets. You should add the list-style-type:none to the li CSS style:

li
{
list-style-type:none;
float:left;
}

That should fix that problem.
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

Misty0625

  • Guest
Re: Navigation
« Reply #6 on: October 21, 2011, 09:18:48 am »
I will make sure to test it in my browser from now on. Adding that to the li changed it all. Thanks so much! I just didn't know what I was missing.