I have a Bootstrap list-group that I've bulleted with icons. I'm trying to remove the very-first icon from the list-group. How can I do this? Here is my code:
<ul class="list-group" id="vacationList">
<li class="list-group-item text-center" id="vacationListTitle">Our in-home pet care includes the following care treatment:</li>
<li class="list-group-item">All the love, attention, kissing and scracthing your pet deserves</li>
<li class="list-group-item">Walk, exercise, playtime or visit</li>
<li class="list-group-item">Food, treats and fresh water as needed</li>
<li class="list-group-item">Trash and pet waste removal</li>
<li class="list-group-item">The administration of medicine</li>
<li class="list-group-item">Gathering of of all mail</li>
<li class="list-group-item">Watering of all plants and garden</li>
<li class="list-group-item">Report card including the time of the visit and details of the pet care experience</li>
<li class="list-group-item">In additional we are prepared to accomodate any other unlisted and reasonable needs</li>
<li class="list-group-item">$65 includes overnight stay from 8:00 pm until 7:00 am and 1 late afternoon visit. Includes care for 2 pets ($3 per additional pet)</li>
</ul>
#vacationListTitle {
background-color:map-get($colorMap, orangeColor) !important;
font-family:$headerFont;
font-size:1.3em;
content:none !important;
padding-left:0px !important;
}
#vacationList {
margin:0 auto;
border-radius:5px;
li {
padding-left:30px;
}
li:nth-child(odd) {
background-color:#e5e5e5;
}
li:before {
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 9px;
float: left;
margin-top: 4px;
margin-left: -21px;
color: #555;
}
}
The list item with the class name vacationListTitle is the one I wish to delete the icon from. Any thoughts?
Thank you!
You can do this with the display property, targetting the ::before pseudo-element specifically:
#vacationListTitle::before {
display: none;
}
you can remove the content of the first before li of the vacationList
#vacationList {
.....
.....
.....
li:first-of-type:before {
content: "";
}
}
Or you can use the id #vacationListTitle directly
#vacationListTitle:before {
content: "";
}
See demo here
Related
This HTML list (ordered but my special order),
<ul class="custom">
<li value="II">Alpha</li>
<li value="III">Beta</li>
<li value="☸" >Gamma</li>
<li value="MXX">Delta</li>
</ul>
With CSS
.custom { list-style: none; }
.custom li:before {
content: attr(value) ". ";
}
Shows the list, but I not see how to align "numbers" as in usual list.
See the point-align problem at https://jsfiddle.net/0yb7aee8/
In default list the number are in the ul/ols padding.
You can make st. similar like this.
.listaEspecial {
list-style: none;
list-style-position: outside;
padding-left: 0;
margin-left: 0;
}
.listaEspecial li:before {
content: attr(value) ". ";
text-align: right;
display: inline-block;
width: 45px;
padding-right: 10px;
}
Build-in list:
<ul class="listaEspecial">
<li value="II">Alpha</li>
<li value="III">Beta</li>
<li value="☸" >Gamma</li>
<li value="MXX">Delta</li>
</ul>
<hr/>
Standard list (better spacing and point-align):
<ol type="I" start="2">
<li>Alpha</li>
<li>Beta</li>
<li value="100000" >Gamma</li>
<li>Delta</li>
</ol>
The ul/ols padding is 40px, I used 55px (45px width + 10px padding for :before because of longer number.
Look that in default lists there is a problem with longer number too, 40px is too short for gamma and delta items.
I have been asked to "fix" a client's old website which was written in 2011, by a design team that was clearly struggling to understand the then-new HTML5+CSS. There is a lot wrong with this code, and most of it I've been able to fix, stuff like using
<p> </p>
for line breaks. I'm not even kidding.
Anyway, one of the things I have been asked to do is extend the website's text container and menu, and stretch out the menu's actual text to fit the new width, which has gone fine. However, I'm having some trouble with padding out the menu text. I did a search through the forums for some advice, and tried out the style code suggested, but it seems to move the menu text out of the area of menu.jpg where it needs to be.
CSS (this is the client's, so yell at them)
#header_menu_container
/* This is verbatim from the code I am working with. I seriously have NO IDEA why this selector even exists. */
{
}
#header_menu
{
margin: 0;
display: inline-block;
list-style: none;
font-size: 15px;
}
/* header menu colour */
#header_menu li a {
color: #516a82;
}
/* menu hover colour */
#header_menu li a:hover{
color: #b55239;
text-decoration: none;
}
.no_submenu, .has_submenu
{
display: block;
float: left;
position: relative;
}
.no_submenu a, .has_submenu span{
display: block;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
}
.no_submenu a:hover, .has_submenu span:hover{
color: #b55239;
}
.has_submenu span{
cursor: pointer;
_cursor: hand;
}
.is_submenu{
position: absolute;
left: -10px;
top: 32px;
background: #dfd7c5;
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
}
.is_submenu li a{
display: block;
text-align: left;
padding-left: 10px;
width: 122px;
padding-right: 10px;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
pading-top: 10px;
padding-bottom: 10px;
line-height: 18px;
}
.is_submenu li a:hover{
color: #b55239;
}
HTML (based on client's, with a bit of my modification)
<ul id="header_menu">
<li class="no_submenu" style="width: 63px;">
<b>Home</b>
</li>
<li class="has_submenu" id="who-we-are">
<b><span style="width: 103px;">Who We Are</span></b>
<ul class="is_submenu" style="display: none;">
<li>
<b>Janyce Lastman</b>
</li>
<li>
<b>Ziny Kirshenbaum</b>
</li>
<li>
<b>Tutors</b>
</li>
</ul>
</li>
<li class="has_submenu" id="services"><span style="width: 73px;"><b>Services</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Consultant To Schools</b>
</li>
<li>
<b>Education Consulting And Case Management</b>
</li>
<li>
<b>Educational Assessments</b>
</li>
<li>
<b>School Placement Consultation</b>
</li>
<li>
<b>Seminars And Workshops</b>
</li>
<li>
<b>Test Tips Support</b>
</li>
<li>
<b>Tutoring</b>
</li>
</ul>
</li>
<li class="has_submenu" id="media-and-press">
<span style="width: 113px;"><b>Media & Press</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>In the Press</b>
</li>
<li>
<b>Book Reviews</b>
</li>
<li>
<b>Selected Articles</b>
</li>
<li>
<b>Interesting Links</b>
</li>
</ul>
</li>
<li class="no_submenu" style="width: 53px;">
<b>FAQ</b>
</li>
<li class="has_submenu" id="testimonials"><span style="width: 103px;"><b>Testimonials</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Testimonials for TTG Tutors</b>
</li>
<li>
<b>Testimonials for Janyce Lastman</b>
</li>
</ul>
</li>
<li class="has_submenu" id="contact-us">
<span style="width: 70px;"><b>Contact</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Contact Info</b>
</li>
<li>
<b>Employment Opportunities</b>
</li>
</ul>
</li>
</ul>
</div>
There's a display call inside a class selector, which is likely part of the issue, but my gut feeling tells me that this needs someone with more expertise to dissect everything wrong with it.
It's one thing to figure out what's wrong with your own code, and another to try and analyze what's wrong with someone else's. Any advice would be greatly appreciated :)
So looking back over the code again, I think I've figured out the problem.
Instead of putting padding in the CSS, the original authors put a numerical width in a style tag in the HTML for every single menu, e.g.
<span style="width: 73px;"><b>Services</b></span>
Idiots.
I'm going to try and write something similar into the stylesheet properly.
Very basic CSS issue as I can't get the current page to look different in menu. Any suggestion greatly appreciated!
Here is the genesis function
//* Add My New Menu
function my_new_menu() {
echo '<ul class="menu gn responsive-menu">
<li class="menu-item"> New Joke Book!</li>
<li class="menu-item"> Kids Jokes </li>
<li class="menu-item"><a href="/animal-jokes/"> Animal Jokes /a></li>
<li class="menu-item"> Zoo Jokes </li>
<li class="menu-item"> Contest </li>
</ul>';
}
add_action( 'genesis_header_right', 'my_new_menu' );
Here is the CSS
.gn a {
border: 1px solid transparent;
border-radius: 3px;
color: #438ed9;
display: block;
font-weight: 400;
height: auto;
line-height: 1;
margin-top: 0.2rem;
padding: 0.8rem 1rem;
position: relative;
text-decoration: none;
}
.gn a:hover,
.gn .current-menu-item > a,
.gn .sub-menu .current-menu-item > a:hover {
color: #fff;
background-color: #009900;
}
The easiest solution is to add your ".current" class to the corresponding "li" item.
So, for example if you are on the "kids-joke-book" page your "ul" should look like this:
<ul class="menu gn responsive-menu">
<li class="menu-item current"> New Joke Book! </li>
......
</ul>
You should do this method on every single subpage of your site where you use this menu, and add the "current" class to the correct menu item.
("current" class is an example name, it has the styles what you would like to add to the right menu item.)
When trying to add an box with content inside it on a menu on a hover "drop down menu", it does something like this:
(source: gyazo.com)
I want the drop down to popup when I hover on the categories menu item.
This is the code I used for it:
<div class="secondheader">
<div class="container">
<div class="span12">
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories </li>
<li>Buy</li>
<li>Sell</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
</ul>
</div>
</div>
</div>
</div>
The CSS:
.secondheader {
background-image: url("../img/second.png");
width: 100%;
height: 66px;
border-bottom: solid 6px #f0e8ce;
}
.nav6 {
list-style: none;
font-family: 'Dosis', sans-serif;
float: left
font-size: 20px;
margin-top: 13px;
margin-left: -35px;
}
.nav6 li {
display: inline;
margin: 0px;
font-size: 18px;
font-family: 'Dosis', sans-serif;
float: left;
margin-top: 10px;
}
.nav6 a {
color: #7d7253;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410f;
text-decoration: none;
}
I've tried using tutorials but I don't really understand on how to make the same thing for my layout I mean it has different ways and classes.
Do you want something like http://jsfiddle.net/b76Qc/?
Edit:
In your case the submenu is horizontal because you use descendant selectors instead of child selectors:
replace .nav6 li with .nav6>li and .nav6 li ul with .nav6>li>ul
See my jsfiddle if you want the complete code.
Edit 2:
If you want each element to have a different background,
<li class="dropdown1">Categories
<ul>
<li style="background:red">Buy</li>
<li style="background:blue">Sell</li>
<li style="background:green">Forums</li>
...
</ul>
</li>
But can you provide a link to your site instead of images? The square shown in http://gyazo.com/35835f003d0d8b776248196632cc1d4a.png is weird, but I can't know what's happening just with images...
Edit 3:
You have to change
.nav6 a {
color: #7D7253;
padding: 20px;
}
into
.nav6>li>a {
padding: 20px;
}
.nav6 a {
color: #7D7253;
}
And
.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410F;
text-decoration: none;
}
into
.nav6 a:hover {
color: #53410F;
text-decoration: none;
}
.nav6 > li > a:hover {
background-image: url("../img/hoverbg.png");
}
Edit 4:
Sorry I didn't explain why I was telling you to use selectors with >, I thought you knew it.
Your html is like this:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
</ul>
</li>
</ul>
If you use .nav6 a, the style will be applied to all <a> inside .nav6. That's a descendant selector.
Then, this will be applied both to menu's links and submenu's links:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
...
</ul>
</li>
</ul>
But if you use a child selector like .nav6>li>a, the style is applied only to the links which are childs of a <li> which is a child of .nav6 (only menu's links). This way we can set which styles we want to apply to all links and which to menu's links:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
...
</ul>
</li>
</ul>
Edit 5:
To fix the problem with backgrounds,
change
.nav6 a:hover {
color: #53410F;
text-decoration: none;
}
to
.nav6>li:hover>a, .nav6 .dropdown1 li:hover>a {
color: #53410F;
text-decoration: none;
}
and
.nav6 > li > a:hover
background-image: url("../img/hoverbg.png");
}
to
.nav6>li:hover>a {
background-image: url("../img/hoverbg.png");
}
To show you how little code is actualy required to make this work i set up a small example here: http://jsfiddle.net/fS5WV/
I put the explanations in the css.
The key lies in nesting the menu's properly, and giving the submenus a position absolute to prevent them from pushing the content down.
I hope it makes sense. Feel free to ask if you need further explanation.
Pretty simple nut I'm trying to crack. I'm doing image rollovers with CSS only. When I plugged in my a href link, it just does not work. By not work I mean, it does not act like it's a link and as a result you cannon click through to the page. Figuring it has something to do with the <li> but I can't figure out what. Here's my HTML and CSS:
CSS
ul.navigation,
ul.navigation ul {
margin: 25px 0 0 0;
}
ul.navigation li {
list-style-type: none;
margin:15px;
}
.AboutUsNav{
display: block;
width: 159px;
height: 54px;
background: url('../images/N_About_Us.png') bottom;
text-indent: -99999px;
}
.AboutUsNav:hover {
background-position: 0 0;
}
HTML
<div>
<ul class="navigation">
<li class="AboutUsNav">About Phin & Phebes Ice Cream</li>
<li class="FlavorsNav">Ice Cream Flavors</li>
<li class="WheretoBuyNav">Where to Buy Our Ice Cream</li>
<li class="WholesaleNav">Wholesale Orders Ice Cream</li>
<li class="ContactUsNav">Contact Phin & Phebes Ice Cream</li>
<li>about</li>
</ul>
</div>
Your .AboutUsNav has text-indent: -99999px;, pulling the a outside of the clickable viewport.
You probably want to put the negative text-indent on the a itself, and then set the a element to display: block; width: 100%; height: 100%, depending on your circumstances.
don't apply the text-indent and background to the list - do it to the link instead.
Example:
<div id="main_nav">
<li class="home">
Home
</li>
<li class="news">
News
</li>
</div>
CSS:
#main_nav a {
background-image:url();
}
#main_nav .home a {
width: 82px;
background-position: 0px 0px;
}
#main_nav .news a {
width: 85px;
background-position: 82px 0px;
}
thank you for your help. I tried the approach you both recommended. I think this definitely works under certain circumstances. For me, my background image just wasn't showing up but the links were working.
I ended up solving this problem by leaving the CSS the same but changing the HTML markup as so:
<div>
<ul class="navigation">
<li><a class="AboutUsNav" href="/about">About Phin & Phebes Ice Cream</a></li>
<li><a class="FlavorsNav" href="/flavors">Phin & Phebes Flavors</a></li>
<li><a class="WheretoBuyNav" href="/buy">Where to Buy Phin & Phebes Ice Cream</a></li>
<li><a class="WholesaleNav" href="/wholesale">Wholesale Orders Ice Creamf</a></li>
<li><a class="ContactUsNav" href="/contact">Contact Phin & Phebes Ice Cream</a></li>
</ul>
I was working off this demo, which didn't include an unordered list: http://kyleschaeffer.com/best-practices/pure-css-image-hover/