To remove the padding in <ul>, set it to padding:0
To separate <li> which is displayed inline, use margin instead of padding. Padding will not set the spaces accurately. Margin SHOULD ALWAYS be used.
If the 3rd li child should have a different margin, how do we refer it from CSS?
Google Web Fonts
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Font+Name“>
You put the above at the head tag area. Then the one below is for CSS:
font-family: ‘UnifrakturCook’, serif;
For WP, you should put it on functions.php. Read below:
<nav id=”footer-menu”><ul><li><a>…..
If you need to add | as a separator for your nav, you may use this:
#footer-menu li:before{
content: “|”;
padding: 0 10px;
}
Then to avoid the separator on the first child of li, do this
#footer-menu li:first-child:before{
content: “”;
}
For HTML5 BOILERPLATE, when modifying nav, make sure to 0 the padding if you don’t want any text-indent
nav ul{
padding:0;
}
The first step to creating our responsive layouts is to plan out what resolutions we’re going to cater for. Common resolutions include the 320px portrait width of smartphones, 768px portrait width of tablets, 1024px landscape width of tablets (and typical netbook resolutions) as well as various desktop monitor resolutions. It’s worth mentioning that a layout that only caters for preset resolutions is often referred to as being ‘adaptive’, whereas a truly ‘responsive’ layout will be built using ems or percentages, allowing an infinite level of scaling.
Source: http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries
text-shadow is similar to box-shadow, but box-shadow requires vendor prefixes.
You cannot just use “input submit” in CSS file. You need to name it with a class or ID whenever you refer to it.
border-radius
-webkit-border-radius
-moz-border-radius
-webkit-transition-property
-webkit-transition-duration
-webkit-transition-timing-function
-webkit-transition-delay
Shorthand:
-webkit-transition: background 0.3s ease 0.1s; (same order as above)
You can also transition multiple properties by putting comma
-webkit-transition: background 0.3s ease 0.1s, color 0.3s ease 0.1s;
rgba is supported by Safari 3.2+, Chrome and FF 3+, Opera 10+ and IE9 beta. Therefore, since other users may also be viewing the site on an earlier web browsers, always specify a backup color.
color: #ccc;
color: rgba(255, 255, 255, 0.7); ———–last figure means opacity
What doesn’t require vendor prefixes:
opacity
text-shadow
nav li:first-child a{ margin-left:0; }
border-radius
text-shadow{h-shadow v-shadow blur color}
box-shadow{same as text-shadow}
960,
768 ——- portrait tablet screens
@media screen and (max-width: 980px) { ………….. }
html = disable text size adjustment. By default, iPhone enlarges the text size so it reads more comfortably. You can disable the text size adjustment by adding -webkit-text-size-adjust: none;
fittextjs.com
adaptive-images.com
Role: main, contentinfo, banner, search, complementary
For example, role=banner “typically includes things such as the logo or identity of the site sponsor, and site-specifi c search tool. A banner usually appears at the top of the page and typically spans the full width.” That initially seems to match HTML5 <header>, but as you’ve seen, there can be multiple
<header>s on a page. So the “page header” is the only one allowed to have role=banner.
There is a useful cross-reference in the spec of HTML5 and ARIA
at dev.w3.org/html5/spec/embedded-content-0.html#annotationsfor-
assistive-technology-products-aria. Steve Faulkner of The
Paciello Group has a list of ARIA information that is not built-in to
HTML5 at http://www.paciellogroup.com/blog/?p=585.
http://www.kryogenix.org/code/browser/searchhi/
<ol start=5>
<dl><dt></dt><dd></dd></dl>
contentEditable
The spec suggests that the “legal” links (copyright, contact, freedom
of information, privacy policies, etc.) that are often tucked away in the
footer should not be wrapped in a <nav>: “It is common for footers to
have a short list of links to various pages of a site, such as the terms
of service, the home page, and a copyright page. The footer element
alone is sufficient for such cases, without a nav element.”
We disagree with this suggestion. Many sites also include a link to
accessibility information that gives information such as how to request
information in alternate formats, and people who require such information
are those who would benefi t the most from user agents that
can take them directly to elements marked up as <nav>.
To be machine-readable, dates must be in the format YYYY-MM-DD and may also include a time, prefi xed
with “T” to separate the date and time, in the format HH:MM. Optionally you can append seconds (separated
from the minutes with a colon). Fractions of a second are allowed after a full stop mark.
As you’ve seen above, you can give a time on the 24-hour clock with no date information.
If you’re giving time and date together, you need to show the time zone: that’s either “Z” for Coordinated
Universal Time (UTC), or an offset from UTC in hours and minutes, prefi xed with a plus or minus.
Putting that all together: “1979-10-14T12:00:00.001-04:00” represents one millisecond after noon on
October 14th, 1979, in Eastern Standard Time during daylight saving time (UTC—4 hours).
If you have <footer> at the bottom and you’ll use the same info at the top, you may also use <footer> at the top.
<blockquote><footer>Ananias <cite> Scene 4.3, <a href=”http://”> The Alchemist </a></cite> (Ben Jonson) </footer></blockquote>
A <section> generally begins with a heading that introduces it. An exception to this might be a <section> that will have a heading injected using JavaScript. If you wouldn’t use a heading, or you want some wrapping element purely for styling purposes you probably should be using a <div>.
“Organizing Mobile” by Luke Wroblewski has some great principles to keep in mind when creating navigation for mobile devices.
Source: Sticky Menus Are Quicker to Navigate
Code Pen
Site: Code Pen
Role: main, contentinfo, banner
What might surprise readers is that, by default, CSS assumes
that elements are display:inline, so if you just set heights
and widths to the structural elements as we do <div>s, it won’t
work properly in the current crop of browsers until we explicitly
tell the browser that they are display:block.
Scripts in the body block rendering so we can do better
As recommended by the HTML5 spec (4.2.5.5 Specifying the document’s character encoding), add your charset declaration early (before any ASCII art 😉 to avoid a potential encoding-related security issue in IE. It should come in the first 1024 bytes.
The charset should also come before the <title> tag, due to potential XSS vectors.
The meta tag for compatibility mode needs to be before all elements except title and meta. And that same meta tag can only be invoked for Google Chrome Frame if it is within the first 1024 bytes.
Welcome to WordPress.com! This is your very first post. Click the Edit link to modify or delete it, or start a new post. If you like, use this post to tell readers why you started this blog and what you plan to do with it.
Happy blogging!
Web Evolve 