filled rows with words interpolated

  • Resolved quas

    (@quas)


    10 years, 5 months ago

    Ok, I am going to try to be sa explicit as I can.
    I am trying to draw some rows filled with background-color (just like you’d do with any html element), but also need to interpolate some words that are exterior to those rows.
    I’ve tried to do the following:

    #class {
background-color: grey;
text-align: center;
}
<div id="class"><span style="background-color: white;">some random words</span><div>

    The problem with this code is that, on the one hand, there’s still a grey line on top of the words that I write, and on the other hand, I cannot manually place the words exactly where I want them to be in the respective row.
    I hope I’ve made myself understood (it would have been much easier if I could have uploaded an image, but I don’t seem to be able to do it)

Viewing 5 replies - 16 through 20 (of 20 total)
  • Thread Starter quas

    (@quas)

    That’s it ?? the line-height was the key!
    I’ve adjusted it to 17px and now it’s perfect!

    Thanks a lot!

    Thread Starter quas

    (@quas)

    One more thing I’d like to ask you, though. Inside the text, as you can see, there’s the sentence “da-mi un like” and “like” has a blue background.

    This is the line code:
    <div class="rand"><span class="txt tright2">d?-mi un <span style="background-color: #4865b4; color: white;">like</span></span></div>

    I’ve checked it out on Chrome and it goes much lower than the rest of the text. I’ve no idea why that happens. Any other suggestions?:)

    Later edit:

    I’ve changed the container div’s line-height to 17px and I’ve applied the same line-height to the <span> element and that did the trick ??
    So it was, again, only about adjusting the line-height, but applied the container.

    Thanks again for your help ??

    Harmony

    (@harmonywebworks)

    The above…or try this code:

    .txt {
    font-family: Constantia, Serif;
    background-color: #FFF;
    font-size: 18px;
    vertical-align: top;
    line-height: 18px;
    padding-left: 2px;
    padding-right: 2px;
}

    I adjusted the font-size and line-height to match the .rand height. On my end, it looks fine. This is a screenshot of your page: https://screencast.com/t/XKZ8ACYAdRi

    ****** EDIT ******

    Looks like you responded while I was typing this post. Leaving it here for reference.

    Harmony

    (@harmonywebworks)

    And good to know it’s all sorted. That was a fun exercise. ??

    I still don’t know why it changes on WordPress vs a static HTML page. Something to continue to explore it seems.

    Thread Starter quas

    (@quas)

    Maybe it’s simply the different default line-height?:)

Viewing 5 replies - 16 through 20 (of 20 total)
  • The topic ‘filled rows with words interpolated’ is closed to new replies.