i am developing a portal, where client require animated cursor on page
I have done something but it is not working. steps which i have taken to make this is following:
in photoshop develop a image and save as cursor.ani
2 pest this image in images folder.
pest the following code in html page before body tag in head tag.
<style type="text/css">
<!--
body {cursor:url("images/red_rose_turn_heart_shape_ty_clr.ani");
}
-->
<style>
I am running this on following browser
1. FF
2 IE6
3 netscape
Try single quotes instead of double quotes.
Related
It seems like a very easy task and that's exactly how it is done on some websites with examples but it just does not work for me!
My folder is like this:
project
resources
css
index.css
images
pattern.jpeg
other.jpeg
another.jpeg
index.html
I need to make a background for some text.
CSS:
#company-name{
background-image: url("resources/images/pattern.jpeg");
}
html:
<h1 id="company-name">Dasmoto's Arts & Crafts</h1>
My html can see the picture, i've checked it by putting it in here:
<img src="resources/images/hacksaw.jpeg"/>
just in src"" - and the picture was shown normally as it is supposed to.
Also just to check if CSS can understand my ID from HTML - instead of backbround-image - I chenged the color and it did work so ID is fine.
Remember your CSS and HTML are accessing the image from different positions in the project. The index.html and the resources folder are on the same level so can be reached using the path you've provided.
In order to locate the image from the css, you'll either need to begin your search from the root like so:
background-image: url('/resources/images/pattern.jpeg');
or begin by coming out of the css directory like so:
background-image: url('../images/pattern.jpeg');
why do not you set the background image?
There no such attribute for background. You should add it in inline css style. Try inline style like this:
<body style='background-image: url("sfondo.jpg");'>
------
</body>
Refer this for more background options https://www.w3schools.com/cssref/css3_pr_background.asp
Error in line 7:
You need to use <body style="background-image: url('sfondo.jpg')">.
Do remember image location should be on same folder.
You didn't ask the question properly but I think you asking about java web application development related question from eclipse so I want to share some experience with you. If you are using .jsp(index.jsp) file you can use JSTL or without JSTL to set background as below.
<body background="<c:url value='/resources/images/sfondo.jpg' />">
or
<body background="${pageContext.request.contextPath}/resources/images/sfondo.jpg">
note: I used "resources/images/sfondo.jpg" path you can change it as you need
First you should refer about proper project structure(eg. how to organize images, web files, java files etc...). If you are doing java dynamic web application development you can keep image files under WebContent folder. If you are using maven, structure it is difference.
If you are using .html(index.html) file you can use css code inside html file to control background image
<html>
<head>
<style>
body {
background-image: url("sfondo.jpg");
}
</style>
</head>
<body>
or you can use inside body tag too, but I think in some cases it is not working properly.
I have an issue that all beginners in CSS seems to have, my background-image doesn't show.
When I try to put background-color it works, and with image nothing shows-up.
I have put my image in the same folder than my files css and html.
I want to set the image as the background of my <body>.
I use the framework meteor.
Here is the code HTML:
<body>
<div class="Units" id="UnitsSelector">
{{>units}}
</div>
<h1>Test </h1>
</body>
Here is a part of the CSS file:
body {
display: block;
width: 900px;
margin: auto;
color: black;
background-image:url('space.jpg');
}
Also when I use the inspect tool on my browser and I try to open my url I have this error :
Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/space.jpg."
The best approach I see here, is similar to these question:
How to serve static content (images, fonts etc.) using iron router
Although you haven't stated that you're using iron router. The answer will be the same.
Instead of doing all this, you can just put the files under your public directory. If you add the file:
app/public/images/space.jpg
You can access it from your templates like:
<img src="/images/space.jpg">
No routes are needed to make that work.
Beware of overlooking the lead slash.
<img src="images/space.jpg">
The above example will work from your top level routes.
Open devtools in Chrome
Click to "console"
You can see error space.jpg not found
See link on error to your image
Search difference between link in error and real place your image (solution 1)
If all good - play with width/heigh/background-position (solution 2)
I'm trying to fix a CSS stylesheet to make sure that a styled element is shown on the web page.
This is how the CSS stylesheet is linked:
<link rel="stylesheet" href="themes/default/style.css" type="text/css" media="screen" title="" charset="utf-8"/>
This is the HTML code:
Advanced Search
Post an Ad Now
Now when I use the "Inspect Element" tool in Google Chrome and click on the first line, I see this:
The Advanced Search link shows up on the page. No problems there. But if I click on the next line, I see this:
Because of this, the Post an Ad Now link doesn't show on the page. I don't know where this CSS is coming from and it is certainly not specified in style.css and Google Chrome doesn't show the source (e.g. style.css:101)
.pop-up-ad, .popadtext, .popunder-adv, .popup-ad, .popupAd, .popupAdOuter,
.popupAdWrapper, .popup_ad, .portalCenterContentAdBottom, .portalCenterContentAdMiddle,
.portalCenterContentAdTop, .portal_searchresultssponsoredlist, .portalcontentad, .post-ad,
.post-adsense-bottom, .post-advert, .post-advertisement, .post-googlead, .post-load-ad,
.post-nativeadcarousel {
display: none;
}
How can I make sure that the Post an Ad Now link shows on the page?And how do I figure out where the mystery CSS information is coming from?
Since most of the classes mention adverts in some way or another, it almost certainly comes from an adbocking browser extension you have installed.
Are there ways to resize an image to fit thew window the image is being viewed in WITHOUT javascript and limited CSS?
I ask because I have an email campaign that I send out that features a main image that I want as large as possible without scrolling. I have read ways to do this with javascript and jQuery but I do not see a way to do this that the majority of email clients will read and react to properly. Is this possible? And if so - How?
This is the correct way to do it for a html email:
<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
It will auto resize to match the width of the container element (which should always be a <td>).
Note that on some clients (Outlook '07, '10 & '13 in particular), the image will not exceed it's maximum dimensions. If you are working with a max-width fluid template this will not be an issue providing your image width matches the max width.
This is how you should be able to do it
/****this is the Css****/
.full {
width:100%;
height:auto;
}
/***end Css***/
<!--Now the html--!>
<section>
<img src="image/main.png" class="full">
</section>
Or you can go the simple way
*update
you can do it like this
<img src="image/main.png" style="width:100%; height:auto; border:none;" />
and if they have an option to put it as html to do it like that as it should render correctly like that
You need to be as archaic as possible to make HTML emails work across all clients.
Inline styles and HTML 4 code should do the trick. Be warned though - max-width and max-height works in most clients, but this does NOT include Outlook 2007/2010/2013/365 which could well be over half of your target audience. Width works in all clients - but NOT on div and p tags in Outlook 2007/2010/2013/365! Always use tables not divs to be certain it will work.
Basically, always assume something isn't going to work and design for the smallest possible margin for error - and ALWAYS use inline styling or it might well get stripped.
If in doubt consult the oracle, I always do :)
Source: https://www.campaignmonitor.com/css/b/
HOW TO MAKE AN IMAGE RESIZE ITSELF IN A GMAIL
First, here is the HTML code we will be working with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Resizer</title>
</head>
<body>
<!-- Point to your image by placing the path in the source (src) attribute. -->
<img src="http://yourImagePathHere.jpg" style="width:100%; background-repeat:no-repeat; background-size:100%;" />
</body>
</html>
NOTE: Notice the part that reads "http://yourImagePathHere.jpg". This is the path that points to the image you want resized in the GMail. Put the URL for your image here. In order to run this code
in a browser, you’ll need to have it saved as an HTML document. You can
accomplish this by copying and pasting the code above into a code editor or text
editor (such as Notepad on a PC or TextEdit on a MAC) and save it with the
extension “.html”.
If you are using TextEdit on a MAC, you will need to switch to plain text editing
before pasting the code. To do this, choose “Make Plain Text” from the “Format”
menu.
For this example, we will assume your file name is “image_resizer.html”. If you
need to change the image, you will need to edit the HTML document with a code
or text editor. To do this, right click the HTML document and choose “Open With”
and select a code editor or text editor. Then, swap out the image source path
(bolded in the example above), replacing it with the path that points to the
updated image. Then save, and your HTML file should ready to go and updated
to point to the new image.
If you are using TextEdit on a MAC, you will need to start a new document,
switch to plain text editing, paste the code again, and then change the path to the
image.
Step 1: Open image_resizer.html in a browser. To do this, double click it OR
right click it and select a browser from the “Open With” menu.
Step 2: Click anywhere on the webpage. You can click on the image itself or the
white space on the webpage. The idea here is to make sure that we will have
the pointer’s focus on the window to verify that the page is ready to be selected.
Step 3: Select All. Do this by using “Ctrl + A” on a PC … OR … “Command + A”
on a MAC. The page contents will be highlighted.
Step 4: Copy. Do this by using “Ctrl + C” on a PC … OR … “Command + C” on
a MAC. The page contents will be copied to the clipboard. (That just means that
the computer memorizes it).
Step 5: Now that the contents are copied to the clipboard (memorized by the
computer), open your Gmail and click the compose button. Place your curser in
the content area (click in the area where you type a message).
Step 6: Paste. Do this by using “Ctrl + V” on a PC … OR … “Command + V” on
a MAC.
Step 7. Finish typing your email message and send it.
I was dealing with really big images without any kind of a container. I fixed it by using max-width to ensure the image wouldn't be too big.
<img
src=""
width="100%"
style="max-width: 80vw; margin: 0; border: 0; padding: 0; display: block;"
/>
Using both width and max-width ensures the image will take the full available space, but not too much. I used 80vw and not 100 because people rarely read your emails in a fullscreen mode, usually more often using a viewer (Gmail), which usually uses a bit of the available space.