[Solved] styling with an identifiers, dividers and text instead of an img

[drone4four]

Take a look at these two test cases. The first case – – given to me by someone else – – demonstrates exactly what I have set out to achieve. The second case is my pet experiment. I am trying to make my second case to look exactly the same as the first test case, just with an identifier and divider and text content instead of an img. I’ve copied the css declaration basically verbatim (although I did make some slight changes to the colors). What I am trying to do is get my orange rectangle text to squish into a more square shape and align to the left, just like the cat. I am also trying to get the green text to wrap around the orange square seamlessly. In what way is styling an img different from styling a text divider?

[Paulie_D]

An image has an inherent set width so the text just flows around it…also, by default it’s an inline element so it doesn’t force line breaks in the middle of a text block.

A div, as you have used has problems is both those areas. Firstly, it’s 100% wide by default and secondly it’s a block level element and so will cause line breaks in your paragraph.

So, you could use a span instead with a set width and it will resemble your requirements.

http://codepen.io/Paulie-D/pen/pvoGrV

BUT…this is very dangerous from a semantic and accessibility point of view. Because the span is inside the paragraph it will be treated, and read, as part of that text…not as a separate item.

It would be like reading from Moby Dick when it suddenly breaks into a section from Wuthering Heights.

It’s not a good idea. It’s not so bad when dealing with an image but using a span like that just for styling is, IMO, poor practice.

[drone4four]

I think I see what you’re saying, Paulie. An img is inline, so it blends into its surrounding content naturally. On the other hand divisions produce a line break when inserted in between text. That’s one of the distinctions between divs and imgs. The other issue you noted present with me using a divider in the middle of content is that I failed to specify a width property/value, therefore rendering the rectangle from one side to the other side by default. Adding a width property, along with changing my div to a span achieves what I am seeking to achieve. However you say that using span as you’ve demonstrated in your test case still isn’t best practices. So I went Googling around for more on the distinction between spans and divisions. I found a number of quick explanations on stackoverflow, css-tricks and html doge. html doge summarizes the jist of what you’re saying. Courtesy of html doge:

The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.

I also learned that html tags such as p and h1 confer meaning or semantics, whereas spans and divs are form control (provide structure to a web page). The separation of form and content is the first thing beginners learn about html and css. I read elsewhere that many web designers overuse or misuse divs and spans. Is this apparently common issue with web pages what you were getting at with the Moby-Dick and Wuthering-Heights reference? Do rookie web designers typically over use spans to separate content away from other content when class elements should be used to separate specified content from the surrounding content? If using spans as I am now using them isn’t exactly best practices, then what is the best alternative?

Paulie: I appreciate you taking the time to reply to my thread. I feel like I have learning much from your reply so far. Your post actually made my day when I read it at work on my mobile device when I was on break. Many thanks,

[Paulie_D]

I read elsewhere that many web designers overuse or misuse divs and spans. Is this apparently common issue with web pages what you were getting at with the Moby-Dick and Wuthering-Heights reference?

There is sometimes a tendency amongst web people to overuse divs and spans but since these are semantically null it really doesn’t matter…for the most part.

It depends on why they are using them…if they are overusing them to ‘div’/span’ themselves out of a layout or styling issue it behooves us to, perhaps, suggest that they re-think their approach.

As for the Moby Dick/Wuthering Heights comment…no that’s a real thing. For accessibility purposes the span would NOT be treated as separate from the paragraph but as an integral part of the whole…just, perhaps, styled differently.

A screenreader wouldn’t skip a beat and would read the text out loud to the user with no indication that there has been a supposed change…hence my reference…imagine an audio book with a spliced in section from another completely different book…CONFUSION REIGNS!

For a clue, try selecting all the paragraph text with your mouse without selecting the span text too..can’t be done.

To properly achieve your proposed layout semantically and using the ‘correct’ elements is actually one of the problems we see quite often asked out…it’s essentially a ‘print’ layout and we’re only just getting to the stage where we can replicate a lot of that…and we’re not there yet.

[drone4four]

I am having trouble grasping Paulie_D’s final point. Paulie_D wrote:

To properly achieve your proposed layout semantically and using the ‘correct’ elements is actually one of the problems we see quite often asked out…it’s essentially a ‘print’ layout and we’re only just getting to the stage where we can replicate a lot of that…and we’re not there yet.

So are you saying that using a span as I have is what most web designers use even though it’s unhelpful to visitors who have to use a screen reader? Are you saying that web designers are always asking for a better way of going about coding floated span menus and web developers aren’t there yet? I find it hard to believe that w3c haven’t figured out best practices. I am pretty sure I’ve completely misunderstood what you meant. I am at a loss here. Can you please elaborate on what you meant?

And how could I approach my html and css without using a span? Is there a better way?

[__]

Semantically, the best element to use would be an aside. However, putting it inside the p creates two problems:

1) Again, semantics. If the floated item isn’t related to the contents of the paragraph, it simply shouldn’t be a child of the paragraph. The only reason you’re putting it there is to make it easier to position.

This problem exists with the image, too. If the subject of the image is not related to the topic of the paragraph (e.g., a picture of a cat in an paragraph about fighter jets), then it just shouldn’t be there.

2) it’s not just an issue of whether the element is display: inline or not. p is one of those odd-rule elements that doesn’t actually require a closing tag. If a not-flow-content element (easiest to think of as anything that is not displayed inline by default) is inside a p, the paragraph automatically closes. Observe:

http://codepen.io/adrian-enspired/pen/bNVpmB

As for the w3c not having things “figured out” yet, keep in mind: (a) the web is a very young medium — it is only now starting to really become “mature.” Print, OTOH, has been around for a few centuries. Yes, some things common in print layouts are simply not technically practical for websites; (b) the w3c writes specs, and the spec follows best practices, which (by necessity) follow practice. The spec is not a plan: it is documentation.

[Author]

Posts