Home/ Questions/Q 7594035
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T21:18:53+00:00

Is it even possible to do something like this with just text, HTML and

  • 0

Is it even possible to do something like this with just text, HTML and CSS?
The image is a screen shot from my old Windows program that I’m rebuilding for the web and mobile platforms.

enter image description here

In this post, several people helped me do a series of horizontal boxes:
CSS alignment of div tags that form boxes around letters

Here’s the goal. I’m creating a WordPress shortcode, which generates HTML. I’d like to do something like this in WordPress: 

[showvowel vowel=KAMATZ letter=ALEF] 
[showvowel vowel=PATACH letter=ALEF] 
[showvowel vowel=SEGOL letter=ALEF]

and then later I might do the same thing with totally different letters (some pages might have just one or two, other might have three to five. 

[showvowel vowel=KAMATZ letter=GIMMEL] 
[showvowel vowel=PATACH letter=GIMMEL]

I’ve already got the information to build the text in a JSON structure.

The idea is to create a re-useable subroutine that would dynamically build the HTML to create whatever letter and vowel I want to show at any given time. So once I figure out how the presentation works in browser, then no problem for me to put it into WordPress shortcode.

If you have an idea for a sample, no need to show the Hebrew letters, I’ve got that mastered.

HTML5 flexbox looks really cool, but not ready for primetime yet.
http://www.html5rocks.com/en/tutorials/flexbox/quick/

If I have to, I guess I could flip it sideways and make it horizontal.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you do not want to use tables, then I would use div boxes with css. It is simple, and works on the majority of web browsers.

    See: http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-as-tables/

    HTML:

    <div class="div-table">
<div class="div-table-caption">Top Portion</div>
<div class="div-table-row">
<div class="div-table-col">Next Down</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Next Down</div>
</div>
</div>

    CSS:

    .div-table{display:table; border:1px solid #003399;}

.div-table-caption{display:table-caption; background:#009999;}

.div-table-row{display:table-row;}

.div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;}

    EDIT:

    Note: to have three columns you will need to use a wrapper.

    • 0