I am trying to play around with this css package: https://github.com/elrumordelaluz/csshake
I followed the directions, but for some reason the animations aren't available on my page.
here's my head:
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link type="text/css" href="css/csshake.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/app.js"></script>
</head>
and then in the body I'm trying:
<div class="shake shake-constant">shake!</div>
If I inspect that element with Chrome dev tools, I can see that none of the css classes are applied to the div. If I change the header to <link type="text/css" rel="stylesheet" href="css/csshake.css">, then the classes appear in dev tools, but they are listed as invalid property values.
I'm sure I'm missing something really basic, but I don't know where to look.
If you look at the CSS file, it doesn't natively support cross browsers - you'll have to add relevant browser prefixes yourself
For example, animation-name: shake-base; only works in browsers that allow un-prefixed values (like new versions of FireFox). To serve Chrome you'd have to add -webkit-animation-name: shake-base;
You can use the following tools to let your computer do most of the work for you
CSSPrefixer (manually)
AutoPrefixer (automatic)
Prefixr (manual)
PrefixFree (automatic)
There are others as well
Related
I am creating download links to PDFs of Chinese articles I have written, but for some reason, the links are not working. I stopped at the first li because I could not figure it out. Even when I change it to a simple a href to my home page, it still does not work.
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="Chinese.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Yellowtail" />
<link rel="stylesheet" href="animate.css">
<script type="text/javascript" src="home.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery-2.1.1.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-2.1.1.min.js"><\/script>')</script>
<script src="Chinese.js"></script>
<div class="samples">
<li><a href="XiJinPing.pdf" download>習近平反貪</a></li>
<li>伊波拉與伊斯蘭國：世界末日的徵兆</li>
<li>人類是否應探索太空?</li>
<li>社會的價值觀與同性戀</li>
<li>兩岸的未來</li>
</div>
Originally I thought you meant the links to the files were not working. (Which is why I suggested the following)
The download attribute is not supported in IE or Safari. Which browser are you using? Do you get an error message? Make sure your XiJinPing.pdf file is in the same directory as the HTML file.
Is the source actually being served or just opened in the browser?
http://www.w3schools.com/tags/att_a_download.asp
Now that I have re-read the question it appears that you mean the link tags are not working.
The first CSS (shift.css) only adds a font-face to know if it works you will need to add that font-face to an item through a style.
div {
font-family: Shift;
}
jsFiddle
The second thing you need to do is add the javascript for bootstrap.
Also if you run into Cross Scripting errors, you may need to use HTTPS versions of the links to your css files or vice versa. Chrome blocks traffic automatically but a shield will show up in the address bar and you can select it to allow the traffic anyway.
You should also close the link tags.
I was practicing this website
http://www.lingulo.com/tutorial-content/html5/
While comparing this website with my non-responsive website I was frightened which part of the following header code turns the website mentioned above a responsive one?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Some Page Title</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'>
<script src="js/vendor/modernizr.min.js"></script>
<script src="js/vendor/respond.min.js"></script>
<!-- include extern jQuery file but fall back to local file if extern one fails to load !-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="js\/vendor\/1.7.2.jquery.min"><\/script>')</script>
<script src="lightbox/js/lightbox.js"></script>
<script src="js/vendor/prefixfree.min.js"></script>
<script src="js/vendor/jquery.slides.min.js"></script>
<script src="js/script.js"></script>
Yes and No and it depends. Lets say for example the <picture> tag of HTML5 is a responsive one but you can't say the same for the other tags.
Basically the responsiveness is all about fitting your content inside every possible layout of the output device without impacting the design. This is achieved by having the width,height in %'s, Media queries and CSS along with JavaScript etc.
For ease of development I would recommend you to start with Bootstrap, which is a light responsive framework used to build responsive websites and easy to use.
It's all about the stylesheet.
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
Is the applicable line.
HTML5 is a structural markup language - it is simply a set of stylable containers around content. In terms of responsiveness, HTML5 has almost no benefit over HTML4 (there are many other good reasons to use HTML5 though).
The "responsive" part of a website is achieved in how those containers are organised and then styled.
This is usually done in the CSS by using media selectors to specify styles for specific display widths (so, smaller phones or even non-maximised windows have different styles compared to wider screen monitors). Javascript is then used to provide a bit more of an enhancement for behaviour that CSS cannot achieve alone.
So, you want to take a look at the stylesheet located at css/style.css
and a good introduction: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
You can make your website responsive by combining HTML5 and CSS3. Alone, I don't think so. you can refer to below link:
https://msdn.microsoft.com/en-us/magazine/hh653584.aspx
I'm using difference CSS (almost 10) and I have a web page that contains multiple webpages and each page with thier specified CSS but the result gives me Headache all the CSS mixed with each other, I tried to declare the CSS separately in the head of each pages like this:
<head>
<title>My web page</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
but it doesn't work, any idea how to make a CSS local declaration so I can use it in a specific elements without recreate all the HTML by class=" " . I want to apply different CSS style in a webpage that contain multiple webpages any declaration to do that?
I'd suggest you come up with a common CSS for all the pages (though you might not even need it) - sets of rules that all of them would use, like defining body styles, reset rules for some elements, etc... Then, in every page you would include that CSS first, and then the webpage-specific CSS after. Like this:
Page 1
<head>
<title>My web page 1</title>
<link type="text/css" rel="stylesheet" href="css/common.css"/>
<link type="text/css" rel="stylesheet" href="css/page1.css"/>
</head>
Page 2
<head>
<title>My web page 2</title>
<link type="text/css" rel="stylesheet" href="css/common.css"/>
<link type="text/css" rel="stylesheet" href="css/page2.css"/>
</head>
etc...
I'm stumped. Working on a site that isn't loading properly in FireFox. It loads great in Chrome and even IE, but for some reason the stylesheet isn't loading in FireFox.
The site: http://gregsonaccounting.com
I'm using html5 code and have used the basic resets and such from html5 Boiler Plate. Not sure if the problem is in my html or CSS.
Any insight is extremely helpful.
Many thanks.
Your problem comes from style.css which begins by #charset "IBM437"
Replace it with #charset "UTF-8"; and it will be better !
It seams this charset IBM437 is auto added by SASS:
CSS pseudo element ▼ becomes gibberish in IE
A stylesheet should be defined in the format;
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
You may also include media attribute, that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.
In your page, it is;
<link rel="stylesheet" href="stylesheets/style.css" rel="stylesheet" />//Here is the problem
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
So that line may be modified like;
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" />
Try changing:
<link rel="stylesheet" href="stylesheets/style.css" rel="stylesheet" />
to
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" />
My CSS code worked well on Chrome, but it kept crashing on IE and Firefox. Then i found out the problem was in a badly preprocessed CSS.
Just copy paste your CSS to http://csslint.net/ and if you get any error, just fix it and you are good :)
Worth trying!
insert this inside your html documents. I am not writing in code just giving u the key words so you know and can put it in.
link rel="stylesheet" type="text/css" href="stylesheet.css"
it works so make sure you have this correctly or else your html document will not load with your stylesheet. best of luck to you and keep working brah.
I have a very new site I am trying to put together and it seems that my css file isn't being recognized.
The site is http://www.problemio.com and I have in my index.php a direction to pick up the css file like this:
<link rel="stylesheet" type="text/css" href="main.css"/>
and then a header div declaration like this where some of the initial styles are used:
<?php
include("divs/header.php");
?>
I am trying to go through the index.php file with firebug, but not sure how to tell if the css file is being recognized or something else is the problem.
Any ideas how to get the styles recognized?
You have to link to the CSS Reset before you link to your own styles.
The way you set it up now, the CSS Reset is resetting your styles.
Change this:
<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
to this:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
Loaded CSS:
grids-min.css
main.css
menusystem.css
reset-min.css
Reset is loading after the others, which nullifies the majority of your settings.
This is probably because of the order you are loading the CSS files. You are loading your "main.css" file first, then the YUI reset CSS, which basically resets whatever your main.css file has set already. Try loading the reset first.
The stylesheet appears to be loading fine. You need to put it after the reset styles though, or the reset will get rid of most of yours.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
If the problem you think you are seeing is related to the sign-in links, note that they are set to color:#fff;, which happens to match the background...
Depending on your browser, Ctrl+Shift+I (Chrome), Ctrl+Alt+I (Safari), F12 (IE9), or Firebug (Firefox) can show you which resources are loaded... You should probably get comfortable with the developer modes for each.