homepage Welcome to WebmasterWorld Guest from 54.237.151.188
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
text decoration inside many elements
ryanmarks



 
Msg#: 4445677 posted 10:32 pm on Apr 25, 2012 (gmt 0)

I am having issues with CSS and text decoration within an a tag, div tag, and ul tag. Here is the code:
<a href="index.htm">
<div class="lb">
<ul>Home</ul>
</div>
</a>

Ive tried everything to remove the text decoration for the link. Maybe my CSS syntax is wrong. Can anyone help? Thanks.

 

ryanmarks



 
Msg#: 4445677 posted 10:44 pm on Apr 25, 2012 (gmt 0)

I tried:

.lb a { text-decoration:none; }

shingokko



 
Msg#: 4445677 posted 11:01 pm on Apr 25, 2012 (gmt 0)

First of all there are a couple of errors in your HTML markup.

1. a tags are inline elements and nesting block elements such as div and ul in them are not allowed

2. You shouldn't have text directly in a ul tag, for each item in the tag insert an li tag and have text in it like this

<ul><li>Home</li></ul>

To answer you question, switch the order of the tags in your selector so that it selects the div inside a tags.


a .lb
{
/* insert your style definitions here */
}


Als you probably would want to give the a tag a class of some kind so that you are not selecting all a tags within your webpages.

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4445677 posted 11:10 pm on Apr 25, 2012 (gmt 0)

I tried:
.lb a { text-decoration:none; }


Did that work?. I have to ask about your markup. <div> should not be in an <a> tag. The correct format is
<div>
<ul><a href="index.htm" class="lb"></ul>
</div>

Then your CSS is
simply a.lb {text-decoration: none;}
or eliminate the class and simply write
ul a {text-decoration: none;}

So I have to ask, what is the reason for the way you formatted it? Are you looking for a block display with the link?

Marshall

ryanmarks



 
Msg#: 4445677 posted 11:47 pm on Apr 25, 2012 (gmt 0)

Yes. I am looking for a block display with a link. Since my markup is wrong, how should I markup accordingly?

ryanmarks



 
Msg#: 4445677 posted 11:50 pm on Apr 25, 2012 (gmt 0)

I also forgot to note, when the user clicks on the block (not just the text) it should go to the link

shingokko



 
Msg#: 4445677 posted 12:05 am on Apr 26, 2012 (gmt 0)

I wonder if what you are trying to achieve is a list of links. If this is the case, you could write the markup as follows:


<div class="lb">
<ul>
<li>
<a href="index.htm">Home</a>
</li>
<li>
<a href="...">...</a>
</li>
<!-- Add more items as you need -->
</ul>
</div>


And to remove the underline of the a tags within the list, here's the CSS you'll need:


.lb a { text-decoration: none; }


Let me know if this is what you wanted to do.

ryanmarks



 
Msg#: 4445677 posted 12:11 am on Apr 26, 2012 (gmt 0)

kind of. I am trying to make block links for a menu. Each block has css attributes. When you click anywhere on the block (with text in it), it should go to another page. My "lb" class gives the block div element its attributes (color, width, height, etc)

ryanmarks



 
Msg#: 4445677 posted 12:52 am on Apr 26, 2012 (gmt 0)

Figured it out. Going to use a <span> tag with url and class set.

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4445677 posted 1:12 am on Apr 26, 2012 (gmt 0)

You can simply add display: block to the <a>

Using shingokko's markup,

.lb a {text-decoration: none; display: block;}

Don't add extra markup like span's if not necessary.

Marshall

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved