newline before element?

[Atanas Boev]

Can a <span> element be made to appear in new line without making it a block
element?

I have the following code:
<span class="one">one </span>
<span class="two">two </span>
<span class="three">t hree</span>
<span class="four">fo ur</span>

and I want to achieve the following:

one two
three four


Thanks in advance,
suncho

[Haines Brown]

Re: newline before element?

"Atanas Boev" <sun-alabala-cho@cs.tut.fi> writes:
[color=blue]
> Can a <span> element be made to appear in new line without making it a block
> element?
>
> I have the following code:
> <span class="one">one </span>
> <span class="two">two </span>
> <span class="three">t hree</span>
> <span class="four">fo ur</span>
>
> and I want to achieve the following:
>
> one two
> three four[/color]

Suncho, I don't think I understand the question. Why not:

<p>
<span class="one">one </span>
<span class="two">two </span>
<br />
<span class="three">t hree</span>
<span class="four">fo ur</span>
</p>

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net

https://www.hartford-hwp.com

[Atanas Boev]

Re: newline before element?


"Haines Brown" <brownh@teufel. hartford-hwp.com> wrote in message
news:87smiw67bb .fsf@teufel.har tford-hwp.com...[color=blue]
> "Atanas Boev" <sun-alabala-cho@cs.tut.fi> writes:
>[color=green]
> > Can a <span> element be made to appear in new line without making it a[/color][/color]
block[color=blue][color=green]
> > element?
> >
> > I have the following code:
> > <span class="one">one </span>
> > <span class="two">two </span>
> > <span class="three">t hree</span>
> > <span class="four">fo ur</span>
> >
> > and I want to achieve the following:
> >
> > one two
> > three four[/color]
>
> Suncho, I don't think I understand the question.[/color]

I meant if it is possible only through CSS definitition of the classes "two"
or "three" somehow without the need of <br />. But you are right, if they
have <br /> probably thats the only way... or is it? I found something like
"display: run-in" but I got the impression it's only for headings.

suncho

[Jim Dabell]

Re: newline before element?

Atanas Boev wrote:
[color=blue]
> Can a <span> element be made to appear in new line without making it a
> block element?
>
> I have the following code:
> <span class="one">one </span>
> <span class="two">two </span>
> <span class="three">t hree</span>
> <span class="four">fo ur</span>
>
> and I want to achieve the following:
>
> one two
> three four[/color]

If you want to avoid using a <br> element, then you could use generated
content:

span.three:befo re {
content: "\a";
}

That's not well supported across browsers, though.

--
Jim Dabell

[Haines Brown]

Re: newline before element?

"Atanas Boev" <sun-alabala-cho@cs.tut.fi> writes:
[color=blue]
> "Haines Brown" <brownh@teufel. hartford-hwp.com> wrote in message
> news:87smiw67bb .fsf@teufel.har tford-hwp.com...[color=green]
> > "Atanas Boev" <sun-alabala-cho@cs.tut.fi> writes:
> >[color=darkred]
> > > Can a <span> element be made to appear in new line without making it a[/color][/color]
> block[color=green][color=darkred]
> > > element?
> > >
> > > I have the following code:
> > > <span class="one">one </span>
> > > <span class="two">two </span>
> > > <span class="three">t hree</span>
> > > <span class="four">fo ur</span>
> > >
> > > and I want to achieve the following:
> > >
> > > one two
> > > three four[/color]
> >
> > Suncho, I don't think I understand the question.[/color]
>
> I meant if it is possible only through CSS definitition of the classes "two"
> or "three" somehow without the need of <br />. But you are right, if they
> have <br /> probably thats the only way... or is it? I found something like
> "display: run-in" but I got the impression it's only for headings.[/color]

Oh, I see. Well, this is probably illicit, but it works on my
browser, anyway:

.three, .four {
position: relative;
top: 0.5em;
float: left;
}

<span class="one">one </span>
<span class="two">two </span>
<span class="three">t hree&#160;</span>
<span class="four">fo ur</span>

On my brouser I get:

one two

three four

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net

https://www.hartford-hwp.com

[Neal]

Re: newline before element?


"Haines Brown" <brownh@teufel. hartford-hwp.com> wrote in message
news:87znd34l4e .fsf@teufel.har tford-hwp.com...[color=blue]
> Oh, I see. Well, this is probably illicit, but it works on my
> browser, anyway:
>
> .three, .four {
> position: relative;
> top: 0.5em;
> float: left;
> }
>
> <span class="one">one </span>
> <span class="two">two </span>
> <span class="three">t hree&#160;</span>
> <span class="four">fo ur</span>[/color]

I love it. As you're putting spaces between the spans and a
non-breaking space within a span, it will reduce to one space
like normal?
[color=blue]
> On my brouser I get:
>
> one two
>
> three four[/color]

I just like how you spell browser. At first, I read "On my
trouser I get" and it amused me!

[Haines Brown]

Re: newline before element?

"Neal" <neal@spamrcn.c om> writes:
[color=blue]
> "Haines Brown" <brownh@teufel. hartford-hwp.com> wrote in message
> news:87znd34l4e .fsf@teufel.har tford-hwp.com...[color=green]
> > Oh, I see. Well, this is probably illicit, but it works on my
> > browser, anyway:
> >
> > .three, .four {
> > position: relative;
> > top: 0.5em;
> > float: left;
> > }
> >
> > <span class="one">one </span>
> > <span class="two">two </span>
> > <span class="three">t hree&#160;</span>
> > <span class="four">fo ur</span>[/color]
>
> I love it. As you're putting spaces between the spans and a
> non-breaking space within a span, it will reduce to one space
> like normal?[/color]

a) Re. spaces between spans (two and three/four I assume you mean)
that is done with relative positioning. Isn't that legit for in-line
elements? The space-reduction routine should have no effect here.

b) Re. the non-breaking space within a spam (using &##160;). That
is certainly improper, but works in a practical sense and avoids the
collapsed space to which you refer. If I want to behave myself, I'd
get rid of the "&#160;" and add instead a "padding-right: 5px;"
attribute to the style definition of .three and .four.

If I understand your rhetorical question correctly, there is no
"reduction to one space" on my browser (galeon), and I don't see why
there should be. How's it look on your "brouser"? The &#160; is not a
space, but an empty character.

One problem with my scheme is that it gets mixed in with other
elements that may happen be on the page, and I don't know how to
prevent that withough resorting to blocks (div). Also, I believe the
two lines should be placed in a container, such as <p>. Am I right? If
so, that would violate one of the parameters of the challenge.

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net

https://www.hartford-hwp.com

[Neal]

Re: newline before element?


"Haines Brown" <brownh@teufel. hartford-hwp.com> wrote in message
news:87vfnr3yy5 .fsf@teufel.har tford-hwp.com...[color=blue]
> If I understand your rhetorical question correctly,[/color]

It wasn't rhetorical. It was serious. I've never tried it,
perhaps I should do the experiment.

The "brouser" thing just made me laugh. No offense intended.