I've been trying to find a library with all different types of file icons, so far with no success so I'm going to need to create my own. The idea is that it'll be able to be used in the same way as emoji CSS to display the file icons as it's much easier than the need for individual columns and DIVs. Ideally I'd be able to do <i class="em-filetype"></i> to display it.
Below is an example of how I plan to go about this.
.em,
.em-png {
height: 1.5em;
width: 1.5em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle
}
.em--psd {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Adobe_Photoshop_CC_icon.svg/2000px-Adobe_Photoshop_CC_icon.svg.png")
}
<i class="em--psd"></i>
I'll eventually host all of the images on my own server so that they're available for use. I just need a way of making this work so that I can then write the CSS for each variation. Preferably just the one that then matches the height of the text it is in.
Any help would be appreciated, as would pointing me towards a library you may know about as I'm so far unable to find one fit for purpose so will have to make my own.
Thanks in advance.
Either you need to apply two classes to the element. <i class="em em--psd"></i>
or
Adjust the selectors:
[class^="em-"],
[class*=" em-"],
.em-png {
height: 1.5em;
width: 1.5em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle
}
.em--psd {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Adobe_Photoshop_CC_icon.svg/2000px-Adobe_Photoshop_CC_icon.svg.png")
}
Related
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.
Am having Jquery AutoComplete textbox and we got a requirement to show that as a DropDown(Just look and feel).I came up with some css as below
background-image: url("DropDownIcon.png");
background-position: right center;
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
If you notice the first Textbox if there is a long text it is overlapping with icon
What are the other option i can implement to make look and feel good without text overlapping the icon or any other suggestions are welcome
i just to have the look and feel and i dont want to use dropdown
Just add a padding-right:12px; It should work. try this:
background-image: url("DropDownIcon.png");
background-position: right center;
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
padding-right:12px;
Updated: check it out
DEMO
I have a pretty simple Chrome extension to supplement a web page. One of the features is to add links to watch relevant matches on the internet. The relevant HTML is here:
<div class="option-wrap">
<a class="option" href="http://www.google.com" target=_blank>
<div class="option-icon tv-icon"></div>
TV Link
</a>
</div>
With my CSS here:
.tv-icon {
margin-right: 2px;
float: left;
width: 10px;
height: 10px;
background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png") no-repeat;
display: inline-block;
}
You'll see that several classes appear in the HTML that aren't in my CSS; they are from the web page as it exists. The goal of this code is to get the television icon specified by the URL to appear inline to the right of the text "TV Link". When I run the code, it seems like there is space allocated for the icon, and the cursor is able to click on this space, but there is no visible icon. Is there something wrong with my CSS< or is this a function of the existing webpage code that I'll have to find a workaround for?
Here's a JSFiddle with the mentioned code.
.tv-icon {
margin-right: 2px;
float: left;
width: 20px;
height: 20px;
background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png");
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
}
JSFiddle
changes I made:
remove 'no-repeat' in 'background-image'
add 'background-size' and 'background-repeat'
I also changed the size. Change it back if you want.
Switch the last two lines of your css to this
background-image: url("http://sayeedanwar.co.uk/wp-content/uploads/2014/01/tv-servizi.png");
background-size: cover;
#Richard Rodriguez - You shouldn't need no-repeat if you have background-size: cover.
Since cover will encompass said area and reduce the opportunity for repeats to null.
I'm using ASP.NET with a C# backend, and want to have a site show different images for mobile and desktop version. I figured I could do this with CSS, but can't figure out how. I have the different css files set up and working for other elements, but for these ImageButtons, I have some bad behavior. If I don't set the ImageUrl attribute, it does what I need but puts "Search" and a gray outline around my buttons since it is looking for the nonexistent ImageUrl Path. If I do set the ImageUrl attribute as shown below, the text and box go away, but the image won't change as I need them to. I have tried this with a and img tags and LinkButtons but have gotten the same results both ways. What is the best way to change the size and image of these buttons if the user is accessing via a mobile device?
<div class="clear hideSkiplink">
<asp:ImageButton ID="button1" runat="server" CssClass="button1"
OnCommand="ImageButton_Click" CommandName="button1"
ImageUrl="~/images/topbutton1.png"/>
...
<asp:ImageButton ID="button4" runat="server" CssClass="button4"
OnCommand="ImageButton_Click" CommandName="button1"
ImageUrl="~/images/topbutton4.png"/>
</div>
CSS classes look like this:
Normal:
.topbutton1
{
padding: 0px 2px;
background-image: url('../images/topbutton1.png');
background-position: center center;
background-repeat: no-repeat;
display: inline;
width: 180px;
height: 60px;
}
Mobile:
.topbutton1
{
padding: 0px 2px;
background-image: url('../images/topbutton1mobile.png');
background-position: center center;
background-repeat: no-repeat;
display: inline;
width: 20%;
height: auto;
}
Use CSS media queries to switch the image based on screen size:
Introduction to CSS Media Queries
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.