Proper use of <span> (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

hzarabet -> Proper use of <span> (4/29/2004 14:09:02)

Hi all...

I am trying to use <span> when I want a small bit of text to fall outside of the class it is already in. I am not having much luck...

Here is a test page...

<body>

This is a <span class="centers">test</span>


</body>


This is from my style sheet:


BODY {
background: white;
color: black;
margin : 0;
padding-right: 2px;
text-align: left;
height: 30px;
font-size: 100%;
font-weight: 400;
font-family: arial, helvetica, sans-serif;
margin-left: 6px;
margin-right: 1px;
margin-top: 10px;
vertical-align: top;
}

.centers {
text-align: center;
}

What am I doing wrong with <span>?



d a v e -> RE: Proper use of <span> (4/29/2004 16:04:44)

text-align: center applies to block level elements or a single span, but obviously you can centre align a single word within a left aligned block of text!



c1sissy -> RE: Proper use of <span> (4/29/2004 16:07:36)

Dave, can't word spacing be used somehow? Just curious.



d a v e -> RE: Proper use of <span> (4/29/2004 16:10:01)

you mean if you wanted one word (or several) in a paragraph to have different word spacing? yes, but that er applies to words. (or paragraphs)



c1sissy -> RE: Proper use of <span> (4/29/2004 16:30:43)

quote:

.centers {
text-align: center;
}

and
quote:

This is a <span class="centers">test</span>


From what he is showing here he wants the word test to be centered. Couldn't you use word spacing and mess with the values to achieve this? If you place the word spacing right in between with the span? I know I had seen this done somewhere in all of my reading.

Now I'm really curious and am going to do a search

I found something, could he do this?
.center {word-spacing: 1em;}
then
<span class="center">test</span>



d a v e -> RE: Proper use of <span> (4/29/2004 16:35:43)

don't know if it helps but see
http://members.surfeu.fi/dave_pirjo/test-area/css_stuff/span.html (view source code for css)

text-align:center centres text, but not if it's in the middle of a leftaligned paragraph.
word spacing is the space in between words.



c1sissy -> RE: Proper use of <span> (4/29/2004 16:59:38)

quote:

text-align:center centres text, but not if it's in the middle of a leftaligned paragraph.
word spacing is the space in between words.


Right, I understand that text-align center and how it works.

Since the word appears to be in the middle of a sentence, as indicated by his sentence in his post, if a class was used, by using the word space, which causes spaces between words wouldn't this work? He could play with the value and try to get the word centered in a way that he wants to.

Oh, going to the link now to view it!



d a v e -> RE: Proper use of <span> (4/29/2004 17:06:32)

it is a class, but whatever if you center align a word in a paragraph (if it's possible by any means) how are you going to see it? the sentence i've just typed could contain a centred word but it would be sanwiched between adjacent leftaligned words so you can't tell the difference.



c1sissy -> RE: Proper use of <span> (4/29/2004 17:12:25)

But dave, I"m not using the center align at all. What I am trying to say is use word spacing, this way he can get the word to appear as he wishes in the sentence. So if he wants test to appear as such, then use word spacing. Follow me?

<edit> word spacing wont work, I just tried it out. </edit>
<edit again> How about the use of the pre element?
http://www.blooberry.com/indexdot/html/tagpages/p/pre.htm
</edit>



d a v e -> RE: Proper use of <span> (4/29/2004 17:20:47)

aargh! no not at all! word spacing increases the space between *words* not within words so if you only have one word it doesn't make any difference.

Doesn't the 'warning' example in my link make sense? applying a class (warning) to a span to produce an eddect in one word in styled sentence??

i'm trying to understand... ;)



c1sissy -> RE: Proper use of <span> (4/29/2004 17:27:32)

quote:

i'm trying to understand... ;)


LOL so am I! I sent you a pm. 

<pre>This is a        test       to see if this makes sense</pre>


this is what I was wondering if she could do with the word spacing, but with pre, if this is what she is after, this might work!



jaybee -> RE: Proper use of <span> (4/29/2004 17:35:52)

I'm sorry guys but I've read this over and over and I fail to see how you can centre a single word if it's in the middle of a sentence.

If it's just the word Test on it's own in a table cell for example then fine.

I think the point here is that it's fine using span to make a word in a sentence bold or pink or whatever but you're wasting your time trying to centre it.

The code that hzarabet has posted works fine for a single word. It sticks it in the middle of the body.



jaybee -> RE: Proper use of <span> (4/29/2004 17:37:39)

Hzarabet,

can you post an example of what you want your output to look like, then we can tell you what code to use.



c1sissy -> RE: Proper use of <span> (4/29/2004 17:40:23)

quote:

but you're wasting your time trying to centre it.


LOL does it hurt to try?[:D][8D][;)]



d a v e -> RE: Proper use of <span> (4/29/2004 17:41:27)

yep we've moved on from there (eventually! ;)

it's similar thing for word spacing - you need more than one word and it applies to block level (i.e. paragraph, div whatever elements)

to get sissy's effect you could make a style
.spaced {padding-left:10px; padding-right:15px;} and apply it to a span

This is a <span class="spaced">test </span> to see if this makes sense



jaybee -> RE: Proper use of <span> (4/29/2004 17:45:09)

quote:

LOL does it hurt to try?


That depends........ if you end up banging your head on the desk then..... probably. [;)]



hzarabet -> RE: Proper use of <span> (4/29/2004 23:10:52)

Here is another span problem. I want to center the text and input box/button for this form, but it is still aligning left per the td class:

<span class="center">
<form name="Subscribe" method="post" action="http://www.signingshotline.com/maillistXL/mailinglist.asp">
<input type="hidden" name="L" value="1" />
<input type="hidden" name="format" value="H" />
<input type="hidden" name="a" value="s" />
Enter your email address in the box below and press subscribe to enter  
<input type="text" name="Email" size="12" />
<input type="hidden" name="Action" value="Subscribe" />
<input type="hidden" name="Confirmed" value="yes" />
<input type="submit" name="Subscribe" value="Subscribe" />
</form>
</span>

No matter what I try...it will NOT align center.

I am beginning to think CSS actually stands for C**** S****** S***



gorilla -> RE: Proper use of <span> (4/29/2004 23:23:42)

It is 5.05 AM here in Copenhagen as I type this. Which means btw that I have now been up slightly more than an hour.

I've a mountain of work to get through but nevertheless - Hrzabet email me would you sending all the code as an attachment and I'll step through it with you over the weekend.


In fact hrazabet please edit how you fixed it out of your posting would you?



d a v e -> RE: Proper use of <span> (4/30/2004 1:25:31)

managed to get one word centred in a paragraph of left aligned text AND increased the word spacing on a single word (very zen) BUT here's the caveat:
it only worked when i was having nightmares about it last night[:'(]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625