For some weird reason i cant change the background of the entire list item even though i selected the list.
Here is the code:
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
<style>
.project-item>ol>li:hover {
background-color: #eee;
}
</style>
The code you posted works fine. See this example.
.project-item>ol>li:hover {
background-color: #eee;
}
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
This code seems to work.
Change the colors its pretty hard to see a gray color on a white background.
.project-item ol li:hover {
background-color: firebrick;
}
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
I resolved the issue by removing float left on first span and just having a float right. That seemed to work.
Related
Hi i have small problem with CSS that dont know how to resolve.
On my WHMCS template i wanted to implement one element more, and now one element goes in row bellow (Get support). How to fix this?
This is CSS from that element:
.home-shortcuts {
margin: 0;
/*background:#25a2c7;*/
background: #5E35B1;
padding-left: 250px;
margin-top: -60px;
color: #fff
}
and this is code from header.tpl file
<div class="col-sm-12 col-md-8">
<ul>
<li>
<a id="btnOrderHosting" href="cart.php">
<i class="fa fa-headphones"></i>
<p>
Créer une radio <span>»</span>
</p>
</a>
</li>
{if $registerdomainenabled || $transferdomainenabled}
<li>
<a id="btnBuyADomain" href="domainchecker.php">
<i class="fa fa-globe"></i>
<p>
{$LANG.buyadomain} <span>»</span>
</p>
</a>
</li>
{/if}
<li>
<a id="btnOrderHosting" href="cart.php">
<i class="fa fa-hdd-o"></i>
<p>
{$LANG.orderhosting} <span>»</span>
</p>
</a>
</li>
<li>
<a id="btnMakePayment" href="clientarea.php">
<i class="fa fa-credit-card"></i>
<p>
{$LANG.makepayment} <span>»</span>
</p>
</a>
</li>
<li>
<a id="btnGetSupport" href="submitticket.php">
<i class="fa fa-envelope-o"></i>
<p>
{$LANG.getsupport} <span>»</span>
</p>
</a>
</li>
</ul>
</div>
Some advice how to show all in one row?
You can see that your li elements are 24% width. Reduce them to 20% (100 / 5 = 20, and you have five items in your list). That's it.
.home-shortcuts li {
width: 20%;
}
Add
.home-shortcuts{padding-left:0;}
.home-shortcuts .container{width:60%;}
.home-shortcuts li {
width: 20%;
}
make col-md-12 instead of col-md-8 it'll come fine
navigation image here
how can i disable the green color there whenever i click in gallery page?
Home
<li class="dropdown mega-dropdown">
<a class="dropdown-toggle" href="Gallery.aspx">Gallery<span class="caret"></span></a>
<div class="pc-nav">
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3 col-md-push-3">
<ul>
<li class="dropdown-header" style="text-align:left">Company Trips</li>
<li style="text-align:left; visibility:hidden;"> 2016 - Vietnam</li>
<li style="text-align:left;"> 2015 - Guilin</li>
</ul>
</li>
</ul>
CSS here
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3 col-md-push-3">
<ul>
<li class="dropdown-header" style="text-align:left">Company Trips</li>
<li style="text-align:left;"> 2016 - Vietnam</li>
<li style="text-align:left;"> 2015 - Guilin</li>
</ul>
</li>
</ul>
I assume the current class indicates the column you have selected. Given the markup you provided in the comments, you can rewrite the rule like this to remove the background color:
.current {
background-color: transparent;
}
If you do not have access to the original code but wish to override it, you can supersede the background-color property like this:
.current {
background-color: transparent !important;
}
But in the end, if you don't wish there to be any special background color for the current column, you can just delete the entire block of code.
EDIT
Based on your feedback, I assume you want to highlight the names of the countries in the list but not the first item of the list. In that case, you can target them like this:
ul.dropdown-menu ul li:not(.dropdown-header) {
background-color: #00b200;
}
My yellow-div jumps down when text in it get a little long. See imagesofproblem.
<html>
<div style="background-color:#00ff00; width:200px;">
<ul style="list-style:none;">
<li><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow;">Hit me! Hit me! -Hit me! -</div> </li>
</ul>
</div>
</html>
How can I make sure, that the yellow-div not jump down, when text get long. Log text should automatically get brokken to a new line.
(Is it possible to solve this problem without putting "width" to yellow div)
You can use Flexbox to achieve your desired result (if that is an option).
<div style="background-color:#00ff00; width:200px;">
<ul style="list-style:none;">
<li style="display:flex;"><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow;">Hit me! Hit me! -Hit me! -</div> </li>
</ul>
</div>
Edit: Here's a version with your margins in place
<div style="background-color:#00ff00; width:200px;">
<ul style="list-style:none;">
<li style="display:flex;"><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow; margin:2px 0 20px;">Hit me! Hit me! -Hit me! -</div> </li>
</ul>
</div>
Try to change display:inline-block to inline like this:
<html>
<div style="background-color:#00ff00; width:200px;">
<ul style="list-style:none;">
<li><span style="margin-right:5px;">> <span style="display: inline; background-color:yellow;"> Hit me! Hit me! -Hit me! -</span> </li>
</ul>
</div>
</html>
I have a menu structured like this:
<div class="nav">
<div class="drnav">
<ul class="ulMenu">
<li>
<div class="menuHeader">My Home</div>
<div class="menu-content">
<ul>
<li>item1</li>
<li>item3</li>
</ul>
</div>
</li>
<li>
<div class="menuHeader">My Stuff</div>
<div class="menu-content">
<ul>
<li>item4</li>
<li>item6</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
My css is setup so that when you hover over a menuHeader element the menu-content element is displayed (i.e. display: inline). This all works fine but what I want is that when you click one of the links in the list item elements within the menu-content that the menu (i.e. the parent menu-content element) disappears. Of course I want to do this without any JavaScript. I saw one example that used pointer-events but that restricts use to IE 11 and I'd like to support at least IE 10 if not 9 as well. Any suggestions on how to get this to work?
Technically it's possible, but it's much ado about nothing (hard to use it in practice):
.ulMenu .menu-content {
display: none;
}
.ulMenu > li:hover .menu-content {
display: inline-block;
}
.ulMenu > li .menu-content:target {
display: none;
}
<div class="nav">
<div class="drnav">
<ul class="ulMenu">
<li>
<div class="menuHeader">My Home</div>
<div class="menu-content" id="menuContent_1">
<ul>
<li>item1</li>
<li>item3</li>
</ul>
</div>
</li>
<li>
<div class="menuHeader">My Stuff</div>
<div class="menu-content" id="menuContent_2">
<ul>
<li>item4</li>
<li>item5</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Besides, once you close a menu the only way to reopen it is by opening another and hovering the initial one.
Important note:
I would like to point out having a :hover based menu is a huge disadvantage compared to having a JavaScript based menu. Because more than half of today's traffic is coming from touch devices (and you don't hover much on a touch-device, do you?) while only less than 1% of traffic has JavaScript disabled.
So, could you perhaps explain why you ask for a pure CSS solution? The only practical use for pure CSS I had in past 8 years was for a payment gateway page, where JavaScript was strictly off. But, other than that?
I happen to know my way around CSS, but I was never keen on trying to transfer DOM manipulations to CSS, instead of leaving them for JavaScript. After all, that's what JavaScript is for. Use the right tool for the job. The job here is DOM manipulation. So use JavaScript.
Here's is the input/label solution I described in the comments. I realized they don't have to be checkboxes, I can use the :focus state to hide the menu contents. It's still buggy, in the sense that a click anywhere in the page is needed to make the :hover work again for the recently closed menu. But it's the closest you can get with CSS only or, at least, that's what I think.
.menuHeader input:focus + label,
.menuHeader label {
display: none;
}
.menuHeader:hover label
{
display: inline-block;
}
input.hidden {
position: absolute;
opacity: 0;
pointer-events: none;
}
<ul class="ulMenu">
<li>
<div class="menuHeader">
<div>My Home</div>
<input id="menuContent_1" class="hidden" type="text" />
<label class="menu-content" for="menuContent_1">
<ul>
<li>item1</li>
<li>item2</li>
</ul>
</label>
</div>
</li>
<li>
<div class="menuHeader">
<div>My Stuff</div>
<input id="menuContent_2" class="hidden" type="text" />
<label class="menu-content" for="menuContent_2">
<ul>
<li>item4</li>
<li>item5</li>
</ul>
</label>
</div>
</li>
</ul>
Changed the HTML tags not for semantics but for clarity. I find Nested lists easier to visualize if every other level is represented by <dl>, <dt>, <dd> list elements.
Used hidden radio inputs since it's the easiest way to maintain a 'state' (ex. 'on' and 'off') indefinitely using only CSS.
Targeting elements is done by pairing off groups of <label>s and <input type="radio">s.
Used the visibility property because it's ability to keep children elements of an element with visibility: hidden visible if said child had visibility: visible explicitly set.
I'm not sure what use it really is to remove the parent of a menu and wasn't sure if OP wanted the parent back or not. So the headings aren't really gone when the menu items are clicked, they are just invisible. If you want them back, just click the space above the lists.
SNIPPET
body {
background: #222;
}
li {
text-decoration: none;
display: inline-block;
cursor: pointer;
padding: 3px;
margin-bottom: 12px;
}
.rad {
display: none;
}
.rad + label,
dd {
visibility: hidden;
}
dl:hover dd,
.rad:checked + label {
cursor: pointer;
visibility: visible;
color: #fc2;
}
dd label:hover {
background: #930;
border: .5px solid cyan;
}
<nav class="mainNav">
<div class="drNav">
<ul class="mainMenu">
<li>
<dl class="menuContent">
<input id='rad0' class='rad' name='radA' type='radio' checked>
<label for='rad0'>
<dt class="menuHeader">HOME___</dt>
</label>
<dd>
<label for='rad1'>
<input id='rad1' class='rad' name='radA' type='radio'>Item1
</label>
</dd>
<dd>
<label for='rad2'>
<input id='rad2' class='rad' name='radA' type='radio'>Item2
</label>
</dd>
</dl>
</li>
<li>
<dl class="menuContent">
<input id='rad3' class='rad' name='radB' type='radio' checked>
<label for='rad3'>
<dt class="menuHeader">CONTENT</dt>
</label>
<dd>
<label for='rad4'>
<input id='rad4' class='rad' name='radB' type='radio'>Item3
</label>
</dd>
<dd>
<label for='rad5'>
<input id='rad5' class='rad' name='radB' type='radio'>Item4
</label>
</dd>
</dl>
</li>
</ul>
</div>
</nav>
I'm trying to give a different background-color to my button when it is active. The HTML code is as below.
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<!-- some content -->
</div>
<div id="tab2" class="tab">
<!-- some content -->
</div>
<div id="tab3" class="tab">
<!-- some content -->
</div>
<ul class="tab-links">
<li class="active">
<a href="#tab1"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON ACTIVE</p></p></a>
</li>
<li>
<a href="#tab2"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
<li>
<a href="#tab3"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
</ul>
</div>
</div>
I used both this codes in my CSS files and i didn't sow nothing happened:
This is the CSS code for my project:
.cmimet_ne_vite:active
{
background:#787878;
}
.cmimet_ne_vite.active
{
background:#787878;
}
So who knows were is the problem to help me resolve it?
You have no element with both classes "cmimet_ne_vite" and "active". Instead you have a .cmimet_ne_vite element which is a descendant of your .active element, so instead of .cmimet_ne_vite.active you'll need to use:
.active .cmimet_ne_vite {
background:#787878;
}
Furthermore, you cannot wrap two <p> elements within each other. The browser will render this as two separate elements. Change:
<p class="arrow-up">
<p class="cmimet_ne_vite">BUTTON</p>
</p>
To:
<p class="arrow-up">
<span class="cmimet_ne_vite">BUTTON</span>
</p>
Or something similar.
Finally, if this element is intended to be used as a button you'll need to give it a role attribute set to "button":
<span class="cmimet_ne_vite" role="button">BUTTON</span>