Here is the html list:
<aside id="polylang-3" class="widget widget_polylang cf">
<ul>
<li class="lang-item lang-item-5 lang-item-da"> danish </li>
</ul>
<aside>
Now there is css applied to list items as following:
.widget > ul > li
{
margin: 0;
padding: 7px 0 8px 0;
border-bottom: solid 1px #eeeeee;
}
I would only like to access the above list, but cannot get to its items neither by id, nor by class.
Must be something simple, but I just cannot figure it out.
Many thanks in advance.
Finally, have got it to work.
I could access it like the following:
#polylang-3.widget ul li
{
margin: 0;
padding: 0px 0 0px 0;
border-bottom: none;
}
The porblem was that I wanted to erase the border-bottom, but previously I did not set it to "none"
You can try this:
.widget ul li
{
margin: 0;
padding: 7px 0 8px 0;
border-bottom: solid 1px #eeeeee;
}
I am able to access it just by this
#polylang-3 li{
/*your css code*/
}
Related
I'm sure this shouldn't be difficult to solve but I can't get my styling for a ul to work (trying different things, it either works for one, or none at all) and I'm about to tear my hair out. What have I missed?
https://jsfiddle.net/5cuuq8rq/
HTML:
<ul class="nav">
<li>Home</li>
<li>Couriers</li>
<li>Reviews</li>
<li>Retailers</li>
<li>About</li>
</ul>
CSS:
.nav{
font-size:18px;
font-weight: bold;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a{
width: 144px;
background: -webkit-linear-gradient(rgb(256,256,256), rgb(175,175,175));
background: -moz-linear-gradient(rgb(256,256,256), rgb(175,175,175));
background: linear-gradient(rgb(256,256,256), rgb(175,175,175));
text-decoration:none;
display:inline-block;
padding:10px;
}
.nav li > a:first-child {
border-radius: 20px 0px 0px 0px;
}
instead of this
.nav li > a:first-child {
border-radius: 20px 0px 0px 0px;
}
use it
.nav li:first-child > a {
border-radius: 20px 0px 0px 0px;
}
The problem is that you are selecting the first a element which is always going to be true since there is only one a element in each of your li elements. Instead, you should select the first li element and then target the a element nested in that li. For example, your CSS should look like this:
.nav li:first-child > a {
border-radius: 20px 0px 0px 0px;
}
Check out this updated fiddle: https://jsfiddle.net/5cuuq8rq/1/
if you use nth-child(some number)
you can specify what li you will style by giving it a number, 1 for first and so on:) good luck.
.nav li:nth-child(1) > a {
border-radius: 20px 0 0 0;
}
I'm having a weird problem with my CSS menu. There is a huge space above the links.
I tried everything from removing all the margin and padding settings from the css and still nothing. The only way I can remove the extra spacing is to delete all the li.
Can anyone see what I'm doing wrong?
http://jsfiddle.net/3dB7v/
<div id="test_nav">
<div id="test_subnav">
<ul id="test_ul">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
<asp:panel id="pnlUpdateDate" cssclass="UpdateDate" runat="server">Last Update: 11-26-2013</asp:panel>
</div
#test_nav
{
text-align: left;
padding: 5px;
border: 1px dashed blue;
}
#pnlUpdateDate
{
width: 200px;
border: 1px dashed blue;
}
#test_subnav
{
float: right;
position: relative;
z-index: 1000;
padding: 0;
border: 1px solid red;
}
#test_ul li
{
position: relative;
list-style: none;
margin: 0;
padding: 0;
z-index: 1001;
b1order: 1px dashed orange;
}
#test_ul li ul
{
margin-left: 0;
padding: 0;
}
#test_ul > li
{
float: left;
padding: 3px; /* padding-top: 3px; padding-bottom: 3px; */
margin: 0 2px 0 0;
}
#test_ul > li > a, #test_ul > li > span
{
display: block;
padding: 4px 4px 4px 4px;
margin: 0 3px 0 3px;
font-size: 14px;
font-weight: bold;
color: black;
text-decoration: none;
}
#test_ul > li > span
{
cursor: default;
}
#test_ul > li:hover > a, #test_ul > li.active > a
{
color: Red;
}
#test_ul > li:hover > a:active
{
color: #3B96B6;
}
#test_ul > li:hover > span
{
color: #3B96B6;
}
That space belongs to the default margins of the ul#test_ul element applied by the useragent.
You should reset the default stylesheet applied by user agent on the list element, as follows:
ul#test_ul {
padding: 0;
margin: 0;
}
You can refer to this answer for further details:
User agents apply some default styles to the HTML elements. For
instance they apply a top and bottom margin on the <p>, <ul>, ... elements.
As Google Chrome sets -webkit-margin-before: 1em; and -webkit-margin-after: 1em;.
Working Demo
It's better to reset user agent stylesheet before any author stylesheet to prevent unexpected issues.
Try removing the margin and padding from the ul element.
A quick and dirty way would be * { padding:0; margin:0; }
What you are seeing is the browser default styles. Consider locating a "reset" stylesheet and always applying it first before any other styles. I like this one: http://meyerweb.com/eric/tools/css/reset/
Address the problem, not the symptoms. You'll run into this all the time if you don't. Each browsers default styles are different. Zeroing them all out is the only way to get consistency throughout.
It looks like you need to add this to your CSS:
#test_ul {
padding: 0;
margin: 0;
}
This the link http://jsfiddle.net/a6K3f/1/.
I need to have one link in right aligned in the navigation menu. Below code is fine in all major browser except in ie7. Right aligned 'Link4' is breaking down. I know it works if i add floated:right li as first li in ul. But i cannt add as first li. Becasue i have written pseduo classes first-child for that.
I tried many trials but not yet resolved. Can anybody please help in my concern issue. Thanks
HTML:
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li class="f-Right">Link4</li>
</ul>
CSS:
body {
font-family: arial;
font-size: 13px
}
ul {
list-style: none;
margin: 0;
padding: 0
}
ul li {
display: inline-block;
*display:inline;
zoom: 1;
border: 1px solid #ccc;
margin: 0 1px;
padding: 3px
}
.f-Right {
float: right
}
Like this
please write *float:left; and remove
*display:inline;
demo
css
body {
font-family: arial;
font-size: 13px
}
ul {
list-style: none;
margin: 0;
padding: 0
}
ul li {
display: inline-block;
*float:left; /* <--hack for IE **/
zoom: 1;
border: 1px solid #ccc;
margin: 0 1px;
padding: 3px
}
.f-Right {
float: right
}
Look at my problem:
Now i have:
What i need to do:
I tryed to do with border, but nothing happends.
Here is my code:
<ul id="tabMenu">
<li class="dropdown"><div><a class="tab1"><div class="dropdown_text">поиск по производителю</div></a></div></li>
<li class="dropdown"><div><a class="tab2"><div class="dropdown_text">поиск по назначению</div></a></div></li>
<li class="dropdown"><div id="menu_logo"></div></li>
<li class="dropdown"><div><a class="tab3"><div class="dropdown_text">кабинет</div></a></div></li>
<li class="dropdown"><div><a class="tab5"><div class="dropdown_text">сравнение</div></a></div></li>
<li class="dropdown"><div>
<span id="more_search"></span><a class="tab4" href="/emarket/cart/"><div class="dropdown_text">покупки</div></a>
</div></li>
</ul>
Here is CSS:
ul li {
display: inline-block;
}
ul li a {
color: #ccc;
white-space: nowrap;
text-decoration: none;
padding-top: 55px;
}
ul li a div.dropdown_text {
display: inline-block;
}
div.site_info ul li a.tab1 (etc for a.tab2, a.tab3, a.tab4) {
float: left;
margin-left: 89px;
background: url(/img/new_desing/producers.png) no-repeat top center;
}
Help me please to solve this problem.
if its shadow you wanted then apply this style to your div
box-shadow: 0px -3px 5px #888888;
or change the values till u get that effect..
Edit
If you want to get shadow effect inside your div then use
box-shadow: inset 0px -3px 5px #888888;
Edit
For separator use this
nav li + li:before{
content: " | ";
padding: 0 10px;
}
i got this through this link
try applying border to
ul li {
display: inline-block;
border-right:1px solid #000;
}
I am trying jQTouch for an iPhone web app, but I want content on the pages to be able to have normal bullet lists, not styled as the bars in the jqt theme. So I am trying to override the css selectors in the theme.css:
#jqt .content ul {
color: #fff;
border: none;
font: inherit;
padding: 0;
margin: 15px 10px 17px 10px;
}
#jqt .content ul li {
color: #fff;
border-top: none;
border-bottom: none;
list-style-type:disc;
padding: 10px 10px 10px 10px;
background-image: none;
overflow: hidden;
}
It works fine in that it overrides it, but I don't get any visible list bullets. Any ideas why?
Just overwrite the li (not the ul)
CSS:
div#jqt #textpage li
{
list-style-type:disc;
padding: 7px 20px 0px 10px; /* set these as required */
}
HTML:
<!-- PAGE 2d -->
<div id="page-2d">
<div class="toolbar">
<h1>Page Heading</h1>
<a class="back" href="#page-2">Back</a>
</div>
<div id="textpage" >
<h1>My heading</h1><br />
<p>Stuff</p>
<p>More Stuff</p><br />
<h2>Sub Heading</h2>
<!-- Note No <ul> works don't know why -->
<li>My List Item1 </li>
<li>My List Item2 </li>
Overflow hidden seems to be the problem, based on a quick test i did.
This is what i am using for my project and its working like a charm:
ul.text, .text ul
{
border: 0;
background: transparent;
}
ul.text li, .text ul li
{
list-style-type: disc;
-webkit-border-radius: 0;
border-radius: 0;
filter: 0; // hide IE gradient
margin-left: 19px;
background: transparent;
border: none;
font-size: 1em;
font-weight: normal;
}
Hope it helps
Check the display type on the LI. I had this issue because they were set to "block" when they should have been "list-item"