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;
I want to create an unordered list with list items that have images and the bullets beside them. If I create a background image as the way to achieve this the image is appearing behind the text. If I set the image as a list-style-image, it's not lining up with the text and it's taking away the bullet that I want. Here is my code for the list-style image and I was going to attach an image, but I don't have enough points yet since I'm new to achieve this. Any help would be appreciated!
Thanks!
.ul1
{
margin-left: 25px;
list-style-image: url('Images/Air Icon copy.png');
}
<div>
<ul id="Ul1">
<li class="ul1">Clean air: Our emissions are 250 percent lower.</li>
</ul>
</div>
This is what I used for the same problem you had:
list-style: none;
background: url('something.png') 0 0 no-repeat;
padding: 0 0 0 30px;
height: 30px;
Instead of using an image that wouldn't align properly i decided to use it as a background and just don't repeat it. Play around with the padding and height untill it fits how you want!
Jsfiddle if you're interested
EDIT: Just read that you wanted to keep the bullet. Take away the list-style: none and you're good to go.
Here is the another way to show the image and as well bullets.
.ul1
{
left:12px;
/* list-style-type:none;*/
}
li{position:relative;}
li.ul1:before {
content: "";
content: url(http://lorempixel.com/20/20/);
margin:10px 0;
}
Check the DEMO.
When you retweet or favourite on Twitter, a little coloured triangle with an icon appears in the corner of the div containing the tweet. I've copied the CSS and sprite sheet from Twitter and tried to recreate it on my site, but it didn't quite go to plan (the triangle didn't appear at all using the exact same CSS). So, how would I add a triangle 'dog-ear' effect to the corners of divs on my site?
This was the code I copied from Twitter:
.dogear {
position:absolute;
top:0;
right:0;
display:none;
width:24px;
height:24px;
}
.retweeted .dogear {
background-position:0 -450px;
}
.favorited .dogear {
background-position:-30px -450px;
}
.retweeted.favorited .dogear {
background-position:-60px -450px;
}
.retweeted .dogear,.favorited .dogear,.retweeted.favorited .dogear{
display:block;
}
i {
background-image: url("../sprite.png") !important;
display: inline-block;
vertical-align: text-top;
background-image: url("../sprite.png");
background-position: 0px 0px;
background-repeat: no-repeat;
}
And inserted into the HTML using:
<i class="dogear"></i>
I changed the sprite sheet URI and I was going to change the class names, and add some in so it wasn't exactly the same. Is it possible to make this effect work?
Thanks :)
You'll need to add a larger z-index property to the element containing the dog-ear so that it appears on top of the element you wish it to appear to overlap.
z-index is used to control the stack order of elements that are positioned absolutely, relatively or fixed.
You can read more on z-index on the Mozilla Developer Network.
In addition, you're using the dogear class in isolation from what I can tell from the code you've pasted. Which, if you look at the class definition in the stylesheet, is told to not display: display: none;
In this jsfiddle I'm trying to create a link that covers the entirety of the sprite image. For some reason though, the height and width attributes of a don't seem to work.
What can I do to create links from sprite images?
add display:inline-block or display:block to a for dimensions to work. dimensions don't take effect for inline elements.
I've updated your fiddle. The link covers the whole image now and this is done by turning the link into a block element with display: block like many other answers above state. I also added the id selector to all your other selectors and moved the selector and declaration with where the actual background image is being declared to the top. The reason for this, is that the li-element's background-position were overwritten because of lack of specificity and due to the order of your css declarations.
Use this
// Code shifted to the end.
Where, CSS is like this:
.sprite-sp1{
background-position: 0 0;
width: 242px;
height: 244px;
}
.sprite-sp1 a{
width: 242px;
height: 244px;
border: 1px solid;
}
.sprite-sp2{
background-position: 0 -294px;
width: 241px;
height: 244px;
}
#container li {
background: url(http://i.imgur.com/iDrt8.png) no-repeat top left;
}
EDIT Edited to make the sprite clickable. The new code shall be:
<ul id="container">
<li><span class="sprite-sp1"></span>test</li>
<li><span class="sprite-sp1"></span></li>
</ul>
Add display:block; to a, it will work then...
I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!
Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-
#header
{
width: 1000px;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.
You control design and styles with CSS, not the behavior of your content.
You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.
You can nest your <a> tag inside <div> and then put your image inside :)
If you don't want that, you're going to have to use JavaScript to make your <div> clickable:
Document.getElementById("header").onclick = function() {
window.location='...';
}
To link a css-sourced background-image:
#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
<a id="header" href="blah.html" class="linkedImage">
The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.
That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)
<img src="foo" class="whatever" alt="foo alt" />
EDIT: Taking original intent (updated question) into account, a new code sample is below:
<img id="header" alt="foo alt" />
You're still in an HTML world for links, as described by other answers on this question.
sorry to spoil your fun ladies and gentlemen, it is possible.
Write in your header: [link](http://"link here")
then in your css:
#header a[href="https://link here"] {
display: inline-block;
width: 75px;
height: 75px;
font-size: 0;
}
.side .md a[href="link here"] {
background: url(%%picture here%%) no-repeat;
}
then in your css
.titleLink {
background-image: url(imageUrl);
}
You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.
Edit
The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:
<div id="header" onclick="window.location='http://google.com';">My Header</div>
That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.
Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.
CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href=""> tag. You can then style this link (or add an image to the link) using CSS.
You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:
<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>
and the CSS:
#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}
Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.
Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:
<h1 class="technique-six">
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url("images/header-image.jpg") no-repeat;
overflow: hidden;
}
Accessible, and also solid across browsers IE6 and > . You could also link the H1.
HTML is the only way to create links - it defines the structure and content of a web site.
CSS stands for Cascading Style Sheets - it only affects how things look.
Although normally an <a/>; tag is the only way to create a link, you can make a <div/> clickable with JavaScript. I'd use jQuery:
$("div#header").click(function() {window.location=XXXXXX;});