I have stumbled upon what I feel must be a bug, but it happens in all major browsers, even mobile ones.
Basically, instead of using default li bullets, I am using the :before pseudo-element with the following styling:
ul li {
margin: 0 0 0 30px;
}
ul li:before {
content: "\25cf";
font-family: "FontAwesome";
color: #969696;
font-size: 8px;
margin: 0 10px 0 -20px;
right: auto;
font-weight: normal;
font-style: normal;
text-decoration: none;
display: inline-block;
position: relative;
top: -3px;
}
This should indent the content of the li tag 30px and place the bullet character somewhere in the middle of the margin. I have found an instance where the first line of the li content actually invades slightly into the margin. Observe the following screenshot:
Now take a look at the raw markup:
The markup structure for these 4 bullets is pretty much the same. We have opening and closing li tags that completely wrap around the content. We have fully validated HTML throughout the page. The only difference between the broken li tags and the normal ones is that the normal ones have a line break between the opening li tag and the content. That's all.
What is going on here?
Here is a fiddle with this exact scenario summarized: http://jsfiddle.net/9b2929oc/2/
You should position the psuedo elements absolutely, not relative. This way the positioning of the pseudo element doesn't affect the parent element
ul li:before {
/* ... Your other styles ... */
position: absolute;
top: 6px;
}
By positioning them relatively and then using negative margin of course they'll affect the text position as seen in this example, because they're relative to their static position (which a negative margin changes). So if you move one using a negative margin the other will be effected.
It's not a browser bug, this is the way it's supposed to be
Related
I'm a newbie at CSS/HTML and I have a website assignment due in an hour's time and I can't seem to get the bullet points on my page to just be white (instead of the default black) without the alignment screwing up and appearing in places I don't want it to be like the navbar
Here's what is looks like normally
default bullet points
and here is the code normally
code for default bullet points
and here's what it looks like when I include this code (in the CSS) that I found on this Stack Overflow (Change bullets color of an HTML list without using span):
li {
list-style: none;
}
li:before {
/* For a round bullet */
content: '\2022';
/* For a square bullet */
/*content:'\25A0';*/
display: block;
position: relative;
max-width: 0;
max-height: 0;
left: -10px;
top: 0;
color: white;
font-size: 20px;
}
broken bullet points after copypasta from stack overflow
The problem with the code you copied and pasted is that it's modifying the position of the bullet with position: relative and the top and left properties. I'd recommend you used this code instead:
li::before {
content: "\2022";
color: white;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
Which doesn't modify the position of the bullet.
The code you copy-pasted is doing a lot of things that you probably don't yet understand.
list-style: none removes the default bullets completely.
li:before allows you to pretend there is another element inside the list item, before its content, and lets you style that pseudo-element.
So the code you copied is trying to manually create fake bullets instead of customizing the ones that already exist. This is what I'd call a CSS hack, it's not something you would do unless you're trying to achieve a very specific look that's impossible to get using normal means.
If all you're trying to do is replace the bullet icon, that can be done with the CSS property list-style-type.
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 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!
I just wonder where is this space between the end of the image and the end of the li's are coming from:
http://bluesys.ch/lussy/
its just a simple UL > li > img
spacing from hell http://bluesys.ch/lussy/spacingfromhell.jpg
code:
div#slider {
border: 5px solid #fff;
}
div#slider ul li {
border-bottom: 1px solid pink;
}
div#slider ul li img {
border-bottom: 1px solid green;
margin: 0;
}
note that all margins and paddings are set to 0 by my reset.css
can someone help me out? I colored the borders that you can see the spacing i speak of. I use firefox.
Try setting the line-height to 0 for those images and/or LI elements. Currently you have that set to 1.4 in the body, and the img will inherit that. A brief test of setting line-height: 0 in Firebug made the images stack flush.
If you want to get rid of the gaps, you could try:
li {
margin-bottom: 0;
padding-bottom: 0;
}
You may want a special class for those li elements tho, so that the CSS that gets applied doesn't do it to ALL your li elements on the site.
But, what's wrong w/ the gap? I kind of like it. Helps frame each image...
Images are inline elements just like text and by default they are positioned on the font base line leaving space for the ascender. There are different ways to stop that:
line-height: 0 (as suggested by Robusto)
display: block
vertical-align: bottom