My HTML first:
<ul class="moreLinks" >
<div>More from Travelandleisure.com</div>
<li><a rel="nofollow" href="">xyz1</a></li>
<li><a rel="nofollow" href="">xyz1</a></li>
<li><a rel="nofollow" href="">xyz1</a></li>
</ul>
I know that I can apply font-size on li very small so that disc look correct to me and then apply css to "a" inside li. But I do not know why this is not working on the site I am working. I cannot control the html directly.
I saw that when I make this:
.farParentDiv ul li {
list-style: disc inside none;
}
TO this:
.farParentDiv ul li {
list-style-type: disc;
font-size:10px;
}
and now after applying font-size to "a", it works in Firebug. but from my css file. I tried a lot but tired. I can overwrite the above this in css file but cannot change it directly as I did in firebug. Please write what can be the problem?
I used to put dots (.) just before link inside and then apply css on that to control the disc size, but as I said, I cannot control the HTML.
This question is related to
css
The answer is
I think by using the content"."; The dot becomes too squared if made too big, thus I believe that this is a better solution, here you can decide the size of the "disc" without affecting the font size.
li {_x000D_
list-style: none;_x000D_
display: list-item;_x000D_
margin-left: 50px;_x000D_
}_x000D_
_x000D_
li:before {_x000D_
content: "";_x000D_
border: 5px #000 solid !important;_x000D_
border-radius: 50px;_x000D_
margin-top: 5px;_x000D_
margin-left: -20px;_x000D_
position: absolute;_x000D_
}<h2>Look at these examples!</h2>_x000D_
<li>This is an example</li>_x000D_
<li>This is another example</li>You edit the size of the disk by editing the size of the border px. and you can adjust the distance to the text by how much - margin left you give it. As well as adjust the y position by editing the margin top.
You can also use 2D transform. It is illustrated in the snippet below with a list being scaled by 25%.
Nota: Bootstrap is used here for the sole purpose of layouting the demo (before/after effect).
ul#before {_x000D_
}_x000D_
_x000D_
ul#after {_x000D_
transform: scale(1.25);_x000D_
}_x000D_
_x000D_
div.container, div.row {_x000D_
padding: 20px;_x000D_
}_x000D_
_x000D_
ul {_x000D_
border: 6px solid #000000;_x000D_
}<!-- Bootstrap CSS -->_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">_x000D_
_x000D_
<!-- Bootstrap theme -->_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">_x000D_
_x000D_
<!-- HTML -->_x000D_
<div class="container">_x000D_
<div class="row">_x000D_
<div class="col-xs-5">_x000D_
Before_x000D_
</div>_x000D_
<div class="col-xs-5 col-xs-offset-1">_x000D_
After (scale 25%)_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<div class="row">_x000D_
<div class="col-xs-5">_x000D_
<ul id="before">_x000D_
<li>Lorem ipsum dolor sit amet...</li>_x000D_
<li>In vel ante vel est accumsan...</li>_x000D_
<li>In elementum libero vel...</li>_x000D_
<li>Nam ut ante a sem mattis...</li>_x000D_
<li>Curabitur fermentum nisl...</li>_x000D_
<li>Praesent vel risus ultrices...</li>_x000D_
</ul>_x000D_
</div>_x000D_
<div class="col-xs-5 col-xs-offset-1">_x000D_
<ul id="after">_x000D_
<li>Lorem ipsum dolor sit amet...</li>_x000D_
<li>In vel ante vel est accumsan...</li>_x000D_
<li>In elementum libero vel...</li>_x000D_
<li>Nam ut ante a sem mattis...</li>_x000D_
<li>Curabitur fermentum nisl...</li>_x000D_
<li>Praesent vel risus ultrices...</li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<!-- JQuery -->_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<!-- Bootstrap JS -->_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>Reference:
If you choose to use inline SVG to render your bullets, you can use width and height properties to control their size:
ul {_x000D_
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='1' /></svg>");_x000D_
}_x000D_
_x000D_
.x {_x000D_
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='0.5' /></svg>");_x000D_
}_x000D_
_x000D_
.x_alternative {_x000D_
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2.2 -2.4 4 4'><circle r='1' /></svg>");_x000D_
}<ul>_x000D_
<li>foo</li>_x000D_
<li>bar</li>_x000D_
<li>baz</li>_x000D_
</ul>_x000D_
_x000D_
<ul class="x">_x000D_
<li>foo</li>_x000D_
<li>bar</li>_x000D_
<li>baz</li>_x000D_
</ul>_x000D_
_x000D_
<ul class="x_alternative">_x000D_
<li>foo</li>_x000D_
<li>bar</li>_x000D_
<li>baz</li>_x000D_
</ul>Click here for an easy explanation of the viewBox.
I am buliding up on Kolja's answer, to explain how viewBox works
The viewBox is a coordinate system.
Syntax: viewBox="posX posY width height"
viewBox="0 0 4 4" will create this coordinate system:
The yellow area is the visible area.
So if you like to center something in it, then you need to use viewBox='-2 -2 4 4'
I know it looks completly retarded and I also don't understand why they designed it this way...
ul {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2 -2 4 4'><circle r='1' /></svg>");
}
.x {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2 -2 4 4'><circle r='.5' /></svg>");
}
.y {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-3 -2 4 4'><circle r='.5' /></svg>");
}
.z {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-3.5 -2 4 4'><circle r='.5' /></svg>");
}Centered Circle (viewBox Method) [viewBox='-2 -2 4 4', circle r='1']:
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Decrease Circle Radius [viewBox='-2 -2 4 4', circle r='.5']:
<ul class="x">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Move Circle Closer to Text [viewBox='-3 -2 4 4', circle r='.5']:
<ul class="y">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
...even closer (use float values) [viewBox='-3.5 -2 4 4', circle r='.5']:
<ul class="z">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>But there is a much easier method, you can just use the circles cx and cy attributes.
.centered {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100'><circle cx='50%' cy='50%' r='20' /></svg>");
}
.x {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100'><circle cx='50%' cy='50%' r='10' /></svg>");
}Centered Circle (cx/xy) Radius 20 [viewBox='0 0 100 100', circle cx='50%' cy='50%' r='20']:
<ul class="centered_a">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Centered Circle (cx/xy) Radius 10 [viewBox='0 0 100 100', circle cx='50%' cy='50%' r='10']:
<ul class="x">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>I'm surprised that no one has mentioned the list-style-image property
ul {
list-style-image: url('images/ico-list-bullet.png');
}
Since I don't know how to control only the list marker size with CSS and no one's offered this yet, you can use :before content to generate the bullets:
li {
list-style: none;
font-size: 20px;
}
li:before {
content:"·";
font-size:120px;
vertical-align:middle;
line-height:20px;
}
Demo: http://jsfiddle.net/4wDL5/
The markers are limited to appearing "inside" with this particular CSS, although you could change it. It's definitely not the best option (browser must support generated content, so no IE6 or 7), but it might be the easiest - plus you can choose any character you want for the marker.
If you go the image route, see list-style-image.
Easiest way for me is to use Unicode Characters and then style them with span tags. I'm going to use inline css for the sake of the example, but you can do it whatever way you prefer.
eg. When I want to use a square bullet and control its color and size:
<li style="list-style:none;"><a href=""><span style="font-size:x-small;vertical-align:middle;">█</span> HOME</a></li>
You can find lots of unicode bullets here:
I do this because linking images for bullets seems a little unnecessary to me.
Apart from using custom images for bullets, you can also style the ul or li elements one way and then style the contents differently, as seen here.
The benefit is the lack of images for one thing, and also the added control. The disadvantage is that it tends to involve non-semantic markup, except in this case where the anchors are required already.
Instead of using position: absolute, text-indent can be used to solve the "inside" problem:
li {
list-style: inherit;
margin: 0 0 4px 9px;
text-indent: -9px;
}
li:before {
content: "· ";
}
In modern browsers you can use the ::marker CSS pseudo-element like this:
.farParentDiv ul li::marker {
font-size: 0.8em;
}
For browser support, please refer to: Can I Use ::marker pseudo-element
try to use diffrent font-size for li and a
.farParentDiv ul li {
list-style-type: disc;
font-size:20px;
}
.farParentDiv ul li a {
font-size:10px;
}
this saved me from using images
Source: Stackoverflow.com