css 101

having text display on one line

[scato345]

hello,

in the example below, i was trying to emulate in CSS format the information that is contained inbetween the <font> brackets in the lower part.

i tried using <d>s, <p>s, and finally <div>s.

the lower method displays on a single line with controllable spacing using the 'no break space' marker.

the information above within the <div>s displays on three lines.

i tried several different ways and couldn't figure it out.

i am sure it is quite basic, but still beyond me.

Any help would be appreciated.

thanks,

dorian

<table width="180" cellspacing="0" cellpadding="0">
<tr>
<!--#*$!#*$!XX BELOW LIST OF SPECIAL FEATURES IN TD'S #*$!#*$!XX-->

<!-- DELETE THOSE THAT DO NOT APPLY -->

<div class=fon026 width="20" height="20" align="center">EH</div>
<div class=fon024 width="20" height="20" align="center">SC</div>
<div class=fon025 width="20" height="20" align="center">ER</div>

<!--#*$!#*$!XX ABOVE LIST OF SPECIAL FEATURES IN TD'S #*$!#*$!X-->
</tr>
</table>
</td>
</tr>

<tr>
<td align="center" width="476">
<table align="center" width="476" cellspacing="0" cellpadding="0" >
<tr>
<td align="center" width="476" valign="middle">
<p>
<font size="2" color= "C6B922"><strong>EH electrical hazard</strong></font>&nbsp; &nbsp;
<font size="2" color= "A09F9F"><strong>SC steel toe cap</strong></font>&nbsp;
<font size="2" color= "934F4F"><strong>SR slip resistant</strong></font></p> &nbsp; &nbsp;
</p>
</td>
</table>

[JAB Creations]

I'm not exactly sure what your idea is so let me state what I'm perceiving your goal to be...

You want a long line of text to run horizontally along an element without breaking to a second line...is that it?

- John

[scato345]

John,

Yes.

The text characters eh sr sc are each contained in a separate element, each with different color information.

They now show up:

sr
eh
sc

they should appear: sr eh sc

(And the backgound color matches the color of the text characters below the two letter abbreviation - not that that is relevant)

in effect, eh sr sc are each in a borderless "box"

electrical hazard - slip resistant - steel cap toe are written out in font-colors matching the backgound of two letter abbreviation somewhat above them.

------

I am also having trouble having the text characters eh srsc show up in white (ffffff) as they do when I constuct the line with html and no CSS.

I hope that is more clear

Dorian

[Setek]

<div class=fon026 width="20" height="20" align="center">EH</div>
<div class=fon024 width="20" height="20" align="center">SC</div>
<div class=fon025 width="20" height="20" align="center">ER</div>

You can float these

div

s, and to apply the colour you simply use the

color

property :)

Example:

div.fon026 { float: left; /* so each div allows another to sit by its side */
width: 20px; /* to remove width="20" attribute */
height: 20px; /* to remove height="20" attribute */
color: #fff; /* to set colour */
font-weight: 800; /* in place of strong */
text-align: center; /* to remove align="center" attribute */ }

Just a curiosity: why do you have

div

s inside a table row, without a table cell to keep them in? It should be more like:

<table>
<tr>
<td>
<div class="fon026">EH</div>
<div class="fon024">SC</div>
<div class="fon025">ER</div>
</td>
</tr>
</table>

Also, by the looks of it, I don't think you need a table at all :) You might do better with a "wrapper" or container

div

though:

<div id="container">
<div>EH</div>
<div>EH</div>
<div>EH</div>
<div style="clear:both;height:1px;overflow:hidden;">&nbsp;</div>
</div>

Like so. But it's up to you how you apply it.

[Dabrowski]

Setek, I think your solution, while foolproof is over complicated.

Would an inline element, i.e. SPAN do the trick?

The DIVs are appearing on separate lines as they are block elements. Couldn't you use a SPAN with 'margin-right' for spacing? Or even use 'display: inline' on the DIVs?

[JAB Creations]

The span element is the generic inline element.

This example...

<span>1</span><span>2</span><span>3</span>

Will display as...

123

Setek is correct, you can also float a divisible element.

If you do not want to break a line of text however I would use a block level element (div) and mess around with overflow, min-width, etc.

- John

[Dabrowski]

Does SPAN not support margin-right? I know you can't do width in strict mode. Another thing that W3C has done to make life difficult for us.

[JAB Creations]

Margins are used specifically for block level elements. Vertical-align and text-align are used for inline level elements.

- John