I have a row of buttons in a Tritter Bootstrap NavBar and I want to apply some special styling to some but not all. I have a class from BootSnip but try as I might with selectors, I can't get it to apply to just the li's that I want. It works fine if I apply it to the UL, but obviously that applies to all of them.
You can see I've got the class ds-btn on the third li down
I've tried changing the top line of CSS to
ul.ds-btn
ul.ds-btn li
ds-btn li
but to no avail. I'm probably missing something dead simple.
Any help would be warmly welcomed.
Thanks.
HTML
<ul class="navbar-right">
<li class="people-button"></i><br />People</li>
<li class="books-button"></i><br />Books</li>
<li class="review-button ds-btn">
<a class="btn btn-lg" href="http://dotstrap.com/">
<i class="fa fa-bullseye fa-2x"></i><span>User<br>Profile</span>
</a>
</li>
</ul>
CSS
.ds-btn li { list-style:none; float:left; padding:10px; }
.ds-btn li a span{padding-left:15px;padding-right:5px;width:100%;display:inline-block; text-align:left;}
.ds-btn li a span small{width:100%; display:inline-block; text-align:left;
Your selectors are in the wrong order, you need to use:
li.ds-btn ...
This is because you have the class ds-btn on your li, your current selector .ds-btn li is basically saying look for all li within any element with the class ds-btn, none of which exist in your code. li.ds-btn is basically saying look for any li with the class ds-btn
li.ds-btn { list-style:none; float:left; padding:10px; }
li.ds-btn a span{padding-left:15px;padding-right:5px;width:100%;display:inline-block; text-align:left;}
li.ds-btn a span small{width:100%; display:inline-block; text-align:left;
I think you should write css something like this
li.ds-btn {
list-style:none;
float:left;
padding:10px;
}
li.ds-btn a span{
padding-left:15px;
padding-right:5px;
width:100%;
display:inline-block;
text-align:left;
}
li.ds-btn a span small{
width:100%;
display:inline-block;
text-align:left;
}
Related
so i have a situation where i want text to appear over an image using visibility:hidden/visible and also playing with opacity. i cannot do it for some reason. Note that this is in a list because i have other images displayed in the same list but here i am only showing one. below is the html:
<ul>
<li>
<a class="pic" href="#">
<img alt="" src="/servlet/servlet.FileDownload?file=00PU00000096kH2MAI" style="width: 300px; height: 160px;" />
</a>
<div class="hovertext"> my hover text</div>
</li>
</ul>
and the css is here:
#gallery ul{
margin:0;
padding:0;
list-style:none;
}
#gallery li{
display:block;
float:left;
width:310px;
height:170px;
margin:0 15px 15px 0;
}
#gallery li a{
display:block;
float:left;
width:300px;
height:160px;
margin:0;
padding:4px;
}
#gallery li a:hover {
color:#FFFFFF;
opacity:0.6;
background-color:#666666;
}
#gallery li a:hover .hovertext{
visibility:visible;
}
.hovertext{ width:300px; height:85px;
background-color:#666666;
opacity:0;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
all this does is allow me to see that the image is opaque and i can see that the div is in the background but i just cannot bring it forward to display in front of the opaque text. Any help would be greatly appreciated.
Look at the following code.
#gallery li a:hover .hovertext{
visibility:visible;
}
The above code will look the child element of hovertext when you hover the link. In your case, it is siblings element. So update your CSS like below.
#gallery li a:hover + .hovertext{
visibility:visible;
}
Also you have added opacity:0 for hovertext class. I think there is no need for that one. Because already you have visibility:hidden for the same class. So update your CSS like below.
.hovertext{ width:300px; height:85px;
background-color:#666666;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
DEMO
I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
I'm creating a page where I have two vertical menus that each have a header, and then directly underneath navigation type links.
I'm using an UL for the two headers, and would like to use sub UL for the rest of each menu. I'm having a problem where the sub UL takes on the properties of the parent and is displyaing inline instead of vertically. Also, the submenu links are indenting instead of positioning directly under the headers. I'm still fairly new at CSS, so if I'm going about this incorrectly, I really appreciate any advice. Thanks for your help
#Contentmenu ul {
margin: 0;
padding: 40px;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentmenu li {
display: inline;
padding:10px;
float: left;
}
#contentmenu a {
display:block;
padding:10px;
width:200px;
color:#ffffff;
font-size:26px;
background-color:#c7daff;
}
#Contentsubmenu ul {
margin: 0;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentsubmenu li {
display:block;
floa:left;
}
#contentsubmenu a {
display:block;
width:200px;
color:#000000;
font-size:20px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
HTML
<div id="contentmenu">
<ul>
<li>Header 1
<div id="contentsubmenu">
<ul>
<li>Article 1</li>
<li><a href="#" Article 2</a></li>
</ul>
</div>
</li>
<li>Articl3</li>
</ul>
if you want to only target the top-level , you would use this:
#contentmenu > ul
and
#contentmenu > ul > li
Also, CSS is case-sensitive, so make sure you are using #contentmenu
Does this fix your other issue as well?
Your CSS code is wrong at the element #contentsubmenu li. You use floa: left;, which is a incorrect CSS code. Additionally, just use float: none; on this element instead of float: left; and it will work as desired.
Demo on JSFiddle
Therefore that you are new in CSS:
Try to write clean code with correct indentations.
what im trying to do is have a vertical list with a solid border on the left side, but with 1 or 2 px space between each li. I can't use margin-bottom because then the border would break. I'm ultimately trying to have a list with a solid color on it's left side(no spaces), and when i hover the individual li for it to actually go left, over the existing border.I'm not set about using borders, but i've tried to do it with a wrapper div and i just can't seem to get it right, so any suggestions are welcome :)Oh and the vertical list is gonna be changing in height, so just putting a div as a background without having the height to auto to the list element is a no go.Heres the working link http://jsfiddle.net/hDHDF/ and i have the following code
<div id="menu">
<ul class="menu">
<li class="openmaincategory"><span>###</span></li>
<ul class="categories">
<li class="subcategory"><span>###</span></li>
<li class="subcategory"><span>###</span></li>
<li class="subcategory"><span>###</span></li>
</ul>
<li class="maincategory"><span>###</span></li>
</ul>
</div>
and the corresponding css:
#menu{
position:absolute;
right:0px;
left:0px;
top:120px;
height:auto;
width:190px;
margin-top: 35px;
margin-left:67px;
}
.menu {
list-style-type:none;
padding-right:10px;
color:#6c6762;
}
.maincategory{
background-color:#ada397;
height:40px;
}
.openmaincategory{
height:40px;
background-color:#ada397;
}
.menu li a{
display:inline-block;
height:100%;
width:100%;
}
.menu li{
border-left:solid #6c6762 40px;
}
.menu li:hover{
border-left:solid #6c6762 20px;
padding-left:10px;
}
.menu span a{
color:#5b5856;
font-size:20px;
padding-left:4px;
padding-top:6px;
}
.menu a{
text-transform:none;
text-decoration:none;
color:#6c6762;
}
.subcategory {
background-color:#d7d1c9;
height:40px;
}
It sounds like you want to use padding rather than margin. I set up an example here based on your code.
Key parts are moving the subcategory class to the span from the li and adding the .last so you can play around with final spacing.
.categories li span{
background-color:#d7d1c9;
height:40px;
padding-top:2px;
}
.subcategory .last{
padding-bottom:2px;
}
Update with the padding for the anchor on the last li.
Have the border on the list itself, not on the list items.
I fixed it by adding the border to the list itself and making the hover effect margin-left:-20px.
I'm having a problem getting a pseudo class working with my code. The code in question is a horizontal ordered list that's being placed at the top of a slider. The list is stretched out to fill the full horizontal width of the slider. I put a left-border on each of the list elements by assigning a border to the links contained within the list elements (so that the border didn't make the list too wide).
But I wanted to remove the first link's left-border so that borders were only shown between each list element, and not on the first or last list element.
The problem arises though when I add a first-child pseudo class to the link. The pseudo class seems to assign the class to all of the links.
Here's what I have:
CSS
ol.bjqs-markers{
display:inline-block;
list-style:none;
margin:0;
padding:0;
z-index:9999;
width:100%;
position:absolute;
top:0px;
}
ol.bjqs-markers li{
display:inline;
float:left;
height:30px;
width:20%;
background:rgba(0,0,0,0.7);
float:left;
margin:0 0px;
}
ol.bjqs-markers li a{
display:block;
font-size:22px;
color:#FFF;
text-align:center;
text-decoration:none;
height:100%;
display:block;
overflow:hidden;
border-left:1px solid #F00;
}
ol.bjqs-markers li a:first-child{
border-left:none;
}
And HTML:
<ol class="bjqs-markers">
<li class="active-marker">Example</li>
<li class="">Example</li>
<li class="">Example</li>
<li class="">Example</li>
<li class="">Example</li>
</ol>
Can someone point me in the direction of why that a:first-child applies a border of "none" to all the tags?
Thanks guys!
:first-child works just like expected, but every A in your example is a first-child. It is the first child of its parent LI.
What you're looking for is this:
ol.bjqs-markers li:first-child a {}
It is because you apply this pseudo class to first link in li element. Use
ol.bjqs-markers a:first-child {
border-left:none;
}
Or
ol.bjqs-markers li:first-child a {
border-left:none;
}
maybe you want to do
ol.bjqs-markers li:first-child a{
It it because you are applying the border to the first <a> tag in each <li> tag. Try this instead:
ol.bjqs-markers li:first-child a { }