Css block and inline element in one

Question

I want a semantic way to do this: http://jsfiddle.net/beydg/

The design requires each line of text to have its own white background stripe, this screams for an inline element.

At the same time I need to maintain the ability to have spacing between paragraphs, something a inline element can't achieve.

Right now the only way to achieve this was to wrap the text-nodes inside the p element with additional span elements, which is a very un-nice and un-semantic way to do it.

I'm open to all kinds of solutions that get rid of the spans. Feel free to use modern css, pseudo selectors, etc.

Bonus points if you find a way to add left/right padding to each line (right now I can only add padding at the end and beginning of each span, not at the end/beginning of each line though).

Answer 1

@ximi, your updated solution without the span 's is cool!

for the padding, you could just put the paragraphs in a container and give that a padding-left or padding-right. Like here: http://jsfiddle.net/Z3JxY/

Answer 2

This is my version of it.

HTML

<div class='striped-text'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p>

<p>Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>

CSS

body {
    background: url(http://flickholdr.com/800/800) no-repeat;
}
div.striped-text p {
    padding: 5px;
}
div.striped-text p:nth-of-type(2n) {
    color: #000;
    background: rgba(255,255,255,0.5);
    text-shadow: 0 0 0 #999;
    /*
    ** Can give a different padding here for even elements
    ** Other properties can be added too
    */
}
div.striped-text p:nth-of-type(2n+1) {
    color: #fff;
    background: rgba(0,0,0,0.5);
    text-shadow: 0 0 0 #999;
    /*
    ** Can give a different padding here for odd elements
    ** Other properties can be added too
    */
}

Check out the demo

---

UPDATE

Here is the link to the updated example

HTML

<div class='striped-text'>
    <div class='text-container'>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.</p>
    </div>

    <div class='text-container'>
        <p>Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </div>

    <div class='text-container'>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
    </div>
</div>

CSS

body {
    background: url(http://flickholdr.com/800/800) no-repeat;
}
div.striped-text div.text-container {
    padding: 0 1em;
}
div.striped-text div.text-container:nth-of-type(2n) {
    padding: 0 1em;
    /*
    ** Can give a different padding here for even elements
    */
}
div.striped-text div.text-container:nth-of-type(2n+1) {
    padding: 0 1em;
    /*
    ** Can give a different padding here for even elements
    */
}
div.striped-text div.text-container p {
    padding: 5px;
}
div.striped-text div.text-container:nth-of-type(2n) > p {
    color: #000;
    background: rgba(255,255,255,0.5);
    text-shadow: 0 0 0 #999;
    /*
    ** Insert other properties here
    */
}
div.striped-text div.text-container:nth-of-type(2n+1) > p {
    color: #fff;
    background: rgba(0,0,0,0.5);
    text-shadow: 0 0 0 #999;
    /*
    ** Insert other properties here
    */
}

Answer 3

The best solution (simplified) so far I could come up with:

p {
    display: inline;
}

p:after  {
    content: '\a\a';
    white-space: pre-wrap;
}

Works simply by setting the paragraphs to display inline and inserting two new lines with white-space set to pre via the after pseudo element.

Check it out in action here: http://jsfiddle.net/beydg/3/

It sill didn't solve the issue with padding at the beginning and end of each line, but this wasn't a priority.

Answer 4

Use display: inline-block; for your paragraphs

body {
    background: url(http://flickholdr.com/800/800) no-repeat;
}

p {
    background: rgba(255, 255, 255, 0.8);
    padding: 5px 0;
    margin-bottom: 20px;
    display: inline-block;
}

Answer 5

use with a class name in external style sheet. for instance our class name is .myClass { padding-left:10px; padding-top:10px; }

hence external stye sheet would be needed