Streaming live at 10am (PST)

Text Element inside DIV


#1

I need to insert a span inside a parent div...

<div class="test1">
<span>Hello</span>
</div>

but everytime I keep getting this instead:

<div class="test1">
<div><span>Hello</span></div>
</div>

Why does Webflow wrap text with a div ?

I'm doing this (yes n custom code... but it is standard css)

.class > span

for example:

.myclass > span {}

but webflow exports a DIV wrapped around the text...

ie: <div class="myclass"><div><span>text</span></div></div>

and for class > span to work it needs to be

<div class="myclass"><span>text</span></div>

Unless you can tell me how to get around that ???


#2

anyone gonna answer this ?

@PixelGeek @Waldo @callmevlad @thesergie @cyberdave @Enterprise @UnitedFederation @KlingonHighCommand @StarFleet

If I could access the wrap-around DIV properties (which currently I cannot)... I could give it a class such as "wrap-text"...

and change my css to something like

.myclass.wrap-text > span


#3

Because text should be a <p> logically, and <span> is a subdivision of something.

<div>a text</div> is not valid, even if browsers can show it as if it was <div><p>a text</p></div>.

So your:

<div class="test1">
<span>Hello</span>
</div>

Isn't semantically correct and should be at least a:

<p class="test1">
<span>Hello</span>
</p>

<div>text</div> isn't even semantically correct.

Text can be in <p>, <hn>, <li>, <a>, and within a <span> inside one of those tags.

Edit: and there are rules for nesting all of those tags. For example you can't put a title in a paragraph, or a list in a paragraph. The reason to remember is that a paragraph is rendered as a block but cannot contain another block. As titles or lists are rendered as blocks too, they can't be put inside paragraphs. The only things you can put inside paragraphs are spans and formatting tags, but most of the formatting tags have been suprceded by CSS (like bold etc)


#4

I know a lot of people who are doing it this way...
and Yes it does render correctly in the browser...
and Yes. I understand it's not semantically correct.

What I was trying to figure out
- is why Webflow is inserting an extra DIV into the code.
<div class="test1"><div>this is my text</div></div>

From what you are saying...
- Webflow is not allowing us to create semantically incorrect code.

Which is fine... I can agree with what you said and the reasoning.

So the next question would be is
- "how do I get the result I need without that extra DIV" ?

In turn... I started thinking about what you said...
- which was basically "you have to do correctly".

So what I ended up trying was...
I dropped a paragraph inside the div...
- then highlighted the paragraph and made the entire text a span.

what I got was this

<div class="test3"><p><span>this is a test</span></p></div>

Notice there is no extra DIV.

So in order to create semantically correct code (in Webflow)
- and avoid Webflow adding the extra DIV...
---- you need to use a paragraph element inside the DIV
---- then highlight the text - and create a span from it.

So
- (if you directly wanted to target something inside the span)
- the associate css targeting code would be

.test3 > p > span ...


#5

@Revolution This sounds like it may be a bug. But if I add a Text Block to the canvas, and add text or make everything a span it's not adding an extra div.

Can you give exact steps to repro the case where an extra div is added?


#6

Here you go...

3 Tests... in 1 video - 5 minutes in length

test 1... base-section -> div:test1 -> text
result test 1... base-section -> div:test1 -> div -> text
EXTRA DIV

test 2... base-section -> div:test2 -> span -> text
result test 2... base-section -> div:test2 -> div -> span -> text
EXTRA DIV

test 3... base-section -> div:test2 -> p -> span -> text
result test 3... base-section -> div:test2 -> p -> span -> text
NO DIV

If you don't use a ptag... Webflow wraps the all elements inside a DIV.

In option 2... I selected the entire text and placed it in a span.

Would not a span element be a "semantically correct" containment ? Or am I wrong... I don't remember.
or must it always be a p-tag.

This guess... but as @vincent said - it's not semantically correct... which is correct.

But I've know a lot of design who it this way. Basically the span the or text elements would ride of the DIV property values.

That way you could direct target an element like this

.class -> span

http://quick.as/p0xksRzBZ

@waldo @thesergie @PixelGeek @callmevlad @vincent


#7

Oh I see, the extra div is being added during the publish/export flow. Thanks for the video! will dig into it and see what's going on.


#8

@Revolution

Watching the video again I see what's happening, it looks like this is a case of misunderstanding what a Text Block is. Two things:

  1. a) A Text Block in the Designer is just a <div> that the Designer expects to be used for text, eg: can use the text editor with, can't drag items into, etc. as apposed to <div> used for layout. In HTML they're the same, the distinction is one in the Designer to improve the UX based on how you want to use the <div>.
    b) If you add a Div Block to the canvas and double click to add some text it'll become a Text Block, if you then erase all the text it will become a Div Block

  2. Your css of .class > span {} will select only direct children of .class that are a span. However in using the text editor in the Designer it's possible to have a span inside a strong, em, a, or even another span. You may want to use a looser selector that selects any span that's a descendant of .class instead of just direct children. ie: .class span {}.


#9

oic. This is a variable in how visual design tools work when compared to doing it hand. Historically (before I found Webflow)... I coded every by hand. With hand-coding... when I use a text element... obviously, I already know the purpose of the element... so there's no need for the div.

...which goes into what @vincent said previously... I have a habit of not placing text elements inside a paragraph tag. Pretty my text elements ride off the parent div values. This is an old (and bad) habit of mine that I need to fix.

Interesting. I've encountered this in the past but didn't have foresight to ask support about it. Now I know :slight_smile:

In this case... I have a "circular div" with a text element vertically & horiz aligned / centered inside. And so... I specifically want to target that particular span.


#10

This topic was automatically closed after 60 days. New replies are no longer allowed.