i have this
<li><a href="#" >title</a> <span style='text-align:right;'>(0)</span></li>
its not working
and this
<li><a href="#" >title</a> <span style='float:right;'>(0)</span></li>
its go to the down line (not working)
its appear like that
|title (0) |
i want it
|title (0)|
There is likely a more elegant solution to do this but this should work:
<li style="position:relative">
title <span style="position:absolute; right:0;">(0)</span>
</li>
You may want to add padding-right to the li to account for the space used by the span so that the link text and the span don't overlap.
Related
I would like to achieve a mobile menu which is always visible on the bottom of my page. I don't know if there is a specific name for such menus but I've found a page which does exactly this menu:
What is the best way to achieve exactly this for tablet and smaller devices using materialize?
There is something called a Toolbar in Materialize.
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="waves-effect waves-light"><i class="material-icons">insert_chart</i></li>
<li class="waves-effect waves-light"><i class="material-icons">format_quote</i></li>
<li class="waves-effect waves-light"><i class="material-icons">publish</i></li>
<li class="waves-effect waves-light"><i class="material-icons">attach_file</i></li>
</ul>
</div>
But it's not the same what you are looking for. You have to modify this or you need to create your own.
Fab for toolbar:
http://materializecss.com/buttons.html
Have you tried to use CSS, select the whole menu by class or id and set it to position fixed?
#fixedMenu{
position:fixed;
}
You can then play around as the where exactly you want to place it. By using width or margins set to auto then you can make it responsive for different viewports.
I want make a list with a few names.
But i need put all in same size.
How i can make that background with same size using bootstrap?
<ul class="list-unstyled">
<li>
<a class="btn btn-xs btn-warning">
<span >Loren ipsum</span>
</a>
</li>
<li>
<a class="btn btn-xs btn-warning">
<span >Lorem ipsunis</span>
</a>
</li>
<li>
<a class="btn btn-xs btn-warning">
<span >Lorem ip</span>
</a>
</li>
</ul>
Code in jsfiddle
http://jsfiddle.net/novasdream/d3fkoeee/
You'll need to set a width or min-width on those elements. Min-width is a little safer if the button content has the potential to get long. Something like this in your css would do it:
.btn-xs {
min-width: 15em;
}
Note: 1em is roughly the width of one "M" character in the font in use, so I'd recommend looking at your actual text content to find an appropriate width. (15 is just a number I grabbed out of the air.)
Also, bear in mind that this style, if authored as above, will apply to any .btn-xs elements. If you want finer-grained control, you'll probably want to put a specific class on either these buttons or their containing list, so you can target only this instance.
Make the .btn links display:block so that they become 100% the width of the parent li. Size your ul as required.
.list-unstyled li a.btn {display:block;}
http://jsfiddle.net/d3fkoeee/4/
a better way would be to add an id to the link a like so http://jsfiddle.net/1shzc3bh/1/ and add a width there
e.g. a#button{width:100px;!important
}
I have the following structure within a bootstrap document -
<div class="col-lg-6 col-sm-6>
<ul class="stdULGrey st_tabs_ul">
<li class="st_li_first st_li_active">
<a href="#view_1" class="st_tab st_tab_first st_tab_active">
<span class="icoMore icoA"></span>
<span class="tabText">WANT TO KNOW MORE?</span></a>
</li>
<li>
<a href="#view_2" class="st_tab">
<span class="icoWhereTo icoA"></span>
<span class="tabText">WHERE TO FIND US?</span>
</a>
</li>
</ul>
The span element - icoMore contains a background image - which I'd like to respond to the full width of thebootstrap parent - I have tried the following code -
.icoMore{background:url(../img/logos%20and%20icons/Wanttoknow_Icon_Off.png) no-repeat; min-width:100%; min-height:auto; display:block; }
But it displays at zero width and height - can anyone advise a solution?
Add display: block to span. It should be enough.
You'll need to add any character into your <span>, even a space, like:
<span> </span>
Check this fiddle:
http://jsfiddle.net/dimaspante/5j6vt0mk/
I need a help. I was doing a drop up menu with share icons.
My problem is this: I'd like that when I pass the mouse over the main-share icon in the footer and than go to select another icon (like facebook), the main icon remains selected like as mouse hover, but it don’t works.
<div class="footer large blue">Footer Blue
<div class="pull-right buttons">
<ul>
<li><a class="btn2 large share2 blue" href="#">Share</a>
<ul>
<li><a class="btn large rss" href="#">RSS</a>
</li>
<li><a class="btn large twitter" href="#">Twitter</a>
</li>
<li><a class="btn large plus" href="#">G+</a>
</li>
<li><a class="btn large facebook" href="#">Fb</a>
</li>
</ul>
</li>
<li><a class="btn2 large btt blue" href="#">Back to Top</a>
</li>
</ul>
</div>
I think the problem is that the elements li and a, are two independent tags.
Watch this image to understand it better what am i saying (because i’m not able to explain it better ._.)
http://db.tt/Kujz3Pv4
Here's the code:
http://jsfiddle.net/zPavan/KHWJ4/2/
If there are any problems or have suggestions on the code, I thank you for the advice!
Instead of depending on the hovering of the <a> specifically, make it depend on the list item that contains the entire <ul>:
li:hover > .btn2.blue {
background-color: hsl(197, 59%, 30%);
}
I would suggest giving that specific li a class like .share that you can use as well.
http://jsfiddle.net/ExplosionPIlls/KHWJ4/3/
I think this will do it:
.buttons ul li:hover > a {
background-color: #1f5f79;
}
I want to select all li which not contains a tag in css:
ul.sf-menu li:not(a)
But looks like it is not working.
Need help
<ul class="sf-menu sf-js-enabled sf-shadow">
<li>
<a href="/ ">
</li>
<li> need to select this li because it is not contains a href
A
<ul style="visibility: visible; display: block">
<li>
<a href="/B-1">
</li>
<li>
B-2
</li>
</ul>
</li>
<li>
Two things
1) Your selector doesn't match the question you're asking. It currently selects every LI that is not an Anchor. This should be every LI on the page.
2) What you want can't be done with CSS right now. Your best bet would be to use some JavaScript to do this. For instance, the following jQuery would work.
$("ul.sf-menu li:not(:has(a))").doSomething()