I've built and styled lists before, but this list is made from a Font Awesome font and it's made with a div (it's not global).
I started off this this:
ul.fa-ul2 li:before {
font-family: FontAwesome;
content: '\f058';
color: #6190C3;
font-size: 28px;
padding-right: 10px;
margin-left: -15px;
}
No matter what I have tried, can't get text to stop wrapping under bullet. Also need to get list elements up a little so they line up with font. Here is a link to test site:
link to live test site
I've tried "display: inline-block" and "list-style-position: outside" with no luck. I might have had them in the wrong place. Thanks for any suggestions.
add this styles set position:absolute to li:before and li position:relative
ul.fa-ul2 > li{
position: relative;
}
ul.fa-ul2 li:before {
position: absolute;
left: -13px;
}
Just add position relative to li:before and move it using negative top and left
ul.fa-ul2 li:before {
position: relative;
top: -20px;
}
I think I got it to show the way you wanted
Fiddle:
http://jsfiddle.net/a5w5pvr1/1/
ul.fa-ul2 li:before {
font-family: FontAwesome;
content:'\f058';
color: #6190C3;
font-size: 28px;
padding-right: 5px;
margin-left: -1.1em;
}
li {
list-style-type: none;
display: block;
margin-left: 1em;
margin-top: 0.5em;
}
Add this code for taking list element upside
ul.fa-ul2 li:before{
top: 5px;
}
Related
I'm new to responsive web design and I guess that this should be pretty simple but I can't find a solution.
I have a (Right to Left) responsive webpage. It has footer links, and they look like that:
At the moment, I'm adding a .no-bullet class to the last <li> element, and using CSS to add a bullet to the all of the items except that last one:
li.list-item-footer:not(.no-bullet):after{
content: "•";
color: #611aa8;
}
Problem is - it has to be responsive. On smaller screen it may look like that:
(On this example, i'd expect the bullet on the left of 55555 to disappear)
I assume that this could be archivied with media query, but I can't find the solution online.
This is the template (Angular 4):
<ul class="list-inline list-footer d-inline-block pt-4">
<!-- pulls all footer links from config.json file-->
<ng-container *ngFor="let link of appService.config?.footer">
<li [ngClass]="{'list-inline-item list-item-footer' : true, 'no-bullet': !link.showbullet}">
<a [href]="link.link" class="link-footer no-text-decoration" [target]="link.target">{{link.display}}</a>
</li>
</ng-container>
</ul>
I made a really basic snippet to achieve your desired effect. Having the elements float left will automatically put them into the new line, if they exceed the boundaries of their parent. If you resize body in the example you will see the effect. Futhermore, using the before - selector you can add content infront of the element. You also can use :not(:first-child) to affect every element of your selection but the first one.
ul
{
list-style-type: none
}
ul li
{
float: left;
margin-left: 3px;
}
ul li:not(:first-child):before
{
content: "• ";
}
<body>
<ul>
<li>55555</li>
<li>66666666</li>
<li>777777</li>
<li>888888888</li>
</ul>
</body>
Here is a trick to remove the first dot by using ul:before with position:absolute on responsive version using media query
...the idea is here to create a fake div with same background-color as ul to overlap the first dot.
Note: You will need to adjust the width of ul:before according to your screen size
Stack Snippet
ul {
list-style: none;
display: flex;
background: maroon;
padding: 10px;
justify-content: center;
direction: rtl;
color: #fff;
font: 13px Verdana;
flex-wrap: wrap;
position: relative;
}
ul li {
margin: 10px 20px;
position: relative;
}
ul li:after {
content: "•";
position: absolute;
left: -22px;
}
ul li:last-child:after {
content: "";
}
#media screen and (max-width:500px) {
ul:before {
position: absolute;
top: 0;
left: 0;
width: 50px;
background: #800400;
content: "";
bottom: 0;
z-index: 1;
}
}
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<li>66666</li>
<li>77777</li>
</ul>
Fiddle Link
I want to reduce the spacing of each menu or compress the image a little bit and inline it next to logo. What is the best way to do that?
Here's my site
Here's the CSS of menu:
.main-navigation.menu-right{
text-align: right;
#site-navigation .main-navigation .ak-container{
padding: 0;
.main-navigation .menu{
display: block;
.main-navigation ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.main-navigation li {
display: inline-block;
position: relative;
line-height:48px;
font-size:18px;
text-transform: initial;
color:#ababab;
text-align: center;
white-space: nowrap;
}
.main-navigation a {
display: block;
text-decoration: none;
color: #000000;
padding: 0 18px;
}
A couple of ways you could solve this. The first as a commenter suggests is to start by putting your site-navigation inside your ak-container, so your HTML should be structured this way:
<div class="ak-container">
<div class="site-branding">existing code</div>
<div class="right-header clearfix">existing code</div>
<nav id="site-navigation" class="main-navigation menu-right">existing code</nav>
</div>
You should then have something along the lines of what you want, though you may have to play with the CSS just a little to get the exact look you desire.
Depending on what you want, and how your menu is coded, you may also need:
.sitebranding {
position: absolute;
z-index: 1;
}
You will need some testing if your site is responsive.
I've got a transform in a list and there appears to be space after the effect. As the item is inline, I presume this to be the reason.
That said, I'm looking for a solution - to return the word back to HYBRID without spaces.
visual
css
.hybrid {
display:inline-block;
transform:rotate(180deg);
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
html
<li>
Overview of H<span class="hybrid">Y</span>BRID
</li>
Your span is inheriting a text-indent from .sidebar-nav li (line 63 of stylish-portfolio.css). Fix it with:
CSS
.hybrid {
text-indent: 0;
}
I'm not happy with my code which uses a sprite image to show different images for each item in a list. The code can be seen here:
http://jsfiddle.net/spadez/JBuE6/45/
Before it was possible to click anywhere along the width of the column and it would select the list item because I used display: block.
However, because my sprite requires:
width: 0px;
It means I have to click on the actual list text in order to select it. Removing the width: 0px from the class .nav li achieves the affect I want. Can anyone show me how to do this, with some clean efficient code.
I'd take advantadge of CSS pseudo-elements, like ::before. You can do it in this way:
http://jsfiddle.net/franciscop/JBuE6/53/
HTML:
<nav>
<ul>
<li>
User
</li>
...
CSS:
nav a {
color: gray;
display: block;
line-height: 26x;
width: 100%;
}
nav li a::before {
display: inline-block;
content: "";
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
height: 20px;
width: 20px;
}
#user::before {
background-position: -10px -6px;
}
OLD ANSWER [alternative]:
I would change the padding left and the sprite to the <a>, so that you can click them also.
.nav li {
}
.nav li a {
color: gray;
display: block;
line-height: 26x;
padding-left: 30px;
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
height: 20px;
width: 0px;
}
http://jsfiddle.net/franciscop/JBuE6/50/
You should be putting your images on the links, not the list. Use display:block and padding-left: to provide enough room. In general, put all non-positional styling on the A-tag, not the LI.
Other than that, you are doing it the right way.
I'd like to left align both the numbers and the text in my <ol>. This is what I'm trying to accomplish:
For now, each <li> contains an <a>, but that can change. So far I tried putting left padding and then a text-indent on the <a>.
Here is my code as of now.
HTML:
<ol class="dinosaurs">
<li><a>Dinosaur</a></li>
<li><a>Tyrannosaurus</a></li>
<li><a>Camptosaurus</a></li>
</ol>
CSS:
.dinosaurs{
list-style-position: inside;
}
NOTE: I'm viewing the webpage in Chrome 23 on Windows 7.
This seems to work:
.dinosaurs { counter-reset: item }
.dinosaurs li { display: block }
.dinosaurs li:before {
content: counter(item) ". ";
counter-increment: item;
width: 2em;
display: inline-block;
}
You could position the list elements like so:
.dinosaurs {
list-style-position: inside;
}
.dinosaurs li{
position: relative;
}
.dinosaurs li a {
position: absolute;
left: 30px;
}
which would yield http://jsfiddle.net/wBjud/2/
None of the existing answers worked for me, but by combining and building on them I found similar method that does, including for multiline entries, without requiring any tags inside list items:
ol {
counter-reset: item;
}
li {
display: block;
margin-left: 1.7em;
}
li:before {
content: counter(item) ". ";
counter-increment: item;
position: absolute;
margin-left: -1.7em;
}
Which looks like this: https://jsfiddle.net/b3dayLzo/
I think it works by putting the li:before in the left margin of the li.
You may want a different margin-left.
There's no class on the ol because in my case this appears within the style of the container.
Try adding padding-left: 0; to your style, and changing list-style-position: to outside if necessary.
You can fake it by using positioning, padding and margins.
jsFiddle example
.dinosaurs {
list-style-position: inside;
position:relative;
margin-left: -20px;
}
a {
position:absolute;
left:70px;
}
If you use list-style-position: inside; the number is placed inside the block of text. To adjust the position of the number and keep ident of the text use this css.
ol {
list-style: none;
counter-reset: step-counter;
padding-inline-start: 25px;
}
ol > li {
counter-increment: step-counter;
}
ol > li:before {
content: counter(step-counter)".";
display: inline-block;
position: absolute;
margin-left: -25px;
}
To keep your bullets also to the left
ul {
list-style: none;
padding-inline-start: 25px;
}
ul > li:before {
content: '\25cf';
position: absolute;
margin-left: -25px;
}