Football Form Guide

jakey · Apr 9, 2025

Have been trying to create a football form guide for a web page i intend to put up online shortly. I know its only HTML and CSS but i honestly can't remember how its coded. An example of a football form guide can be seen here at:

https://www.sportsmole.co.uk/football/championship/form-guide.html

I can get five boxes on the same line but everything else is doing my head in lol.

Fingers crossed that someone can help me out here.

VBService · Apr 10, 2025

Can you provide a bit more details to understand exactly what you're struggling with

Which part of the form guide is causing the issue? Is it the layout of the boxes, the look or something else?
Could you describe how you want the form guide to look exactly? For example, should it be a table with the team name and the last 5 matches shown as colored squares?
If you already have some HTML/CSS code you've written, could you share it here? That would really help to see what’s going on and how to fix or improve it.

jakey · Sunday at 7:15 AM

I have been really trying to work this out on my own but have failed at each and every attempt.
So i hope some one will take pity on this old fool for trying to do something that may be best left
for the youngsters to take on.

This is the code i have been trying to use:

Code:

<!DOCTYPE html>
<html lang="en">
<head>

    <style>
   
        .container {
            width: 100%;
            margin: 0 auto;
        }
       
        .container .box {
            display: inline-block;
            background: #ffff00;
            border: 1px solid blue;
        }
       
        .box1 {
            width: 30px;
            height: 30px;
            margin: auto;
            background-color: green;
            text-align: center;
            color: #FFF;
            border: 1px solid #000;
        }
               
        .box2 {
            width: 30px;
            height: 30px;
            margin: auto;
            background-color: gray;
            text-align: center;
            color: #FFF;
            border: 1px solid #000;
        }
               
        .box3 {
            width: 30px;
            height: 30px;
            margin: auto;
            background-color: red;
            text-align: center;
            color: #FFF;
            border: 1px solid #000;
        }
               
    </style>

</head>
<body>

    <div class="container">
        <div class="box1">W</div>
        <div class="box2">D</div>
        <div class="box3">L</div>
        <div class="box1">W</div>
        <div class="box1">W</div>
    </div>
       
</body>
</html>

VBService · Sunday at 3:55 PM

You forgot to use the box class.
Check this out yourself:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <style>
      .container {
        width: 100%;
        margin: 0 auto;
      }
      .container .box {
        display: inline-block;
        background-color: #ffff00;
        border: 1px solid blue;
      }
      .container .box1 {
        width: 30px;
        height: 30px;
        margin: auto;
        background-color: green;
        text-align: center;
        color: #FFF;
        border: 1px solid #000;
      }
      .container .box2 {
        width: 30px;
        height: 30px;
        margin: auto;
        background-color: gray;
        text-align: center;
        color: #FFF;
        border: 1px solid #000;
      }
      .container .box3 {
        width: 30px;
        height: 30px;
        margin: auto;
        background-color: red;
        text-align: center;
        color: #FFF;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>

    <div class="container">
      <div class="box box1">W</div>
      <div class="box box2">D</div>
      <div class="box box3">L</div>
      <div class="box box1">W</div>
      <div class="box box1">W</div>
    </div>

  </body>
</html>

Since styles are inherently cascading (as the name suggests), you can simplify your code.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <style>
      .container {
        width: 100%;
        margin: 0 auto;
      }
      .container .box {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: auto;
        background-color: yellow;
        text-align: center;
        border: 1px solid black;

        /* This part is my suggestion, and I believe it’s worth including */
        font: 500 1rem/1.95 system-ui, monospace, sans-serif;
        cursor: default;
        user-select: none;
      }
      .container .box1 {       
        background-color: green;
      }
      .container .box2 {
        background-color: gray;
      }
      .container .box3 {
        background-color: red;
      }
    </style>
  </head>
  <body>

    <div class="container">
      <div class="box box1">W</div>
      <div class="box box2">D</div>
      <div class="box box3">L</div>
      <div class="box box1">W</div>
      <div class="box box1">W</div>
    </div>

  </body>
</html>

jakey · 2025-04-24T10:49:04-0400

Hello there VBService
Would just like to say a very big thank you for the help and advice you so generously gave as it was really appreciated.

The web page that contained the "form Guide" was validated to the W3C standards but i have decided to delete the "form Guide" section simply because i just don't have the necessary experience to carry it through. So i'll just have to have a good look around as it were and try to find a tutorial. Any suggestions would be appreciated, lol.

Regards Jakey

Beginner's Guide to getting CipherSweet working with PDO and MYSQL	1	Dec 1, 2022
How to store data from a sign up form on a website into an sql databse	1	Sep 9, 2022
Need help with stripe payment	0	Oct 2, 2021
Bootstrap contact form not working	2	Feb 15, 2025
Flip-Cards with Local Images	1	Mar 27, 2023
How to properly insert a landing page within same container beneath an image element?	1	Oct 6, 2024
Unable to add task to todo list	1	Sep 25, 2021
I need help fixing my website	2	Oct 15, 2023

Football Form Guide

jakey

VBService

jakey

VBService

jakey

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads