Text in Left Border via CSS/HTML

Question

I have a webpage written in HTML5 utilizing CSS from W3Schoools. The content is two tables inside a tag. The tag has the border and I would like to add into the border a text tag of some sort which reads on of the following four seasons of the year. Which tag should I use or how can I accomplish this? Thank you for your help. Also the season will be styled as a column of single letters.

I want my page to look like the below Image. I have added the snippet what I have tried so far. Please some one help me to achieve this.

body {
  width: 1200px;
  font-size: .9335rem
}

.ml-300 {
  width: 950px;
  margin: 10px 0px 10px 250px;
  border-left: 60px solid;
  border-top: 15px solid;
  border-bottom: 15px solid;
  border-radius: 15px;
}

.ml-150 {
  width: 950px;
  margin: 10px 0px 10px 125px;
  border-left: 60px solid;
  border-top: 15px solid;
  border-bottom: 15px solid;
  border-radius: 15px;
}

.artLst tr td:last-child {
  padding: 2.5px 0px 2.5px 15px;
}

td img {
  margin-left: 0px auto;
  margin-right: 0px auto;
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />

<body>
  <div id="winter" class="w3-row ml-300">
    <div class="w3-twothird">
      <table class="artLst">
        <tbody>
          <tr>
            <td>01/23/17</td>
            <td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td>
          </tr>
          <tr>
            <td>02/03/17</td>
            <td>U.S. Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td>
          </tr>
          <tr>
            <td>02/12/17</td>
            <td>Navy Christens Future Tulsa</td>
          </tr>
          <tr>
            <td>03/01/17</td>
            <td>USS Dewey Fires SM-2 Missile during MISSILEX</td>
          </tr>
          <tr>
            <td>03/07/17</td>
            <td>Navy Conducts Successful Missile Test Firing</td>
          </tr>
          <tr>
            <td>03/07/17</td>
            <td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td>
          </tr>
          <tr>
            <td>03/23/17</td>
            <td>USS Lake Erie Assists Distressed Mariners</td>
          </tr>
          <tr>
            <td>03/29/17</td>
            <td>USS Princeton Participates in Show of Force Strait Transit Exercise</td>
          </tr>
          <tr>
            <td>03/31/17</td>
            <td>Ross, Porter Conduct TLAM Strikes into Syria</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="w3-third">
      <table>
        <tbody>
          <tr>
            <td><img src="https://dummyimage.com/140x120.jpg" /></td>
            <td><img src="https://dummyimage.com/140x120.jpg" /></td>
          </tr>
          <tr>
            <td><img src="https://dummyimage.com/140x120.jpg" /></td>
            <td><img src="https://dummyimage.com/140x120.jpg" /></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

?? i do not understand . What is the content you want to add (title or simple text or .. ?) , related to what exactly ? (caption of each tables ?) ... what shoud it look like ? rotated text ? — G-Cyrillus, Nov 08 '17 at 18:28
This shoud be helpful : https://stackoverflow.com/a/7731343/8800147 — br.julien, Nov 08 '17 at 18:29
Instead of using a negative margin top, you use a negative margin-left no ? And in case you want to rotate it (?) : https://css-tricks.com/snippets/css/text-rotation/ — br.julien, Nov 08 '17 at 18:35
@G-Cyr I appreciate the help, I really do! I can see that I wasn't that clear. I have added an image to the question to depict what I am trying to do. — TroyPilewski, Nov 08 '17 at 19:24
@Brice Thank you. I have added an image to show what I am talking about! — TroyPilewski, Nov 08 '17 at 19:26
If the question reopens, : https://codepen.io/anon/pen/NwbeQM — G-Cyrillus, Nov 08 '17 at 19:48
instead absolute, you also have the display option https://codepen.io/anon/pen/jaVdWQ — G-Cyrillus, Nov 08 '17 at 19:55
@G-Cyr: Thanks! Your CSS with absolute positioning worked perfectly. I'll have to play with it a bit to get it center exactly right but it's what I need. if you make it an answer; I'll accept! — TroyPilewski, Nov 08 '17 at 20:09
use the display version, text will vertically center itself ;) — G-Cyrillus, Nov 08 '17 at 20:10
@G-Cyr: Thank you for the help. I know that I need a little more but here is my progress so far. https://codepen.io/Khmerboi/pen/dZNQNd If you have the time maybe you can review my other question. https://stackoverflow.com/questions/47208998/apply-a-css-properties-to-html-code-to-achieve-border-and-dashed-line-from-image — TroyPilewski, Nov 09 '17 at 20:10
Added the answer below with both example proposed and gave you that last hint https://codepen.io/Khmerboi/pen/dZNQNd for the other question — G-Cyrillus, Nov 09 '17 at 22:24

score 0 · Accepted Answer · answered Nov 09 '17 at 20:32

You could use the id attribute value to retrieve the text to print and use word-break to set letters on top of each others .

#winter:before {
  content: attr(id);
  color: white;
  font-size: 50px;
  word-break: break-all;
  width: 0.7em;
  line-height: 0.8em;
  text-align: center;
}

position:absolute;&margin or display:table/table-cell;&transform can be used to set the text on the left.

Demos below

display:table;

body {
  width: 1200px;
  font-size: 0.9335rem;
}

.ml-300 {
  width: 950px;
  margin: 10px 0px 10px 250px;
  border-left: 60px solid;
  border-top: 15px solid;
  border-bottom: 15px solid;
  border-radius: 15px;
}

.ml-150 {
  width: 950px;
  margin: 10px 0px 10px 125px;
  border-left: 60px solid;
  border-top: 15px solid;
  border-bottom: 15px solid;
  border-radius: 15px;
}

.artLst tr td:last-child {
  padding: 2.5px 0px 2.5px 15px;
}
td {padding:1em 0;}
td img {
  margin-left: 0px auto;
  margin-right: 0px auto;
}
#winter {
  display:table;
  table-layout:fixed;
}
#winter:before {
  content: attr(id);
  color: white;
  display:table-cell;
  transform:translateX(-50px);
  vertical-align:middle;
  font-size: 50px;
  word-break: break-all;
  width: 0.7em;
  line-height: 0.8em;
  text-align: center;
}

<div id="winter" class="w3-row ml-300">
  <div class="w3-twothird">
    <table class="artLst">
      <tbody>
        <tr>
          <td>01/23/17</td>
          <td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td>
        </tr>
        <tr>
          <td>02/03/17</td>
          <td>U.S. Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td>
        </tr>
        <tr>
          <td>02/12/17</td>
          <td>Navy Christens Future Tulsa</td>
        </tr>
        <tr>
          <td>03/01/17</td>
          <td>USS Dewey Fires SM-2 Missile during MISSILEX</td>
        </tr>
        <tr>
          <td>03/07/17</td>
          <td>Navy Conducts Successful Missile Test Firing</td>
        </tr>
        <tr>
          <td>03/07/17</td>
          <td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td>
        </tr>
        <tr>
          <td>03/23/17</td>
          <td>USS Lake Erie Assists Distressed Mariners</td>
        </tr>
        <tr>
          <td>03/29/17</td>
          <td>USS Princeton Participates in Show of Force Strait Transit Exercise</td>
        </tr>
        <tr>
          <td>03/31/17</td>
          <td>Ross, Porter Conduct TLAM Strikes into Syria</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="w3-third">
    <table>
      <tbody>
        <tr>
          <td><img src="https://dummyimage.com/140x120.jpg" /></td>
          <td><img src="https://dummyimage.com/140x120.jpg" /></td>
        </tr>
        <tr>
          <td><img src="https://dummyimage.com/140x120.jpg" /></td>
          <td><img src="https://dummyimage.com/140x120.jpg" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

https://codepen.io/gc-nomade/pen/jaVdWQ

or position:absolute also based ont the pseudo and id value:

body {
  width: 1200px;
  font-size: 0.9335rem;
}
td {padding: 1em 0;}

.ml-300 {
  width: 950px;
  margin: 10px 0px 10px 250px;
  border-left: 60px solid;
  border-top: 15px solid;
  border-bottom: 15px solid;
  border-radius: 15px;
}

.ml-150 {
  width: 950px;
  margin: 10px 0px 10px 125px;
  border-left: 60px solid;
  border-top: 15px solid;
  border-bottom: 15px solid;
  border-radius: 15px;
}

.artLst tr td:last-child {
  padding: 2.5px 0px 2.5px 15px;
}

td img {
  margin-left: 0px auto;
  margin-right: 0px auto;
}
#winter {
  position: relative;
}
#winter:before {
  content: attr(id);
  color: white;
  position: absolute;
  left: -50px;
  font-size: 50px;
  word-break: break-all;
  width: 0.7em;
  line-height: 0.8em;
  text-align: center;
}

<div id="winter" class="w3-row ml-300">
  <div class="w3-twothird">
    <table class="artLst">
      <tbody>
        <tr>
          <td>01/23/17</td>
          <td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td>
        </tr>
        <tr>
          <td>02/03/17</td>
          <td>U.S. Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td>
        </tr>
        <tr>
          <td>02/12/17</td>
          <td>Navy Christens Future Tulsa</td>
        </tr>
        <tr>
          <td>03/01/17</td>
          <td>USS Dewey Fires SM-2 Missile during MISSILEX</td>
        </tr>
        <tr>
          <td>03/07/17</td>
          <td>Navy Conducts Successful Missile Test Firing</td>
        </tr>
        <tr>
          <td>03/07/17</td>
          <td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td>
        </tr>
        <tr>
          <td>03/23/17</td>
          <td>USS Lake Erie Assists Distressed Mariners</td>
        </tr>
        <tr>
          <td>03/29/17</td>
          <td>USS Princeton Participates in Show of Force Strait Transit Exercise</td>
        </tr>
        <tr>
          <td>03/31/17</td>
          <td>Ross, Porter Conduct TLAM Strikes into Syria</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="w3-third">
    <table>
      <tbody>
        <tr>
          <td><img src="https://dummyimage.com/140x120.jpg" /></td>
          <td><img src="https://dummyimage.com/140x120.jpg" /></td>
        </tr>
        <tr>
          <td><img src="https://dummyimage.com/140x120.jpg" /></td>
          <td><img src="https://dummyimage.com/140x120.jpg" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

https://codepen.io/gc-nomade/pen/vWybWW

Text in Left Border via CSS/HTML

1 Answers1