I'm doing some experiments to see the potential pros&cons of embedding css in HTML. I have mirror of websites locally. I tried to embed external css into HTML using "style type='text/css'" tag. Its working for few css files but for some css webpage is not rendered exactly as it used to be before embedding. I'm not sure whats exactly causing this problem.
Any suggestions/help please.. Pictures before and after ebedding.
Problem is not particular to this site. I'm seeing different rendering problems for different websites. I want to know whats the difference of embedding vs referring external css?
The problem you are facing is mainly caused by relative paths being invalid once you embed your css. Let assume that the image Evil_Kitty_Of_Darnkess.JPG is one level higher than the css file. A rule inside the file will be able to use the relative path like this:
background-image: url(../Evil_Kitty_Of_Darnkess.JPG);
Once you embed those rules directly in the page, you must reference paths according to the new base path in which the page is located. If the image isn't exactly one level higher, it will fail to resolve it. You will see something like in your screenshot: Nothing at all.
Related
I'm building my first website using HTML and CSS on Visual Studio 2019, using a YouTube tutorial as well as my own small amount of knowledge. Except when I went to insert an image using:
<img src="image.jpg">
it doesn't find it.
I have also tried using the image source path thingy using:
<img src="C:/Users/Josh/Documents/HTML/BusinessWebsite/image.jpg">
but this also doesn't work. Does anybody know how to fix this?
Use the relative paths. The path is taken from where you have your html file. Like when you're moving between folders in the command line.
Well, you should have provided some more information, because your syntax seems to be perfect. There you can try out two things :
The first thing I can figure out that might have gone here would be that your image extension might not be correct, which means it might be something else than jpg(may be jpeg or png).
Use relative paths.
Example
I've put the html <base> tag in the head so I can easier link to relative images and css files. So far so good and it works quite well, the only problem is that sometimes (I think once in every 5 times?) the images won't load properly.
The interesting thing is that it's only the images that are in an <img> tag that won't load sometimes, all the background images always work.
When I look at the source the url to the image seems correct and when I open the url in a new tab it also works.
Has anyone encountered a similar problem before?
Thanks in advance.
When you use base for example /images and you have got image.png in this folder, then you should link it as image.png.
This seems like a really simple question that I would be able to find the answer to super easily, but apparently not.
On a web page, let's say I'm loading an image. Would it take longer for the page to load if I write the link as <img src="http://www.example.com/img/image.jpg"> than if I put it as <img src="/image.jpg">?
The image would be on the same site as the page. The reason I'm asking is because I have a bunch of files that use the external method, and and wondering if it's worth it to change them.
You are confusing absolute URLs and external URLs.
Using an absolute URL will cause the HTML document to take longer to load (simply because you have added more characters to its source code). It will not, however, be significantly longer.
The image will not take longer to load. The browser would have to resolve a relative URL into an absolute URL before using it anyway.
I have a PDF file that I would like to put within an HTML SVG element. Does anyone know if this is possible? I've been through several other resources and done as many different Google searches as I can think of without any luck.
The closest I've come is a sample which embeds an image at http://svg-wow.org/filterEffects/twirl.svg. If I try do do that with a PDF only the first page will display.
Have you tried this. Maybe not exactly what your are looking for (no svg) - but pretty close.
I know something like this is possible, I'm pretty sure I'm just wording it wrong as I've been searching online for hours to no avail.
The same way an HTML page refers to the CSS file for a menu design, how can the HTML page also refer to a file (or the same CSS file if possible) to get the links information? So when I change the link information in that one file, it changes links on all HTML pages referring to it. Is this possible?
There is no simple way to do this. In general this happens server-side and is drawn from a database.
You CAN draw this data from a JavaScript file, using HTML templating without having to depend on a server. This may help.
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-an-introduction-to-jquery-templating/