How can I design DIVs to resemble a radio station or television schedule grid?

Question

How can I design DIVs to resemble a radio station or television schedule grid?

Check out the JSFiddle for my page with the source code included:

Here is a snippet of the source code:

<TITLE>Hallam FM - Best Variety of Hits</TITLE>
<style>
/* CSS styles go here */

/* End of CSS */
</style>

<!-- HTML content goes here -->

</div>

In summary, I'm trying to achieve two things:

Implement a hover effect that displays presenter information and photos similar to websites like this example or this one, but with a vertical layout instead of horizontal.
Adjust the width of each show segment to fit the time duration (e.g., a 4-hour show should be 240 units wide). Currently, all shows appear packed without aligning properly with the time slots at the top.

I've been experimenting with different approaches but haven't been able to match the design seen in the Internet Archive link provided above. Any tips or suggestions would be greatly appreciated.

html css divide

Answer 1

Answer №1

Transforming your design can be accomplished using the <table> element, but a more versatile and enjoyable option might be CSS grid.

By creating 24 grid columns and assigning time slots with different classes, you can achieve the desired layout.

Make sure that any supplementary information is positioned absolutely in relation to its respective item. Additionally, implement a hover effect to change the display type.

Check out this fiddle

body {
  margin: 0;
  padding: 1rem;
  background: black;
  color: lightgrey;
  font-family: sans-serif;
  font-weight: 300;
  line-height: 1.35;
}

img {
  display: none;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(24, 60px);
  grid-gap: .5rem;
}

.mins-60 {
  grid-column: span 1;
}

.mins-120 {
  grid-column: span 2;
}

.mins-180 {
  grid-column: span 3;
}

.mins-240 {
  grid-column: span 4;
}

.mins-300 {
  grid-column: span 5;
}

div[class^="mins"] {
  position: relative;
  border-top: .333rem solid white;
  padding-top: .333rem;
  cursor: default;
}

p {
  display: none;
  position: absolute;
  top: 1rem;
  border: .1rem solid white;
  border-top-width: .3333rem;
  background: black;
  padding: 1rem;
  width: 15rem;
}

div[class^="mins"]:hover p {
  display: block;
}

<div class="wrapper">
  <div>00:00</div>
  <div>01:00</div>
  <div>02:00</div>
  <div>03:00</div>
  <div>04:00</div>
  <div>05:00</div>
  <div>06:00</div>
  <div>07:00</div>
  <div>08:00</div>
  <div>09:00</div>
  <div>10:00</div>
  <div>11:00</div>
  <div>12:00</div>
  <div>13:00</div>
  <div>14:00</div>
  <div>15:00</div>
  <div>16:00</div>
  <div>17:00</div>
  <div>18:00</div>
  <div>19:00</div>
  <div>20:00</div>
  <div>21:00</div>
  <div>22:00</div>
  <div>23:00</div>
  <div class="mins-60">John Doe
    <p><img src="logo.jpg">John Doe on the late show !</p>
  </div>
  <div class="mins-300">Richard Roe
    <p><img src="logo.jpg">More OF THE BEST VARIETY of hits !</p>
  </div>
  <div class="mins-240">Hallam Fm Breakfast
    <p><img src="logo.jpg">hALLAM fm IN THE MORNING !</p>
  </div>
  <div class="mins-300">Weekday Daytimes
    <p><img src="logo.jpg">John Doe ! !</p>
  </div>
  <div class="mins-240">Jon Smith
    <p><img src="logo.jpg">John Doe ! !</p>
...

Answer 2

Transforming your design can be accomplished using the <table> element, but a more versatile and enjoyable option might be CSS grid.

By creating 24 grid columns and assigning time slots with different classes, you can achieve the desired layout.

Make sure that any supplementary information is positioned absolutely in relation to its respective item. Additionally, implement a hover effect to change the display type.

Check out this fiddle

body {
  margin: 0;
  padding: 1rem;
  background: black;
  color: lightgrey;
  font-family: sans-serif;
  font-weight: 300;
  line-height: 1.35;
}

img {
  display: none;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(24, 60px);
  grid-gap: .5rem;
}

.mins-60 {
  grid-column: span 1;
}

.mins-120 {
  grid-column: span 2;
}

.mins-180 {
  grid-column: span 3;
}

.mins-240 {
  grid-column: span 4;
}

.mins-300 {
  grid-column: span 5;
}

div[class^="mins"] {
  position: relative;
  border-top: .333rem solid white;
  padding-top: .333rem;
  cursor: default;
}

p {
  display: none;
  position: absolute;
  top: 1rem;
  border: .1rem solid white;
  border-top-width: .3333rem;
  background: black;
  padding: 1rem;
  width: 15rem;
}

div[class^="mins"]:hover p {
  display: block;
}

<div class="wrapper">
  <div>00:00</div>
  <div>01:00</div>
  <div>02:00</div>
  <div>03:00</div>
  <div>04:00</div>
  <div>05:00</div>
  <div>06:00</div>
  <div>07:00</div>
  <div>08:00</div>
  <div>09:00</div>
  <div>10:00</div>
  <div>11:00</div>
  <div>12:00</div>
  <div>13:00</div>
  <div>14:00</div>
  <div>15:00</div>
  <div>16:00</div>
  <div>17:00</div>
  <div>18:00</div>
  <div>19:00</div>
  <div>20:00</div>
  <div>21:00</div>
  <div>22:00</div>
  <div>23:00</div>
  <div class="mins-60">John Doe
    <p><img src="logo.jpg">John Doe on the late show !</p>
  </div>
  <div class="mins-300">Richard Roe
    <p><img src="logo.jpg">More OF THE BEST VARIETY of hits !</p>
  </div>
  <div class="mins-240">Hallam Fm Breakfast
    <p><img src="logo.jpg">hALLAM fm IN THE MORNING !</p>
  </div>
  <div class="mins-300">Weekday Daytimes
    <p><img src="logo.jpg">John Doe ! !</p>
  </div>
  <div class="mins-240">Jon Smith
    <p><img src="logo.jpg">John Doe ! !</p>
...

How can I design DIVs to resemble a radio station or television schedule grid?

Answer №1

Similar questions

Extracting information from a table containing both obscured and accessible rows

Identifying a change in the source location of an iframe element

Is there a way to bring to life the addClass() and removeClass() jQuery functions through animation?

The autoComplete feature in my ReactJs form is not functioning properly

Issues arising from the interaction of one DIV with another DIV

Side navigation in Angular is not causing the main content to shrink

Calculating the size of grid thumbnails or items using the calc() function

Is there a restriction on the maximum size of a CSS file?

Sending data from Angular to the DOM

The BottomNavigation component in MUI has a minimum size limit of 400px when it displays 5 items

Converting a JavaScript IIFE library into a React Component

Troubleshooting CSS3 pulse animation failure in Internet Explorer and Firefox

Activate the dropdown menu when ul element is in focus

Include a basic downward-pointing arrow graphic to enhance the drop-down navigation menus

Comparing Yii's CHtml::link() function with the use of regular <a href=''></a> HTML tags

What is the best way to create a container filled with numerical figures?

Header that sticks to the top of a container as you scroll through it

Having trouble making the swing effect trigger on mouseover but not on page load

What is causing iframes to fail on some websites?

Waypoint function malfunctioning when overflow:hidden is applied