Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Underline hover navigation
Old 03-22-2009, 11:24 AM Underline hover navigation
Skilled Talker

Posts: 53
Trades: 0
I love this simple navigation.

http://digitalmash.com/

Can this be achieved using CSS? I was trying to figure out how to do this by looking through the code but it seems complex to me being a beginner at this stuff.
moonlit is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 03-22-2009, 11:34 AM Re: Underline hover navigation
chrishirst's Avatar
Missing! presumed drunk.

Posts: 42,371
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Just set a background image for the :hover pseudo class
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 03-22-2009, 11:49 AM Re: Underline hover navigation
Skilled Talker

Posts: 53
Trades: 0
Ahhh nice. Thanks.
moonlit is offline
Reply With Quote
View Public Profile
 
Old 03-22-2009, 01:45 PM Re: Underline hover navigation
Skilled Talker

Posts: 53
Trades: 0
Man now this is driving me nuts! I had the image appearing when I moused over the link but now it won't work (I changed the image size slightly and that's when I started having problems). I've changed the code around so much I'm not sure what I'm doing wrong.

http://www.liesldexheimerdesign.com/layout2.html

Last edited by moonlit; 03-22-2009 at 06:38 PM..
moonlit is offline
Reply With Quote
View Public Profile
 
Old 03-22-2009, 07:12 PM Re: Underline hover navigation
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Try putting your navigation into an unordered list, which is what it is, and put the background on the <a> and swap it with the a:hover.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-23-2009, 03:14 AM Re: Underline hover navigation
Super Talker

Posts: 108
Name: Yelnats
Trades: 0
you could also use a "border-bottom" on CSS if want just a plain code and no picture included...
__________________

Please login or register to view this content. Registration is FREE
for fun and money.
Please login or register to view this content. Registration is FREE
seo-neon is offline
Reply With Quote
View Public Profile Visit seo-neon's homepage!
 
Old 03-23-2009, 09:29 AM Re: Underline hover navigation
jesi's Avatar
Extreme Talker

Posts: 153
Trades: 0
This is better to use thick border bottm in CSS for hover
__________________

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE

jesi is offline
Reply With Quote
View Public Profile Visit jesi's homepage!
 
Old 03-27-2009, 04:13 PM Re: Underline hover navigation
Skilled Talker

Posts: 53
Trades: 0
I found a really nice javascript code that I've applied to my site. Only prob is that I'm trying to get it to line up more to the left where the white edge of my text area starts. I thought I code use the margin-left CSS code but it messes up the navigation. Help please.
moonlit is offline
Reply With Quote
View Public Profile
 
Old 03-27-2009, 07:44 PM Re: Underline hover navigation
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
How can we help you if we can't SEE the problem ???
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-28-2009, 10:25 AM Re: Underline hover navigation
Skilled Talker

Posts: 53
Trades: 0
The link was above in a previous post but I'll place it here anyway.

http://www.liesldexheimerdesign.com/layout2.html
moonlit is offline
Reply With Quote
View Public Profile
 
Old 03-28-2009, 11:30 AM Re: Underline hover navigation
TripleMoons's Avatar
Webmaster Talker

Posts: 619
Name: Stephanie Kunder
Location: Hanover, PA
Trades: 0
Try adding a width (not auto) to div#miniflex and then do the margin-left.
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

TripleMoons is offline
Reply With Quote
View Public Profile Visit TripleMoons's homepage!
 
Old 03-28-2009, 11:56 AM Re: Underline hover navigation
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Ok, the FIRST thing you need to do is get rid of all that unnecessary positioning, you just don't need it and it WILL cause problems in IE. Learn to use the normal document flow and use floats, then use positioning only when absolutely necessary.

Once you do that, the float on the nav isn't even necessary, since the div it sits in would be in the flow, then you could just use a margin-left to put the UL where you want it.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-28-2009, 05:11 PM Re: Underline hover navigation
Skilled Talker

Posts: 53
Trades: 0
Could you elaborate some more? I tried removing all of the code that had positioning absolute and relative. Then I removed the float:left code and added margin:left to the miniflex but the underline part went kinda wonky so I put all the code back to where it was originally.
moonlit is offline
Reply With Quote
View Public Profile
 
Old 04-01-2009, 04:10 AM Re: Underline hover navigation
Experienced Talker

Posts: 40
Name: rebo rai
Trades: 0
hey i think it will help !!!!!

u can use border of an image !!!!

------CSS ----------

ul.topNav
{
padding:0px;
margin:0px;
list-style:none;
}
ul.topNav li
{
padding:0px 12px 0px 12px;
margin:0px;
display:block;
float:left;
}
ul.topNav li a
{
padding:0px;
margin:0px;
display:block;
float:left;
color: #515150;
font: 12px Verdana, Geneva, sans-serif;
display:block;
float:left;
}
ul.topNav li a:hover
{
border-bottom:3px solid red;
padding:0px 0px 4px 0px;
}

-----------------------html --------------------

<ul class="topNav">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>

Good luck !!! works in IE6,IE 7 and firefox !!!!!

Need any help !!! PM meh !!!
mindlesswizard is offline
Reply With Quote
View Public Profile Visit mindlesswizard's homepage!
 
Old 04-01-2009, 11:06 AM Re: Underline hover navigation
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
Let me suggest an alternative - your layout is overly complex for such a relatively simple design:

www.cssslicingguide.com and http://www.subcide.com/tutorials/csslayout/

Most of your problems stem from using position:absolute on everything - it's just not needed and IE has huge problems with it.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Underline hover navigation
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.63747 seconds with 12 queries