Welcome to WebmasterWorld Guest from 35.175.200.4

Forum Moderators: not2easy

Message Too Old, No Replies

li:before not working

     
12:53 am on Mar 1, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ogletree is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 14, 2003
posts: 4319
votes: 42


I have a right column that I want to have specific css code. I have this set up.


.right-course {
margin-left:auto;
margin-right:auto;
width: 185px;
font-family: sans-serif;
}

ul.right-course {
list-style-type: none;
padding-left: 20px;

}

li.right-course {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
margin-top: 10px;
}


I want to add a awesome font to the list. If I do this I get it to work only problem is that it does it to all li on my website.


li:before {
position: absolute;
top: 0;
left: 0;
font-family: FontAwesome;
content: "\f00c";
color:#f16924;
}
}


I tried this and it did not work.


li.right-course:before {
position: absolute;
top: 0;
left: 0;
font-family: FontAwesome;
content: "\f00c";
color:#f16924;
}


What can I do to have the :before work only on this class?
2:53 am on Mar 1, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15754
votes: 827


Which element is the class "right-course" applied to in the HTML-- the ul or the li? I strongly suspect that what you're really aiming for is
ul.right-course {blahblah}
ul.right-course li {blahblah}
and then it would be
ul.right-course li:before {blahblah}

Putting things before a list-item is tricky, because there's all that hidden styling with padding and hanging indents and whatnot. Isn't there some way you can designate your content as a list-marker instead?

:: wandering off to look up what \f00c is ::

Oh, a Private Use Area. I kinda don't think I'd do that. Take a picture and set its size in CSS. Maybe a background-image would work better than a list-marker.

[edited by: lucy24 at 2:59 am (utc) on Mar 1, 2016]

2:57 am on Mar 1, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4392
votes: 311


Before is "psuedo state" something like hover and what it does is to enable the defined state before the element it is attached to. If you wanted a line of text before each <li class="right_course"> element, it would be added this way:
li.right-course::before


To give this group of <li> elements distinct properties, it needs to have its own class that is distinct from the class used where you don't want those properties.

For example, if you were to change this line in your css:
li.right-course:before
to
li .before

and change the html to
<li class="before">
then it would behave as you have defined it.
9:46 pm on Mar 1, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ogletree is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 14, 2003
posts: 4319
votes: 42


<div class="right-course">
<ul>
<li>Campaign Structure</li>
<li>Campaign Settings</li>
<li>Keyword Selection</li>
<li>Match Types</li>
<li>Ad copy writing</li>
</ul>
</div>
9:57 pm on Mar 1, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ogletree is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 14, 2003
posts: 4319
votes: 42


I got it to work but i'm sure the CSS and HTML extraneous code. What can I change to make it proper?

CSS

.right-course {
margin-left:auto;
margin-right:auto;
width: 185px;
font-family: sans-serif;
}

ul.right-course {

padding-left: 20px;

}

li.right-course {
list-style-type: none;
position: relative;
padding-left: 20px;
margin-bottom: 10px;
margin-top: 10px;
}

li.right-course:before {
position: absolute;
top: 0;
left: 0;
font-family: FontAwesome;
content: "\f00c";
color:#f16924;
}


HTML

<div class="right-course">
<ul>
<li class="right-course">Campaign Structure</li>
<li class="right-course">Campaign Settings</li>
<li class="right-course">Keyword Selection</li>
<li class="right-course">Match Types</li>
<li class="right-course">Ad copy writing</li>
</ul>
</div>
10:23 pm on Mar 1, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15754
votes: 827


<div class="right-course">
<ul>
<li>

Ah, option 3, which I hadn't even considered. So it's not just
.right-course
but
.right-course ul
and also
.right-course li

... and I have to say that assigning the same class name to two entirely different elements-- the containing div and then the individual list items-- is probably not going to yield the intended results in this situation. In particular, you're setting an explicit width on two different elements occupying two different levels of a hierarchy, which will be overkill at best. And margins on list-items can be hinky, especially on the left; you may need to work with padding instead.

Assigning the same classname-- any same classname-- to every single element within some larger group is almost always going to be wasted effort. That's what cascading is for: so you can say
div.right-course li
("all list items inside a div called right-course") and be done with it. Especially when the whole package is only going to occur once per page.

Why does there need to be a div.rightcourse containing a classless ul? Can't you proceed directly to ul.right-course?
10:50 pm on Mar 1, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ogletree is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 14, 2003
posts: 4319
votes: 42


It got this way because I don't know CSS very well. I got different things from websites and just played with it until it worked. It is currently working but is very ugly as you pointed out. I'm not sure what the proper way of doing this is.
11:51 pm on Mar 1, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15754
votes: 827


I'd do it like this:

Throw out the div. Make a
ul.classname (CSS)
ul class = "classname" (HTML)
and, in the CSS, give it all that stuff about position and size.

Then, make CSS for
ul.classname li
You don't need to say anything more about positioning, because list items will always fit inside their containing list. I recommend setting explicit values for two aspects of a list-item: padding-left and text-indent (some negative number). Experiment until it looks the way you want. If you don't specify, the browser will make something up, and this is subject to change.

Now, instead of the :before business, set something like
ul.classname {list-style: disc outside url("images/mypicture.png");}
where "disc" is just a fallback in case the image gets lost. Take a picture of your pretty symbol at an appropriate size; that's the list marker.

If you want to get fancier, it would instead be "list-style: none" along with
ul.classname li {background-image: url("images/mypicture.png"); background-position: top left; background-repeat: no-repeat;}
and, if you particularly need its size to vary depending on the user's preferred font size, define its width and height in ems.

not2easy will come along presently and correct my wording, because the foregoing was off the top of my head.
11:57 pm on Mar 1, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ogletree is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 14, 2003
posts: 4319
votes: 42


The whole point of this was to use Awesome Font instead of an image to reduce the number of server calls and reduce load time.