Welcome to WebmasterWorld Guest from 107.20.75.63

Forum Moderators: not2easy

Message Too Old, No Replies

text decoration inside many elements

     
10:32 pm on Apr 25, 2012 (gmt 0)

New User

joined:Apr 25, 2012
posts:6
votes: 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)

New User

joined:Apr 25, 2012
posts:6
votes: 0


I tried:

.lb a { text-decoration:none; }
11:01 pm on Apr 25, 2012 (gmt 0)

New User

joined:Apr 15, 2012
posts: 7
votes: 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)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2143
votes: 7


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)

New User

joined:Apr 25, 2012
posts:6
votes: 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)

New User

joined:Apr 25, 2012
posts:6
votes: 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)

New User

joined:Apr 15, 2012
posts: 7
votes: 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)

New User

joined:Apr 25, 2012
posts:6
votes: 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)

New User

joined:Apr 25, 2012
posts:6
votes: 0


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

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2143
votes: 7


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