Please suggest styling some text and general improvements

HTML & CSS
1

Hi friends, I’m not pleased with how I’m displaying some of this text and would like to get some suggestions. The bit I’m most concerned with is that block beginning with “Forty-Four other states . . .”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
  <meta content="text/html charset=UTF-8 http-equiv=Content-Type" />

  <title>SAFELY HOME &#9679; LIQUOR MFGS. SUBSIDIZE &#9679;FREE/DISCOUNTED
  RIDES&rdquo;</title>
  <style type="text/css">
/*<![CDATA[*/

  P {margin-TOP: 0px;
  margin-BOTTOM: 0px;
  margin-LEFT: 0px;
  margin-RIGHT: 0px;
  }

  IMG {display: block; margin-left: auto; margin-right: auto}

  H1 {margin: 0px 0 10px 0;}
  H2 {margin: 0px 0 10px 0;}
  H3 {margin: 0px 0 5px 0;}
  H4 {margin: 0px 0 0px 0;}
  H5 {margin: 0px 0 0px 0;}

  TABLE {
  border: 10px OUTSET #805D38;
  padding: 6px; 
  margin: auto;
  width: 100%;
  height: AUTO;
  }

  BODY {font-family: LUCIDA CONSOLE, Bold, MONOSPACE;
        font-size: 18px;
      line-height: 20px;
       text-align: LEFT;
      margin-left: 5%;
     margin-right: 5%;
       margin-top: 30px;
  }

  /*]]>*/
  </style>
</head>

<body>
  <table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing=
  "0">
    <tbody>
      <tr>
        <td style="width: 154px;">
          <div style="margin-left: auto; margin-right: auto;"><img src=
          "https://emojipedia-us.s3.amazonaws.com/thumbs/320/samsung/128/cocktail-glass_1f378.png"
          alt="hic!" /></div>
        </td>

        <td>
          <h3>Too drunk to drive?</h3>

          <h2>New California law could give you a free ride</h2>THE SACRAMENTO BEE<br />
          DECEMBER 27, 2017 9:33 AM
        </td>
      </tr>
    </tbody>
  </table>

  <div style="margin-top: 30px;">
    It&rsquo;s an all-too-familiar scene in Sacramento. A group of friends heads to
    midtown for a night of partying and drinking, but one friend has to miss out on the
    fun and stay sober to be the designated driver.<br />
    <br />

    <div style="margin-left: 170px; margin-bottom: 12px;">
      <h2><span style="color: CRIMSON">FREE</span>/DISCOUNTED RIDES HOME</h2>

      <h2>EFFECTIVE JANUARY 1, 2018</h2>

      <h3><span style="color: #5F8200;">Signed Into Law</span> by Governor Jerry
      Brown</h3>

      <h3>Actively Lobbied &amp; Sponsored by:</h3>

      <div style="font-size: 16px BOLD; line-height: 22px;">
        Ride-Sharing Company <span style=
        "color: #5F8200; font-weight: BOLD; font-size: 28px;">LYFT</span>, the
        <span style="color: #5F8200; font-weight: BOLD; font-size: 28px;">Beer &amp;
        Liquor Industries,</span>&nbsp;and Anheuser-Busch<br />
        Amending Section 25600 of the Business and Professions Code, relating to
        alcoholic beverages.
      </div>
    </div>A new law that <span style="color: BLUE;">takes effect January 1, 2018</span>
    may not only let everyone join in on the fun, but it&rsquo;ll also mean more money
    for the bubbly.<br />
    <br />
    EDITED OUT<br />
    Low noted that thousands attending the Super Bowl 50 in Santa Clara in 2016
    didn&rsquo;t have options to get home safely after drinking.<br />

    <div style=
    "padding: 10px; margin-left: 170px; margin-right: 30%; margin-top: 10px; margin-bottom: 0px">
    <span style=
    "background-color: #E2F5AF; font-color: BLACK; font-weight: BOLD;">Forty-four other
    states and the District of Columbia allow liquor manufacturers to pay for free or
    discounted rides, according to a legislative analysis of the bill.</span>
    </div><br />
    The bill cleared the Legislature unanimously, and was supported by major beer
    manufacturers as well as ride-sharing company Lyft. Last year, Anheuser-Busch
    partnered with Lyft to offer rides home across 33 &ldquo;safe ride&rdquo; programs
    throughout the nation.<br />
    <br />
    Katja Zastrow, vice president of Corporate Social Responsibility for Anheuser-Busch,
    said since teaming up with the ride-sharing service, the program has provided more
    than 64,000 rides. &ldquo;Drunk driving is 100 percent preventable and offering safe
    rides is one way that we can have a real impact on reducing (it),&rdquo; she
    said.<br />
    <br />
    EDITED OUT
  </div>
</body>
</html>

I wanted to get something going with that green hilighter, “thicker”, so it isn’t cut off right at the text, rounder, shadowed? I don’t know. It all verifies but another issue is the martini image. I want to get that reasonably centered, such that the column to the right shares the same padding for left and right but sets the default for height: in other words, the column may expand vertically but the martini glass always shows up in the middle. Hope that makes sense.

2

Perhaps you should think about not using code generators that are nine years old that generate code from the 1990’s. We dont use tables for layout anymore, we use CSS and HTML5.

3

Hi there semicolon,

I have re-coded your page to give it a slightly softer feel. :winky:

I will now also fit gently onto mobile thingamajigs. :biggrin:

Checkout the attachment to see the example…

semicolon.zip (6.8 KB)

coothead

4

Not my style but I thank you for the effort coothead. :stuck_out_tongue_winking_eye:

5

Here is what I’m probably going to go with but I want the two “buttons” I made for Lyft et al. to fit more naturally. Spent hours on it but couldn’t get the width to make nice with the height. The buttons are too narrow, in other words. And I want to come up with a way that the text of the button is aligned with the text surrounding it, notwithstanding the fact that the button’s green background should be hanging lower than the aligned text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
  <meta content="text/html charset=UTF-8 http-equiv=Content-Type" />

  <title>SAFELY HOME &#9679; LIQUOR MFGS. SUBSIDIZE &#9679;FREE/DISCOUNTED
  RIDES&rdquo;</title>
  <style type="text/css">
/*<![CDATA[*/

  P {margin-TOP: 0px;
  margin-BOTTOM: 0px;
  margin-LEFT: 0px;
  margin-RIGHT: 0px;
  }

  IMG {display: block; margin-left: auto; margin-right: auto}    /* so the IMG centers */

  H1 {margin: 0px 0 10px 0;}
  H2 {margin: 0px 0 10px 0;}
  H3 {margin: 0px 0 5px 0;}
  H4 {margin: 0px 0 0px 0;}
  H5 {margin: 0px 0 0px 0;}

  a.GUBMENT:link {color: TEAL;}
  a.GUBMENT:visited {color: DODGERBLUE;}
  a.GUBMENT:hover {color: BLUE;}
  a.GUBMENT:active {color: BLUE;}

  .WHIPPED-A {
  font-weight: BOLD;
   box-shadow: 0 10px 10px #555;
  border-radius: 15px 60px;
   background: #E2F5AF;
      padding: 24px;
        width: AUTO;
       height: AUTO;
  margin-left: 170px;
  margin-right: 30%;
   margin-top: 18px;
  margin-bottom: 6px
  }

  .BUTN-A {
  font-weight: BOLD;
    font-size: 20px;
   font-color: BLACK;
   box-shadow: 0 3px 3px #555;
  border-radius: 4px 8px;
   background: #E2F5AF;
      padding: 2px;
        width: AUTO;
       height: 20px;
  }

  TABLE {
       border: 10px OUTSET #805D38;
      padding: 6px; 
       margin: auto;
        width: 100%;
       height: AUTO;
  }

  BODY {font-family: LUCIDA CONSOLE, MONOSPACE;
     font-size: 18px;
   line-height: 20px;
    text-align: LEFT;
   margin-left: 30px;
  margin-right: 30px;
    margin-top: 30px;
  }

  /*]]>*/
  </style>
</head>

<body>
  <table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing=
  "0">
    <tbody>
      <tr>
        <td style="width: 154px;">
          <div style="margin-left: auto; margin-right: auto;"><img src=
          "https://emojipedia-us.s3.amazonaws.com/thumbs/320/samsung/128/cocktail-glass_1f378.png"
          alt="hic!" /></div>
        </td>

        <td>
          <h3>Too drunk to drive?</h3>

          <h2 style="font-stretch: EXTRA-CONDENSED;">New California law could give you a
          free ride</h2>THE SACRAMENTO BEE<br />
          DECEMBER 27, 2017 9:33 AM
        </td>
      </tr>
    </tbody>
  </table>

  <div style="margin-top: 30px;">
    It&rsquo;s an all-too-familiar scene in Sacramento. A group of friends head to
    midtown for a night of partying and drinking, but one friend has to miss out on the
    fun and stay sober to be the designated driver.<br />
    <br />

    <div style="margin-left: 170px;">
      <h2><span style="color: DODGERBLUE">FREE</span>/DISCOUNTED RIDES HOME</h2>

      <h2>EFFECTIVE JANUARY 1, 2018</h2>

      <h3><span style="font-weight: BOLD; color: #3F2E1B;">Signed Into Law</span> by
      Governor Jerry Brown</h3>

      <h3>Actively Lobbied &amp; Sponsored by:</h3>

      <div>
        Ride-Sharing Company <span class="BUTN-A">LYFT</span>, the <span class=
        "BUTN-A">Beer &amp; Liquor Industries</span>&nbsp;and Anheuser-Busch<br />
      </div>
    </div>

    <h2 style="margin-top: 30px"><a href=
    "https://leginfo.legislature.ca.gov/faces/billTextClient.xhtml?bill_id=201720180AB711"
    class="GUBMENT" target="_blank">AB-711</a></h2>

    <div style="color: #3F2E1B;">
      Amending Section 25600 of the<br />
      Business and Professions Code, relating to alcoholic beverages.
    </div>

    <div style=
    "background: #3F2E1B; width: 100%; height: 6px; margin-top: 10px; margin-bottom: 20px;">
    </div>A new law that <span style="font-weight: BOLD; color: #3F2E1B;">takes effect
    January 1, 2018</span> may not only let everyone join in on the fun, but it&rsquo;ll
    also mean more money for the bubbly.<br />
    <br />
    The measure, by Assemblyman Evan Low, D-Cupertino, would relax the rules to expand
    that program, allowing alcohol manufacturers to underwrite free or discounted rides
    in all cases.<br />
    <br />

    <div class="WHIPPED-A">
      44 other states already <span style="white-space: nowrap">ALLOW LIQUOR
      MANUFACTURERS TO PAY</span> for free or discounted rides, according to a
      legislative analysis of the bill.
    </div><br />
    The bill cleared the Legislature unanimously, and was supported by major beer
    manufacturers as well as ride-sharing company Lyft. Last year, Anheuser-Busch
    partnered with Lyft to offer rides home across 33 &ldquo;safe ride&rdquo; programs
    throughout the nation.<br />
    <br />
    Katja Zastrow, vice president of Corporate Social Responsibility for Anheuser-Busch,
    said since teaming up with the ride-sharing service, the program has provided more
    than 64,000 rides. &ldquo;Drunk driving is 100 percent preventable and offering safe
    rides is one way that we can have a real impact on reducing (it),&rdquo; she
    said.<br />
    <br />
    EDITED OUT<br />
    <br />
    Alexei Koseff<br />
    THE SACRAMENTO BEE
  </div>
</body>
</html>
6

I never for one moment thought that it would be. :unhappy:

As one who has no interest in any thing alcoholic,
my coding style was destined to be different. :winky:

coothead

7

Um … Mods , is ▲ my html ▲ supposed to look this way (portions not greyed)?

Yes coothead, the “minimalist” style that is all the rage. At least you didn’t render the text in a color so light I have to disable the style altogether just to read it! Drives me nuts.

8

The comments are greyed out, that’s normal.


<style>
.bo_selector {}
/* a css comment */
</style>
<div></div>
<!-- HTML comment -->
<?php
$this = $that ;
// a php comment
?>
9

That is correct. :biggrin:

I do try to code with web accessibility in mind. :winky:

Further Reading:-

Color Contrast Checker

What I did do was to keep font “weight: bold” to a minimum,
as it seemed to make your page look rather heavy. :wonky:

Also note that your page does not fit on mobile devices which
is, today, a big no no. :eek:

coothead

1 Like
10

This is going to be seen by exactly one person coothead (two, counting me). She is in her 70s, and in over 50 years she hasn’t gotten a DUI.

Well she’s got one now, and her reaction is feisty DEFIANCE.

She’s too vain to wear glasses, and even though she’ll rip this set I’m preparing for her to shreds, I intend to be an ongoing annoyance and >>email it to her. Frequently. She’s not an alcoholic (neither am I btw, I might have one cocktail in a month), but she can be an angry drunk. I was treated to “They’ll have to catch me first” shortly after the DMV took her license away.

I like doing little projects like this, experimenting with HTML. Always learning new things. But no, this isn’t for public consumption (or I would have gotten permission from the Sacramento Bee). :eyeglasses:

11

Well, I am also a septuagenarian, and I definitely believe that elderly
drunk drivers should have their driving licenses surgically removed. :rolleyes:

If you must have bold text, here you go…

semicolon-bold.zip (6.8 KB)

coothead

12

I guess we have different preferences.

13

So, what is wrong with it now that I have made all the text bold? :rofl:

coothead

14

‘Wrong’ implies a value judgment and I am not going there my friend.

You are always right.
And I am always right, as well.

15

I’m attaching a screenshot of the whole page. What I’d like to do is improve upon the two buttons (LYFT et al.).

Note also I’m using a different font for the actual page. It is a monospaced postscript font from Bitstream’s foundry called Prestige 12 PT Roman.

1000×1780 139 KB

16

O.K. let’s put it another way that doesn’t imply a value judgement…

"So, what would you like me to do to improve the look of you page
now that I have made all the text bold to your requirement?" :rofl:

coohead

17

I’m pretty sure I’ll be going with my layout, a screenshot of which I just uploaded.

What remains are the two “buttons” I made for Lyft et al. to fit more naturally. Spent hours on it but couldn’t get the width to make nice with the height. The buttons are too narrow, in other words. And I want to come up with a way that the text of the button is aligned with the text surrounding it, notwithstanding the fact that the button’s green background should be hanging lower than the aligned text.

18

Hi there semicolon.

try this…

semicolon-bold-version-2.zip (7.0 KB)

…it may be a little bit nearer to your requirements. :winky:

coothead

19

Hi there semicolon,

I notice that your page starts to go awry at about 800px width. :wonky:

782×1273 167 KB

coothead

20

Oh I got there before you Coothead:

Now how about helping me with those buttons?

:grimacing: