CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Grr... link styling


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old January 21st, 2013, 03:34 PM
nbasso713 nbasso713 is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 64 nbasso713 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 h 36 m 11 sec
Reputation Power: 1
Grr... link styling
I swear I've styled links a thousand times in the past and for some reason I just can't get the default html link styles to change. If i made a stupid mistake and missed something please let me know because i just don't see it.

HTML:
Code:
			<ul id="navigation-menu">
				<a href="index.php"><li id="first-nav-button"><div class="nav-break"></div><p id="navText"><span class="home-icon"></span>Home</p></li></a>
				<a href="leaderboard.php"><li id="leaderboard-button"><div class="nav-break"></div><p id="navText"><span class="leaderboard-icon"></span>Leaderboard</p></li></a>
				<a href="upload.php"><li id="normal-button"><div class="nav-break"></div><p id="navText"><span class="upload-icon"></span>Upload</p></li></a>
				<a href="user-search.php"><li id="last-nav-button"><p id="navText"><span class="search-icon"></span>Search</p></li></a>
			</ul>


CSS:
Code:
ul#navigation-menu li:link{
	text-decoration:none;
}

ul#navigation-menu li:visited{
	text-decoration:none;
}

ul#navigation-menu li:hover{
	text-decoration:none;
}

ul#navigation-menu li:active{
	text-decoration:none;
}


I've tried numerous variations using the "a" tag and "li" tag and id's, but nothing has worked.
Reply With Quote
  #2  
Old January 21st, 2013, 03:52 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Dev Shed God 30th Plane (19500 - 19999 posts)
  
Join Date: Jul 2004
Location: USA
Posts: 19,893 Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level) 
Time spent in forums: 6 Months 2 Days 19 h 25 m 2 sec
Reputation Power: 4192
You seem to have three different mistakes repeated multiple times.

Only <li> elements may be direct children of a <ul>. You need to move the links inside the list-items.

The same ID should not be used for multiple elements in the same document. In other words, any two or more elements on a page may not have the same ID. You could use a class instead.

The ":link" and ":visited" pseudo-classed apply only to links. So you could change each "ul#navigation-menu li" to "ul#navigation-menu li a", however, it's unlikely that you don't really need to specify all of that, so just use "#navigation-menu a" instead.
__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).
Reply With Quote
  #3  
Old January 21st, 2013, 04:08 PM
nbasso713 nbasso713 is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 64 nbasso713 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 h 36 m 11 sec
Reputation Power: 1
Quote:
Originally Posted by Kravvitz
You seem to have three different mistakes repeated multiple times.


Thanks, I made the changes you have suggested, but I'm still not having any luck.

Revised HTML:
Code:
<ul id="navigation-menu">
				<li id="first-nav-button"><a href="index.php"><div class="nav-break"></div><p class="navText"><span class="home-icon"></span>Home</p></a></li>
				<li id="leaderboard-button"><a href="leaderboard.php"><div class="nav-break"></div><p class="navText"><span class="leaderboard-icon"></span>Leaderboard</p></a></li>
				<li class="normal-button"><a href="upload.php"><div class="nav-break"></div><p class="navText"><span class="upload-icon"></span>Upload</p></a></li>
				<li id="last-nav-button"><a href="user-search.php"><p class="navText"><span class="search-icon"></span>Search</p></a></li>
			</ul>


Revised CSS:
Code:
ul#navigation-menu a:link{
	text-decoration:none;
}

ul#navigation-menu a:visited{
	text-decoration:none;
}

ul#navigation-menu a:hover{
	text-decoration:none;
}

ul#navigation-menu a:active{
	text-decoration:none;
}


Thanks again for the help.
Reply With Quote
  #4  
Old January 21st, 2013, 04:12 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Dev Shed God 30th Plane (19500 - 19999 posts)
  
Join Date: Jul 2004
Location: USA
Posts: 19,893 Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level) 
Time spent in forums: 6 Months 2 Days 19 h 25 m 2 sec
Reputation Power: 4192
I expect the problem lies elsewhere in your code. Do you have an example page online somewhere that you could show us?

By the way, I'm curious, what is the purpose of the ".nav-break" <div>s?
Reply With Quote
  #5  
Old January 21st, 2013, 04:31 PM
nbasso713 nbasso713 is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 64 nbasso713 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 h 36 m 11 sec
Reputation Power: 1
Quote:
Originally Posted by Kravvitz
I expect the problem lies elsewhere in your code. Do you have an example page online somewhere that you could show us?

By the way, I'm curious, what is the purpose of the ".nav-break" <div>s?


Unfort everything is on a local server atm, but break is a short border line. It was easier for me to create a new element to produce the effect I wanted opposed to styling a border for li.
Reply With Quote
  #6  
Old January 21st, 2013, 05:47 PM
Nanomech's Avatar
Nanomech Nanomech is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2011
Location: The Pleiades
Posts: 227 Nanomech User rank is Sergeant (500 - 2000 Reputation Level)Nanomech User rank is Sergeant (500 - 2000 Reputation Level)Nanomech User rank is Sergeant (500 - 2000 Reputation Level)Nanomech User rank is Sergeant (500 - 2000 Reputation Level)Nanomech User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 2 Days 3 h 9 m
Reputation Power: 7
Send a message via Skype to Nanomech
Why not just use a <hr /> instead of <div> for that effect because I think it is designed to split content and create a new line.

For example in my forms, if I have fields relating to different topics, I might use a <hr /> to break the form up so it's easier to read and understand.

I see no other uses for the <hr /> element other than to split up content and create a new line.

Regards,

NM.
Last edited by Nanomech : January 21st, 2013 at 05:50 PM.
Reply With Quote
  #7  
Old January 21st, 2013, 08:07 PM
nbasso713 nbasso713 is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2012
Posts: 64 nbasso713 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 h 36 m 11 sec
Reputation Power: 1
Quote:
Originally Posted by Nanomech
Why not just use a <hr /> instead of <div> for that effect because I think it is designed to split content and create a new line.

For example in my forms, if I have fields relating to different topics, I might use a <hr /> to break the form up so it's easier to read and understand.

I see no other uses for the <hr /> element other than to split up content and create a new line.

Regards,

NM.


I agree with you, but I'm steering clear of most HTML5 and CSS3 when I can for at least the next year or so. There's still a lot of old browsers being used unfortunately.
Reply With Quote
  #8  
Old January 22nd, 2013, 02:13 AM
Nanomech's Avatar
Nanomech Nanomech is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2011
Location: The Pleiades
Posts: 227 Nanomech User rank is Sergeant (500 - 2000 Reputation Level)Nanomech User rank is Sergeant (500 - 2000 Reputation Level)Nanomech User rank is Sergeant (500 - 2000 Reputation Level)Nanomech User rank is Sergeant (500 - 2000 Reputation Level)Nanomech User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 2 Days 3 h 9 m
Reputation Power: 7
Send a message via Skype to Nanomech
The <hr /> tag is not HTML5.

Regards,

NM.
Reply With Quote
  #9  
Old January 22nd, 2013, 02:26 AM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Dev Shed God 30th Plane (19500 - 19999 posts)
  
Join Date: Jul 2004
Location: USA
Posts: 19,893 Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level) 
Time spent in forums: 6 Months 2 Days 19 h 25 m 2 sec
Reputation Power: 4192
To clarify what Namomech said in his last post, the <hr> element was part of HTML long before HTML4 even. It's in HTML2.

In my opinion, however, an <hr> would not be more appropriate here. If IE7 support isn't required, I would use a ":before" pseudo-element (which is CSS2).

Quote:
Unfort everything is on a local server atm

Well, if you want further help, you'll need to post more of your HTML and CSS.
Last edited by Kravvitz : January 22nd, 2013 at 02:30 AM.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Grr... link styling

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap