organizing the elements in the list into a visually appealing layout

I am currently working on transforming table data into a pivot format and presenting it in a horizontal list. My goal is to ensure the design is responsive enough to be viewed on mobile devices as well. Below you can find the CSS code I have implemented for this purpose:

.menu{
  width:700px; margin:0 auto;            
}
.menu li{
  display: inline;
  list-style: none;
  float: left;
  margin-right: 2em;
  padding: 0;
  text-align:center;
}
.menu .fa {
  display: block;

}
.selected {
  color: green;
}
.menu li:hover{
  color: green;
}
.list-heading {
  font-weight: normal;      
}
<h3 class="list-heading">WeekName</h3>
<h3 class="list-heading">DayName</h3>
<ul class="menu">
    <li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 6</span></li>
    <li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 5</span></li>
    <li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 4</span></li>
    <li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 3</span></li>
    <li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 2</span></li>
    <li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 1</span></li>    
</ul>

I am aiming to showcase the data layout similar to the image seen in this link:

https://i.stack.imgur.com/bhI23.png

css

Answer №1

There are various methods to achieve this. Personally, I would opt for using flex. However, if you prefer to stick with an unordered list element, you can simply set the child li elements to have a display: inline-block property and let the DOM flow naturally, as demonstrated below;

Side Note: Adding the <!-- --> between the li elements is one way to remove the default spacing of an inline-block element without the need for negative margins.

I hope this explanation proves helpful. Cheers!

.menu{
  margin:0 auto;
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}
.menu li{ 
  display: inline-block;
  padding: 0;
  text-align: center;
  width: 120px;
  border: gray 1px solid;
  padding: .5em;
}

.menu .fa {
  display: block;
  margin: 0 auto;
  margin: .5em 0;
}

.selected {
  color: green;
}

.menu li:hover{
  color: green;
}
.list-heading {
  font-weight: normal;      
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<h3 class="list-heading">WeekName</h3>
<h3 class="list-heading">DayName</h3>
<ul class="menu">
    <li><i class="fa fa-cutlery fa-1x"></i><span>Meal 6</span></li><!--
    --><li><i class="fa fa-glass fa-1x"></i><span>Meal 5</span></li><!--
    --><li><i class="fa fa-cutlery fa-1x"></i><span>Meal 4</span></li><!--
    --><li><i class="fa fa-glass fa-1x"></i><span>Meal 3</span></li><!--
    --><li><i class="fa fa-cutlery fa-1x"></i><span>Meal 2</span></li><!--
    --><li><i class="fa fa-glass fa-1x"></i><span>Meal 1</span></li>
</ul>

Answer №2

Use this custom CSS

body{
  margin: 0px;
  padding: 0px;
  background: #ccc;
}
.menu{
  display: flex;
  flex-wrap: wrap;
  padding:0px;
}
.menu li{
  display: flex;
    flex-direction: column;
    width: 30vw;
    height: 30vh;
    justify-content: center;
    align-items: center;
    background: #fff;
    margin: 6px auto;
}
.menu li i{
  font-size:24px;
  width:60px;
  height:60px;
  line-height:60px;
  text-align:center;
  border:1px solid #ccc;
  border-radius:50%;
  margin-bottom:12px;
  cursor:pointer;
}

Insert your HTML code here ....

<ul class="menu">
    <li><i class="fas fa-plus"></i><span>Meal 6</span></li>
    <li><i class="fas fa-plus"></i><span>Meal 6</span></li>
    <li><i class="fas fa-plus"></i><span>Meal 6</span></li>
    <li><i class="fas fa-plus"></i><span>Meal 6</span></li>
    <li><i class="fas fa-plus"></i><span>Meal 6</span></li>
    <li><i class="fas fa-plus"></i><span>Meal 6</span></li>
</ul>

https://i.stack.imgur.com/JeJz7.png

Answer №3

To make this layout responsive, utilize a CSS media query. Specify the desired width for when the stacking order changes, such as 480px in this example. Below is a demonstration in my fiddle.

.menu{
      width:700px; margin:0 auto;            
    }
    .menu li{
      display: inline;
      list-style: none;
      float: left;
      margin-right: 2em;
      padding: 0;
      text-align:center;
    }
    .menu .fa {
      display: block;

    }
    .selected {
      color: green;
    }
    .menu li:hover{
      color: green;
    }
      .list-heading {
      font-weight: normal;      
   }
   @media screen and (max-width: 480px) {
     .menu li {
       margin: 0;
       width: 30%;
     }
   }
<h3 class="list-heading">WeekName</h3>
<h3 class="list-heading">DayName</h3>
<ul class="menu">
    <li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 6</span></li>
    <li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 5</span></li>
    <li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 4</span></li>
    <li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 3</span></li>
    <li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 2</span></li>
    <li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 1</span></li>    
</ul>

https://jsfiddle.net/mbc59e38/

Answer №4

If you want to make laying out your website easier, consider using flexbox. The approach you take will depend on your specific needs and the structure of your HTML, so sometimes you may also need to incorporate media queries. However, starting with flexbox is usually a good idea.

.menu{
  max-width:700px; 
  margin:0 auto;            
}
.menu li{
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  margin-right: 2em;
  padding: 0;
  text-align:center;
}
.menu .fa {
  display: block;

}
.selected {
  color: green;
}
.menu li:hover{
  color: green;
}
.list-heading {
  font-weight: normal;      
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Failure to display masonry arrangement

I am working on creating a stunning masonry layout for my webpage using some beautiful images. Take a look at the code snippet below: CSS <style> .masonryImage{float:left;} </style> JavaScript <script src="ht ...

javascriptjqueryhtmlcssjquery-masonry

Creating a color-changing checkbox toggle in Bootstrap 5

Is it possible to customize the color of a Bootstrap 5 switch without changing it site-wide? I want some checkbox switches to have a unique color. Most tutorials online only cover how to change colors globally or use images, but I'm hoping to achieve ...

htmlcsstwitter-bootstrapbootstrap-5

A PHP script or regular expression that swaps the positions of characters within a string

(Update1: per suggestion by George Cummins) I need assistance in creating a regex search and replace or a php function to switch positions of characters within a string. (since I couldn't figure it out on my own) For example, if I have the following C ...

phpcssregex

Can you explain the significance of the characters '& > * + *' in JSX (CSS)?

When using material UI, the progressbar demo includes lines of JSX code like this: '& > * + *': { marginTop: theme.spacing(2), }, Can you explain what the selector '& > * + *' represents in this context? ...

cssreactjsjsx

The lengthy string is not breaking into separate lines as expected in Internet Explorer

My querystring is quite long http://terra.cic.local/web/index.cfm//pm/uebersicht?sucheAufgeklappt=was%2Cwie%2Cwohin%2Cwann%2Cwer&sucheVon=&sucheBis=&sucheIstErsteSeiteAnzahlProdukteErmitteln=false&sucheIDReiseart=26&sucheHotelart=1081& ...

css

Create a speech bubble using only CSS, featuring a partially see-through background and a stylish border

I wish to design a speech bubble using only CSS. There are specific requirements I need to meet: It should adjust its size based on content with some padding or a set size. The background color must be semi-transparent. You must be able to define a borde ...

htmlcsscss-shapes

Tips for Customizing the Active Class in Bootstrap 3

After spending the last 3 days searching online and trying various examples, I still can't figure out how to style the active class properly. Below is the HTML code snippet: <div class="navbar navbar-inverse navbar-fixed-top" id="mainHeader" ...

htmlcsstwitter-bootstrap

Assistance required for locating elements in Selenium using Css Selector

Hi there, I'm not really a developer. I've got two checkboxes in my table without any IDs. Usually, I can easily work with Selenium when elements have IDs, but in this case, the table was generated using jquery datatables and no automatic ID ass ...

c#cssgoogle-chromeseleniumselenium-webdriver

List items that are not in any particular order spilling over onto the next

Having an issue with an unordered list where the list items aren't all on the same line. The 5th element is dropping to the next line even though each item is set to 20% of the container. The math adds up, so not sure what's causing the problem. ...

css

When the last character in the route is a forward slash, the Express server will load the HTML page with CSS and JavaScript. Conversely, if the last route character

On my second html page model.html, I noticed the following issue: When I include a '/' at the end of my route address in the browser like this: http://localhost:3002/home/model/, the correct html page is loaded, but the css/js files do not load. ...

htmlcssnode.jsexpress

CSS fails to display image within PHP script

Having an issue with displaying CSS through a PHP file. Everything seems to be working fine until I try to display an image from the database. The source code does accept the value from the DB, but the image doesn't show up. Interestingly, the image d ...

phpcssimage

What steps should I take in modifying my existing code to use jQuery to set my div to a minimum height rather than a fixed height?

Could someone assist me in adjusting my div to have a min-height instead of a regular height? Whenever I click on the "Learn more" button, it extends past my div because the function is designed to set a specific height rather than an equal height. $.fn.e ...

javascriptjqueryhtmlcss

A unique feature where a bar emerges from the bottom of the screen, smoothly glides upwards, and then securely fastens to

I'm working on bringing to life a concept that I've been envisioning. The design would feature a long scrolling page with a unique navigation bar behavior. The idea is for the navigation bar to initially start at the bottom of the screen and the ...

javascriptjqueryhtmlcss

Styling a HTML div element with a header and footer, while also ensuring that the

My goal is to create a div that features a header with a unique background design. The content within the div should have a background consisting of a one-pixel repetition at y, or maybe something different? I also want a footer with its own distinctive ...

jquerycsshtml

Transfer the information of a selected element to a different element

Hello, I am trying to transfer content from a child element to another element. In my HTML setup, there is a hidden div named "DetailsExpanded" and multiple items called "IconWrapper". When an "IconWrapper" is clicked, I want to copy the content of its "I ...

javascriptjqueryhtmlcss

Troubleshooting problems with jQuery mmenu on Windows Phone (IE Mobile)

I am currently working on optimizing the mobile version of a website, utilizing jQuery MMenu for the menu. The functionality is seamless on various phones and tablets I have tested, except for Windows Phones... Even with the plugin configured with the "po ...

jqueryhtmlcsswindows-phone-8mmenu

Ways to align anchor tags in the middle of a DIV element?

<div style="border: 1px solid rgb(0, 0, 0); height: 30px; width: 30px; background-color: rgb(245, 225, 130);"> <div style="margin: 5px;"> <a href="#link">#down2#</a> </div> </div> This is the current code I am w ...

htmlcss

Is it possible to display a Processing message at the beginning of a datatables table already containing data?

Within my Laravel 5.7 application, I have implemented the "yajra/laravel-datatables-oracle": "~8.0" library and found a helpful thread on customizing the processing message at this link. I adjusted the processing message styling as follows: .dataTables_pr ...

javascriptjqueryhtmlcssdatatables

Is it possible to include line breaks within a CSS value?

(I am posting this here because I couldn't find a solution and eventually figured it out through trial and error. Hopefully, this information can help others with the same question.) Note: This is not the same as the discussion on Single-line vs mult ...

csssyntax

Overflow-y SweetAlert Icon

Struggling with a website modification issue where using Swal.fire(...) causes an overflow problem affecting the icon rendering. How can this be fixed? Here is the custom CSS code in question: * { margin: 0px; padding: 0px; font-family: &ap ...

javascripthtmlcsssweetalert