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

Adjust the position if the height exceeds 100 pixels

Can someone help with this code issue? $(document).ready(function () { if ($('.pi-img').height() > 100) { $(this).css('top' , '30%'); console.log('yeah'); } }); I am encountering difficu ...

javascriptjquerycsshtml

Adjust the header and menu color as you scroll

Starting fresh with JavaScript, I'm seeking advice on a specific piece of code. Working on a Joomla 3.2 website using the Gantry template by default. My goal is to achieve the following: When a user accesses a submenu (e.g., 01, 02, 03) derived from t ...

jqueryhtmlcss

Which font file format is the most suitable for my website?

I've been doing some research on fonts for my website, and I've come across various formats available. Now I'm curious about what the standard format is or if there are multiple standard formats. .TTF (True Type Font) .EOT (Embedded OpenTyp ...

cssfonts

Unable to relocate CSS Loader Container

Can someone help me with adjusting the placement of my container? I'm struggling to maintain the styles while getting rid of the position: absolute; on the .dot class. Every attempt I make is resulting in the dots moving erratically! To clarify, I w ...

htmlcsscss-animations

Flame-inspired CSS editor

My current CSS editing workflow goes something like this: I ask for feedback on a page Suggestions are given to make post titles bigger I use Firebug to inspect the post title element I locate the corresponding CSS statement in Firebug (like h2.post_title ...

csseditorfirebug

Adjust the height seamlessly on the homepage without the need for scrolling, while maintaining a stationary navigation bar and footer

Our latest project is designed specifically for mobile use. The fixed navigation bar is functioning perfectly. We also have a fixed footer with icons at the bottom. (All working well) The challenge we are facing is to make the content between the naviga ...

htmlcss

Error: The term "Particles" has not been defined

I'm attempting to integrate code from a website into my project, but encountered an error when the particles failed to run after adding it. I downloaded and installed particle.js from "https://github.com/marcbruederlin/particles.js/issues" for this pu ...

javascripthtmlcssparticlesparticles.js

Looking to display or conceal several divs according to the option selected from a dropdown menu?

I've been searching for a solution to my simple dropdown issue, but haven't had any luck in the forums. This is the code for the dropdown: <select id ="category_faq"> <option value="1">item1</option> <option value= ...

javascriptjqueryhtmlcss

Express JS backend causing CSS file to fail to load in React project

After doing some research on Stack Overflow, I came across a few solutions but none of them seemed to work for my specific situation. I am currently attempting to serve my React website from an Express backend server. Here is the layout of my folders: cli ...

javascriptcssnode.jsexpress

Bring to life in both directions

I want to incorporate Animista animations to make a button scale in from the left when hovering over a div block, and then scale out to the left when the mouse moves out of the div block. Check out my code snippet below: http://jsfiddle.net/30sfzy6n/3/. ...

htmlcss

Issue with the JQuery FadeIn effect on my website when a div is repositioned for visibility

I have been working on revamping an existing website at www.gjelavoie.com. To enhance the user experience, I decided to use jquery fadein() and fadeout() functions for displaying my Contact form without visitors having to temporarily access the main page. ...

jquerycssfirebug

What is the best way to trigger a jQuery function after adding a <div> element through Ajax loading?

When I use Ajax to append a <div>, the dynamic inclusion of jQuery functions and CSS for that particular <div> does not seem to work. The insertion is successful, but the associated jQuery functions and CSS do not load properly. How can this be ...

htmlcssjquery

Adjusting the content of mat-cards to fill in blank spaces

I have encountered an issue with the alignment in a list using mat-card. Here is my current layout: https://i.stack.imgur.com/VKSw4.jpg Here is the desired layout: https://i.stack.imgur.com/8jsiX.jpg The problem arises when the size of content inside a ...

htmlcssangularlayoutangular-material

Comparing Strict CSS with Hacky CSS - Which is the Better Choice?

When working with CSS, it becomes evident fairly quickly that certain styles are not universally compatible across different browsers. For instance, achieving a semi-transparent PNG required a convoluted solution for Internet Explorer like: filter: pro ...

cssstandards-compliance

Enhance the aesthetics of placeholder text in Semantic UI React using CSS styling

Currently, I am utilizing Semantic UI dropdowns within my React application to generate drop-down menus similar to the ones showcased in their documentation found here: The initial text displayed is "Select Friend", and it appears with a semi-transparent ...

cssreactjssemantic-ui

Height problem with Semantic UI cards in Chrome on Windows

Encountering an issue specific to Chrome on Windows where the height of my .card elements is not displaying correctly. The height appears to be either too much or too little, causing the problem shown in the screenshot below. This issue seems to be isolate ...

cssgoogle-chromeflexboxsemantic-ui

Is it possible to incorporate an external javascript file in my CSS file?

Currently, I am attempting to create a setup where my background adjusts based on the width of the user's browser. However, I am constrained by a background specified in the external stylesheet under a specific element. While I have the ability to alt ...

javascripthtmlcssbackgroundbrowser-width

The Enchanted URL Folder Name

Spent two painstaking hours dealing with this issue. It's incredibly frustrating. Struggling to load css files in PHP pages when the URL contains a folder named "adsq" Comparing two identical pages, only differing in the folder name: One works perf ...

phpcssdirectory

Automatically adjust CSS grid to fill based on the width of child elements

Can a CSS grid adjust its widths dynamically based on the content of its children? I believe not, but I wanted to confirm. I attempted this approach without success. const Grid = styled.div` display: grid; grid-auto-flow: row; grid-template-columns ...

csscss-gridstyled-components

Unable to display menu content text using jQuery

Currently experimenting with jQuery to create a dynamic submenu. The goal is to have a sub menu appear when the main menu is clicked, and then disappear when an item in the sub menu is selected, revealing additional information within a div. Unfortunately, ...

javascriptjqueryhtmlcssmenu