So I have
<ul>
<li>Hello</li>
</ul>
and
li {
list-style-image: url(../img/bullet.png); /* 13x13 px */
/* line-height: 13px; */
/* vertical-align: middle; */
padding-left: 5px;
}
which looks like
as you can see text and image element of <li> are not aligned vertically (image is higher than text), I tried applying line-height and vertical-align to it (commented out code), but it didn't even it out. Is there a way to achieve good alignment?
The padding will affect only whatever is inside the element—the text, in your case.
The only position adjustment property available is list-style-position, but the only permitted values are inherit, inside or outside. The most common practice is to use:
list-style: none;
and then apply the desired image as the <li>'s background
li {
/** the image will be vertically aligned in the center **/
background: url(../img/bullet.png) left center no-repeat;
/** move the text to the right **/
padding-left: 20px;
}
you can have
<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>
May define a img-tag or a background: url(..) for the li-tag instead of the "list-style-image"
When you only have one line per list item you can add some padding-bottom to the li element
I also needed to add "no-repeat" to the background property
HTML
<p>You can have</p>
<ul>
<li> <span>Hello</span></li>
</ul>
CSS
li {
list-style-image: url('dot.png');
}
li > span {
top:-3px; position:relative;
}
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'm trying to create my very own css menubar and I am learning a lot. Unfortunately I am stuck on this one piece and I can't figure out how to get around it. My menubar is to long so I use line breaks to wrap each menu element around but its not letting my menu to run across the menu bar. Can you tell me what I am missing here?
<div id="menucontainer">
<ol id="navlinks">
<li>COMPANY<br />OVERVIEW</li>
<li>CLIENTS<br />TESTIMONIALS</li>
<li>ACCREDITATION<br />SERVICES</li>
<li>LEGAL<br />SUPPORT</li>
<li>TRAINING</li>
<li>CONSULTING<br />SERVICES</li>
<li>FREE<br />POLICY CENTER</li>
<li>IN THE NEWS</li>
<li>STRATEGIC<br />PARTNERS</li>
</ol>
</div>
CSS Code:
/* We set the width and color of the background for a menu wrapper. */
#menucontainer{width: 1021px; height: 61px; background-color:#0C318C; margin: auto; padding-top:5px;}
/* We target the top of the order list and remove the list properties. */
#navlinks li {display: inline; list-style: none;}
/* This line sets the font style of the bullet menu */
ol{font-size: 12px; font-family: 'Tinos', serif;line-height: 18px;}
/* We target the li items with and without a hyper link and color the font white. */
li, li a {text-decoration: none; color: white;}
I put it up on JFiddle and you can find it here: http://jsfiddle.net/L4sTB/
Thanks,
Frank G.
Check this fiddle.
I have made changes to the following CSS rule.
#navlinks li {
display: inline-block; /* to display the menu items as blocks in same line */
list-style: none;
text-align: center; /* center align the text within the block */
width: 10%; /* set each block a width */
vertical-align: middle; /* align the contents to middle vertically */
}
You can set display:inline-block to your li elements and it will span the width of your nav bar: http://jsfiddle.net/shaunp/L4sTB/3/
Is this your desired effect?
The list should be inline-block. I added center align text and a border to each.
#navlinks li {display: inline-block; list-style: none;text-align:center;border: 1px solid white;}
I have made a basic navigation bar with four 'buttons' and I am using a background image as a divider. The problem I am having is when I create a :hover state, the background covers up the divider. How can I fix this so that the divider image always shows?
Here is the markup:
<div>
<ul class="main">
<li>Home</li>
<li><a class="divl" href="#">Item1</a></li>
<li><a class="divl" href="#">Item2</a></li>
<li><a class="divl" href="#">Item3</a></li>
</ul>
</div>
ul.main {
margin: 0;
padding: 0;
list-style: none;
width: 1000px;
background: url(grad.png) repeat-x;
overflow: hidden;}
ul.main li{
float: left;}
ul.main a {
padding: 0 3em;
line-height: 3em;
text-decoration: none;
display: block;
color: white;}
.divl {
background: url(a.png) repeat-y top left;}
ul.main a:hover,
ul.main a:focus{
background: rgba(0,200,0,0.1);}
Thank you.
You can apply the divider background-image to the li elements instead:
ul.main li {
float: left;
background: url(http://dummyimage.com/1x100/f0f/fff) repeat-y top right;
}
See: http://jsfiddle.net/825cK/
How about you take the divider outside of the background image and place a div inside the list item? Then you can style the divider as you like without the :hover background getting in the way.
Something like:
<li>link here<div class="divider"></div></li>
-or-
Put the divider in the list item as a background.
In my opinion, you have a more fundamental problem with the overall structure of your backgrounds. If the user magnifies the text on their browser, the text will overlap with your borders on your background image no matter what way you spin it.
It's hard because I can't see what the background is supposed to be, but if your background just a vertical linear gradient, you would probably be better off slicing it up and making it as a single background for each List Item instead of the entire Unordered List.
This will allow you the flexibility to fix the problem you initially posted with use of margins, and also make your job much easier if you ever need to add another 'button.'
Pretty basic question - I can't seem to vertically align an icon inside of a list.
My css looks likes this:
#top_content img {
float: left;
}
#top_content ul {
float: right;
}
#top_content li img {
vertical-align: sub;
}
#top_content li {
list-style-type: none;
display: inline;
}
#top_content li a {
text-decoration: none;
color: #7aa807;
}
My HTML looks like this:
<div id="top_content">
<ul>
<li><img src="../img/mail_ico.png" alt="#"><strong>(1 New)</strong></li>
</ul>
</div>
Any ideas? What am I doing wrong here?
Try adding line-height to it:
#top_content img {
float: left;
line-height:20px; /* adjust accordingly */
}
Expecting vertical-align to work properly :) In your case would it be possible to set mail_ico.png as a background image on the <a>? That's how I handle cases where the vertical position of an image is important in a design.
Don't float the image. It will no longer be inline behavior, that is what is causing your problem.
float: left is basicly canceling out the effect of vertical-align. vertical-align c ontrols the alignment of an in-line element to other in-line elements on the same text line. float: left makes the img a block element, on which vertical-align has no effect.
I have the following html
<div id="menu">
<ul class="horizMenu">
<li id="active">About</li>
<li>Archive</li>
<li>Contact</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
and in the css I have
.horizMenu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
#menu
{
text-align:center;
margin-bottom:10px;
letter-spacing:7px;
}
#menu a
{
color:red;
}
#menu a:hover
{
color:blue;
font-weight:bold;
}
Everything works pretty well, except that when I mouse over the links, the color changes and it becomes bold, which is what i want, but it also causes all of the other li elements to move slightly and then move back when you mouse-off. Is there an easy way to stop this from happening?
Not sure who -1ed, but Mauro's answer is essentially correct: you can't trivially make an item with automatic width depend on what the width would have been if the font inside weren't bold.
However, a 'float: left;' rule will also be necessary as you can't set the width of an inline-display element. And 'em' would probably be a better unit, to make the required width dependent on the font size in the buttons.
Add a width to the list item elements which is bigger than the bolded width of the items, this way they wont be pushed out of line.
#menu li
{
width: 150px;
}
Alternatively you could try a monospace font, which wont be affected by the bold/unbold on hover.
try using this
menutext {
line-height: 10px; /* or whatever */
}
and also, to set the width of a inline element, use display: inline-block;
float:left might be not so friendly, if you do use it and it messes things up use clear:both
I've just had the same problem. A solution I thought of, and might use from now on, is to use text-shadow instead.
a:hover {
color:blue;
text-shadow:0px 0px 1px blue;
}
The text will look a little blur though. If you set the 3rd parameter to 0, text won't be blur but will look just a little bit bolder.
I'd say this is better than dealing with width-dynamic texts.