Hey guys this is my second question so far on a website i'm re-designing for my boss. I'm trying have it where if the user hovers over "4-Color Offset Printing" the background of the div ID will change to another background-color. (Example blue). I've tried adding #4_color_offset_printing:hover to see if that will just simply change the background color. This usually works but on this navigation bar it seems to not be working. Right now the default background is green. I'd like it to turn blue when i hover over it. I'm trying to apply this affect to every link but if i could get one working i could figure out the rest.
The older style of the navigation bar is the Gray with the blue link hover affect. The last developer that designed the site decided to use inline CSS. I'm not a fan of inline, but even if i try to simply copy and paste his inline code to the main.css it does not take affect. I have no idea why that would be happening. If anybody has any advice that would be great!
Here is my Demo
<style type="text/css"></style></head>
<body class="desktop webkit webkit_525">
<div id="header">
<div class="content_width rel">
<a href="./Welcome to our site!_files/Welcome to our site!.html">
<div id="header_logo"></div>
</a>
<ul id="top_nav">
<li><a class="home_icon" href="./Welcome to our site!_files/Welcome to our site!.html">Home</a></li>
<li>Contact</li>
<li>Estimates</li>
<li>Help Center</li>
<li>Samples</li>
<li>Shopping Cart</li>
<li class="last-child">My Account</li>
</ul>
<ul id="loginbar" class="rounded">
<li>New Account</li>
<li class="last-child">Login</li>
</ul>
<div id="header_products"></div>
<div id="header_phone">Customer Service: (949) 215-9060</div>
<div id="product_search">
<input id="product_ti" class="default" type="text" value="Find A Product">
<input id="product_btn" type="button" value="Search">
<input id="product_default" type="hidden" value="Find A Product">
</div>
</div>
</div>
<div id="nav">
<ul id="nav_links" class="content_width_adjust">
<li id="4_color_offset_printing" style="width:183px; height:44px; background-color:#0C0; border-top: 4px solid #009ad6; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;" class=""><a class="nav_parent narrow" href=""><span>4-Color Offset Printing</span></a></li>
<li id="large_format" style="width:139px" class=""><a class="nav_parent wide" href=""><span>Large Format</span></a></li>
<li id="1-2_color_printing" style="width:164px"><a class="nav_parent" href=""><span>1&2 Color Printing</span></a></li>
<li id="4_color_digital_printing" style="width:189px"><a class="nav_parent narrow" href=""><span>4-Color Digital Printing</span></a></li>
<li id="roll_labels" style="width:130px" class=""><a class="nav_parent wide" href=""><span>Roll Labels</span></a></li>
<li id="services" class="last " style="width:133px"><a class="nav_parent services" href=""><span>Services</span></a></li>
</ul>
</div>
An elements ID can't start with a number, only classes can. Removing the 4_ from '4_color_offset_printing' so you just have a ID of 'color_offset_printing' will allow you to target it in CSS.
If you really don't want to change your ID's, you can target ID's that begin with a number like this:
[id='4_color_offset_printing'] {
background: blue;
}
But I wouldn't recommend using that, it may not work well in all browsers. Best to do things the right way and not use numbers to start your ID's.
Need to add to the #nav_links li a:hover class
#nav_links li a:hover
{
background-color: blue;
}
https://jsfiddle.net/akdz7udj/7/
Related
I have a solution for my problem, but it doesn't seem right. I want to know what's going on.
Nested list item's background colour doesn't extend to the bottom even though there's no margin on it (see the gap below the blue background in the screen shots). The paragraph inside does have a margin. But I've tried to reproduce this outside of my app (which uses Bootstrap) and I can't. In Firebug I tried turning off all CSS except that which was necessary to show the problem (i.e., the background-color and border -- see 2nd image), but it makes no difference. Seen in Chrome and Firefox.
The fix is either adding bottom padding or overflow-y:auto; to the inner list item. But why? Has anyone encountered something like this?
I can't post all the code here, but the HTML at least is something like this:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
[Update] Here is a simplified, non-Bootstrap version. Why no gaps in this one?
ul {
width: 300px;
border: 1px solid red;
float: left;
}
li.sub {
border: 1px solid green;
background-color: yellow;
padding: 8px 8px 0;
}
p { margin:10px; /* no gaps with or without this */ }
<ul>
<li><p>item 1</p>
<ul>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
<li class="sub">
<div>
something
</div>
<p>
stuff
</p>
</li>
</ul>
</li>
<li>thing
<ul>
<li class="sub">
nuther
</li>
</ul>
</li>
</ul>
The spacing is occurring because of the margins in the p elements inside the lis, specifically the bottom margin.
This behavior is defined as 'collapsing margins'. More info here: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
You can see this by setting them to 0.
.notification-new p{
margin:0;
}
Live example: http://www.bootply.com/wlfIl3RziC
Full code below:
.notification-new {
background-color:red;
}
.notification-new p{
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<ul class="dropdown-menu notification-list">
<li class="notification-new">
<div class="text-muted">01/13/2015</div>
<p>Check out the new features coming to the 2015.1 release here!</p>
</li>
<li class="notification-new">
<div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
<p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
</li>
</ul>
</li>
</ul>
This is my html as a second menu in a page.
<ul class="nav-tabs text-center" role="tablist">
<li class="active">Lunch</li>
<li class="diner">Diner</li>
<li class="pannenkoek">Pannenkoek</li>
<li class="borrel">Borrel</li>
</ul>
Now when i want to click on a li there has to show an image. When you click on the second link there has to show another image. The problem now is when i click on a link, it doesn't matter which one, it shows al the images on the page of all the divs.
<div class="active"><img src="images/themenu/lunchkaart-november.jpg" alt="lunchkaart" /> </div>
<div class="diner"><img src="images/themenu/dinerkaart-januari.jpg" alt="dinerkaart" /> </div>
How te create when click on li lunch, it show image lunch.
When click on li diner, it show image diner.
What did i do wrong?
You need jQuery for that. Use this or maybe add class active for clicked element div. Also active class most be display:block or display:inline-block;
<ul class="nav-tabs text-center" role="tablist">
<li class="lunch">Lunch</li>
<li class="diner">Diner</li>
<li class="pannenkoek">Pannenkoek</li>
<li class="borrel">Borrel</li>
</ul>
<div class="content">
<div class="lunch" style="display:none"><img src="images/themenu/lunchkaart-november.jpg" alt="lunchkaart" /> </div>
<div class="diner" style="display:none"><img src="images/themenu/dinerkaart-januari.jpg" alt="dinerkaart" /> </div>
</div>
jQuery(document).ready(function(){
jQuery('.nav-tabs li').click(function(){
var elementClass = jQuery(this).attr("class").toString();
console.log(elementClass);
jQuery('.content div').hide();
jQuery('.'+elementClass,'.content').show();
});
});
http://jsfiddle.net/e79g4p1p/14/
I want to remove the default box-shadow from the unordered list group in bootstrap.There is the default shadow in the list-group special. My html is as follows:
<div class="row">
<div class="container">
<div class="col-md-4">
<ul class="list-group special">
<li class="list-group-item">About Royal</li>
<li class="list-group-item">Message from MD</li>
<li class="list-group-item">Director's Profile</li>
<li class="list-group-item">Organization Structure</li>
<li class="list-group-item">Member Asssociation</li>
<li class="list-group-item">About Nepal</h2></li>
</ul>
</div>
</div>
<div class="col-md-8"></div>
</div>
</div>
I applied the following css:
ul.special{
box-shadow:none;
}
However, the default box shadow is always there? Plz help how to remove it?I would highly appreciate the help.
There's no box-shadow on the .list-group, look at the unpacked CSS https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css lines 5100 - 5120. If you want to remove the border then you can do the following in CSS that comes after the Bootstrap CSS.
**CSS **
.list-group.special .list-group-item {
border-width:0px;
}
I think you are talking about the border, not the shadow.
It is simply to change. You have to add one line to your CSS:
ul.special .list-group-item{
border: 0 !important;
}
i creat a dropdown list when mouse hover at #clim the height of #dropdown change from 0 to 150px . but the code not work .
html code
<div id="menu">
<ul>
<li id="index">Accueil</li>
<li id="clim">Climatisation</li>
<li id="ventil">Ventilation</li>
<li id="electro">Electromenager</li>
</ul>
</div>
</div>
<div id="dropdown" >
<ul>
<li id="index">Climatisation</li>
<li id="clim">Ventilation</li>
</ul>
</div>
CSS code
#dropdown{
margin-left:693px;
width:165px;
height:0px;
position:absolute;
background:#158DFB;
overflow:hidden;
-webkit-transition-duration:0.3s;
}
i have a problem in this part . not working
#clim:hover #dropdown{
height:150px;
}
first of all, your code has extra finishing tags and 2 elements with the same id (#clim), that doesn't make the question very clear.
to make this work with css and no javascript you have to include the hidden element (the dropdown) inside the outer element that you will hover and trigger the dropdown to be shown.
try this instead and then add the remaining css rules you need:
<div id="menu">
<ul>
<li id="one">Accueil</li>
<li id="two">
Climatisation
<ul id="dropdown">
<li id="subone">sub Link</li>
<li id="subtwo">Another sub link</li>
</ul>
</li>
<li id="three">Ventilation</li>
<li id="four">Electromenager</li>
</ul>
</div>
#dropdown{
height: 0;
overflow:hidden;
-webkit-transition-duration:0.3s;
}
#menu:hover #dropdown{
height:150px;
}
when mouse hover at #clim the height of #dropdown change
You cannot do that with pure CSS, because there is no parent selector.
I have the following code and I want to highlight the currently selected tab using css.
<div id="Maintabs">
<ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
is there any way I can do this? I know css hover gives the element on which mouse is hovere, is there something similar for selected
thanks guys,
yes I do need dynamic handling, so I did the way you told. I capture the click event on that tab and the class. in css I apply the required styles to that class but it doesn't work.
here is my code:
in javaScript:
$('#summary').click(function(){
$(this).addClass("selected");
alert(" summary");
});
HTML code:
<div id="Maintabs">
<ul>
<li style="width: 100px;"><a id="summary" href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li style="width: 100px;"><a id="advanced" href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li style="width: 100px;"><a id="expert" href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
CSS code:
.selected{
background-color:#FEE0C6;
}
what do you think I am doing wrong??
I'm not sure how you are using pure CSS to produce a tab effect. You would normally need Javascript or jQuery to dynamically change what the current tab is.
However, if you are using Javascript or jQuery for the tab effect, you could simply add a class to highlight the selected tab.
For example, this could be your jQuery:
$("#tab1").addClass("selected-tab");
And this your CSS:
.selected-tab
{
/*Some style to highlight it and show it's the selected tab*/
}
You're going to want to make an active class. By giving your li the defined class active. Then you can use css to make the .active a different color, size, shape, etc
Here's an example (first li):
HTML
<div id="Maintabs">
<ul class"tablist">
<li class="active"><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
Here's an example (second li):
HTML
<div id="Maintabs">
<ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li class="active"><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
Here's an example (third li):
HTML
<div id="Maintabs"> <ul class"tablist">
<li><a href="AshukuWeb.jsp?VIEW=Summary" target=_top>Summary</a></li>
<li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
<li class="active"><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
</ul>
</div>
CSS
#maintabs.active {background-color: #000;}
#maintabs {background-color: #ccc;}
The result will be the active tab being black (#000), and the inactive tabs being light grey (#ccc)