Our website designer is looking to create a vertical UL / LI list that matches the design in the image below.
However, when using this style, I ended up with:
The result looked like this:
<style type="text/css">
ul {
list-style: none;
}
ul li:after {
content: "\25BC \0020";
}
ul li:before {
content: "\25A0 \0020"; color:#C60;
}
</style>
I'm considering switching to a table format, but is there a way to achieve an aligned list even if the line overflows?
This jsfiddle is working smoothly, please note that the left-margin and text-indent of the li elements are dependent on the icon being used. However, they maintain their alignment even when the font-size is changed.
CSS
ul {
list-style: none;
width: 150px;
font-size: 16px;
text-transform: uppercase;
}
ul li {
text-indent: -0.88em;
margin-left: 0.88em;
position: relative;
padding-right: 1em;
}
ul li:before {
content: "\25A0";
color: #C60;
vertical-align: text-bottom;
margin-right: .25em;
}
ul li:after {
color: #C60;
font-size: 0.8em;
content: "\25BC";
position: absolute;
right: 0;
top: 50%;
margin-top: -.5em;
}
Edit: vertical-align: text-bottom; produces better icon-to-text alignment in Firefox for me.
To achieve the desired effect, make sure to set position: relative for the parent element (ul), as well as for the before and after pseudo elements.
ul {
list-style: none;
position: relative;
}
ul li {
padding-left: 20px;
padding-right: 20px;
}
ul li:after {
content: "\25BC \0020";
position: absolute;
right: 5px;
}
ul li:before {
position: absolute;
left: 5px;
content: "\25A0 \0020"; color:#C60;
}
For a working example, check out this JS Fiddle link: http://jsfiddle.net/QgBvb/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div >
<ul>
<li>First item</li>
<li class="first"><a href="f.php">Fragrances</a></li>
<li>Second item</li>
<li><a href="c.php">Cosmetics</a></li>
<li>Third item</li>
<li><a href="s.php">Stuffed Toys</a></li>
<li>Fourth item</li>
<li><a href="b.php">Housing</a></li>
</ul>
</div>
</body>
</html>
Create a new file and paste this code in it to see the correctly formatted list items.
On my FAQ page, I have integrated a jQuery Accordion with a repeater control nested inside to display various questions and answers. The FAQ page utilizes a master page named LaunchPage.Master. Here is the code for LaunchPage.Master: <html> <he ...
How can I target a specific tag within an ID using the class name in selector syntax? For example, how can I make the inner "li" turn red in the code snippet below? <html> <head> <style type="text/css"> #navigation li ...
Currently working on a responsive website and almost done with the build. However, I came across a site where an image appears to be floating behind the rest of the webpage content. Tried searching for a solution using w3.css without any luck. Any sugge ...
<!DOCTYPE html> <html> <head> <title>test</title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <p v-show="show&qu ...
I am currently in the process of building my own website using siteorigin page builder on wordpress. One issue I have encountered is that they do not offer a hover option, so I had to create a custom CSS to add a hover effect on the background color. When ...
I am currently working on a script to automatically download and install the most up-to-date versions of specific applications. Is there a simple way to download the latest program from a website? For instance, if we look at the Firefox download page: On ...
The npm command is not recognized as a valid cmdlet, function, script file, or operable program. Please double check the spelling of the command and ensure that the path is correct before trying again. This error occurred at line 1. npm i bootstrap + ...
I am utilizing the PHP library SimpleXML to extract information from an existing XML file on my website and incorporate it into an HTML page. Below is a snippet from the XML located at : <DTilt> <frontSide imagePath="94341/20130510150043_ACX ...
After spending a considerable amount of time on this, I find myself getting confused and stuck. It seems like I might be overlooking something crucial. Essentially, my code is designed to have the default div background (gamebg), and upon clicking one of t ...
I'm currently in the process of creating a script to switch the language on a website using PHP and Ajax/jQuery. I would like the page content to refresh without having to reload the entire page. So far, this is what I have come up with: $( "a[data-r ...
I'm dealing with a list of videos and I need to hide the class when it's clicked. Check out this sample HTML output: <div id="primary-video"> <iframe id="video" width="100%" height="auto" src="https://www.youtube.com/embed/test" fra ...
I have created a drag and drop image upload field with a hidden input element to style the upload button according to the design. However, I am concerned about accessibility and want the upload functionality to trigger when the user presses 'Enter&apo ...
When using Cakephp to generate a link with Html->link, the code looks like this: echo $this->Html->link('Download',array( 'plugin'=> 'galleries', 'controller'=> 'galleries', 'a ...
In my table, I have multiple rows with alternating white and grey backgrounds achieved through CSS. .profile tr:nth-child(odd) { background:#eee; } .profile tr:nth-child(even) { background:none; } However, I now want to allow users to select a row ...
I'm currently working on creating a Hangman game using HTML and JS. Most of the code is functioning properly, but I've hit a roadblock. For some reason, one part of my if else statement isn't working correctly. Here's the line of code: ...
I'm currently working on styling a form that includes an input field. The challenge I'm facing is that the input field needs to be completely transparent. Everything works fine with the input field until I start typing, which triggers the browser ...
I have been working on creating a responsive diagonal layout with slanted shapes (refer to the image attached). However, I'm facing a challenge with aligning the edges smoothly at different screen sizes, especially when the rows grow and the screen re ...
Exploring the realm of CSS 3D transforms to showcase cubes and cuboids featuring cross-sections has been my current venture. In this endeavor, I'm aiming at compatibility with Chrome, Firefox, and MSIE 11. It has come to my attention that in order to ...
I am stumped as to why this particular file is not getting posted. Despite my thorough search for solutions, I have yet to pinpoint the issue. All the necessary ini file variables seem to be in order and I have verified the correct form type. Additionally, ...
I'm currently working on creating an index page for a pair of HTML files that utilize jquery. Let's break down the structure of these files: Emps1, Emps2: These are two HTML tables that start off empty. TabA_stats, TabB_stats: Each HTML file ha ...