This question already has answers here:
Using relative URL in CSS file, what location is it relative to?
(7 answers)
Closed 8 years ago.
I've been learning Web Design from W3schools. Recently, I started CSS. For background image, it's example is: background-image: url("Paper.gif")
My question is: Where does it even find this image? It's not like "url" is an actual URL, and Paper.gif seems to just come out of nowhere. Is it saved in the same file as the CSS file?
Since you ONLY supplied a filename, the browser looks to load Paper.gif from the same directory which the file is served from. It's commonly referred to as a "relative path."
For example, if you load http://example.com/index.html and that page references a background-image: url(background.png), it will look for http://example.com/background.png to load.
This is, of course, assuming you're not using an external stylesheet. If so, your relative path will load from the place that the stylesheet is served from. For example, if you load http://example.com/index.html, which references http://example2.com/style.css for its styling, and that stylesheet references a file named background.png, the browser will look for a file at http://example2.com/background.png
The example above is telling the browser the image is at the root of your website. However say if the image is like so background-image: url("images/Paper.gif") then it's telling the browser the image is in the images folder. Hope that was clear :)
Anyway... this is the best HTML & CSS book for beginners: http://www.htmlandcssbook.com/
Related
This question already has answers here:
How to link html pages in same or different folders?
(14 answers)
Closed 2 years ago.
So I have my main HTML folder, then it also encompasses a img folder which I want to keep images in so it's more tidy but as I do this the images become broken links and disappear from the website. Whereas if I keep them in the main HTML folder they show fine, but the img folder is within the HTML folder so why does this happen? And how do I fix it? Thank you
Please note I'm on about the folders on the left side within Atom (Atom's own folders not PC folders).
Your path is probably off is the issue.
Check you html tag <img src="/images/picture.jpg" alt="Mountain">
Good resource:
https://www.w3schools.com/html/html_filepaths.asp
This question already has answers here:
Referencing a .css file in github repo as stylesheet in a .html file
(5 answers)
Closed 3 years ago.
I've tried to upload my custom CSS file to apply to https://soundoffmusic.com/
I've got the raw CSS file with this file path
https://raw.githubusercontent.com/themomoravi/SoundOff-Website/master/styles.css
and I've tried using this as my href since it points directly to the raw CSS file:
href="https://raw.githubusercontent.com/themomoravi/SoundOff-Website/master/styles.css">
Still it has not worked. I've also tried the abbreviated versions of this such as styles.css, SoundOff-Website/styles.css, etc. (as my href).
I'm wondering why else github pages might not be rendering my custom CSS.
Please advise and thanks so much in advance.
If you are serving your website from a GitHub repository using GitHub pages (which I assume you are doing, judging by the raw link you provided), you can (and should) reference your assets in a relative way, such as
<link rel="stylesheet" href="./styles.css">
in your index.html's <head>.
Linking directly to GitHub raw storage can cause problems as it is not designed as a CDN and everything is always returned with a plain/text header. There used to be a service that provided a solid bridge between a client and raw GH storage, but it's been shut down and GitHub pages work just as well now.
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.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
including css in Django
I have not much experience with web-front.
I'm trying to integrate a forum app into django. ( http://www.pybbm.org )
I succeeded running the app(I can see the forum at http://localhost/forum/ )
But it looks horrible without any css.
I tried including all the css files and less files I find in www.pybbm.org but it doesn't seem to help to make it look better.
Can anyone take a look at where the css files are for the site?
the abreviation of CSS is Cascading StyleSheet, so it is responsible for the lay-out of the website. A css file is likely stored in a directory called CSS or style or sometimes in the main directory.
What you could do to find the css file is opening the index.html file and search for a file with extension .css. You can find the line of text at the head of the index.html file.
When you found the .css file, you also see where it is saved, like /main/style/style.css
Problem solved?
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Pinpointing the difference and changes made between two pages in magento 1.6.2
http://dokha.co/index.php/shisha-tobacco/al-fakher-shisha-tobacco-108.html
As you can see from the link above the product page is disorganized to some degree.
I have made some modifications below, in firebug, and took a screenshot. Can anyone advise on how to put these changes into effect?
You are trying to move up the "Select a Flavor" block?
Look at the source and delete the DOM node <div class="clearer"></div>. I use google Chrome browser because it is very easy to do things just like this. I right-clicked on Select a Flavor then selected Inspect Element. In the lower pane, I navigated up until the clearer block and deleted that.
To make the css changes to your page. Please create a custom.css file in the skin/frontend/yourfolder/css/custom.css and add the styles which you made in the browser.
Personally, I use Google Chrome browser to make changes to the page and then copy into the customised .css file.
It is always best practise not to replace in the default .css but use a customised version, so you have a version of the original file.
Hope it helps.
Cheers