I got a problem with CSS list-style-image tag my list image is some what large, and the text getting behind it is pushed down to the lower part of the style tag, is there a fix to bit it back in the middle
it is now like this:
|
|
| here
and I want to be:
|
| here
|
Just increase the line-height of the li elements in question.
#iconlist li {
line-height: 2em;
}
Also, as keithjgrant suggested, I would use background-images instead. List-images are positioned rather inconsistently in different browsers. So use something like this:
#iconlist li {
padding-left: 22px;
background: url(20x20-icon.png) left center no-repeat;
line-height: 22px;
list-style: none;
}
Forget setting the list style image and use the following css...
ul#example li {
list-style-type: none;
}
/* create new marker */
ul#example li:before {
display: marker;
content: url("new_marker.png");
/* set the following to fit your needs */
vertical-align: 3px;
padding-left: 2px;
padding-right: 12px;
}
Note the vertical align style, set it to minus figures to push text upwards.
Source of answer.
Your question is a little unclear, but it sounds like you might need to look at background images rather than (or supplement to) list-style-images.
The only realistic way to achieve this is with background-image:
ul li {
background: transparent url(http://farm1.static.flickr.com/120/308863127_6eb1715f3b_m.jpg) 0 50% no-repeat;;
list-style-position: outside;
padding-left: 250px;
line-height: 160px; /* vertical height of image */
}
JS Fiddle demo.
This does, however, fail badly if the text of the li wraps to a second (or third) line.
Try vertical-align: middle; (css)
Related
Pretty simple question, but I am not sure if it is possible. I want to add an image to act as a bullet in all <h1> elements. I know I can achieve this by:
<span class='bullet'></span><h1>My H1 text here</h1>
with css:
.bullet{
background: url('bullet.png') no-repeat;
display:inline-block;
vertical-align: middle;
background-size:100%;
height:25px;
width:25px;
margin-right: 5px;
}
but is there an automatic way to do the same thing? I was thinking something like:
h1{
list-style-image: url('bullet.png');
}
but that only seems to work with <ul> elements. I really don't want to have to paste the <span> element everywhere before the <h1> element. Any ideas?
While you can use a :before pseudo-selector to add a "-" or "•" character in front of your element, it doesn't really make your element behave like a bullet point. Your element may look like a bullet point, but that's just a dirty hack, really, and should be avoided!
To make your element both (1) look like a bullet point and (2) behave like a bullet point, you should set the display of that element to list-item. Optionally, you can also set list-style-type (default : disc) and list-style-position (default : outside) attributes to modify the behavior / look-and-feel of your list item.
If your element spans multiple lines, list-style-position should be the default value outside if you want all of your lines to align to the right of your bullet point. In that case, however, it is possible you don't see your actual bullet point, as it would be to the left of the content of your element. If this happens, you can just add a left margin to move the element's content to the right, and your bullet point should show up.
EXAMPLE 1
h1 {
display: list-item; /* This has to be "list-item" */
margin-left : 1em; /* If you use default list-style-position 'outside', you may need this */
}
<h1>
Your H1 text should go here. If it consists of multiple
lines, the left alignment of all lines is the same.
</h1>
<h1>
Here's another item.
</h1>
EXAMPLE 2
h2 {
display: list-item; /* This has to be "list-item" */
list-style-type: square; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type */
list-style-position: inside; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position */
}
<h2>
Your H2 text should go here.
</h2>
<h2>
Note that, if you have multiple lines, only the first
line is aligned to the right of the bullet point when
using list-style-position 'inside'. Subsequent lines
are left aligned with the left of the bullet point.
</h2>
You could do something like this:
h1:before {
content:"• ";
}
See Fiddle :
http://jsfiddle.net/6kt8jhfo/6/
You can use pseudo-selector :before to add anything what you want before your tag.
h1:before {
content: "- "
}
<h1>My H1 text here</h1>
Give a class name to the paragraph or any element and apply the below code
(I have given class name as bullet):
.bullet::before {
content: '';
position: absolute;
bottom: 7px;
left: -10px;
width: 3px;
height: 3px;
background-color: #000;
border-radius: 50%;
}
Something like this should work
h1, h2, h3 {
background: url("the image link goes here") 0 center no-repeat;
padding-left: 15px; /* change this to fit your needs */
}
If you want to adjust dot size, color and position you can do this:
.bullet:before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
display: inline-block;
background-color: #29cf00;
vertical-align: middle;
}
list-style-type is reserved for ul only.
You can use <h1 class="bullet"> with pseudo-element :before.
The very simple way to create a bullet using the before css is to utilize the font family ... this way there is no need to include any graphics and etc.
here is the class code:
.SomeClass:before {
font-family: "Webdings";
content: "= ";
{
Nope, list-style and list-style-image are only for ul and ol tags you'll have to get back to your first method or make something with js
http://www.w3schools.com/css/css_list.asp
http://www.w3schools.com/cssref/pr_list-style-type.asp
Just use
<p>• </p>to create a dot in front of your word
I have a list with some elements. Simple list. I've coded a hover property on <li> tag to change his background colour to white. Simple behaviour.
My problem is: the height doesn't filled totally.
I've tried to reset margin and padding li{padding:0; margin:0;} but didn't work too.
This is the code: http://jsfiddle.net/ctvalex/jh3t5t1b/2/
Any help is welcomed
Just Change the display styling for
#bottom-menu ul li
to
display: inline-block;
so it'll be like that
#bottom-menu ul li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
line-height: 50px;
}
Check the Edited Example http://jsfiddle.net/jh3t5t1b/6/
I have spent a while trying to find out how to make text links sit horizontally on a navigation bar, but to no success.I am EXTREMELY new to coding so this is probably extremely easy to do, i am using html and CSS, i have tried just putting them on the same line. Also using:
#nav li a {
color: black;
display: inline;
list-style-type: none;
}
#nav li a {
color: black;
position: relative;
}
i have tried to find the answer on the site but i cant see one, so i thought i might as well just ask people. Thank you for reading.
You are targeting the wrong element, it should be
#nav li {
display: inline;
}
You were selecting a element, you need to target the li, a is an inline element by default, li renders one below the other, so to make them inline, we target li
I would suggest you to use
#nav li {
display: inline-block;
margin-left: -4px; /* If that white space matters to you */
}
As you will get same effect, but with some additional bonus like margins padding to space up your element. Alternatively, you can also use float: left; but you will need to clear your floats so stick with inline-block
So I have a <ul> that I need to style. I'm using +'s to style it. It looks like this:
+ abc
+ 123
+ hello
The problem I'm having is that I'm not able to center the +'s with the actual li's. As in, So the pluses are ever so slightly off, when I need them to vertically align with the li text. Anyone know what I'm doing wrong?
Here's a link to the fiddle.
CSS
ul {
list-style: none;
display: table-cell;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}
li:before {
content: "+";
padding-right: 5px;
vertical-align: middle;
display: inline;
padding-top: 0;
margin-bottom: .5em;
}
Edit
Okay, I didn't mean align the #content with the other ul. I meant vertically center the + with the abc.
vertical-align: text-bottom;
http://jsfiddle.net/2FZx6/4/
You don't want to have the + in the middle of your li, but on the same height as a lower-case letter. That's why you have to use text-bottom instead of middle. If you were to use letters with descenders (such as g or y) you would notice that the actual dots also aren't in the middle of the element/text, but on text-bottom or baseline.
(Actually, the default value baseline works pretty well.)
Resources
MDN: vertical-align
Without using a reset stylesheet such as Eric Meyers or Normalize.css your browser automatically adds default styles. In my case, chrome added 40px to your ULs.
I explicitly set the padding to 20px and it looks good, but I'd implement a reset stylesheet if you can to save headaches down the road.
JsFiddle
ul {
padding-left:20px;
margin:0;
}
You may have better luck just using a background image on your li instead of using the "+" - This way you can position the "+" (as a background image) however you'd like.
http://css.maxdesign.com.au/listutorial/master.htm
This method gives you a bit more fine tuning.
http://jsfiddle.net/2FZx6/9/
li:before { // add these bits
position: relative;
top: -.2em ; // fine tune this however you want
}
Might not work for everyone but for my situation I adjust accordingly by adding lineheight to the li (text) and the li:before (font awesome icon):
li {
/* li css */
line-height: 16px;
li:before {
/* li before css */
line-height: 12px;
}
Hope that helps someone else too!
Can I create button, use a background image that changes on hover and on active, and have the active state show an image that extends outside of the bounds of the anchor? Here's my sprite:
https://dl.dropbox.com/u/7737304/menu-sprite1.png
The top half of the sprite is 'hover', the bottom is 'active'. I don't anything below the solid bar to be a clickable link, and I don't want to set a width as the menu text will set on top and extend beyond the left and right edges of the image.
I've attempted to assign the background image to the parent li tag, which works for 'hover' but I can't make it work for 'active'.
Any ideas?
CSS
.navigation li:hover{
background: transparent url(../images/menu-sprite.png) center -86px no-repeat;
}
.navigation a{
color: #e8e8e8;
font-weight: bold;
text-transform: uppercase;
padding:0.5em 0.8em;
}
.navigation a:hover{
color: #fff;
}
.navigation a.active {
color: #fff;
}
Do you mean something like this ?
The anchor 'expands' when active, but doesn't change the flow, since it uses a negative margin to make it actually the same size as before.
So: add the amount of padding you want to expand the anchor, then add the same amount as a negative margin. (You do need the anchor to be a block or inline-block element, since otherwise it can't use margin)
No need for JavaScript with this method.
This is what I came up with: DEMO
It just puts the background image on the <li>. Not sure if this is exactly what you are looking for or not though.
This is a tough one to explain! What I did was to make the a tag clickable, extended the li with ::after to which I could apply the styles necessary to make it change, but not be click able.
Like I said, tough to explain but here is a demo: http://jsfiddle.net/cchana/SgH5C/
And here's some CSS that may help you:
.navigation li::after {
background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -49px no-repeat;
bottom: 0px;
content: '';
display: block;
height: 31px;
position: absolute;
width: 100%;
}
.navigation li:hover::after {
background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -130px no-repeat;
}