I've recently started learning to code HTML and CSS by hand for the first time since the mid 90s (last time I tried to build a site, Netscape Communicator Gold 3.0 was out--so bear with me here).
I cannot get my CSS to link up with my HTML. I am using HTML5 conventions and following the code examples in the popular book "Learning Web Design," 4th edition, by Jennifer Robbins. Many of the code examples I see use conventions that are no longer required in HTML 5.0, so my code may be a bit sparse.
I have tried to directly embed the styles in the HTML and they work. However, they do not work when in a CSS sheet. I have tried to load the page in both IE11 and the newest version of Chrome and the page displays in white with default browser settings. My HTML file and my CSS file are in the same directory: c:/RogersReviews. There is an images folder in the directory, c:/RogersReviews/Images. I have linked to an image file in that folder and my code works.
However, I cannot change the background color of my page using a linked CSS style sheet. I have tried to make it red to prove that the link is working. Below is my CSS code followed by my HTML code.
I have used Eric Meyer's browser reset code in the CSS to clear out any browser settings that might be messing things up. I have omitted it for your convenience.
It is probably something minor that I have missed. Thank you in advance for your help.
EDIT: The page seems to be linking just fine when I post it here, but not when I run it from my hard drive by opening the HTML file. I would like to be able to see the page as it would look online, but from my hard drive.
body {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Rogers Reviews: Academic Book Reviews </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<img src="Images/Rogers-Reviews-logo-3.gif" alt="Rogers%20Reviews">
<ul id="menu">
<li>Home</li>
<li>Authors</li>
<li>Subjects</li>
</ul>
</header>
<h1> Welcome </h1>
<p> This site is a collection of academic book reviews, mostly in the humanities and the social sciences. </p>
<p> The purpose of this site is to assist high school, undergraduate, and graduate history students with choosing appropriate secondary sources for their research papers. An emphasis is placed on older works written before 1960.</p>
<p> Back to home </p>
<footer>
<p> © 2014 </p>
<p> About </p>
<p> Contact </p>
</footer>
</body>
</html>
I inserted your code, verbatim, into a JSFiddle, and the background is red, as you wanted.
The code is not the issue, then. Instead, its a problem of the stylesheet loading properly. Try some or all of the following:
Check your stylesheet name, and that it is the same in the directory as it is in your HTML code; make sure stylesheet.css exists properly.
Double-check that the file exists in the right place, which is in the same directory as your index that you are opening.
Make sure the stylesheet is loading. In Chrome, if you right-click -> inspect element and go to the sources tab, you can see all loaded resources, including your CSS. If it's not loading here, it could be that it tries to load from your cache. You can force Chrome to load sites without the cache by opening the inspector again, clicking on the gear menu, and checking "Disable cache (while DevTools is open)', and reloading your site.
Check your local apache/webhost server to make sure that it doesn't have any settings blocking the loading of certain files or types of files. This is assuming you are running one and not just opening the file in Chrome/IE. If that is the case, you should have no problems with the file loading.
Make sure you saved the file. It's silly, but I can personally vouch for the time when I couldn't make my site update, and I forgot to save/update the file I was viewing.
Hello, perhaps it helps to someone:
css files have to be transmitted stating "text/css" as content type (while your html page content is usually "text/html").
It is important to state the right value for transmission, because browsers check it.I had this problem with Delphi, trying to state "DOCTYPE HTML" in a WebBroker application to use HTML5, and the problem has been solved setting it in the variable reponse.contenttype. If you use a web server, I suppose you have to put the file in the right folder for example, or set this attibute in the right place to instruct your server to send the right contenttype.Have a nice day!
Instead of href="stylesheet.css", try href="/stylesheet.css".
I had the same issue and this worked for me.
Simple solution: no changes to you html code.
Procedure:
1) Log into Ubuntu as a root user
2) Go the /var/www directory and right click on the www folder, then click Properties, change the following permission as follow:
view content: anyone
change content: anyone
access content: anyone
3) Restart apache2 server type service apache2 restart
4) Finally, test the webpage
Hope this helps
Just ran into same issue. It was browser cache. Ctrl-F5 helped to fix it.
I assume that you have created your file in NOTEPAD & not used any editor. While saving the css file, the file type has remained as .txt which leads to saving of the file as Text Document type.
Open a new notepad file, copy & paste your CSS code. Save the file in Notepad under "Save As" menu, enter your css file name with.css extension & select "Save as type" as "All Files" documents. After saving, in the explorer the file type should be displayed as Cascading Style Sheet Document.
Hope it solves your problem.
I ran into a similar issue where the css file changes are not reflected in the webpage styling.
Here where the concept of hard-reload helped me. Hard reload can be done by
shift+ctrl+R
This happens when the browser serves a cached CSS file from that of yours.
To invalidate the cache and serve your latest CSS file, you can perform a hard reload on the browser.
Refer this For more info on such problems.
I'm new to Joomla, but I've followed few tutorials. I've created a template for my website, but no images are showing up. Looking to the source, my image references look like:
<img src="/templates/fiziaimages/zdjecieDol.png" />
When they should be looking like:
<img src="/templates/fizia/images/zdjecieDol.png" />
^
fizia/images is the correct directory, so I don't know what causes the backslash to not appear.
in a first time you can use your browser inspector to verify if your images are really found.
If it's ok you can try to put your images in the "image" directory in the root of your website
I am having a big time issue with solving a problem. I have a placeholder called main for the content region of the page. I was building that region in the cms. Everything was going great until I attempted to add an embedded video contained in an iframe. When I save django cms completely removed the iframe and left an empty div. So I attempted to use prettyphoto light box to open the video by clicking on an image. The code I added to the page through the cms is:
<a rel='prettyPhoto[youtube]' href="https://www.youtube.com/embed/mqVZF_yb8C0?autoplay=1&start=1765&iframe=true" data-rel="prettyPhoto">Click Image</a>
When I saved, django cms completely removed the data-rel attribute from the link which is obviously needed for the js. So I went a step further and adapted the code of the data attribute to:
rel="prettyPhoto"
and the cms also removed that attribute! Also anytime I add an html5 tag like article of section it hates that too! What gives here? Am I doing something wrong? Any advice would be appreciated.
Aaron,
Thanks.
Please see the discussion at https://github.com/divio/django-cms/issues/1529. We use html5lib to clean the contents of the text plugin (this cannot be turned off for security reasons).
What you'll want to do is write a custom plugin (possibly one that can be embedded inside text plugins).
Problem
I have a customer that wishes to display the entire contents of a certain folder (containing images) on their search page, should the search return 0 results. The folder is located at mysite.com/images
Setup:
As a test environment I have setup a seperate site with the following structure:
ROOT
|-Folder1 <-- current directory I am viewing
| |-images
|-Other folders
I modified the folder_summar_view template, to include the following code (I decided to modify a view to see if I could hack that to pieces to make it do what I want):
<div tal:define="image context/images/getFolderContents">
<div tal:content="i" tal:repeat="i image" />
</div>
What I see:
<Products.ZCatalog.Catalog.mybrains object at 0x9d2ddb8>
Things I've tried and further explanations
I was under the assumption that when the context/images/getFolderContents returns a brain for the 'objects' in my images folder, I could then iterate through each 'object' using my tal:repeat statement below it. Then display them on my page.
If I just use the following code:
<div tal:content="context/images/getFolderContents" />
My output is very similar to the above 'What I see' section:
<Products.ZCatalog.Catalog.mybrains object at [...]>
where [...] is another number
I've been doing some research and reading the Plone Theming book, but my code is similar to their tal:repeat examples on page 169, it seems the only difference is they are not using this on a brain (as far as I can tell).
I tried this, although it produced the same results (not sure why I tought it wouldn't):
<div tal:define="image python:context.images.getFolderContents()">
<div tal:content="i" tal:repeat="i image" />
</div>
I don't seem to be able to 'get inside' the returned brain. Everything I've looked for online doesn't quite help that much, I've also trawled through the atct_album_view and folder_listings templates to know avail. - I think I'm overlooking or missing something.
The first link I stumbled across was this, however I have moved on since that as although similar, it's not quite what I was trying to do.
The Plone guys on their chat room were kind enough to give me the context/images/getFolderContents statement, I tried to press on without asking for help again but it seems I've hit a wall.
More stuff I've tried
Using this link as inspiration I decided to try the following:
<div tal:define="image context/images/getFolderContents">
<div tal:content="image/getURL" />
</div>
But that throws an error when I try to view the template. The error reads along the lines of the 'getFolderContents brain does not have the attribute getURL' - Although image/Title displays the name of the folder, but that's not really what I need.
I also found this link however because I am making use of the default search, I don't really want to have to edit python scripts as I fear it may adversely effect the normal Plone site search. Also in this link they seem to be making use of more Python scripts. - To expand on this point, I'm not sure on how these scripts 'link' with page templates (how they know to 'talk' to one another).
Conclusion
In conclusion I need to display all of the images contained within a folder named "images" located at the root of my site, I am unable to access the contents of a returned brain using getFolderContents. And other than displaying the title of the "images" folder or the brain identifcation (<Products.ZCatalog.Catalog.mybrains object at 0x9d2ddb8>) , I have had no luck. Any help or ideas welcomed!
As getFoldercontents returns a list of brains i cant see how your code can work.
Just repeat over it with something like that :
<tal:block tal:repeat="image context/images/getFolderContents">
<a tal:attributes="href image/getURL" tal:content="image/Title"/>
</tal:block>
I am working on a new blog using wordpress and I came across a strange error. in my theme file there is no
<div id="sliderDiv">
<img src="images/sliderMain.png" width="1000" height="427">
</div>
in index.php or page.php I even look into search.php and searchpage.php but I already remove those lines from those files already but they show up all the time I could not figure out from where they are coming.those HTML lines were first used for testing purpose in all those files but I already removed them, but still showing up. I deleted them from theme editor but they are showing up. I don't know whats the problem. I also try clearing up my cache but no luck. please help
Use a find/replace function in a text editor to search all of your theme files for that html. Any text editor - OS X or Windows - will have such functions.
Or use grep if you have a command line.