i was editing a template and there were around 50 images, so i put all the images into a Image Sprite
so the css is looks like this
.img_set_1 {
background: url(../images/csg-4e1827fd5b201.png) no-repeat top left;
}
.img_set_1-button_menu_left{ background-position: 0 -256px; width: 19px; height: 29px; }
the old css file contains this kind of lines and How to modify below line to get image from sprite?
a.blackbutton span { margin:0; padding:7px 0 7px 19px; background:url(images/button_menu_left.gif) no-repeat top left;}
Regards
i recommend using a tool that GOOGLE suggest to use
http://spriteme.org/
run the script on ur page and it will generate everything for you, great script!
Related
I'm making a userscript for a game that allows a player to choose a flair from a menu. I have a picture that contains each flair that looks like this:
Without separating each flair into its own image, how can I make a layer of buttons on top of each flair in a sort of grid-like fashion? That way when the user presses the button on top of a flair, I can know which button was pressed and get the necessary information to select it.
I'm thinking of putting the picture in an <img> tag and making a table that lies right over the image, but I'm worried about how to line up the table correctly.
It sounds like you want to use a sprite map
Quick example
Pluck the only part of the image that you want out of it.
CSS like this
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
HTML like this
<div id="home"></div>
You'll define a css id or class for each image in img_navsprites.gif
Reduced CSS example
This way we reduce the required CSS (at the cost of more verbose html). Bootstrap does similar things with glyphicons.
CSS
.sprite {
// Assuming equal width and height of all sprites in the map
width: 46px;
height: 44px;
background: url(img_navsprites.gif);
}
.sprite-first {
background-position: 0 47px;
}
.sprite-second {
background-position: 0 93px;
}
.sprite-third{
background-position: 0 139px;
}
HTML
<span class="sprite sprite-second"></span>
Source
CSS Image Sprites
I'm making an application using Dreamweaver for a school project, and have used a version of the code I found online and re-writing it to suit the assignment needs.
Problem I have my links as actual images created in Photoshop (which are working). These are on a .css file, each by their own separate li tag. (These don't need to be changed!)
Eg.
li.accom {
height:93px;
width:556px;
background-image:url(../images/accom.png);
}
Question
How do you center these images? I've tried text-align=centre; and that hasn't worked.
Try this https://jsfiddle.net/2Lzo9vfc/64/
CSS
li {
width: 150px;
height: 50px;
margin: 10px;
list-style-type: none;
border: 1px solid black;
text-align: center;
background: url('http://placehold.it/70x50');
background-repeat: no-repeat;
background-position: center;
}
For backgrounds you have These CSS rules.
For your image, you will need of background-position attribute with value: center and, if you don't want it to be repeated, background-repeat attribute with value no-repeat.
I read once how to create cross-browser rounded buttons with shadow using images, I lost my bookmarks unfortunately that's why I ask does anybody remember the technique.
There is left side picture i.e
And then very wide body image which ends up with right curved border/shadow like this :
So at the end you end up with one button which can be used with multiple sizes? I was googling this, but it seems noways everyone use css without images.
Does anybody knows how this technique is called or can refer me to the link? or give me code example, I'd appreciate any of those
When using an image for the start and one for end of the button, these technique is called "sliding doors" and there are myriads of search results with any search engine…
For an introduction read the A List Apart article: http://www.alistapart.com/articles/slidingdoors
But as Neurofluxation asked you in the comment above: Why the hell would you do that years after we have multiple other methods of styling a button in CSS? The A List Apart article for example is from 2003 - which is an age in Internet terms.
This technique is a variation of the "Sliding Doors" technique:
http://www.alistapart.com/articles/slidingdoors/
http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Basically you use markup like this:
<button><span>Text</span></button>
Then style the span with the edge image to the side, overlapping the main background image of the parent element. Something like this:
button {
background:url(main-image.png) top right no-repeat;
border:0;
padding:0;
width:80px; /* with only 1 "door", you might need to set a width */
/* other resets may be necessary */
}
span {
background:url(left-door.png) left top no-repeat;
}
button, span {
height:37px; /* height of your sprite */
display:block;
}
Demo: http://jsfiddle.net/Kqs3m/
Your results may vary depending on your sprites and the natural width of the content.
Here's the technique which I think you are looking for (using the same images you attached):
HTML:
<a href="#" class="button">
<span>Small</span>
</a>
<a href="#" class="button">
<span>Large button</span>
</a>
CSS:
.button {
background: url('http://i.stack.imgur.com/htUHL.png') no-repeat left top;
padding-left: 9px;
height: 37px;
display: inline-block;
text-decoration: none;
color: #555;
text-shadow: 0 1px 1px #FFF;
font-family: sans-serif;
font-size: 0.8em;
}
.button span {
background: url('http://i.stack.imgur.com/ID6nO.png') no-repeat right top;
display: inline-block;
height: 37px;
padding: 5px 12px 5px 3px;
}
.button:hover span {
color: #333;
}
Link to the demo: http://jsfiddle.net/v284q/
Using CSS properties instead of images can make your applications faster.
In this case you could just use: Border-Radius, Box-Shadow combined with a gradient background.
Here you can find a good Gradient Editor:
http://www.colorzilla.com/gradient-editor/
How to use Border-radius and Box-shadow:
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/box-shadow/
I am not good with CSS but have downloaded a template off the net and need to work with that.
I am sure this is a pretty simple thing to do, basically in my html file I have this code:
<div id="topbar"></div>
and in the CSS file I have this code:
#topbar {
height: 104px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
}
My question;
how do I make the image/logo into a link (without a border of course) so that people can click it and come back to the homepage?
please recommend a good tutorial to make "table-less" based layouts for html pages.
I am kind of old school and only know how to make a layout with a table, I think i need to upgrade my skills :)
I think you could make the logo into a link like this:
HTML:
<div id="topbar"><img src="images/logo.png" alt="logo"></div>
CSS:
#topbar a {
color: #ffffff;
border: 0;
}
Note: Background images can't be formatted as links.
If you want it to be clickable, you should put the image into the HTML like this:
<img src="images/logo.png" alt="">
and use
#topbar {
display:block;
height: 104px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
border:0;
}
Otherwise you'd need to resort to an empty anchor element and/or Javascript, which I'd consider bad practice in this case.
1) Background images can't be made into links. What you could do is make the DIV a link instead:
<a id="topbar"></a>`
#topbar {
height: 104px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;
display: block;
border: none;
}
2) Google 'css layout' and begin reading. There's hundreds of thousands of tutorials out there. If you are completely lost, I'd start with a good book:
http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321509021/ref=pd_sim_b8
http://www.amazon.com/Introducing-HTML5-Voices-That-Matter/dp/0321687299/ref=sr_1_7?s=books&ie=UTF8&qid=1318775902&sr=1-7
You really don't want your logo to be a background image. The reason is that background images are not shown when you print. More than likely, you will want your logo visible on a printed copy.
I have an image like such:
and would like to when i hover, to get another Transparent image on TOP of it.
this is the css:
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
}
#imagebox:hover {
background: url("upplyst-platta.png") no-repeat 0 0;
}
But it is behind the picture, any way to solve this in css? or i have to fix it with javascript?
The image on bottom is generated from db(later on) and cannot be set in css
EDIT:
I saw this solution:
http://jsfiddle.net/bazmegakapa/Zf5am/
but cannot get it to work. even though i copy the whole code, what can be the problem?
Use the z-index to state which order the elements are drawn in.
You can find more information here: http://www.w3schools.com/css/pr_pos_z-index.asp
A few other things as well, you might want to add relative image placement based on the parents position and where you say Width in the first style, it should be all lowercase width :-P
Hope this is what you are looking for.
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
background: url("upplyst-platta.png") no-repeat 0 0;
}
#imagebox img{
display: none;
}
#imagebox:hover img{
display: block;
}
and the html structure should be:
<div id="imagebox"> <img src="iWantToShowThisImage.jpg" /></div>
Hope this works for you or provides some inspiration: jsfiddle example #1
Update based on first comment:
Do you mean like this? jsfiddle example #2
2nd update based on edit in question:
Well, the reason for not working is that the hoverimage isn't just transparent: it's a modification of the original.
But it clarifies your wish. I really think my first example is the solution you're looking for. Just replace the url in the style sheet with your transparent png file name.