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

Connecting to particular sections on other pages

CSS - Struggling to identify the source of unwanted horizontal scrolling?

Div's HTML Classes are not triggering the Click Event

"Steady layout of grid for the navigation bar and

Increase the size of a div to equal the combined width of two divs located directly below it

Whenever I insert an http link for FontAwesome, the icons work perfectly fine. However, when I try to host it locally,

Are you interested in designing a bootstrap album for your homepage?

Choose a specific cell in the table and store it in the session

Retrieve the content of a different page and store it as a variable using ajax

Fixing the error: Severity notice, there is an undefined variable called 'table'

Utilize the Bootstrap column push-pull feature on the mobile version of

The line segment refuses to remain hidden beneath the h2 tag

Please enter the text in the field provided at the bottom using IE10

Unable to generate file with Compass

Ways to thwart CSRF attacks?

Waiting for response in AngularJS Controller and setting callback

Creating dynamic selection options in an HTML select tag using PHP

Attempting to modify the background color of an iFrame in Internet Explorer

Excessive content spilling over into the footer area due to an integrated forum feature within

Decrease the gap between the <hr> and <div> elements