I want to add an incremental value through CSS, but apparently i am doing something wrong.
HTML
<ul role="menu" style="left: 0px; position: absolute; top: 0px;">
<li id="Slideshow-13675338798500">
<a class="slideshow-thumbnails-hidden" href="images/slideshow/slide-1.png" role="menuitem" tabindex="0">
<span class="thmubbutton"></span>
</a>
</li>
<li id="Slideshow-13675338798501">
<a class="slideshow-thumbnails-hidden" href="images/slideshow/slide-2.png" role="menuitem" tabindex="1">
<span class="thmubbutton"></span>
</a>
</li>
<li id="Slideshow-13675338798502">
<a class="slideshow-thumbnails-hidden" href="images/slideshow/slide-3.png" role="menuitem" tabindex="2">
<span class="thmubbutton"></span>
</a>
</li>
</ul>
css
span.thmubbutton{
counter-increment: myIndex;
}
span.thmubbutton:before
{
content:counter(myIndex);
}
The output is 1 | 1 | 1
DEMO
You need to reset your counter to 0 before using it.
body {
counter-reset: myIndex;
}
Fiddle: http://jsfiddle.net/ZgEgS/1/
More info on counters here: https://developer.mozilla.org/en-US/docs/CSS/Counters
I don't believe that CSS supports this natively. There's something called LESS (http://lesscss.org/) that does support increments. Try giving it a spin.
EDIT: nevermind... I believe I was wrong. Still, LESS is a good alternative as well. So I won't delete my answer ;)
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
I've got a Bootstrap Navbar that is fairly basic and populated with image links over text. However, I'd like to also include a badge - IE, show the number of messages.
The problem is the badge position. It gets placed to the right, but I would prefer to justify it to the top-right relative to the image. It also directly affects the width and height of the link itself.
<li>
<a href="#">
<?= $this->Html->image('MessageIcon.png'); ?>
<span class="badge">42</span>
</a>
</li>
I have tried a few solutions that turned out to be fairly messy - forcibly setting the badge position, but ultimately they did not work too well. Does anyone have suggestions on how to handle badge position and link design in this case?
EDIT: To clarify, this is what I am trying to achieve:
Checkout this snippet
.icon.container a>img {
width: 40px;
}
.icon.container {
display: inline-block;
}
.badge-notify{
position: relative;
top: -10px;
left: -18px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul>
<li class="icon container">
<a href="#">
<img src="https://cdn4.iconfinder.com/data/icons/ios7-active-2/512/Envelope.png">
<span class="badge badge-notify">3</span>
</a>
</li>
<li class="icon container">
<a href="#">
<img src="https://cdn4.iconfinder.com/data/icons/ios7-active-2/512/Envelope.png">
<span class="badge badge-notify">3</span>
</a>
</li>
<ul>
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;
}
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.
OK, i have no idea how it append, this form : http://xquives.kiaistudio.com/new-form/index.php have a two column field. But in IE7 it's in one column, but not in ie8 or 9 or FF of chrome. Can you please tell me what BAD i have done, or how to make IE behave like normal browser. I have take more that 2 hours testing... and i have NO IDEA where to look !
You're markup doesn't lend itself well to crappy ie7. You're markup looks generally like this:
<ul>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
</ul>
This is pretty error prone.
You'd be better off with parent containers that drive the columns like so:
<div style="width: 50%; float: left">
<ul>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
</ul>
</div>
<div style="width: 50%; float: left">
<ul>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
</ul>
</div>
EDIT: if you're married to this markup structure, you can hack ie7 by adding:
UL{*overflow:visible;}
.autocolumn LI {*width: 48%;}
The better thing to do is layout your columns in a way like i've described above