I need to have divs show {border-bottom:solid 2px #F63} when a list item is rolled over. I played with .whatever:hover .whatever { but came up with nothing. Any suggestions?
Without seeing your CSS/HTML, it's hard/impossible to post a solution. But as #James Khoury mentioned in the comment, you will need to place the div inside the li. So something like this...
<ul>
<li class="first">First
<div class="first">
First
</div>
</li>
<li class="second">Second
<div class="second">
Second
</div>
</li>
</ul>
CSS
div{width:50px; height:50px;
border:1px solid blue;
margin:1em;}
li a{display:block;}
li.first:hover div.first, li.second:hover div.second{
border-bottom:solid 2px #F63;}
http://jsfiddle.net/jasongennaro/6rjd9/
Related
I'm trying to build a simple drilldown in Bootstrap. When the user selects a "row", I want the background color to change to indicate what "row" is selected. It only works like I want it on the first level rows.
Here's the basic HTML:
<div class="container">
<ul class="nav nav-drilldown" id="Menu">
<li>
Thing the first
<ul class="collapse" id="a">
<li>child 1</li>
<ul class="collapse" id="a-child-1">
<li>
<div class="row">
<div class="col-md-6">something</div>
<div class="col-md-3">goes</div>
<div class="col-md-3">here</div>
</div>
</li>
</ul>
</ul>
</li>
</ul>
</div>
And the CSS:
.nav-drilldown:focus {
background-color: #eee;
}
.nav-drilldown li li a:focus {
background-color: #FF0000;
}
.nav-drilldown li a:focus {
background-color: #eee;
}
For the second level, on the text part of the anchor changes background color. I get that you can't set selected on a <li>, but i don't understand why the second level doesn't behave like the first level. I can't get the third level to much of anything.
Level 1:
Level 2:
JSFiddle
I believe this is just a matter of the padding on the anchor tag. At the top level, you have 10px top and bottom padding and on the second level anchor tag, you have no padding. So, if you want similar behavior, you could add:
.nav-drilldown li li a {
padding: 10px 15px;
}
How do I make my links appear as images, and have them change with hover and so on? I already have the button images. Basically the website I'm making is pretty basic, but it's nice. The one issue I'm having is with my nav bar. The navigation bar has four links, and I want them to appear as images, and change with hover. The links are in an unordered list - it looks like this:
<ul class="navbar">
<li>Home page
<li>Information
<li>Forum
<li>Interests
</ul>
I have the CSS, and I'm looking to attribute images to each link. I know how to add colors but not images.
You can go about placing images in your captions as such:
<a href="#">
<img src="images/yourImage.png" alt="Your Image">
</a>
You can then use jquery to change the source of the image once its hovered on.
Hope this helps you:
See at http://jsbin.com/acuhuy/5/edit
<div id="nav">
<ul id="menu">
<li class="menu-item">Home Page</li>
<li class="menu-item">Information</li>
<li class="menu-item">Forum</li>
<li class="menu-item">Interests</li>
</ul>
</div>
CSS
div#nav{
position:relative;
}
ul#menu{
}
li.menu-item{
list-style:none;
position:relative;
float:left;
width:80px;
height:27px;
padding-top:2px;
margin-right:5px;
text-align:center;
background-image:url('http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_black_rectangle.png');
background-size:80px 27px;
background-repeat:no-repeat;
cursor:pointer;
}
li.menu-item a{
text-decoration:none;
color:#f0f0f0;
}
li.menu-item:hover{
opacity:0.8;
}
I have the following
CSS
.streamBox {
font-size:12px;
background-color:#EDEFF4;
border-bottom:1px solid #E5EAF1;
margin-top:2px;
padding:5px 5px 4px;
}
.streamBox:last-child {
border: none;
}
HTML
<ul id="activityStream">
<li class="story">
<div class="streamBox nobkgcolor" id="">
Stuff
</div>
</li>
<li class="story">
<div class="streamBox nobkgcolor" id="">
Stuff
</div>
</li>
<li class="story">
<div class="streamBox nobkgcolor" id="">
Stuff
</div>
</li>
</ul>
I thought the last-child selector would make it so the last DIV doesn't hav ea border... But instead all DIVs now don't have borders? y?
Suggestions on how w CSS to make it so JUST the last div doesn't have the border?
Thanks,
For updated question:
Your selector needs a tweak, it should be:
li:last-child .streamBox {
border: none;
}
The <div class="streamBox"> is both the first and last child of its parent, so your current selector matches all of them, instead you want the <div> inside the last <li>, so use the :last-child on the <li>, you can test it here (I changed the border to black to make it more obvious).
For previous question:
It's because you're missing a quote on the class="" attribute, fix it like this:
<div class="box">blah blah</div>
<div class="box">blah blah</div>
<div class="box">blah blah</div>
<div class="box">blah blah</div>
It'll then work as intended, the first 3 having borders, you can test it here.
I have a div that has a row of tabs nested within it as follows:
<div class="container">
<div class="menu">
<span class="tab" />
<span class="activetab" />
<span class="tab" />
</div>
</div>
When a tab is active, we need to display a border around it. The container div also has a border; however, it needs to be lighter. So we have something like this:
.container {border: 1px solid lightgray;}
.activetab {border: 1px solid gray;}
It seems that because the container is a parent of the active tab, its border has priority, but we want the active tab's darker border to show instead. We tried both borders and outlines.
Help!
First of all, not sure why you're putting a dot before the class names in the html tag..does that even work? It should look like <div class="container"> and then .container{....} in the CSS.
If you're trying to make a CSS menu then I'd recommend you use an unordered list, thats pretty standard:
<div class="container">
<ul class="menu">
<li>Item 1</li>
<li class="activetab">Item 2</li>
<li>Item 3</li>
</ul>
</div>
and then in your CSS, something like:
.container {border: 1px solid lightgray;}
.container ul{list-style:none;}
.container li{float:left;}
.container li.activetab {border: 1px solid gray;}
Your main issue with this your class attributes. Don't put . in the HTML:
<div class=".container">
Should be
<div class="container">
After that, you shouldn't have any problem with the border-color values. As long as your selectors are explicit, and not general, there will be no confusion:
.container { border:1px solid red; }
.activetab { border:1px solid green; }
That should render properly. But remember, classes are only prefixed with a . (dot) in your selectors, not your HTML.
I have a menu div which has a dark background. Inside it, I have several menu item divs with 1px margins on the right and the left. This way I've got separators between them. Obviously these appear on the very left and very right side of the menu which I don't want. Is there a way to accomplish this without inserting 1-pixel divs as separators?
Thank you
edit: sorry, I thought it was descriptive enough. Here is the code:
<div id="menu">
<div class="menu_item"><img src="imgs/menu/szabalyzat.png" /></div>
<div class="menu_item"><img src="imgs/menu/profil.png" /></div>
<div class="menu_item"><img src="imgs/menu/zenekarok.png" /></div>
<div class="menu_item"><img src="imgs/menu/jelentkezes.png" /></div>
<div class="menu_item"><img src="imgs/menu/esemenynaptar.png" /></div>
<div class="menu_item"><img src="imgs/menu/mmmk_estek.png" /></div>
</div>
IE6 incompatibility is OK (thankfully).
The following rule will apply to all .menu_item elements that follow another .menu_item element:
.menu_item + .menu_item {
border-left: 2px solid black;
}
The simplest way yo achieve it is to mark your first and last elements with custom classes and remove that margins from them.
<ul class="menu">
<li class="first">One</li>
<li>Two</li>
<li>Three</li>
<li class="last">Four</li>
</ul>
<style>
.menu li { margin: 0 1px; }
.menu .first { margin-left: 0; }
.menu .last { margin-right: 0; }
</style>
You can also try using complex css selectors, like :first-child, but they do not work in older versions of MSIE.
OR, you can use 2px margins on the right side instead and go with only one additional class:
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li class="last">Four</li>
</ul>
<style>
.menu li { margin-right: 2px; }
.menu .last { margin-right: 0; }
</style>
If a high percentage of your audience's browsers support CSS3, you can use the :first-child and :last-child pseudo-classes:
div#menu div:first-child {
margin-left: none;
}
div#menu div:last-child {
margin-right: none;
}
Can't you have 2px left-margin instead of 1px on each side and then use the css pseudo class :first-child to remove these margin for the first item ?
EDIT: I agree with the fact that you should use border as separator rather than background but in case you do this that way for some good reasons, my answer's still valid :-)