Welcome to WebmasterWorld Guest from 54.158.36.59

Forum Moderators: not2easy

Message Too Old, No Replies

text decoration inside many elements

     
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.
10:44 pm on Apr 25, 2012 (gmt 0)



I tried:

.lb a { text-decoration:none; }
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.
11:10 pm on Apr 25, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
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?
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
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.
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)
12:52 am on Apr 26, 2012 (gmt 0)



Figured it out. Going to use a <span> tag with url and class set.
1:12 am on Apr 26, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month