Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Old 02-13-2008, 02:36 AM Help with span class
aschecht's Avatar
Extreme Talker

Posts: 190
Name: A
Location: San Jose, CA
Trades: 6
I'm very new to CSS and am struggling to get things looking the way I want on the following page:
http://www.icdmeister.com/site/Codes...gn_fibroid.htm

I'm doing something wrong with the span class, I think.

My goal is the following:
  • the first bullet point (li class="desc") not underlined.
  • the remainder of the li items underlined.
  • The span at the end of the last three list items should be bold, red font, and spaced two spaces from the end of the underlined content.
Also, what's the best way to insert a couple of spaces. Should I use    or is there something more elegant? I want two spaces between the end of the underlined content and the span class="code" content.

Andrew
aschecht is offline
Reply With Quote
View Public Profile Visit aschecht's homepage!
 
 
Register now for full access!
Old 02-13-2008, 02:59 AM Re: Help with span class
Super Moderator

Posts: 1,584
Location: Kokkola, Finland
Trades: 1
why are you underlining text that isn't a hyperlink? really confusing - just don't do it.

bullet points won't be underlined anyway - again why would you want to?

the span at the end has an error in the class

you have
span.code
{
font-color: #FF0000;
font-weight: bold;
text-decoration: none;
}

but you need this (including some space provided by padding. increase the padding by 0.1 either way to increase/decrease the padding spacing)
span.code
{
color: #FF0000;
font-weight: bold;
text-decoration: none;
padding-left:.7em;
}

oh and when you specify a font family you should include a list of fonts ending ina generic one like

font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
davemies is offline
Reply With Quote
View Public Profile Visit davemies's homepage!
 
Old 02-13-2008, 10:12 AM Re: Help with span class
Mooofasa's Avatar
Defies a Status

Posts: 1,611
Name: Michael (mik) Land
Location: England
Trades: 0
LOL. Sorry but I can't help laughing at your post dave. Work in ems only if you're comfortable using them (i.e. know what they are and how to use them). It's also recommended to use 62.5% font size on the body to change 1em to 10px so that working out ems throughout the CSS is easier.

Use border-bottom on the li element to get it "underlined". You could use li:first to stop the first one being given an underline, but it's safer to use an id.

Add margin to the span element.
__________________

Please login or register to view this content. Registration is FREE
- Tumblog with thoughts, quotes, links, videos, images and my creations.

Please login or register to view this content. Registration is FREE
- The best free web browser.

Please login or register to view this content. Registration is FREE
- Firefox is now Firefail.

Last edited by Mooofasa; 02-13-2008 at 10:14 AM..
Mooofasa is offline
Reply With Quote
View Public Profile Visit Mooofasa's homepage!
 
Old 02-13-2008, 10:17 AM Re: Help with span class
Super Moderator

Posts: 1,584
Location: Kokkola, Finland
Trades: 1
lol i use 76% on the body, but each to their own - i might give 62.5% sometime...

do you generally use 1em (or maybe 100%) for p, etc?

i would just avoid using underline on anything that isn't a link.

i suggested em for the line padding so that it scales properly with text size being increased by the user - using px won't do this

Last edited by davemies; 02-13-2008 at 10:18 AM..
davemies is offline
Reply With Quote
View Public Profile Visit davemies's homepage!
 
Old 02-13-2008, 10:25 AM Re: Help with span class
Mooofasa's Avatar
Defies a Status

Posts: 1,611
Name: Michael (mik) Land
Location: England
Trades: 0
Serif: 1.4em/1.5em (size/line-height) (equivalent to 14px)
Sans-serif: 1.3/1.4em (equivalent to 13px)

That's with 62.5% body. You can see what it's like on my site.

Let him get off the ground first before he soars
__________________

Please login or register to view this content. Registration is FREE
- Tumblog with thoughts, quotes, links, videos, images and my creations.

Please login or register to view this content. Registration is FREE
- The best free web browser.

Please login or register to view this content. Registration is FREE
- Firefox is now Firefail.
Mooofasa is offline
Reply With Quote
View Public Profile Visit Mooofasa's homepage!
 
Old 02-14-2008, 01:30 AM Re: Help with span class
aschecht's Avatar
Extreme Talker

Posts: 190
Name: A
Location: San Jose, CA
Trades: 6
Thanks. Good tips. I took you advice and will be removing the underlining from all the non-linked text. This site is an adaptation of an e-book where a lot of the content was underlined so I originally thought I'd keep it the same but you're right Dave that it's clearer without. I went with margin-left rather than padding. It seems to look good.

Thanks again,

Andrew
aschecht is offline
Reply With Quote
View Public Profile Visit aschecht's homepage!
 
Old 02-14-2008, 03:34 AM Re: Help with span class
Mooofasa's Avatar
Defies a Status

Posts: 1,611
Name: Michael (mik) Land
Location: England
Trades: 0
Padding was only suggested so that you could get that underline thing going on
__________________

Please login or register to view this content. Registration is FREE
- Tumblog with thoughts, quotes, links, videos, images and my creations.

Please login or register to view this content. Registration is FREE
- The best free web browser.

Please login or register to view this content. Registration is FREE
- Firefox is now Firefail.
Mooofasa is offline
Reply With Quote
View Public Profile Visit Mooofasa's homepage!
 
Old 02-14-2008, 10:28 AM Re: Help with span class
aschecht's Avatar
Extreme Talker

Posts: 190
Name: A
Location: San Jose, CA
Trades: 6
I see. Then margin-left is preferrable for the spacing between the elements. Seems to be working well.

A.
aschecht is offline
Reply With Quote
View Public Profile Visit aschecht's homepage!
 
Reply     « Reply to Help with span class
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.61624 seconds with 12 queries