I have this html code
<ul>
<div id="consolidation-checkboxes-container" class="consolidation-checkboxes container" style="height: 104px;">
<a href="" class="consolidation-link" target="_blank">
<li>one</li>
</a>
<a href="" class="consolidation-link" target="_blank">
<li>two</li>
</a>
<a href="" class="consolidation-link bordered" target="_blank">
<li>three</li>
</a>
<a href="" class="consolidation-link" target="_blank">
<li>four</li>
</a>
<a href="" class="consolidation-link" target="_blank">
<li>five</li></a>
<a href="" class="consolidation-link" target="_blank">
<li>six</li>
</a>
<a href="" class="consolidation-link" target="_blank">
<li>seven</li>
</a>
<a href="" class="consolidation-link" target="_blank">
<li>eight</li>
</a>
</div>
</ul>
I would like the seventh li not have bullet.Is this possible to be done with css, because I am not allowed to change the html
If your html is the one you provide you can use the following code:
ul div a:nth-child(7) li {
list-style-type: none;
}
<ul>
<div id="consolidation-checkboxes-container" class="consolidation-checkboxes container" style="height: 104px;">
<a href="" class="consolidation-link" target="_blank">
<li>one</li>
</a>
<a href="" class="consolidation-link" target="_blank">
<li>two</li>
</a>
<a href="" class="consolidation-link bordered" target="_blank">
<li>three</li>
</a>
<a href="" class="consolidation-link" target="_blank">
<li>four</li>
</a>
<a href="" class="consolidation-link" target="_blank">
<li>five</li>
</a>
<a href="" class="consolidation-link" target="_blank">
<li>six</li>
</a>
<a href="" class="consolidation-link" target="_blank">
<li>seven</li>
</a>
<a href="" class="consolidation-link" target="_blank">
<li>eight</li>
</a>
</div>
</ul>
Additional as mention in comments ul element can only contain zero or more li elements, eventually mixed with ol and ul elements. So you can change your html mark up to be valid like:
ul li:nth-child(7) {
list-style-type: none;
}
<ul>
<li>one
</li>
<li>two
</li>
<li>three
</li>
<li>four
</li>
<li>five
</li>
<li>six
</li>
<li>seven
</li>
<li>eight
</li>
</ul>
you can also do like this to exactly catch the nth-child..
ul > div > a:nth-child(7) > li {
list-style-type: none;
}
Related
The Code:
<ul class="site-nav list--inline " id="SiteNav">
<li class="site-nav--active">
<a href="/" class="site-nav__link>
<span class="site-nav__label">HOME</span>
</a>
</li>
**<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">ORDER NOW</span>
</a>
</li>**
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">TRACK ORDER</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">HELP CENTER</span>
</a>
</li>
</ul>
I want to target the SECOND span tag in the list with class: site-nav__label using pure CSS.(nth-child, second-of-type etc.)
I cannot add ids or classes to this span tag.
Help will be greatly appreciated.
For select the second li try with
#SiteNav li:nth-of-type(2)
and then for select the span of second li add span after:
#SiteNav li:nth-of-type(2) span
Because you want inside ul tag, I used ul.site-nav for ul tag with class site-nav
ul.site-nav li:nth-of-type(2) a > span {
border: 3px solid red;
}
<ul class="site-nav list--inline " id="SiteNav">
<li class="site-nav--active">
<a href="/" class="site-nav__link>
<span class="site-nav__label">HOME</span>
</a>
</li>
**<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">ORDER NOW</span>
</a>
</li>**
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">TRACK ORDER</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">HELP CENTER</span>
</a>
</li>
</ul>
To Target the span use a combination of nth-of-type and child combinators
#SiteNav > li:nth-of-type(2) > a > span {
font-weight:bold;
color:red;
}
/*Or Target the span class*/
#SiteNav > li:nth-of-type(2) .site-nav__label {
font-style:italic;
}
<ul class="site-nav list--inline " id="SiteNav">
<li class="site-nav--active">
<!-- Fixed Missing closing " -->
<a href="/" class="site-nav__link">
<span class="site-nav__label">HOME</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">ORDER NOW</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">TRACK ORDER</span>
</a>
</li>
<li>
<a href="/" class="site-nav__link">
<span class="site-nav__label">HELP CENTER</span>
</a>
</li>
</ul>
For a good article on nth-child (and nth-of-type) see https://css-tricks.com/useful-nth-child-recipies/
When I try to move the mouse over the drop-down submenu form the main drop down menu the main drop down menu disappears and the next drop-down (if there is drop down items) menu item is shown. Maybe there is something wrong with the CSS code. I tried using display: inline-block; as others have suggested but it is still not working.
CSS code:
.gva-navigation > ul > li {
position: relative;
z-index: 100;
}
.gva-navigation > ul > li > ul {
position: absolute;
padding: 0 1000em; /* trick from css-tricks comments */
margin: 0 -1000em; /* trick from css-tricks comments */
}
.gva-navigation > ul > li:hover > ul {
position: absolute;
display: none;
left: 0;
}
.gva-navigation > ul > li > ul > li {
position: absolute;
display: inline-block;
left: 0;
}
.gva-navigation > ul > li > ul > li > ul {
position: absolute;
}
Html Code:
<div class="gva-navigation">
<ul class="clearfix gva_menu gva_menu_main">
<li class="menu-item menu-item--expanded">
<a target="_self" href="#">
Departments <span class="icaret nav-plus fa fa-angle-down"></span> </a>
<ul class="menu sub-menu" style="margin-top: -30px;">
<li class="menu-item">
</li>
<li class="menu-item">
<a target="" href="en/Economics.html">
ECONOMICS/ISLAMIC ECONOMICS</a>
</li>
<li class="menu-item">
<a target="" href="en/Finance.html">
FINANCE/ISLAMIC FINANCE</a>
</li>
<li class="menu-item">
<li class="menu-item menu-item--expanded">
<a target="" href="en/Training.html">
TRAINING </a>
</li>
<li class="menu-item mune-item--expanded">
<a target="" href="en/Information_Center.html">
INFORMATION CENTER </a>
</li>
<li class="menu-item mune-item--expanded">
<a target="" href="en/JOURNAL_OF_NEW_ECONOMICS.html">
JOURNAL OF NEW ECONOMICS </a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded">
<a target="" href="#">
Teaching & Performance <span class="icaret nav-plus fa fa-angle-down"></span></a>
<ul class="menu sub-menu" style="margin-top: -30px;">
<li class="menu-item">
<a target="" href="en/Teaching_Approaches.html">
Teaching Approaches</a>
</li>
<li class="menu-item">
<a target="" href="en/Midway_Approach.html">
Midway Approach</a>
<li class="menu-item">
<a target="" href="en/Graduates_Profile.html">
Graduates Profile</a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded">
<a target="_self" href="#">
Admissions <span class="icaret nav-plus fa fa-angle-down"></span> </a>
<ul class="menu sub-menu" style="margin-top: -30px;">
<li class="menu-item">
<a target="" href="en/students.html">
Admission Requirements <span class="icaret nav-plus fa fa-angle-down"></span></a>
<ul class="menu sub-menu">
<li class="menu-item">
<a target="" href="en/3_Tracks_for_BA_Holders.html">
3 Tracks for BA Holders</a>
</li>
<li class="menu-item">
<a target="" href="en/Language_Requirements.html">
Language Requirements</a>
</li>
<li class="menu-item">
<a target="" href="en/Grades.html">
Grades</a>
</li>
<li class="menu-item">
<a target="" href="en/Admission_Course_Requirements.html">
Admission Course requirements</a>
</li>
</ul>
</li>
<li class="menu-item">
<a target="" href="https://obs.asbu.edu.tr/oibs/ogrenci/login.aspx">
Applications and Deadlines </a>
</li>
<li class="menu-item">
<a target="" href="https://www.asbu.edu.tr/tr/akademik-takvim">
International Students </a>
</li>
<li class="menu-item">
<a target="" href="en/student-work-forms.html">
Apply </a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded">
<a target="_self" href="#">
Student <span class="icaret nav-plus fa fa-angle-down"></span> </a>
<ul class="menu sub-menu" style="margin-top: -30px;">
<li class="menu-item">
<a target="" href="en/students.html">
For Students </a>
</li>
<li class="menu-item">
<a target="" href="https://obs.asbu.edu.tr/oibs/ogrenci/login.aspx">
Student Information System </a>
</li>
<li class="menu-item">
<a target="" href="https://www.asbu.edu.tr/tr/akademik-takvim">
Academic Calendar </a>
</li>
<li class="menu-item">
<a target="" href="en/student-work-forms.html">
Student Work Forms </a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded">
<a target="_self" href="#">
Course Requirements<span class="icaret nav-plus fa fa-angle-down"></span> </a>
<ul class="menu sub-menu" style="margin-top: -30px;">
<li class="menu-item">
<a target="" href="en/MA_and_PHD_in_Economics.html">
MA & PHD IN ECONOMICS/ISLAMIC ECONOMICS <br> (DOUBLE MAJOR)</a>
</li>
<li class="menu-item">
<a target="" href="en/MA_and_PHD_in_Finance.html">
MA & PHD IN FINANCE/ISLAMIC<br>FINANCE<br>(DOUBLE MAJOR)</a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded">
<a target="_self" href="#">About <span class="icaret nav-plus fa fa-angle-down"></span></a>
<ul class="menu sub-menu" style="margin-top: -30px;
left: -100px;">
<li class="menu-item" style="display: inline-block">
<a target="_self" href="#">
Founding Stage<span class="icaret nav-plus fa fa-angle-down"></span> </a>
<ul class="menu sub-menu">
<li class="menu-item">
<a target="" href="en/background.html" style="white-space: nowrap;">
Background </a>
</li>
<li class="menu-item">
<a target="" href="en/objectives.html">
Objectives </a>
</li>
<li class="menu-item">
<a target="" href="en/name.html">
Name </a>
</li>
<li class="menu-item">
<a target="" href="en/approach.html">
Approach </a>
</li>
</ul>
</li>
<li class="menu-item">
<a target="_self" href="en/Faculty.html">
Faculty </a>
</li>
<li class="menu-item">
<a target="" href="https://asbu.edu.tr/tr/iletisim-bilgileri">
Contact Information </a>
</li>
<li class="menu-item">
<a target="" href="en/contact.html">
Contact Form </a>
</li>
<li class="menu-item">
<a target="" href="https://asbu.edu.tr/tr/ulasim">
Transportation </a>
</li>
<li class="menu-item">
<a target="" href="https://asbu.edu.tr/tr/contact/bilgi_edinme">
Getting Information </a>
</li>
<li class="menu-item">
<a target="_self" href="en/Stages_of_Implementation.html">
Stages of Implementation </a>
</li>
<li class="menu-item">
<a target="" href="en/Organisational_Chart.html">
Organisational Chart </a>
</li>
</ul>
</li>
<li class="menu-item menu-item--collapsed">
<a target="_self" href="en/Annotated_List_of_Courses.html">
Annotated List of Courses </a>
</li>
</ul>
</div>
Any Fixes? Thank you.
I removed all other css and the functionality works.
You are looking for something like:
.gva-navigation>ul>li>ul {
display: none;
}
.gva-navigation>ul>li:hover>ul {
display: inline;
}
I am trying to get this images on the same line but the images bump.
This is the code:
HTML
<div class="first-list">
<ul>
<li><a style="text-decoration:none;" href="http://trendwatching.com/freepublications/?utm_campaign=2016%20Global%20Consumer%20Trend%20Events&utm_content=Footer-FP&utm_source=email" target="_blank">
<img src="#" />TW:FREE
</a>
</li>
<li><a style="text-decoration:none;" href="http://spotters.trendwatching.com/?utm_campaign=2016%20Global%20Consumer%20Trend%20Events&utm_content=Footer-TW%3AIN&utm_source=email" target="_blank">
<img src="#" />TW:IN
<a/>
</li>
<li><a style="text-decoration:none;" href="http://trendwatching.com/about/" target="_blank">
<img src="#" />TW:ABOUT
</a>
</li>
</ul>
</div>
In order to get the images on one line, use css property display: inline, it will align your items in single line
I got you solution, added float=left in li elements, just increase width in css in case they are not fitting:
<div class="first-list">
<ul>
<li style="float:left;list-style-type: none;">
<a style="text-decoration:none;" href="http://trendwatching.com/freepublications/?utm_campaign=2016%20Global%20Consumer%20Trend%20Events&utm_content=Footer-FP&utm_source=email" target="_blank">
<img src="#" />TW:FREE
</a>
</li>
<li style="float:left;list-style-type: none;">
<a style="text-decoration:none;" href="http://spotters.trendwatching.com/?utm_campaign=2016%20Global%20Consumer%20Trend%20Events&utm_content=Footer-TW%3AIN&utm_source=email" target="_blank">
<img src="#" />TW:IN
</a>
</li>
<li style="float:left;list-style-type: none;"><a style="text-decoration:none;" href="http://trendwatching.com/about" target="_blank">
<img src="#" />TW:ABOUT
</a>
</li>
</ul>
</div>
<style>
div{
width:1080px;
}
</style>
I'm using bootstrap list-inline class to style my breadcrumbs but I don't like the spacing between the elements. How do I reduce the spacing between John, Jane and David ?
Here's how it currently looks
<ul class="list-inline">
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.google.com" itemprop="url">
<span itemprop="title">John</span>
</a> >
</div>
</li>
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.yahoo.com" itemprop="url">
<span itemprop="title">Jane</span>
</a> >
</div>
</li>
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.msn.com" itemprop="url">
<span itemprop="title">David</span>
</a>
</div>
</ul>
</li>
You can override the base css and add a negative margin to the li elements like so:
.list-inline>li {
margin-right: -10px;
}
Run the below code snippet to see what this produces.
.list-inline>li {
margin-right: -10px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul class="list-inline">
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.google.com" itemprop="url">
<span itemprop="title">John</span>
</a> >
</div>
</li>
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.yahoo.com" itemprop="url">
<span itemprop="title">Jane</span>
</a> >
</div>
</li>
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.msn.com" itemprop="url">
<span itemprop="title">David</span>
</a>
</div>
</li>
</ul>
One of the options is to remove the padding from elements with css.
.no-left-gutter{padding-left:0;}
And add this class to li or a elements.
<li class="no-left-gutter">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.google.com" itemprop="url" class=no-left-gutter>
<span itemprop="title">John</span>
</a>
</div>
</li>
can be fixed by funky code formatting...
<ul class="list-inline">
<li>
List Item One</li><li>
List Item Two</li><li>
List Item Three</li>
</ul>
can be fixed by adding html comments...
<ul class="list-inline">
<li>List Item One</li><!--
--><li>List Item Two</li><!--
--><li>List Item Three</li>
</ul>
I'm trying to put a linkable image into my header RIGHT underneath the phone number but its not working. My question is where do I place the div and how do I style it?
The code for me current header is:
<div class="header-right">
<div class="social">
<!--social media icons-->
<ul>
<li>
<a class="contact" href="http://" title="Contact Us"></a>
</li>
<li>
<a class="google" href="http:/" target="_blank" title="Share on Google+"></a>
</li>
<li>
<a class="facebook" href="http:/" target="_blank" title="Share on Facebook"></a>
</li>
<li>
<a class="twitter" href="http:/" target="_blank" title="Share on Twitter"></a>
</li>
</ul>
</div>
<div class="telephone">
<p class="tel">Speak with<br/>
<?php bloginfo( 'description' ); ?><br />
<small>Available 08:30 - 17:00, Mon-Fri</small>
</p>
</div>
</div>
<div class="header-right">
<div class="social">
<!--social media icons-->
<ul>
<li>
<a class="contact" href="http://" title="Contact Us"></a>
</li>
<li>
<a class="google" href="http:/" target="_blank" title="Share on Google+"></a>
</li>
<li>
<a class="facebook" href="http:/" target="_blank" title="Share on Facebook"></a>
</li>
<li>
<a class="twitter" href="http:/" target="_blank" title="Share on Twitter"></a>
</li>
</ul>
</div>
<div class="telephone">
<p class="tel">Speak with<br/>
info<br />
<div>an image</div>
<small>Available 08:30 - 17:00, Mon-Fri</small>
</p>
</div>
</div>