CSS Li and Underline

Rex100 · 08-29-2008, 12:05 AM

I'm trying underline only the words within <li> not the whole line of li

Here's the CSS I have
li {border-bottom-style: solid;border-bottom-width:1px; border-bottom-color: #ff0033}
.left {text-align:left;}
.right {text-align:right;}
.center {text-align:center;}

Here's the HTML
<ul>
<li class="left">Left</li>
<li class="right">Right</li>
</ul>
<ul>
<li class="center">Center</li>
</ul>

The code underlines the word and all the way to the left and right. How do I fix it so only the word is undelined? I normally wouldn't bother with li but <H> won't work where I'm using this.

Thanks For The Help,

Rex

CrazeD · 08-29-2008, 04:54 AM

Code:

li { text-decoration:underline;color:#ff0033 }

Rex100 · 08-29-2008, 09:44 AM

CrazeD,
I think I didn't realize you can throw in a color with text-underline.

Thanks for the help,

Rex

CrazeD,
I used
li {list-style:none; font-size:1.3em;padding:0;text-decoration:underline;color:#ff0033}
.left {text-align:left;}
.right {text-align:right;}
.center {text-align:center;}

for the CSS

and <ul>
<li class="left">Left</li>
<li class="right">Right</li>
</ul>
<ul>
<li class="center">Center</li>
</ul>

for the HTML and the color of the undeline colors the text the same color. I need the text to stay the color it is with this red underline. Can you still do it without border-bottom?

Thanks,

Rex

CrazeD · 08-29-2008, 08:11 PM

Hmm... you'll have to use the borders then.

Post your HTML code too and I will make it work for you.

EDIT: lol, you did post the HTML...deeh...

I'll get back to you in a few minutes...

CrazeD · 08-29-2008, 08:49 PM

Code:

li {border-bottom: 1px solid #ff0033; #ff0033;}
.left {float:left;display:inline;}
.right {float:right;display:inline;}
.center {display:inline;}

Code:

<ul>
<li class="left">Left</li>
<li class="right">Right</li>
</ul>
<ul>
<center><li class="center">Center</li></center>
</ul>

This works for now. It's quite crude and not very proper, I'll come tidy it up later. I'm not sure what you were trying to do with the <li>? You should be using <div> for layout.

Rex100 · 08-29-2008, 09:22 PM

CrazeD,

I am using it for a heading. I have a 3 column site actualcures.com and I was getting an SEO error saying that from leftmost to the rightmost column that using H4 in the left column was out of the H numeric order (H4, H1, H2, H2, H2.....H4), so I used the UL/LI. All I'm trying to do is put a narrow red line under the left and right column headings. I'll use DIVs if you think they're better for this.

Thanks,

Rex

CrazeD · 08-30-2008, 12:52 AM

Well, the UL/LI is intended for making lists...not underlining text.

You should use div or span for what you want. I'm not sure if you can patch something together off my crude example up there, but if not post a snippet of HTML for your site and I will try to help.

Rex100 · 08-30-2008, 09:19 AM

CrazeD,

ul {list-style:none; margin:0; padding:0; }
ul.colhead {list-style:none; font-size:1.1em; margin:0; padding:0;}
li {margin:0; padding:0;}
li.left {text-align:left;}
li.right {text-align:right;}

<ul class="colhead">
<li class="left"><strong>Solutions</strong></li>
<li class="right"><strong>and Cures</strong></li>
</ul>

I probably can take out
li.left {text-align:left;} and
<li class="left">
since if I don't use these the text will default to the left anyway.

Thanks,

Rex

CrazeD,
I got your code
li {border-bottom: 1px solid #ff0033; #ff0033;}
.left {float:left;display:inline;}
.right {float:right;display:inline;}
.center {display:inline;}
- - -

<ul>
<li class="left">Left</li>
<li class="right">Right</li>
</ul>
<ul>
<center><li class="center">Center</li></center>
</ul>

to work great for left and right but center is not working - there's no float:center and if you use <center>...</center> the underline will run past the word(s) and to the end of both sides.

Thanks,

Rex

CrazeD,
I got it to work, it took a while - for some reason change after change wouldn't work, then I put the one line of code that makes it happen through a clean up in an editor and it works now. Then I had to get it to position center and right which I couldn't get to work with a span. I think it looks a lot different than expected - at least for me.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Black Text Red Underline</title>
<style type="text/css">
div.blackred {text-align:center}
span.c2 {text-decoration: underline; color: red;}
span.c1 {color: black;}
</style>
</head>
<body>
<div class="blackred"><span class="c2"><span
class="c1">Black
text, red underline</span></span>
</div>
</body>
</html>

Rex

CrazeD · 09-01-2008, 09:56 PM

In a 3-column CSS layout, the left and ride sides are float and the center just sits between them. It is as wide as it has room for, dictated by the size of the floats and the size of the container.

That's why I wanted to see your HTML template.

If you have display:inline then it shouldn't run past the text.

EDIT: Hey, nice!

You might want to use correct DOCTYPE though.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Rex100 · 09-02-2008, 02:04 PM

CrazeD,

That Doctype is just the one the editor (NVU) uses. I use NVU to work out code and then put it on my wordpress site.

On my site I had the programmer program mine so the search engines see the middle (content) column first. I'm not sure there's any floating. If you run my site through here Yellowpipe - Lynx Viewer you'll see my content show first, not the left column.

Thanks,

Rex

CrazeD,
The underline coloring desn't work in XHTML - unless you have an idea or two.

Here's my Doctype

<?php echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Thanks,

Rex

Member Login