CODE SNIPPETS:
HIDE LINK FOR VISUAL IMPAIRED OFF SCREEN
<!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <style> .hidden { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } </style> </head> <body> <div class="hidden"><p><a href="http://www.google.com">For the visually impaired, please click this link to launch the search tool</a></p></div> </body> </html>
CENTER DIV
.centerContent{
margin: 0 auto;
display:flex;
justify-content: center;
}
*************ADD EXTERNAL LINK ICON****************
<a href=""> <sup><abbrv title="opens in new window" class="smaller"> <span class="icon-share small"> <<pseudo:before>></<pseudo:before>> </span> </abbr> </sup> </a>
TABLE list
<ul> <li>foo<br>foo</li> <li>barbar</li> <li>baz</li> </ul> ul { width: 100%; display: table; table-layout: fixed; /* optional, for equal spacing */ border-collapse: collapse; } li { display: table-cell; text-align: center; border: 1px solid pink; vertical-align: middle; }
JQUERY Word Swap
//$("#sort label").text($("#sort label").text().replace("Search:", "Filter:"));//replace the default word 'Search' with filter function replaceNodeText() { if (this.nodeType === 3) { this.nodeValue = this.nodeValue.replace(replaceNodeText.find, replaceNodeText.replace); } else { $(this).contents().each(replaceNodeText); } } replaceNodeText.find = "Search"; replaceNodeText.replace = "Filter"; $("#sort_filter").contents().each(replaceNodeText); <h3>center content in div:</h3> .box{ display: flex; flex-direction: column; align-items: center; }
RESPONSIVE TEXT CSS
body { font-size: calc(.7vw + 14px); line-height: 1.5; font-family: 'Source Serif Pro', serif; font-style: normal; font-weight: 400; } * { box-sizing: border-box; } .content{ font-size:100%; } .wrapper { margin: 0 auto; padding: 2em 1em; max-width: 45em; } h1 { font-size: calc(4em - 1rem); line-height: 1; margin-bottom: 2rem; } p { margin: 0; margin-bottom: 1em; } p.pullquote { font-size: 1.3em; margin-bottom: 1em; padding-left: 1.5em; border-width: 0px 0px 0px 3px; border-style: solid; font-weight: 700; margin-left: -1.5em; } .content .content{ font-size:66%; width:66%; background:yellow; padding:1em; }
2 elements on the same line
<div class="wrapSame"> <div class="memberName"><input name="member_name" label="member name" value="member name" title="member name" size="25"></textarea></div> <div class="sameLine"><input id="searchBox" size="25"><input type="image" src="/site-resources/resource-files/img/magnify-22w.png" onsubmit="submit-form();" /></div> </div> .sameLine { padding-right:40px; display: inline; float:right; vertical-align:top; } .sameLinetext { padding-right:40px; display: inline; float:right; width:80%; vertical-align:top; } .wrapSame{ display:block; margin-bottom:20px; clear:both; }
Have Two boxes side by side
.wrapCompany{ width:100%; border-bottom:0px solid #000; overflow: hidden; /* add this to contain floated children */ margin-bottom:60px; } .boxList{ width:45%; float:left; margin-left:2%; } .boxList2{ margin:0 auto; width:45%; float:left; }
Alternate Table ROW background colour css3 Zebra Stripes
.profileTable{ width:100%; border-collapse:collapse; } .profileTable td{ padding:7px; border:#4e95f4 1px solid; } /* provide some minimal visual accomodation for IE8 and below */ .profileTable tr{ background: #b8d1f3; } /* Define the background color for all the ODD background rows */ .profileTable tr:nth-child(odd){ background: #b8d1f3; font-weight:600; } /* Define the background color for all the EVEN background rows */ .profileTable tr:nth-child(even){ background: #dae5f4; }
Hide h2 text from render
nav header { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding:0 !important; border:0 !important; height: 1px !important; width: 1px !important; overflow: hidden; }
Prevent Googlebot from indexing web service pages:
User-agent: googlebot Disallow: /Office/LocationDetails.aspx Disallow: /office/default.aspx Disallow: /Electronics/Communitylist.aspx Disallow: /electronics/locationdetails.aspx Disallow: /electronics/Communitydetails.aspx Disallow: /electronics/communitydetails.aspx
Styling hyperlinks in a paragraph contained within a div with a class of sfContentBlock
.sfContentBlock p a, .sfContentBlock p a:link{ text-decoration:underline; color:#0000ff; } .sfContentBlock p a:visited,.sfContentBlock p a:hover, .sfContentBlock p a:active{ text-decoration:none; }
Tool Tip with CSS used on Page Portal
a.tooltip {outline:none; } a.tooltip strong {line-height:30px;} a.tooltip:hover {text-decoration:none;} a.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top:-30px; margin-left:28px; width:300px; line-height:16px; } a.tooltip:hover span{ display:inline; position:absolute; color:#111; border:1px solid #DCA; background:#fffAF0;} .callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;} <h3>CSS3 extras</h3> a.tooltip span { border-radius:4px; box-shadow: 5px 5px 8px #CCC; } HTML: <a href="#" title="tool tip" class="tooltip">skills <span> <img alt="" src="https://crmportalqa.ola.org/images/default-source/default-album/callout.gif" class="callout" /> *Hint These could be academic, volunteer or work done in your community and at home.</span> </a>
CSS Button used on Page Portal
.appButton { background-color:#74ad5a; -moz-border-radius:28px; -webkit-border-radius:28px; border-radius:28px; border:3px solid #3b6e22; display:inline-block; cursor:pointer; color:#ffffff; font-family:Trebuchet MS; font-size:17px; padding:10px 31px; text-decoration:none; text-shadow:0px 1px 0px #92b879; } .appButton:hover { background-color:#68a54b; } .appButton:active { position:relative; top:1px; } HTML: <p><a href="/portal-secure-pages/Application" class="appButton">Start Your Application</a></p>
No Page Cache
Put in head tags:
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="-1">
Leave a Reply