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.
Is there a way to create a link that will open a file located in a different folder, either upward or backward? Thank you! <nav class="floatfix"> <ul> <li><a href="/product/index.php">Hom ...
I can't seem to figure out CSS declaration priority. I have an external CSS file with a rule and some inline CSS declarations that are supposed to override it. According to my understanding, inline styles should take precedence over external CSS rules ...
My experience as a web developer has taught me that poor color contrast on a website can severely impact revenue. I am determined to change this, but have encountered an issue. On my site, there is a section where users can select a color and see it displa ...
I have noticed that all Premium posts contain an element with the class ="svgIcon-use" <svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.090 123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 ...
Is it possible to upload a file using the input tag with type='file' and save it in my project folder without using ajax? Can JavaScript help me achieve this task? Below is the code snippet I am currently working on: function func3() { var ...
I am currently working on a website that I want to ensure is mobile-friendly. When testing it on my phone and in Chrome's device mode, I noticed that the majority of the text on the screen was displayed at an easily readable size without needing to zo ...
https://i.sstatic.net/pomMS.png My task is to click on a button using this code: browser.find_element_by_id('btnSearch') However, the button is being blocked by a div tag with the following attributes: <div id="actionSearch" class="row pull- ...
I need help figuring out how to save user input on a form (email and password) as variables when they click "Register", so that the data can be used later if they choose to click "Login" without using default information. I am working on this project for s ...
Dealing with PrestaShop. I have configured attributes for a product and I want to showcase them in a table format similar to this example: The table should display the Paper Size across the top, with each row representing the quantity of paper. In my ad ...
I have a variety of nested div elements within a parent div, set up like this: #mycontent > div { width: 14.28%; } <div id="myheader">some header content</div> <div class="container" id="mycontent"> <div class="outerdiv" id= ...
Currently, I am working on a project to display NBA data fetched from an API. I am aiming to recreate the design showcased here: Dribbble Design My main challenge lies in overlaying the left sidebar onto the main box and shifting the components sligh ...
I have a scenario where I want to mute audio that automatically plays when the screen loads. In order to achieve this, I am attempting to add a button that can toggle the audio mute functionality using Typescript within an Angular4 application. The code sn ...
For instance, imagine a scenario where you click on a button and it then displays various options for you to select from. Whatever option you pick will be automatically inserted into the text area. ...
I am currently displaying each record with two boxes for Afternoon and Night horizontally: https://i.stack.imgur.com/JMKug.png This is the code structure I am using to achieve this layout: <div id="record_box"> <div class="row" style="paddi ...
I am trying to align the center of my navigation bar using the "Cover" Bootstrap 4 template. Please find the current code provided below. <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> ...
It appears that many programmers from various languages have encountered this issue. I am using jQuery to fetch AJAX text onto a screen, but firebug is indicating an unterminated string literal with an unhelpful example : $("#content").html("<div cla ...
I'm working on achieving a height of 100% for the left sidebar so that it fills the page regardless of the size of the "main" div. Currently, it stops at the normal page height and doesn't expand further. Is there any way to make this work as i ...
When trying to download multiple files from a server, I am required to queue them up instead of downloading in parallel. Unfortunately, I do not have access to the download server, so my only option is to work with the browser. Is there an API available t ...
I'm attempting to achieve a similar effect as shown in this example on my website form. I've tried using opacity to make the form field background only 20% visible, but it ends up affecting the text inside and when typing. Is there a way to apply ...
I'm currently setting up a blog for my website. Everything is running smoothly with the database, but I've run into an issue with the order of my posts - they are displayed in the opposite order that I want. The oldest post is showing at the top, ...