filled rows with words interpolated

Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

I only have a picture of a printed newspaper. I don’t know where to actually find a similar composition. I’d have done that if I could find it on the internet. Of course there must be one, but I don’t know of any myself.

I’ve made it work by testing it on my computer, but when I do it in wordpress, it simply doesn’t work.
This is the code that I’ve used on my site:

#rand {
	background-color: grey;
	display: inline-block;
	position: relative;
	width: 700px;
	margin: 2px;
	height: 18px;
	font-size: 15px;
}

#rand2 {
	display: inline-block;
	float: left;
}

And this is what I’ve been trying to present:

<div id="rand">?</div>
<div id="rand" style="width: 300px;">?</div><div id="rand2">Nu sunt genul t?u<div id="rand" style="width: 100px;">?</div>
<div id="rand">?</div>
<div id="rand">?</div>

The problem is that the words (“Nu sunt genul tau”) end up in the following row, instead of positioning on the div’s right. So what is the solution?

quas, would you mind linking the url or at least perhaps a screenshot of some sort as to what you want it to look like?

I’d be happy to help, but am having difficult understanding exactly what it is you want it to do.

Are you trying to get the words “Nu sunt genul tau” inside the div? It seems that way…but which div in particular?

Also, use “id” only with a unique reference on the page.
you are using the same id several times (in your last code). You may have already known that and were merely experimenting with the code of course, but I’d felt bad if I didn’t respond to it anyway as others may not necessarily be aware.

Anyway, if you provided a little more clarity (via url and/or screenshot or edited image) as to what you want, I could probably help you with it. I just a little more clarity I think.

You don’t have to upload an image to WP. You can upload it to any image storage site, then paste the link to it here.

This the link towards a facebook page. I’ve shortened it with bit.ly, as it’s way too long:

https://on.fb.me/1qq5EKw

So this is what I basically want to do ?? I don’t think there’s much more to explain here, but I’ll try to provide you with any other answers if this is not explicit enough.

That pic is what I needed. Thank you.

Things to consider:

1) the font-size should be used with the text element (vs the .rand). I created a specific .txt class to do so.

2) I used a container to help keep things a bit more orderly and give the contents some necessary properties for ease of formatting.

3) to position the text on the line where you want, use the left or right property in its own id, conjunction with text-align: center in the container.

eg

.tleft {
  position: relative;
  left: -25%;
}

We set the middle of the line (.rand) as our starting point by putting text-align: center in the container id. So when we use the code above, we are saying to move our text 25% to the left. If we had “left: 25%“, it would move our text to the right by 25%. You could use px instead of % of course.

You’ll see what I mean in the link below which goes to codepen.io. It shows the html, css, and the result: https://codepen.io/HarmonyWebworks/pen/rchJf

** NOTE ** Codepen is not a personal website. It’s a code repository and editor. I linked it so you could easily see the result as well as play around w/ the code so you can get the exact result before copy/pasting into your own file.

Let me know if you have any questions.

Jeremy

Hi!

What you’ve done is perfect and I thank you for it. Except one single thing that happens in wordpress and is more subtle than I could ever manage with my low css skills.
The problem is that in wordpress the box created by the span element (in which the text comes)slightly overlaps the bottom (following)row. So it simply doesn’t look as good as it looks on codepen. I don’t understand why wp changes the format.
Anyway, this is a link to a wetransfer screenshot of the site:

https://bit.ly/1qbUgQ1

Ok, I’ve rushed a little bit ?? I need to work on the padding. I’ll get back to you after I’ve solved it if this is all there needs to be done!

Alright, I’ve tinkered with the padding but to no avail. WordPress seems to represent things in a different way than normal platforms do. I’ve tried also tried your code locally and it works perfectly. But on wordpress, the words are too low compared to the rows they belong to (you can check the second link that I’ve posted above). So even if there isn’t any visible overlapping, the text is not aligned with its row.
I’ve set padding-bottom: 0 and padding-top: 4px (4px seems to be the minimum in order for the top grey line over the text to disappear).
So what should I do? Sorry for being such a nuisance ??

I see what you mean about WP rendering a bit differently. I don’t know why it is doing that, but I’m going to find out (if nothing more, for my own curiosity).

Here’s an updated version of the .txt class:

.txt {
  font-family: Arial, Helvetica, sans-serif;
  font-color: black;
  background-color:#fff8dc;
  font-size: 16px;
  padding: 0 6px;
  display: inline-block;
  vertical-align:top;
  }

It is a lot better, but not perfect. The text needs to come up just a tad. I’m a perfectionist, so it’s bothering me. lol I’m working on it and will let you know.

It might seems a little bit akward, but if I insert the inline-block line, the text actually moves downwards ?? What did help was the vertical alignment, indeed.

https://infinitezimal.ro/sanitarul-padurii/1045

This is the link to the published article ?? So, indeed, things are better.

I also try to make it perfect and I don’t see why we shouldn’t be able to manipulate these elements perfectly especially when things seem rather simple, after all – as this case is ??

This is the page on my temp dev site: https://www.forgeofreason.com/newspaper/ using the above .txt settings. To me, it looks fine. How does it look to you?

I’ve also tried it w/ a different theme, and it was a little off. Perhaps there is just some conflicting css w/ the theme.

Typically, I’d use Chrome Dev Tools or Firebug to make the corrections. But I’ve seen your link above, and like my link to the dev site example, it looks fine.

But there’s obviously a big difference between the two. My text is visibly lower than yours. And this produces a slightly bad visual effect.

I mean, of course, I can live with it, especially since I inserted the vertical alignment statement, but it’s still not perfectly symmetrical.

Well, anyway, it’s decent and I have you to thank you for it, but if you do find a solution to perfectly adjust the text, it will be much appreciated ??

I thought we had it. To me, your linked page looks fine. I don’t see the font drop. I’m using Chrome.

We can keep working on it though.

Try this as a replacement for .txt:

.txt {
font-family: Arial, Helvetica, sans-serif;
font-color: black;
background-color: #fff8dc;
font-size: 16px;
padding: 0 8px;
line-height: 20px;
display: inline-block;
vertical-align: top;
}

Does that help?

It looks like a part of it is the font you are using: Constantia.

That’s a serif font, and it’s smaller than the non-serif family I am using. See what happens when you remove it and use this line:

font-family: Arial, Helvetica, sans-serif;

That way we can trouble shoot a bit. We can always go back to your chosen font if necessary (but if we do, we should change the font-family accordingly.