I want to create a menu item in Joomla 3 however use a sprite image instead of the link name. To do so I use the following html code and CSS to add a background image.
<a class="mobile-icon-cart sprite" href="/index.php/cart" style="width: 40px; height: 40px; display: block;">Cart</a>
How can I hide the text "Cart" in a nice way. Hiding the text from Joomla backend only works when uploading a picture but then I can't use the sprite image. Also I would not like to use color:#fff; for text.
Can't you use display:none? If you can't use display:none, you can try with removeChild() http://www.w3schools.com/jsref/met_node_removechild.asp or removeAttribute() http://www.w3schools.com/jsref/met_element_removeattribute.asp
Use
width:0;
height :0;
padding :40px 40px 0 0;
overflow: hidden ;
display: block;
Related
I'm trying to use inline CSS to style an image sprite. So obviously, I need background-position to work, but it's not. I'm not sure what's wrong. It's supposed to be a clickable image that links to another page of the site, but the CSS isn't working.
<div class="homepage"><img src="http://imageLinkToHomepage.com/" style=background-image: "-20px;"></div>;
<div class="homepage"><img src="http://imageLinkToHomepage.com/" style="background-image:-20px;"></div>
I think you had some quote marks mixed up there...
Looks like you're trying to apply the background-position property to an image tag, which won't work. Background properties won't apply to image tags. For your specific use case, you could apply a background image to your anchor tag without needing an image element - like so:
<div class="homepage">
</div>
.image-button {
display: inline-block;
width: 55px;
height: 55px;
background: url('http://3.bp.blogspot.com/-q0CJBWRLWUs/T_z2_c7TunI/AAAAAAAABPk/rS7fmE1P-B4/s1600/megaman7.png') no-repeat 0px 0px;
}
.image-button:hover {
background-position: -55px 0px;
}
View this in action here: http://codepen.io/anon/pen/PqKMLo
I was facing the same issue and I got it done by writing !important.No rule was overridden but css was not applying the position without making it important, seems like a bug.
<div class="ProposalBanner" style="background:url(...\imgs\BannerPRop.jpg) no-repeat center -31px !important"></div>
It's a challenge and not sure if that's even possible but here is my problem:
I don't have full access to the website. The only what I can do is to edit my external css.
Menu code:
<ul id="navPrimary" class="nav">
<li id="navLink1">Link1</li>
</ul>
I want to add this as first position on the list:
<li id="navHome"><i class="icon-home"></i></li>
I can ask system administrator to add link to Home but his code will look like this:
<li id="navHome">Home</li>
So there still will be the problem with replacing text Home with my <i class="icon-home"></i>.
The only thing which comes up to my mind regarding CSS is :before, :after and content but not quite sure how exactly to use it. As before I've tried adding single word.
EDIT1
I have tired this:
#navLink1:before{
content:'<li id="navHome"><i class="icon-home"></i></li>';
}
but this added only html code as text.
by using :before and :after you can add content to your HTML document. even you can add a icon too.
for eg
#navHome:before {
content:'';
display:block;
float:left;
width:20px; /* this must be the icon width*/
height:20px; /* this must be the icon height*/
background: url(icon.png) 0 0 not-repeat;
}
If you want to do so without using pseudo elements you can just hide the link text and add the icon as a background. To remove the text you do
display: inline-block; /* or block */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
Then add the background as an image, sample:
http://codepen.io/anon/pen/vOYmoQ
This still requires the admin to add the link in for you.
I'm creating a site where the homepage has rollover sprites with text that appears underneath the images on rollover. The image sprite already has an active state on rollover. I want to add an additional state: live text that appears underneath the image. I've found many solutions that can create text that appears when you roll over a plain image. However, I am unable to make it work with a sprite, mainly because the sprite's image has to live in the css and many of the examples that I've seen use it in the HTML. If someone could let me know if this is even possible using CSS or if I should try it with Javascript, it would be much appreciated!
Here is the HTML for the rollover sprite:
<div id="image_1">
<div class="roll_title">
<h4>Title</h4>
</div>
</div>
CSS:
.roll_title {
margin: 170px 0 0 0;
text-align:center;
}
#image_1 {
display:block;
width:150px;
height:150px;
background-image:url(../i/patria_roll.png);
background-repeat:no-repeat;
float:left;
margin: 50px 0 0 30px;
}
#image_1:hover {
background-position-y: -150px;
}
Give an absolute position .roll_title with display: hidden; inside #image_1 and change its display property to display: block; when #image_1 is hovered.
Here's a live example:
http://jsbin.com/doyer/1/
Need blue arrow after sentence end for a div it should auto display can we fix this with css
i found solution with css3 but i can't use css3 in this page
i am using a CMS and there is it's client who add and edit contain, can't write server side language nor javascript
i thought it is easy to fix with css but i am finding impossible to if it now
DemoLink
p:after
{
content: url('images/blue-arrow.png');
}
Assuming you save the blue arrow image at that location.
This is not a best practice, but the only way to do this in ie7 (without a polyfill) is to add an inline element to the end of each p tag (on the inside) and give it the appropriate image styling.
ex:
HTML
<p> Lorem Ipsum... <span class="arrow"></span></p>
CSS
p span.arrow{
display: inline-block;
background: url(img/arrow.png) no-repeat top left;
width: XXpx;
height: XXpx;
}
I have a simple button (as shown below) on which I need to display two pictures, one on either side of the button text. Im battling to create the CSS that will work in both Firefox and Internet Explorer! (the button images are coming from a JQuery UI skin file)
CSS
button div{
width:16px;
height:16px;
background-image: url(images/ui-icons_d19405_256x240.png);
}
button div.leftImage{
background-position: -96px -112px;
float: left;
}
button div.rightImage{
background-position: -64px -16px;
float: right;
}
HTML
<button><div class="leftImage"></div><span>Button Text</span><div class="rightImage"></div></button>
Preview
Firefox
Internet Explorer 8
Here is how to do it
The Theory
Block elements (like DIV) although displayed in order of creation, will position themselves adjacent to the previous element or when short of space, on the next line. Because we dont want to give the button a width (we want the button to be automatically sized based on the content of the button) the block elements continued to appear on the next line (see IE8 image in the question above). Using white-space:nowrap forces inline elements (like SPAN and EM) to be displayed on the same line, but is ignored by block elements, hence the solution below.
CSS
button{
margin: 0px;
padding: 0px;
font-family:Lucida Sans MS, Tahoma;
font-size: 12px;
color: #000;
white-space:nowrap;
width:auto;
overflow:visible;
height:28px;
}
button em{
vertical-align:middle;
margin:0 2px;
display:inline-block;
width:16px;
height:16px;
background-image: url(images/ui-icons_3d3d3d_256x240.png);
}
button em.leftImage{
background-position: -96px -112px;
}
button em.rightImage{
background-position: -64px -16px;
}
HTML
<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>
The Result
Internet Explorer 6, 7, 8 and Firefox 1.5, 2, 3
I would use spans not divs for the image containers, since you seem to want the images to appear inline. Using floated divs is just too complex.
In fact, you could probably simplify things further by applying one background image to the button itself, and one to the button-text span, and removing the other two containers altogether.
Another alternative is to simply add the images in as img tags.
try resetting the button css.
button{
border:none;
background:none;
padding:0;
margin:0;
}
And add a space inside an empty DIV see if it works.
<button><div class="leftPic"> </div><span>Button Text</span><div class="rightPic"> </div></button>
I think you can strip off the button tag and use a div tag instead.For other button action use javascript onlick() function and use css to change curser on hover(to make it look like button).For my project I used a similar approach.This may help you :)
I know this is already solved, but just wanted to add that an easy way to put more than 1 image in a button is creating 1 .png with the dimensions of the button you want to create and the to elements together in one file.