Looking to implement a content panel switcher with 6 navigation items split between 2 rows, each containing 3 items. I want all columns to be evenly aligned to the left without excessive use of divs and clutter in the HTML code. Any suggestions on achieving this efficiently? :)
Here is an example of the HTML code:
<div id="menu">
<ul>
<li>item</li>
<li>item</li>
</ul>
<ul>
<li>more items<li>
<li>more items</li>
</ul>
<ul>
<li>even more items<li>
<li>even more items</li>
</ul>
</div>
And here is the CSS:
ul {
float: left;
list-style: none;
}
I took inspiration from ggregoire's answer but made variations based on your specific request for 3 items in 2 rows. Due to restrictions, I couldn't comment so I created a new answer instead.
Sample HTML code snippet:
<div id="navtabs">
<ul>
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
<ul id="right">
<li>mango</li>
<li>grapes</li>
<li>kiwi</li>
</ul>
</div>
Cascading Style Sheets (CSS) code:
ul {
float: left;
}
#right {
margin-left: 10px;
}
See an example here: http://jsfiddle.net/ddYsk/
It is highly recommended to utilize styled unordered lists for creating menus. Not only are they semantic and SEO-friendly, but they also cater to screen readers.
For a horizontal menu, remember to apply {float:left} to the li elements. If it's not a horizontal menu, focus on styling the A tags within the list instead of the LIs for optimal outcomes.
Here is an example of a simple menu:
<ul>
<li><a href="">item A</a></li>
<li><a href="">item B</a></li>
</ul>
For more complex multi-level menus, consider the following CSS styles:
.menu {
ul li { position:relative; float:left }
ul li a { display:block; ... your styles ...}
ul li ul {position:absolute ..position as needed ...}
ul li ul li {float:none}
}
<div class='menu'>
<ul>
<li><a href="">item A</a>
<ul>
<li><a href="">item A-1</a></li>
<li><a href="">item A-2</a></li>
</ul>
</li>
<li><a href="">item B</a></li>
</ul>
</div>
It is advisable to pair this with a CSS reset like the one provided here: http://developer.yahoo.com/yui/reset/
import {createStyles, WithStyles} from "@material-ui/core"; const styles = (theme: Theme) => createStyles({ root: {} }); interface MyProps extends WithStyles<typeof styles> { } export class MyComponent extends Component<MyProps ...
I need some help with my project - I'm trying to figure out how to create a button on my website that, when clicked, will display a string in my Python terminal. Can anyone offer some guidance on how to achieve this? Thanks in advance! ...
http://jsfiddle.net/vmKVS/ I need some help understanding the functionality of slideToggle using a small example. After toggling for the first time, the options element changes color to green. However, I expected the menu element to turn red when I togg ...
I'm finding it difficult to center my search bar inside my navigation. I've experimented with different options like mr-auto and ml-auto or mx-auto, but the element just won't budge. I want to avoid using specific pixel values as it may affe ...
I'm currently utilizing the HTML-to-paper plugin to print my content on a printer. However, I've encountered an issue where it doesn't seem to apply any of the styles I've defined within @media print. The challenges I'm encounteri ...
Although this question has been asked before, I have a query on completely removing an "id" from an element. Let's consider the following scenario: <div id="page"> some content here </div> I want to eliminate the "id" attribute from the ...
My navigation header includes links to various websites, some of which are displayed as drop-down menus. I have implemented an animation and style change on hover to visually indicate the active link and display all available options in case of a dropdown ...
I'm having trouble implementing the Angular Material list with checkboxes, where the text needs to be truncated instead of word-wrapped due to limited UI space. I have modified an example on the Angular Material site to demonstrate the issue. The text ...
I have searched for solutions online, but nothing seems to work for me. I am facing an issue with my webpage that has multiple sections, and I want to display them one after the other vertically. Here is the code snippet: import React from 'react&ap ...
In this snippet of HTML code- <table style='min-width:60%;height:25px;'> <tr> <td><b><data:post.title></b></td> <td id='date-and-author' style='position: relative;bo ...
I am in the process of converting an HTML API to ReactJS. The original HTML API is as follows: <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script> <script> var mapContainer = document.getE ...
My goal is to change the innerHTML of a div when it's clicked. I have an array of dynamically generated divs, and I want to target the specific table that the user clicks on. I attempted to set the IDs of the tables dynamically in my JavaScript code: ...
I have come across the following HTML: <div class="calculator-section"> <p> <span class="x"></span> <span class="amount">30</span> </p> <p> <span class="y"></span ...
For educational purposes, I am designing a website where users can sign in by entering their name on the login page. After signing in, they will be redirected to the home page which displays a personalized welcome message using their name. I have included ...
Within an asp GridView template field, there is a button and a checkbox. The goal is to set the disabled property of the button and the checked property of the checkbox based on the Data Field Expiration conditionally. If the Expiration equals Permanent, t ...
Looking for guidance on how to remove #! from the URL in AngularJS using ng-route. Can anyone provide a step-by-step process on removing #!? Below is the code snippet: index.html <head> <script src="https://ajax.googleapis.com/ajax/libs/ang ...
For some reason, I'm encountering issues with the CSS3 property @font-face in certain browsers when trying to use my own fonts. Chrome, Safari, and IE10 work fine, but other browsers present several problems: The code I used looks like this: (fonts G ...
Has anyone experimented with background images and their impact on web design? Typically, backgrounds are designed to repeat in either the x or y direction, or both. For example Consider a gradient background that repeats horizontally. If the gradient i ...
I am currently working on a marketing project where I want to give clients the ability to customize their landing page with image ads in a layout that looks something like this: -------------------------------------------------------------------------- | ...
I made a div container and added some callouts inside it. You can find my code uploaded here https://codepen.io/muhammad-usman-the-animator/pen/mKgoNj .name { color: black; font-weight: bold; margin-left: 20px; font-size: 20px; } .det ...