I have a site where I am showing 8/9 images in a row. In the build phase it is ok to make 9 http call in my local pc but I want to go for css-sprite technique to reduce no of http calls in the actual website. But I am unable to produce such css-sprite. Please help.
The html+css code is simple:
<style>
a img{ width: 32px; height: 32px; }
</style>
<a href="http://www.twitter.com/godhulii">
<img alt="#godhulii"
src="twitter.jpg" title="follow me #godhulii"> </a>
<a href="http://somewhereinblog.net/blog/seoul">
<img alt="somewhereinblog.net/blog/seoul"
src="somewhereinblog.jpg" title="somewhereinblog.net/blog/seoul"> </a>
<a href="http://www.youtube.com/seoulbuet" >
<img alt="bookmark this site"
src="youtube.gif" title="youtube.com/user/seoulbuet"> </a>
For your convenience (or expecting you will create a css-sprite), I have setup this code in jsbin testing environment: http://jsbin.com/ugabez/edit#source
Thanks for the reply,
-seoul.
SpritMe can help you create sprites for your website.
You can find more information HERE
Related
I have a simple html page :
#my_svg{
width: 75px;
height: auto
}
<a href="#">
<div id="my_svg">
<img src="https://svgshare.com/i/MHB.svg" alt="English flag">
</div>
</a>
All I see is English flag so it seems like my svg is not loading. I'm sure about the path because I have the image as png on the same folder and it's working well. Just changing the extension.
The weird part is that I don't have any 404 error in my console. It's working when I add it throught the link https://svgshare.com/i/MHB.svg but when I use the local file it doesn't work. On my side I don't have any webserver and don't want
So your problem is its not working on the local file right? I think it will work if you use <img src="./flag.svg" alt="English Flag'>. That should work, sometimes not adding "./" on the src attribute will have issues because the browser might think it is a web link, not a path link.
I should note that the website I'm working on is meant to be pretty simple.
The way I have my website files organized is that under one folder containing the entire website, I have the .html file for the home page, which contains links to different pages inside it for photos, videos, etc. Each of these pages have their own folders.
Attached here is the code I have for one of these pages, meant for my photos. I learned from this thread (Link not going back to home page) that if you just have:
Home
That the link will take you back to the index/root directory.
(Is this different from the home page? Sorry, I'm a noob.)
Although, when I originally had it has just the code above, the link takes me to this weird gray page that just shows all of the files of my website (is that root place or whatever it's called?).
Although, I see that I'm able to from there just simply add the .html file for my home page in that link directory, so the code I have now seems to work.
Is this an okay way to have a link to go back to the home page? Thank you for your time.
<!DOCTYPE html>
<html>
<style>
div.img {
display: inline;
max-width: 650px;
}
</style>
<body>
<div> <!--Home Button-->
<a href="/homepage.html" style="float: right; margin-right: 100px;">
Home
</a>
</div>
<div class="img">
<img src="1.jpg" width="384px;" height="384px;">
<img src="2.png" width="384px;" height="384px;">
<img src="3.png" width="384px;" height="384px;">
<img src="4.JPG" width="384px;" height="384px;">
<img src="5.png" width="384px;" height="384px;">
</div>
</body>
</html>
If it works and you are okay with having the path /homepage.html as your home page, then it is a perfectly good and logical way of linking back to the home page.
As Kei mentioned in the comment, it is highly advisable to rename this file to index.html as most web servers and browsers will default to this file name as the root. For a lot of people, it's more desirable to just go to a domain (ie: mydomain.com) as the home page, rather than having to type in mydomain.com/homepage.html.
All this to say, if you rename your home page file to index.html and serve this website through a web server of some sort (Apache for example), then you can simply use / as a path and it will bring you directly to the home page. I know that you mentioned that you are a beginner, so this may be slightly outside of the scope of what you are asking, but just letting you know for the future. Good luck!
I am trying to include a logo to my MVC 4 site. Upon clicking on that logo, it should navigate to the home screen. I am using the following piece of code in the _Layout.cshtml file to achieve this.
<a href='<%= Url.Action("Index","Home") %>'> <img src="../Images/logo.JPG" /></a>
In internet explorer, if I click on the logo, nothing seems to be happening. But in Google Chrome, I am getting the error as Bad Request - Invalid URL . The URL content is
http://localhost:3347/Home/%3C%=%20Url.Action(%22Index%22,%22Home%22)%20%%3E
Please let me know if I am making any mistake here.
Try
<a href='#Url.Action("Index","Home")'> <img src="../Images/logo.JPG" /></a>
or you can use
<a href='/'> <img src="../Images/logo.JPG" /></a>
If the root of your site is '/' i.e. it still ends up going to Home/Index anyway, if that's the default configured in RouteConfig.RegisterRoutes().
Your problem is that it's literally setting the link to <%= Url.Action("Index","Home") %>, not the results of that call. Razor templates don't use the <%= %> syntax. Try the following instead:
<a href='#Url.Action("Index","Home")'> <img src="../Images/logo.JPG" /></a>
Also, when dealing with static assets, you should use Url.Content, which will prefix the correct application path for you so you don't end up breaking links in various deployment scenarios:
<img src="#Url.Content("~/Images/logo.jpg")" />
Is this true? I'm working on an mvc3 application in visual studio and I want the image I'm using as the header to be a link back to the home page, but since I'm just running it locally I'm using this line as the code:
<a href="localhost:60060">
<img src="../../Content/images/LionLabs.png" alt="Lion logo">
</a>
This doesn't work though! am I doing something wrong, or is it just that localhosts can't be used as this?
I also just tried using a javascript method as the href to refresh the page, but that didn't work either :(
Since links by default start at the domain, there is no reason to specify it. You can just use /.
<a href="/">
<img src="../../Content/images/LionLabs.png" alt="Lion logo">
</a>
HTML links work just fine with localhost:
<a href="http://localhost:60060/">
<img src="../../Content/images/LionLabs.png" alt="Lion logo">
</a>
The issue here is that just using localhost:60060 attempts to use a relative path, so the browser is actually looking for http://localhost:60060/localhost:60060/, which, of course, is an invalid path.
Also, you should not use absolute paths when linking between pages of your application, because that becomes a nightmare when you need to change domain names (like, deploying your application to the web).
To make your code more MVC friendly, do this:
<a href="#Url.Action("Index", "Home")">
<img src="#Url.Content("~/Content/images/LionLabs.png")" alt="Lion logo">
</a>
What's happening here is that the ASP.NET MVC Url helper is supplying the proper path information when the page is served out to the user, so it automatically accommodates any changes in the server. It also allows you to use your Routes to best effect, because you can easily change the route (ie the URL) of a link but still use the same controller and view.
The links for <a href=""> don't differ from the links for <img src=""> .
You shouldn't use absolute path, because, when you deploy your project, the site name will not be localhost:60060.
For main page use
Change this:
<a href="localhost:60060">
<img src="../../Content/images/LionLabs.png" alt="Lion logo">
</a>
To this:
<a href="#Url.Action("Index", "Home")">
<img src="#Url.Content("~/Content/images/LionLabs.png")" alt="Lion logo">
</a>
Why?
It's better to use #Url.Action as that will use any custom routing you set in Global.asax. Can you imagine modifying every single link reference on a complex site if you have to change your url routing? :)
Use #Url.Content, as that will correctly resolve to the root of your application, taking away the uncertainty of using ../ or ../../ or ../../... It's cleaner!
You have used href as localhost:60060. It should be a page (may be default.html or something like that).
Is there any way to add a Facebook Share Button to a static HTML page? I've implemented a simple web site with no server side, just a bunch of html pages and I was abble to add a Like button because it is implemented with iFrame element.
I have searched for a solution regarding the Share Button before posting here, but can't really find anything.
(Example of a share button can be seen on a youtube web site, on share section of each video.)
Any help is appreciated.
This should solve your problem: FB Share button/dialog documentation
Genereally speaking you can use either normal HTML code and style it with CSS, or you can use Javascript.
Here is an example:
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank" rel="noopener">
<img class="YOUR_FB_CSS_STYLING_CLASS" src="img/YOUR_FB_ICON_IMAGE.png" width="22px" height="22px" alt="Share on Facebook">
</a>
Replace https%3A%2F%2Fparse.com, YOUR_FB_CSS_STYLING_CLASS and YOUR_FB_ICON_IMAGE.png with your own choices and you should be ok.
Note: For the sake of your users' security use the HTTPS link to FB, like in the a's href attribute.
You should be able to generate your own button code here: http://developers.facebook.com/docs/reference/plugins/like/
<a name='fb_share' type='button_count' href='http://www.facebook.com/sharer.php?appId={YOUR APP ID}&link=<?php the_permalink() ?>' rel='nofollow'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
Replace <url> with your own link
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; }</style><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank" class="fb_share_link">Share on Facebook</a>
<div class="fb_share">
<a name="fb_share" type="box_count" share_url="<?php the_permalink() ?>"
href="http://www.facebook.com/sharer.php">Partilhar</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div> <?php } }
add_action('thesis_hook_byline_item','fb_share');
In a very simple way, you can achieve this
Facebook Share
*replace your_page_link.com with your desired URL or page link
Example
Facebook Share