Improving Footer

asasass · February 28, 2024, 2:35pm

How can this be improved? https://jsfiddle.net/sLf4vrgj/1/

Keeping the visual image the same, is there anything I can do to improve how it is written?

.footer {
  box-sizing: border-box;
  border-top: 1px solid #1155cc;
  background: #121212;
  height: 200px;
}

.footer {
  margin: 0 -8px;
}

.mGzaTb {
  padding: 8px;
  word-wrap: break-word;
}

.zfr3Q {
  display: block;
  text-align: center;
}

.C9DxTc {
  font-family: Verdana, Arial;
  font-size:  13.33px;
  vertical-align: baseline;
}

.XqQF9c {
  color: inherit;
  text-decoration: none;
}

.CDt4Ke {
  line-height: 1.5;
  margin-top: 10.67px;
}

.text1 {
  color: #0059dd;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 700;
  vertical-align: baseline;
}

.text2 {
  color: #f6b26b;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 400;
  vertical-align: baseline;
}

.text3 {
  color: #0059dd;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 700;
  vertical-align: baseline;
}

.text4 {
  color: #f6b26b;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 400;
  vertical-align: baseline;
}

.text5 {
  color: #38761d;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 400;
  vertical-align: baseline;
}

.text6 {
  color: #b45f06;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 700;
  vertical-align: baseline;
}

.text7 {
  color: #0059dd;
  font-family: Arial;
  font-size: 24.0px;
  font-weight: 700;
  vertical-align: baseline;
}

.text8 {
  color: #0059dd;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 400;
  vertical-align: baseline;
}

<div class="footer">
    <div class="mGzaTb">
      <div class="zfr3Q CDt4Ke">
        <a class="XqQF9c" href="#" target="_blank">
          <span class="text1">something</span>
        </a>
        <span class="C9DxTc"> </span>
        <span class="text2">|</span>
        <span class="C9DxTc"> </span>
        <a class="XqQF9c" href="#" target="_blank">
          <span class="text3">something</span>
        </a>
        <span class="C9DxTc"> </span>
        <span class="text4">|</span>
        <span class="C9DxTc"> </span>
        <a class="XqQF9c" href="#" target="_blank">
          <span class="text5">some</span><span class="text6">something</span>
        </a>
      </div>
      <div class="zfr3Q CDt4Ke">
        <span class="text7">something</span>
      </div>
      <br><br>
      <div class="zfr3Q CDt4Ke">
        <span class="text8">something</span>
      </div>
    </div>
  </div>
</div>

m_hutley · February 28, 2024, 4:47pm

Well what do you see in there that you think needs clearing up?

asasass · February 28, 2024, 5:27pm

I am not sure, everything seems to work as intended.

PaulOB · February 28, 2024, 8:25pm

asasass:

.text1 {
  color: #0059dd;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 700;
  vertical-align: baseline;
}

.text2 {
  color: #f6b26b;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 400;
  vertical-align: baseline;
}

.text3 {
  color: #0059dd;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 700;
  vertical-align: baseline;
}

.text4 {
  color: #f6b26b;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 400;
  vertical-align: baseline;
}

.text5 {
  color: #38761d;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 400;
  vertical-align: baseline;
}

.text6 {
  color: #b45f06;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 700;
  vertical-align: baseline;
}

.text7 {
  color: #0059dd;
  font-family: Arial;
  font-size: 24.0px;
  font-weight: 700;
  vertical-align: baseline;
}

.text8 {
  color: #0059dd;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 400;
  vertical-align: baseline;
}

Those 60 lines (approx) of css could be refactored into about 18 lines of code.

There’s no need to repeat the same rules just use modifying classes.

asasass · March 12, 2024, 10:35pm

Like this: https://jsfiddle.net/5v1g8sop/3/

.footer {
  box-sizing: border-box;
  border-top: 1px solid #1155cc;
  background: #121212;
  height: 200px;
  margin: 0 -8px;
}

.mGzaTb {
  padding: 8px;
  word-wrap: break-word;
}

.zfr3Q {
  display: block;
  text-align: center;
}

.C9DxTc,
.text1,
.text2,
.text3,
.text4,
.text5,
.text6,
.text8 {
  font-family: Verdana, Arial;
  font-size: 13.33px;
  vertical-align: baseline;
}

.text7 {
  color: #0059dd;
  font-family: Arial;
  font-size: 24.0px;
  font-weight: 700;
}

.XqQF9c {
  color: inherit;
  text-decoration: none;
}

.CDt4Ke {
  line-height: 1.5;
  margin-top: 10.67px;
}

.text1,
.text3,
.text6,
.text7 {
  color: #0059dd;
  font-weight: 700;
}

.text8 {
  color: #0059dd;
  font-weight: 400;
}

.text2,
.text4,
.text5 {
  color: #f6b26b;
  font-weight: 400;
}

.text5 {
  color: #38761d;
}

.text6 {
  color: #b45f06;
}

<div class="footer">
    <div class="mGzaTb">
      <div class="zfr3Q CDt4Ke">
        <a class="XqQF9c" href="#" target="_blank">
          <span class="text1">something</span>
        </a>
        <span class="C9DxTc"> </span>
        <span class="text2">|</span>
        <span class="C9DxTc"> </span>
        <a class="XqQF9c" href="#" target="_blank">
          <span class="text3">something</span>
        </a>
        <span class="C9DxTc"> </span>
        <span class="text4">|</span>
        <span class="C9DxTc"> </span>
        <a class="XqQF9c" href="#" target="_blank">
          <span class="text5">some</span><span class="text6">something</span>
        </a>
      </div>
      <div class="zfr3Q CDt4Ke">
        <span class="text7">something</span>
      </div>
      <br><br>
      <div class="zfr3Q CDt4Ke">
        <span class="text8">something</span>
      </div>
    </div>
  </div>

PaulOB · March 13, 2024, 8:17am

That’s better but why the weird class names.

What are the empty spans used for? You never use empty elements just to make space. Use padding or margins on the pipes instead.

Why do you need the .mGzaTb wrapper? Why not use the footer element?

asasass · March 13, 2024, 10:31am

I was replicating how google sites does theirs.

Those were the names they used.

The footer element was used, but I removed it, thought it didn’t do anything.

The css was mixed in with the html, so I separated them both and removed everything I thought that was not serving a purpose in the code.

asasass · March 13, 2024, 10:42am

Original google site code: https://jsfiddle.net/r5v31gwp/1/

<footer jsname="yePe5c" aria-hidden="false">
  <section id="h.4ef77e5e7ded8376_3" class="yaqOZd">
    <div class="IFuOkc"></div>
    <div class="mYVXT">
      <div class="LS81yb VICjCf j5pSsc db35Fc" tabindex="-1">
        <div class="hJDwNd-AhqUyc-uQSCkd Ft7HRd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb ZcASvf-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c Ktthjf-AhqUyc-qWD73c JNdkSc SQVYQc">
          <div class="JNdkSc-SmKAyb LkDMRd">
            <div class="" jscontroller="sGwD4d" jsaction="zXBUYb:zTPCnb;zQF9Uc:Qxe3nd;" jsname="F57UId">
              <div class="oKdM2c ZZyype Kzv0Me">
                <div id="h.4ef77e5e7ded8376_0" class="hJDwNd-AhqUyc-uQSCkd Ft7HRd-AhqUyc-uQSCkd jXK9ad D2fZ2 zu5uec OjCsFc dmUFtb wHaque g5GTcb">
                  <div class="jXK9ad-SmKAyb">
                    <div class="tyJCtd mGzaTb Depvyb baZpAe"><small id="h.djwpy1qfdvfq" dir="ltr" class="zfr3Q TMjjoe CDt4Ke " style="display: block; text-align: center;"><a class="XqQF9c" href="#" target="_blank" style="color: inherit; text-decoration: none;"><span class="C9DxTc " style="color: #1ed760; font-family: Verdana, Arial; font-size: 10.0pt; font-weight: 700; vertical-align: baseline;">text</span></a><span class="C9DxTc " style="color: #1ed760; font-family: Verdana, Arial; font-size: 10.0pt; font-weight: 400; vertical-align: baseline;"> </span><span class="C9DxTc " style="color: #f6b26b; font-family: Verdana, Arial; font-size: 10.0pt; font-weight: 400; vertical-align: baseline;">|</span><span class="C9DxTc " style="color: #6d9eeb; font-family: Verdana, Arial; font-size: 10.0pt; font-weight: 400; vertical-align: baseline;"> </span><a class="XqQF9c" href="#" target="_blank" style="color: inherit; text-decoration: none;"><span class="C9DxTc " style="color: #0059dd; font-family: Verdana, Arial; font-size: 10.0pt; font-weight: 700; vertical-align: baseline;">text</span></a><span class="C9DxTc " style="color: #1ed760; font-family: Verdana, Arial; font-size: 10.0pt; font-variant: normal; font-weight: 400; vertical-align: baseline;"> </span><span class="C9DxTc " style="color: #f6b26b; font-family: Verdana, Arial; font-size: 10.0pt; font-variant: normal; font-weight: 400; vertical-align: baseline;">|</span><span class="C9DxTc " style="color: #6d9eeb; font-family: Verdana, Arial; font-size: 10.0pt; font-variant: normal; font-weight: 400; vertical-align: baseline;"> </span><a class="XqQF9c" href="#" target="_blank" style="color: inherit; text-decoration: none;"><span class="C9DxTc " style="color: #38761d; font-family: Verdana, Arial; font-size: 10.0pt; font-weight: 400; text-decoration: underline; vertical-align: baseline;">text</span><span class="C9DxTc " style="color: #b45f06; font-family: Verdana, Arial; font-size: 10.0pt; font-weight: 700; text-decoration: underline; vertical-align: baseline;">text</span></a></small><small id="h.oc8m7l2ihbnu" dir="ltr" class="zfr3Q TMjjoe CDt4Ke " style="background-color: transparent; border-bottom: none; border-left: none; border-right: none; border-top: none; display: block; margin-bottom: 0.0pt; margin-top: 10.0pt; padding-bottom: 0.0pt; padding-left: 0.0pt; padding-right: 0.0pt; padding-top: 0.0pt; text-align: center;"><span class="jgG6ef C9DxTc " style="color: #0059dd; font-family: Arial; font-weight: 700; vertical-align: baseline;">text</span></small><br><br><small id="h.wgti0hn7v8fu" dir="ltr" class="zfr3Q TMjjoe CDt4Ke " style="display: block; text-align: center;"><span class="C9DxTc " style="color: #0059dd; font-family: Verdana, Arial; font-size: 10.0pt; font-weight: 400; vertical-align: baseline;">text</span></small></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</footer>

asasass · March 13, 2024, 12:11pm

This time I manually did it: https://jsfiddle.net/eh9w7rqg/3/

footer {
  box-sizing: border-box;
  border-top: 1px solid #1155cc;
  background: #121212;
  height: 200px;
  margin: 0 -8px;
}

.yaqOZd {
  background-size: cover;
  display: table;
  position: relative;
  table-layout: fixed;
  width: 100%;
}

.mGzaTb {
  padding: 8px;
  word-wrap: break-word;
}

.zfr3Q {
  display: block;
  text-align: center;
}

.C9DxTc
/*|*/
  {
  font-family: Verdana, Arial;
  font-size: 13.33px;
  vertical-align: baseline;
  color: #f6b26b;
  font-weight: 400;
}

.XqQF9c {
  color: inherit;
  text-decoration: none;
}

.CDt4Ke {
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 13.33px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  text-align: center;
}

.text1 {
  color: #0059dd;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 700;
  vertical-align: baseline;
}

/*.text2 {
  color: #f6b26b;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 400;
  vertical-align: baseline;
}*/

/*.text3 {
  color: #0059dd;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 700;
  vertical-align: baseline;
}*/

.text4 {
  color: #f6b26b;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 400;
  vertical-align: baseline;
}

.text5 {
  color: #38761d;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 400;
  vertical-align: baseline;
}

.text6 {
  color: #b45f06;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 700;
  vertical-align: baseline;
}

.text7 {
  color: #0059dd;
  font-family: Arial;
  font-size: 24.0px;
  font-weight: 700;
  vertical-align: baseline;
}

.text8 {
  color: #0059dd;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  font-weight: 400;
  vertical-align: baseline;
}

 <footer>
    <section class="yaqOZd">

      <div class="mGzaTb"><small class="zfr3Q  CDt4Ke "><a class="XqQF9c" href="#" target="_blank"><span class=" text1">something</span></a><span class="C9DxTc "> </span><span class="C9DxTc ">|</span><span class="C9DxTc"> </span><a class="XqQF9c" href="#" target="_blank"><span class="text1">something</span></a><span class="C9DxTc "> </span><span class="C9DxTc ">|</span><span class="C9DxTc "> </span><a class="XqQF9c" href="#" target="_blank"><span class=" text5">something</span><span class="text6">something</span></a></small><small class="zfr3Q  CDt4Ke"><span class="text7">something</span></small><br><br><small class="zfr3Q CDt4Ke"><span class="text8">something</span></small></div>


    </section>
  </footer>
</div>

PaulOB · March 13, 2024, 12:38pm

No need for the section element there as it’s not really semantic at that point. The styles could be applied to the footer itself.

asasass · March 13, 2024, 12:41pm

Refactored: https://jsfiddle.net/hj2fz8g6/4/

Should I remove class from footer?

<footer class="footer">

.common-text {
  font-family: Verdana, Arial;
  font-size: 13.33px;
  vertical-align: baseline;
}

.footer {
  box-sizing: border-box;
  border-top: 1px solid #1155cc;
  background: #121212;
  height: 200px;
  margin: 0 -8px;
}

.mGzaTb {
  padding: 8px;
  word-wrap: break-word;
}

.zfr3Q {
  display: block;
  text-align: center;
}

.C9DxTc {
  color: #f6b26b;
  font-weight: 400;
}

.XqQF9c {
  color: inherit;
  text-decoration: none;
}

.CDt4Ke {
  line-height: 1.5;
  margin-top: 13.33px;
}

.text1 {
  color: #0059dd;
  font-weight: 700;
}

.text5 {
  color: #38761d;
}

.text6 {
  color: #b45f06;
  font-weight: 700;
}

.text7 {
  color: #0059dd;
  font-family: Arial;
  font-size: 24px;
  font-weight: 700;
}

.text8 {
  color: #0059dd;
}


  <footer class="footer">
    <div class="mGzaTb">
      <small class="zfr3Q CDt4Ke"><a class="XqQF9c" href="#" target="_blank"><span class="common-text text1">something</span></a><span class="common-text C9DxTc"> </span><span class="common-text C9DxTc">|</span><span class="common-text C9DxTc"> </span><a class="XqQF9c" href="#" target="_blank"><span class="common-text text1">something</span></a><span class="common-text C9DxTc"> </span><span class="common-text C9DxTc">|</span><span class="common-text C9DxTc"> </span><a class="XqQF9c" href="#" target="_blank"><span class="common-text text5">something</span><span class="common-text text6">something</span></a></small><small class="zfr3Q CDt4Ke"><span class="text7">something</span></small><br><br><small class="zfr3Q CDt4Ke"><span class="common-text text8">something</span></small></div>
  </footer>

PaulOB · March 13, 2024, 12:52pm

A site is allowed multiple footer elements so it’s best to use a class.

asasass · March 13, 2024, 2:00pm

What are the empty spans used for? You never use empty elements just to make space. Use padding or margins on the pipes instead.

How?

Empty spans to make space is equivalent to what number px value?

From AI:

The space created by an empty span, such as   , is not equivalent to a fixed pixel value. [The actual space it occupies depends on several factors, including the font size, font family, and the rendering of the browser.

Therefore, it’s not possible to accurately equate an empty span to a specific pixel value. [If you need to create a specific amount of space, consider using CSS properties like margin, padding, or width with a defined pixel value.

PaulOB · March 13, 2024, 2:06pm

Like this:

<footer class="my-footer">
  <div class="footer-top">
    <a href=" #" target="_blank">something</a><b>|</b>
    <a href="#" target="_blank">something</a><b>|</b>
    <a href="#" target="_blank">
      <span class="text5">something</span>
      <span class="text6">something</span></a>
  </div>
  <div class="footer-mid">something</div>
  <div class="footer-base">something</div>
</footer>

Then very roughly like this:

.my-footer {
  box-sizing: border-box;
  border-top: 1px solid #1155cc;
  background: #121212;
  text-align: center;
  word-wrap: break-word;
  margin: 0 -8px;
  padding: 22px 8px 8px;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  line-height: 1.5;
  vertical-align: baseline;
}
.my-footer a {
  text-decoration: none;
}
.my-footer b {
  color: #f6b26b;
  font-weight: 400;
  margin: 0 0.2rem;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.3rem;
}
.footer-top a {
  color: #0059dd;
  font-weight: 700;
}
.text5 {
  color: #38761d;
}
.text6 {
  color: #b45f06;
  font-weight: 700;
}
.footer-mid {
  margin-bottom: 3rem;
  color: #0059dd;
  font-family: Arial;
  font-size: 24px;
  font-weight: 700;
}
.footer-base {
  color: #0059dd;
}

Instead of this nonsense:

<footer class="footer">
  <div class="mGzaTb">
    <small class="zfr3Q CDt4Ke"><a class="XqQF9c" href="#" target="_blank"><span class="common-text text1">something</span></a><span class="common-text C9DxTc"> </span><span class="common-text C9DxTc">|</span><span class="common-text C9DxTc"> </span><a class="XqQF9c" href="#" target="_blank"><span class="common-text text1">something</span></a><span class="common-text C9DxTc"> </span><span class="common-text C9DxTc">|</span><span class="common-text C9DxTc"> </span><a class="XqQF9c" href="#" target="_blank"><span class="common-text text5">something</span><span class="common-text text6">something</span></a></small><small class="zfr3Q CDt4Ke"><span class="text7">something</span></small><br><br><small class="zfr3Q CDt4Ke"><span class="common-text text8">something</span></small>
  </div>
</footer>

asasass · March 13, 2024, 2:17pm

my code: https://jsfiddle.net/3u6seL4j/1/

your code: https://jsfiddle.net/3u6seL4j/2/

now, let’s see how to match them.

PaulOB · March 13, 2024, 2:37pm

That’s just a very minor change to existing padding and margins. Nothing else needs to be done (except if you actually want the second something to touch the other something then remove the space from the html.)

<a href="#" target="_blank">somethingsomething</a>

The rest is just adjusting the bottom padding on the footer element and tweaking other existing margins as required.

asasass · March 13, 2024, 3:09pm

I got this far: https://jsfiddle.net/t1da2jqc/2/

asasass · March 13, 2024, 3:15pm

I can make this look neat also: https://jsfiddle.net/9m6hvzun/2/

 <footer class="footer">
    <div class="mGzaTb">
      <small class="zfr3Q CDt4Ke">
        <a class="XqQF9c" href="#" target="_blank"><span class="common-text text1">something</span></a>
        <span class="common-text C9DxTc"> </span>
        <span class="common-text C9DxTc">|</span>
        <span class="common-text C9DxTc"> </span>
        <a class="XqQF9c" href="#" target="_blank"><span class="common-text text1">something</span></a>
        <span class="common-text C9DxTc"> </span>
        <span class="common-text C9DxTc">|</span>
        <span class="common-text C9DxTc"> </span>
        <a class="XqQF9c" href="#" target="_blank">
          <span class="common-text text5">something</span><span class="common-text text6">something</span>
        </a>
      </small>
      <small class="zfr3Q CDt4Ke">
        <span class="text7">something</span>
      </small>
      <br><br>
      <small class="zfr3Q CDt4Ke">
        <span class="common-text text8">something</span>
      </small>
    </div>
  </footer>

PaulOB · March 13, 2024, 3:20pm

No you can’t. It’s still unreadable.

Look at my Html it’s so easy to read at a glance and no cryptic class names to worry about. The css is easily followed in seconds.

I had to look at your code for ten minutes and still could not remember any of your class names or what they did.

This is why your code is always impossible to follow or change easily.

Surely you can see the difference ?

asasass · March 13, 2024, 3:25pm

I am stuck trying to adjust this one: https://jsfiddle.net/t1da2jqc/2/