I am using JQM 1.4.2 and trying to get the button icons closer to the Text when using the class .ui-btn-icon-left.
I took a screen shot and modified the the list icon the way I want it to look in the middle button. I just cant seem to get the icon off the left side at all. using padding just changed the top and bottom.
What class do I need to use to accomplish this?
<div data-role="navbar" >
<ul id="navfooter">
<li>Tour</li>
<li><a class="ui-nodisc-icon ui-icon-bars ui-btn-icon-left svbtn" href="#listViewPage" data-transition="slide" >List</a></li>
<li><a class="ui-nodisc-icon ui-icon-location ui-btn-icon-left svbtn" href="#map-page" data-transition="slide" >Map</a></li>
</ul>
</div>
Here is the image of what it now looks like after adding the css
.ui-icon-home::after {
position: relative;
left:10px;
}
You can set the left position of the icons within the button:
.ui-navbar a:after {
left: 20% !important;
}
However, this will allow the icon and text to overlap as the buttons get smaller.
A better way to achieve this might be to put the icons inline with the text. You put a span in front of the text with CSS to place the icon. To control the distance between the icon and the text, tweak the margin-right attribute:
<div data-role="navbar">
<ul>
<li><span class="ui-icon-alert ui-btn-icon-notext inlineIcon"></span>Summary
</li>
<li><span class="ui-icon-star ui-btn-icon-notext inlineIcon"></span>Favs
</li>
<li><span class="ui-icon-gear ui-btn-icon-notext inlineIcon"></span>Setup
</li>
</ul>
</div>
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
If you want icons in black with no disc behind them add the ui-alt-icon class to the span and change the CSS to get rid of the disc:
<div data-role="navbar">
<ul>
<li><span class="ui-alt-icon ui-icon-alert ui-btn-icon-notext inlineIconNoDisk"></span>Summary
</li>
<li><span class="ui-alt-icon ui-icon-star ui-btn-icon-notext inlineIconNoDisk"></span>Favs
</li>
<li><span class="ui-alt-icon ui-icon-gear ui-btn-icon-notext inlineIconNoDisk"></span>Setup
</li>
</ul>
</div>
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent !important;
}
Here is a DEMO showing all 3 options
If it's just the home icon you're looking to move, applying the following to that icon should fix it but it's hard to say what the best solution is without seeing the menu in action.
.ui-icon-home::after {
left: (amount to shift left)px;
}
Note that ::after applies styling to just the icon, whereas ".ui-icon-home" applies to the entire anchor element. Again, if you could link to a pastebin or similar, it would be easier to give you a better answer.
Related
I have this menu bar, which is replaced by Images.
All looks good on normal view, but when I swtich to mobile view
It looks so clumsy. I tried Padding, But the individual cell do not
make up space with each other.
Here is the screenshot
li.topmenu1 {
height: 20px;
}
<nav id="category" class="drawer_block pc">
<ul class="category-nav">
<li class="topmenu1">
<img src="http://azlily.bex.jp/eccube_1/html/template/default/img/menu/home.png">
</li>
<li class="topmenu2">
<img src="/eccube_1/html/template/default/img/menu/products.png">
</li>
<li class="topmenu3">
<img src="/eccube_1/html/template/default/img/menu/about.png">
</li>
<li class="topmenu4">
<img src="/eccube_1/html/template/default/img/menu/howtouse.png">
</li>
<li class="topmenu5">
<img src="/eccube_1/html/template/default/img/menu/column.png">
</li>
<li class="topmenu8">
<img src="/eccube_1/html/template/default/img/menu/FAQ.png">
</li>
</ul>
</nav>
Note - I also tried to include FULL URL of the image
but somehow its not showing up on snippets :/
check this https://jsfiddle.net/1dvy2854/4/
.category-nav li {
display: inline-block;
}
#media only screen and (max-width: 600px) {
.category-nav li {
display: block;
}
.category-nav li img {
max-width: 65px;
display: inline-block;
}}
Make sure that the elements inside category-nav have correct margins and paddings.
If you want to make sure that the individual pictures for the menu look okay, you might want to set styles for the images one by one.
So, in your case you can edit the heights for all of your topmenu1, topmenu2...
Also, you can the inspect tool on Chrome to find what is causing problems like this in your CSS code. You can change the code live and see what change is causing what.
For my <ul> list, I would like to add a <hr> after each element of a list. The Result should render like:
<ul class="mylist">
<li>
moooo!
<hr width="40%">
</li>
<li>
maaaaa!
<hr width="40%">
</li>
...
</ul>
It is bad style adding <hr> to each <li> so I would like to refractor this using css only. I cannot use:
.mylist > li: after{
content: "<hr>"
}
as content would escape the characters.
I also do not want to use jQuery:
$('.mylist').find('li').append('<hr width="40%">');
So the question is, how could I append <hr width="40%"> to each <li> of a certain list using css3 ?
jQuery Solution
Just realized that you wanted to nest the hr element inside the li before you close it, yes it's perfectly valid, so simply use append(), and note, you cannot do this using CSS only, as you cannot modify DOM using CSS, you need to use jQuery or JS
jQuery("ul li").append("<hr />");
Demo
CSS Solution
If you don't need an extra element, or you don't want a jQuery solution(As you want)
Using hr element as a direct child to ul element is not a valid markup, instead, you can use a border-bottom for each li which will behave same as hr does, still if you want an explicit way to do so, say for controlling the width of the separator without changing the width of li than you can do it like this
Demo
ul li:after {
content: "";
display: block;
height: 1px;
width: 40%;
margin: 10px;
background: #f00;
}
Here, am just creating a virtual block level element, which doesn't actually exists in the DOM, but it will just do the thing which you need. You can just design the element, the same way you style a normal div. You can also use border on this but to keep the thin line horizontally centered, I've assigned height: 1px; and than am using margin to space up.
I think it's better to use CSS for this. for example you can stop using <hr> tag, instead do something like:
<ul class="mylist">
<li>
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and then with CSS:
.mylist li { border-bottom: 1px solid black; }
There are other options too, for example if you want to show the horizontal line only for some list items, you can give them a class and add a CSS rule only for that class. like this:
<ul class="mylist">
<li class="hr">
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and CSS:
.mylist li.hr { border-bottom: 1px solid black; }
You can use like this:
<ul>
<li></li>
</ul>
<hr/>
Thats simple. If you have nested ul and li then you use li instead of <hr/> or simply <hr/> inside a <li></li> tag. See below. Its purely your choice.
<ul>
<li>
<ul><li></li></ul>
</li>
<li style="height:1px;border:solid 1px #666"> </li> // or you can also use
<li><hr/></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
Tags in content are not allowed and even if it would be very misleading (css { content: "text"}, How do i add tags?)
If you think is wrong to add <hr> in HTML than it is wrong adding with css (if it would be possible) or js. IMHO a first You should try to use border of <li> if result won't be as expected add that <hr>
Insert A Class That Creates A bottom-border: For Each <li>
<!--########## STYLE EACH li USING CLASS ##########-->
<style>
.hr {
width:40%;
border-bottom:1px solid rgba(0,0,0,.7);
}
</style>
<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
-CONTENT-
</li>
<li class="hr">
-CONTENT-
</li>
...
Try this CSS:
li:after {
content: " ";
display: block;
height: 2px;
width: 100%;
}
What would be the best way to accomplish something like this, but where the icons are vertically-aligned with the middle of the text (which has variable length)?
The icons are CSS sprites, with the background moving over 26px when hovering on the icon or associated text
New answer compatible with CSS sprites
In response to #Octavian's feedback, here's a different way of dealing with the issue that still allows the use of CSS sprites. The solution here is to use display:table on the li and display:table-cell on its children, in order to vertical align them. Then, instead of an image, a placeholder div with a background-image can be used for the sprites. Here's a jsFiddle, and the code is below:
CSS
ul {padding-left:0;}
li {display:table;margin-bottom:20px;}
.image-holder {
display:table-cell;
width:26px;
height:26px;
vertical-align:middle;
background-image:url('http://placehold.it/52x26');
background-repeat:no-repeat;
background-position:left center;
}
li:hover .image-holder {background-position:right center;}
.text {padding-left:30px;display:table-cell;}
HTML
<ul>
<li>
<div class="image-holder"></div>
<span class="text" style="display:table-cell;">www.website.com</span>
</li>
<li>
<div class="image-holder"></div>
<span class="text" style="display:table-cell;">742 Evergreen Terrace<br/>Springfield, SP 12345<br/>United States</span>
</li>
<li>
<div class="image-holder"></div>
<span class="text" style="display:table-cell;">T) (800) 555-5555<br/>F) (800) 666-6666</span>
</li>
</ul>
Old answer, more elegant but incompatible with sprites
Another option would be to use each image as a background-image positioned in the top middle of each li. The key piece of CSS here is background-position, the first argument of which represents the horizontal alignment (top in this case) and the second argument of which indicates vertical alignment (center in this case). Documentation here. Here's a jsFiddle, and the code is below:
CSS
li {
background-position:left center;
background-repeat:no-repeat;
padding-left:40px;
padding:5px 0 5px 60px;
margin-bottom:20px;
list-style-type:none;
background-image:url('http://placehold.it/30x30');
}
HTML
<ul>
<li id="website">www.website.com</li>
<li id="address">742 Evergreen Terrace<br/>Springfield, SP 12345</li>
<li id="phone">T) (800) 555-5555<br/>F) (800) 666-6666</li>
<li id="email">info#website.com</li>
<li id="share">Share via email</li>
</ul>
Edit 1 In response to #cimmanon's comment (thanks!) example now works with images larger than text, and I've posted an accompanying demo.
Edit 2 Altered in line with #Octavian's comment indicating a need for middle-aligning rather than top-aligning.
Edit 3 New answer compatible with CSS sprites
You want to set the line-height to the height of the image (or 50% for double lines)
How can I put an image in place of text "Submit" .. hard coded or css? what is better option.
<ul>
<li><span class="class1" onclick="func1()">Submit</span></li>
</ul>
Add an image to your class:
<ul>
<li><span class="class1" onclick="func1()"></span></li>
</ul>
.class1 {
display: inline-block;
height: 32px;
width: 32px;
background-image: url(myimage.png);
}
The alternative to what you have is, of course,
<img src="picture.png" />
and you can style the a (or img) to your heart's content in your CSS
<div class="actions-wrapper">
<ul>
<li>
<a class="" href="#answer-form">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action1
</a>
</li>
<li>
<a class="" href="">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action2
</a>
</li>
</ul>
</div>
Hello, I have the previous code.
My div has a max size, and i want to display the li inline, but at the end of the line, i dont want the containing the icon to be separated from its text within the same li.
In my css i have the following :
.actions-wrapper ul { line-height: 25px;padding: 0; margin:0; list-style-position: outside; list-style-type: none;display: block; }
.actions-wrapper ul li { display:inline; margin-right: 12px;padding:3px 0;}
I have tried to put : white-space: nowrap; to the li, but it doesnt work in IE.
Here's a jsfiddle of my code : http://jsfiddle.net/wSTQy/1/
In this example the "Another action" is not on the same line of its icon.
If i add the white-space : nowrap; it wont work anymore in IE6
does adding the text-alignment to the ul achieve what you want?
.actions-wrapper ul {
text-align: right;
}
Updated after new information
changing the display of the li to inline-block instead of inline (needs a hack for IE7 and below) seems to work, even without the white-space: nowrap;
Updated fiddle (with hack included) : here
By looking at your markup, seems you want the icon and the text to make the same action.
Why not use css to add the icon next to the text, like so:
<li>
<a href="#answer-form" id="icon-label">
Action1
</a>
</li>
With the CSS:
#icon-label {
background: transparent url(path/to/image) no-repeat x y;
}
You can do this by removing all the whitespace from between the anchors, and separating them with a .
I think the easiest solution would be to change display:inline to float:left. That way the icons and the text never get separated.