HTML/CSS Why does my icon not load instantly & how to fix it?

HTML/CSS Why does my icon not load instantly & how to fix it? - javascript

body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.icon {
width: 32px;
height: 32px;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: dodgerblue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_311846.png" class="absoluteCenter">
<div>LOGIN</div>
</a>
</li>
<li>
<a href="#" >REGISTER</a>
</li>
<li>
<a href="#" class="new_paragraph" >GET<span>PREMIUM</span></a>
</li>
<li>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
Hello community,
I added an icon for my navbar for the login, but when I load the website, the icon doesnt load instantly. How can I change it? I heard that it's better to use links for inserting pictures or icons to your website because it loads faster than when having a seperate picture in your project file as .png or .jpg.
It really sucks that its slowly loading, usually on other websites its instant.
Thanks!

The reason is its a massive image scaled down to icon size with your CSS and is probably being grabbed from a slow server. Here, all I did was reupload that icon to imgur and made it smaller. See here: https://i.imgur.com/76JuT8K.png?1 And look how your code runs now:
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.icon {
width: 32px;
height: 32px;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: dodgerblue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img class="icon" src="https://i.imgur.com/76JuT8K.png?1" class="absoluteCenter">
<div>LOGIN</div>
</a>
</li>
<li>
<a href="#" >REGISTER</a>
</li>
<li>
<a href="#" class="new_paragraph" >GET<span>PREMIUM</span></a>
</li>
<li>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>

This may depend on your server and cdn config BUT as written,
It loads pretty darn fast (there is no loading animation or logic waits just load order and parallelization issues). If you want it to load faster you can offset your font links, each of those is going to take up a DNS lookup and load BEFORE your image. You can either prefetch, async, or defer these. If you are going to add a css reference do the same. Javscript do the same. Internal CSS style tag move it to bottom of body. You can also move fonts, js, css to local file so it doesn't use DNS to do lookups. Additionally, your CDN is serving on http1.1 ideally you want http2 for more parallelization. Finally, you have no caching on the image on web, this should be set in your CDN for that image or image file types in general. That means you'd only ever need to download it one time.
Much more server specific is cache control for your other assets. If you make people download js, css, fonts everytime they load your site then its always gonna suck up more time than if you cache it.

It's slow on my machine too - over 600 ms - and it does not get cached.
If you don't have better options as far as a sever to host it on, you could consider embedding it directly into your HTML. Here's a site that will convert your existing URL into a base 64 img tag, that you just include directly in your page and there's no additional load needed:
https://base64.guru/converter/encode/image/png

If you link to an external asset, the loading time can only be as fast as the speed and throughput external source's servers permit for the nature and size of the asset. In general, images are always going to load more slowly than text, html and your CSS styles. There are ways to mitigate against this using optimisations in front- and back-end code, but there are also low-hanging fruits if you wish to keep your project relatively simple. It's worth noting that all of the icons on the homepage of onlinewebfonts.com took a little while to load, and it's probable that they aren't prioritising performance as a free and honestly rather old-school looking service.
I have a few suggestions that may help you out.
Firstly, the gold-standard for external icons (many of which are completely free) is fontawesome.com. They provide copy-and-paste html for hundreds of modern, performant icons plus guides for hosting, CSS styling and accessibility.
Secondly, consider the format and resolution of the content you wish to include. The icon you have chosen is a medium-to-large PNG. Considering the rendered size of the icon, this could be overkill and would naturally increase the load time. As Dai mentioned, self-hosting gives you more control over loading and content sizing; you could create a smaller, optimised version of the file and host it yourself with your html and css files.
Finally, depending on your project goals, you could consider a more advanced solution and create your own icon using the SVG html element. SVGs give you a tonne of creative flexibility in an efficient, embedded format which doesn't load via a separate HTTP request but simultaneously with your html. (Worth noting here that this does mean these icons cannot be cached or pre-loaded.) There are loads of free-to-use SVG code templates if you search for them, or you can attempt to create a unique one of your own design using the numerous permitted shape and fragment elements, or in a vector graphics program like Adobe Illustrator. Lots more on SVGs at csstricks.com.
Hope this helps!

Related

How to achieve a persistent global navigation bar or menu bar on a website

so i'm fairly new to html and css and all that, I've been practicing making a dummy website and I hit a wall. It is just a "Portfolio" website with three main categories. the Index is just a landing page of sorts. I was making a navigation bar for the page contents and I realized that the whole page loads each time an item from the nav bar is clicked, i was trying to make the nav bar stick somehow. Not to the top, I've already found how to do that, but globally across all the pages.
I tried with iframes since i figured it'd only load inside the container but i couldn't get it to work. The page just loaded entirely. Maybe there's a way with iframes but I read they are troublesome and I just don't know enough about how to work with them, so I scrapped that.
Here´s some code for the nav bar and the corresponding CSS if it helps.
body {
background: #ffffff;
font-family: "proxima-nova", sans-serif;
padding: 0;
margin: 0;
}
.btns {
margin: 0 2%;
width: 38%;
max-width: 193px;
min-width: 60px;
justify-content: space-around;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.btns .btn {
text-decoration: none;
background: #4f1e39;
width: 24%;
min-width: 60px;
max-width: 80px;
color: #ffffff;
padding: 4px 0px;
margin: 4px 0;
}
.btns .btn:hover {
background: #ffffff;
color: #4f1e39;
font-weight: bold;
}
.btns .current {
text-decoration: none;
background: #ffffff;
width: 24%;
min-width: 60px;
max-width: 80px;
color: #4f1e39;
padding: 4px 0px;
margin: 4px 0;
font-weight: bold;
}
.centerstuff {
width: auto;
background-color: #4fc5d6;
display: flex;
flex-wrap: wrap;
}
.minilogobox {
height: 35px;
}
.minilogobox img {
max-width: 100%;
max-height: 100%;
padding: 1px 4px;
}
<nav>
<div class="centerstuff">
<div class="minilogobox">
<a href="../index.html">
<img src="https://i.imgur.com/mCfZDsq.png" alt="mini-logo"
/></a>
</div>
<div class="btns">
<a class="current" href="/work.html"> Work</a>
<a class="btn" href="/about.html"> About</a>
<a class="btn" href="/contact.html"> Contact</a>
</div>
<!---<div class="pagetitle"><h1>/Work</h1></div>-->
</div>
</nav>
So, I know there's a way, maybe I have to learn php or java. I'm sorry if this has been asked before, the only other question I've found was not useful.

Because you are navigating away from the page where your header is rendered, and this is a static html page, that code won't remain. When you navigate to a new page, everything in that html file is rendered, including the header code.
You'll need to use some kind of dynamic library to render the html you want to load, while keeping the rest in-tact. This is a long step away from type of development you're doing right now.
I would recommend using something like React and React Router to accomplish this.
As a final note however: you really don't need to worry about this. The majority of webpages work this way, your page should be loading fast enough that you don't even or barely notice it. Just include the header code in every page so that it is omni-present.

Here's a simple show and hide section idea, using fragments and css pseudo target selector. Click on a link, show and jump to the appropriate section.
<html>
<head>
<style type='text/css'>
section {
display: none;
}
:target {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href='#about'>About</a></li>
<li><a href='#contact'>Contact</a></li>
</ul>
</nav>
<section id='about'>
All about me.
</section>
<section id='contact'>
Say hello.
</section>
</body>
</html>
(Please comment if this is an accessibility no no, or provide a fallback/workaround if there isn't adequate browser :target support.)

Need help in tweaking CSS to match given specifications

I need to create a navigation bar using CSS3. A snapshot of the expected result is shown below
I have used <nav> <li> <ul> tags to create the skeleton for the page and added some CSS3 to simulate the desired output. The products dropdown menu has to be shown when the mouse hovers on the "Products" title in the navigation bar. Include appropriate color changes as indicated in the snapshot.
The CSS3 scheme is given below
Here is the code that I have tried so far but I am getting some error like Fail 1 - CSS elements for is wrong. Please help me understand where the problem is.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Create a simple Navigation bar</title>
<style type="text/css">
nav {
position: absolute;
display: inline-block;
top: 0;
width: 100%;
background-color: green;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
}
li {
list-style-type: none;
display: inline;
margin-right: 20px;
font-size: 25px;
}
a {
a: link;
text-decoration: none;
}
li:hover ul {
display: block;
position: absolute;
left: 200px;
background-color: green;
background-repeat: no-repeat;
margin: 0;
}
li:hover ul li a:link {
display: block;
margin-left: 30px;
background-repeat: no-repeat;
}
a:hover {
color: yellow;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Engineering</li>
<li>Telecom</li>
<li>Energy</li>
<li>Finance</li>
<li>Consultancy</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>

Hello and welcome to StackOverflow :)
Here is my best attempt to figure out what the spec described - I have added comments in the CSS to help you map it back to the spec.
As to what was specifically wrong with your code - it's a little hard to tell because there is a lot of extra stuff going on. It usually helps to keep things simple in CSS (and pretty much any code really). I started from scratch and reproduced what the spec arrived to get the solution below.
Bonus Tip: Using the Chome Dev Tools (or other similar tools specific to your browser) can help you debug how the CSS is being applied to each element.
/*
The nav section in the spec. Pretty much verbatim as the spec describes it
*/
nav {
display: block;
position: absolute;
width: 100%;
background-color: green;
top: 0;
}
/*
The li section in the spec. Pretty much verbatim as the spec describes it
*/
li {
list-style-type: none;
display: inline;
margin-right: 20px;
font-size: 25px;
}
/* This is missing from the spec. Used to hide the submenu initially */
li>ul {
display: none;
}
/*
The li:hover ul section in the spec. Pretty much verbatim as the spec describes it
*/
li:hover>ul {
display: block;
position: absolute;
left: 200px;
background-color: green;
margin: 0;
}
/*
The li:hover ul li a:link section in the spec. Pretty much verbatim as the spec describes it
*/
li:hover>ul>li>a {
display: block;
margin-left: -30px;
}
/*
The a a:link section in the spec. Pretty much verbatim as the spec describes it
*/
a {
color: #fff;
text-decoration: none;
}
/*
The a a:hover section in the spec. Pretty much verbatim as the spec describes it
*/
a:hover {
color: orange;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Create a simple Navigation bar</title>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Engineering</li>
<li>Telecom</li>
<li>Energy</li>
<li>Finance</li>
<li>Consultancy</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>

HTML not stretching to window on sever but working locally

I am facing a strange issue while creating a responsive webpage.
Basically, I created a simple html page(Page 1) and uploaded it to a blob storage. The page is then run in Azure AD's B2C portal which inserts login form into my html page (using CORS) and shows the combined page to the user. Since I have the source code of the final combined page(Page 2) which automatically merges my content with Azure's form, I am able to test the page from my local machine as well.
The issues I am facing is that Page 1 (which I upload to blob) stretches to window perfectly (both height and width), but Page-2 after it's merged with Azure login-form does not stretch along height.
I have already verified using chrome developer tools (enabled using F12 on chrome) that css style on html/body in page2 is the one I applied and only other thing added to it by browser/Azure is {display: block;} which I think should not cause this current issue.
Below are the source codes :-
Page 1 :
<html>
<head>
<title>User Details</title>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/common-1.0.4.css">
<link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/selfAsserted.1.0.8.css">
<script src="https://login.microsoftonline.com/static/tenant/default/js/layout-1.0.0.min.js"></script>-->
<style>
#main_div {
background-image:url('https://adasphase2.blob.core.windows.net/democontainerblockblob/mm_background.jpg');
/* background-color: 00ff00; */
height:100%;
width:100%;
background-repeat:no-repeat;
background-size:100% 100%;
}
body {
/*background-color: #ff00ff;*/
height:100%;
width:100%;
}
h1 {
font-size: 3vw;
letter-spacing: 0px;
color:#F8F8F8;
font-family: sans-serif;
padding:0% 5% 5% 5%;
}
img {
width:100%;
padding-top:10%;
/*padding-top:10%;
padding-left:5%;
padding-right:5%*/
}
label[for=password] {
display: none;
}
h2 {
display: none;
}
{
}
label[for=logonIdentifier] {
display: none;
}
#forgotPassword {
display: none;
}
#password, #logonIdentifier {
margin: 2% 5% 2% 5%;
width: 90%;
}
#password, #logonIdentifier {
margin: 1% 5%;
width: 86%;
padding: 2% 2%;
}
#next {
background-color: #222222;
border-style: solid;
border-radius: 5px;
border-color: #ffffff;
color: white;
padding: 2% 2%;
text-align: center;
font-size: 3vw;
font-family: sans-serif;
border-width: 1px;
width: 90%;
margin: 2% 5%;
text-transform: uppercase;
font-weight: bold;
}
#next:active {
background-color: #444444;
}
div.create {
display: none;
}
#forgot{
font-size: 3vw;
letter-spacing: 0px;
color:#F8F8F8;
font-family: sans-serif;
margin:2% 5%
}
</style
</head>
<body>
<div id="main_div">
<img id="background_background_image" src="https://adasphase2.blob.core.windows.net:443/democontainerblockblob/splash_stacked_logo.png" alt="Illustration" />
<h1>LOGIN WITH A TARPPORTAL.COM ACCOUNT OR CLICK REGISTER FOR A NEW ACCOUNT.</h1>
<div id="api"></div>
</div>
</body>
</html>
Page2 (combined page):
<!DOCTYPE html>
<!-- Build: 1.0.0.114 -->
<html>
<head>
<title>Loading...</title>
<script src="https://login.microsoftonline.com/static/library/require-2.1.17.min.js"></script>
<script>window.staticHost="https://login.microsoftonline.com/static";window.targetSlice="001-000";</script>
<script>var elementUrl="elements/selfasserted/unifiedSSP-1.0.8.min";</script>
<script>define('template.CP', [/** no dependencies. **/], {"list":[]});
define('template.SA_FIELDS', [/** no dependencies. **/], {"AttributeFields":[{"IS_TEXT":true,"IS_PASSWORD":false,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"LogonIdentifier","ID":"logonIdentifier","U_HELP":"","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false},{"IS_TEXT":false,"IS_PASSWORD":true,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"Password","ID":"password","U_HELP":"Enter password","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false}]});
define('language.data', [/** no dependencies. **/], {"email_pattern":"^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$","logonIdentifier_email":"Email Address","requiredField_email":"Please enter your email","logonIdentifier_username":"Username","createaccount_link":"Sign up now","requiredField_username":"Please enter your user name","createaccount_intro":"Don't have an account?","forgotpassword_link":"Forgot your password?","divider_title":"OR","cancel_message":"The user has forgotten their password","button_signin":"Sign in","social_intro":"Sign in with your social account","requiredField_password":"Please enter your password","invalid_password":"The password you entered is not in the expected format.","local_intro_username":"Sign in with your user name","local_intro_email":"Sign in with your existing account","invalid_email":"Please enter a valid email address","unknown_error":"We are having trouble signing you in. Please try again later."});
define('settings.data', [/** no dependencies. **/], {"remoteResource":"https://adasphase2.blob.core.windows.net/democontainerblockblob/RemoteServicesLoginPage.html","retryLimit":3,"api":"CombinedSigninAndSignup","csrf":"R2lYeVl1cEJLYWlpdENnSHJoOHpITHZtWWFaR2Y4eCsvcUZiK3JsTDd5OXFBZFAzUDViNDBtSTczUTd1YnpPS3RpVURmd1dPOGM1K0FZYU5Fam1IRkE9PTsyMDE2LTA1LTE4VDIyOjEzOjU3LjQxNTEwMjJaO0F6U0VkYlRUbDlHenNoQkVHK1JYSUE9PTt7Ik9yY2hlc3RyYXRpb25TdGVwIjoxfQ==","transId":"eyJUSUQiOiJmN2I4ODJjOS03NmJlLTQ0MzktYWJjNi1hNzE1NjM3ZDM4MGQifQ","pageMode":0,"config":{"operatingMode":"Email","sendHintOnSignup":"False","forgotPasswordLinkLocation":"AfterLabel","includePasswordRequirements":"true"},"hosts":{"tenant":"/lexustmstest.onmicrosoft.com/B2C_1_TMS_Lexus_SignUpandSignIn_Policy","policy":"B2C_1_TMS_Lexus_SignUpandSignIn_Policy","static":"https://login.microsoftonline.com/static/"},"locale":{"lang":"en","country":"US"}});
</script>
<script>var cookieEnabled=navigator.cookieEnabled?!0:!1,Constants;typeof navigator.cookieEnabled!="undefined"||cookieEnabled||(document.cookie="probe",cookieEnabled=document.cookie.indexOf("probe")!=-1?!0:!1),function(){document.querySelectorAll||(document.querySelectorAll=function(n){var i=i=document.createStyleSheet(),r=document.all,f=r.length,t,u=[];for(i.addRule(n,"k:v"),t=0;t<f;t+=1)if(r[t].currentStyle.k==="v"&&(u.push(r[t]),u.length>Infinity))break;return i.removeRule(0),u});String.prototype.trim||function(){var n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;String.prototype.trim=function(){return this.replace(n,"")}}()}();cookieEnabled&&(Constants=[],Constants.ERROR_REDIRECT_CONSOLE_STRING="Redirecting back to B2C service with querystring",function(){for(var n,u=function(){},t=["assert","clear","count","debug","dir","dirxml","error","exception","group","groupCollapsed","groupEnd","info","log","markTimeline","profile","profileEnd","table","time","timeEnd","timeStamp","trace","warn"],i=t.length,r=window.console=window.console||{};i--;)n=t[i],r[n]||(r[n]=u)}(),require(["require"],function(){require.config({baseUrl:window.staticHost,paths:{jquery:"library/jquery-1.10.2.min",handlebars:"library/handlebars-2.0.0.min",requirecss:"library/require-css-0.1.8.min",simpleModal:"library/jquery.simplemodal-1.4.5.min",core:"js/core-1.0.17.min",metrics:"js/metrics-1.0.1.min",modal:"js/modal-1.0.1.min",iso:"js/iso-unified-1.0.2.min",element:elementUrl},map:{"*":{css:"requirecss"}},skipDataMain:!0});require(["core","settings.data","metrics","element"],function(n,t,i,r){try{window.Metrics=i;metricResource=window.Metrics.create(t.remoteResource);metricResource.start();function u(){var i,f=canSetHeaders=!0,e=t.retryLimit;window.XDomainRequest?(i=new XDomainRequest,f=canSetHeaders=!1):i=new XMLHttpRequest;i.open("GET",metricResource.id);canSetHeaders&&metricResource.id.indexOf(window.staticHost)===0&&i.setRequestHeader("x-ms-cpim-slice",window.targetSlice);i.onload=function(){var t,u;if(!f||f&&i.status===200){metricResource.end();t=(new Date).getTime();r.initialize(i.responseText);metricResource.setInitializationTime((new Date).getTime()-t);return}u="external?statusCode="+i.status+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(u);return};i.onerror=function(){var t=0,r;f&&(t=i.status);r="external?statusCode="+t+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(r)};i.timeout=function(){if(this.tryCount++,this.tryCount<=this.retryLimit){u();return}var t="external?statusCode=4&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(t);return};i.onprogress=function(){};i.send()}u()}catch(f){n.redirectToServer("error?statusCode=0&statusMessage="+encodeURIComponent(f.message)+"&resource="+encodeURIComponent(t.remoteResource))}})}))</script>
</head>
<body>
<style>.no_display{display:none}.error_container h1{color:#333;font-size:1.2em;font-family:'Segoe UI Light',Segoe,'Segoe UI',SegoeUI-Light-final,Tahoma,Helvetica,Arial,sans-serif;font-weight:lighter}.error_container p{color:#333;font-size:.8em;font-family:'Segoe UI',Segoe,SegoeUI-Regular-final,Tahoma,Helvetica,Arial,sans-serif;margin:14px 0}</style>
<noscript>
<div id="no_js">
<div class="error_container">
<div>
<h1>We can't sign you in</h1>
<p>Your browser is currently set to block JavaScript. You need to allow JavaScript to use this service.</p>
<p>To learn how to allow JavaScript or to find out whether your browser supports JavaScript, check the online help in your web browser.</p>
</div>
</div>
</div>
</noscript>
<div id="no_cookie" class="no_display">
<div class="error_container">
<div>
<h1>We can't sign you in</h1>
<p>Your browser is currently set to block cookies. You need to allow cookies to use this service.</p>
<p>Cookies are small text files stored on your computer that tell us when you're signed in. To learn how to allow cookies, check the online help in your web browser.</p>
</div>
</div>
</div>
<script>if (!cookieEnabled) document.getElementById('no_cookie').className = '';</script>
</body>
</html>
Any help/pointers are appreciated !

You can try
body, html { margin: 0; padding: 0; }

On line 1 of your first page add
<!doctype html>
and then further down you have a typo on the closing style tag
</style <--------
</head>

thanks for your help. I found this post helpful :
Stackoverflow
Adding html{ height:100%; } resolved the issue.

Can't select html elements with javascript

I've created a page (http://www.nextsteptutoring.co.uk/WhatWeTeach.html) with 4 selectable h3 elements that bring up further text on the topic for the user to read.
The 1st element works perfectly - the whole element is selectable. The 2nd and 3rd are partially selectable, the + and first letter can be clicked. The 4th can't be clicked at all.
The JS works fine and my CSS would seem to be fine as displayed by the 1st working fine, and the 2nd and 3rd being partially ok. I can't see how this could be a z-inex as the only element on the page with a z-index value is the footer, which loads fine as well.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Cabin+Condensed" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="Main.CSS">
<title>NST | What We Teach</title>
</head>
<body>
<div class="container">
<header> </header>
<div class="leftcolumn">
<h2>What We Teach</h2>
<p> Clear schemes of work, linked to the National Curriculum, which
are individually tailored to your child’s needs. We offer one to one
sessions, or small groups, with a maximum of 4 children. Groups are
based on specific needs/ability, rather than on chronological age.<br/>
<br/>
Programmes of study are adapted for high achievers in need of a
challenge, as well as those who lack confidence or require additional
support, outside of mainstream education.<br/>
</p>
</div>
<div class="rightcolumn">
<div class="hide">
<h3>+ Primary Maths</h3>
<ul>
<li>The four rules of number</li>
<li>Focus on Mental Arithmetic</li>
<li>Multiplication and associated division facts</li>
<li>Fractions, decimals and percentages</li>
<li>Data Handling, measures, and shapes</li>
<li>Algebra</li>
<li>Using and applying mathematical skills in everyday problem
solving</li>
<li>Confidence building and catch-up</li>
</ul>
</div>
<div class="hide">
<h3>+ Primary English</h3>
<ul>
<li>Clear focus on comprehension. Building skills of inference and
reasoning</li>
<li>Individually tailored spelling programme (specialised dyslexia
spelling programme)</li>
<li>Grammar and punctuation</li>
<li>Writing for different purposes and audiences</li>
<li>Handwriting</li>
<li>Confidence building and catch-up</li>
</ul>
</div>
<div class="hide">
<h3>+ Year 6 to Year 7 Transition</h3>
<p>Tailored English and Maths programme to support youngsters who
lack confidence during their transition from Primary to Secondary
education.</p>
</div>
<div class="hide">
<h3>+ Written Reports</h3>
<p>Parents may wish to receive a termly or yearly written report on
their child’s progress, and targets for the next phase of their
learning. This service will incur a fee of £10.</p>
</div>
</div>
<footer> </footer>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("header").load("Header.txt");
});
$(document).ready(function(){
$("footer").load("Footer.txt");
});
$(".hide > h3").click(function(){
$(this).parent().toggleClass("show");
});
$(".show > h3").click(function(){
$(this).parent().toggleClass("hide");
});
</script>
</body>
</html>
footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
background: rgba(150,150,150,1);
color: white;
text-align: center;
z-index: 5;
}
footer .container div {
display: inline-block;
padding: 5px 30px 2px 30px;
}
#contact {
background: rgba(120,117,185,1);
float: right;
padding: 5px 100px 2px 100px;
}
.hide h3 {
width: 100%;
background: rgba(171,167,242,0.75);
border-radius: 5px;
cursor: pointer;
padding: 2px 0 2px 8px;
}
.hide p, .hide ul {
opacity: 0;
height: 0;
}
.show {
height: auto;
}
.show p, .show ul {
opacity: 1;
list-style-type: square;
height: auto;
font-size: 18px;
}
Any ideas would be greatly appreciated!!

The problem is css.
Add this:
.hide p, .hide ul {
opacity: 0;
height: 0;
overflow: hidden;
}
The li elements were overlapping the buttons. So give overflow: hidden to the ul and they get hidden properly without affecting the rest.

CSS
.hide h3 {
padding: 2px 0 2px 10px;
width: 97%;
background: rgba(171,167,242,0.75);
border-radius: 5px;
cursor: pointer;
position: relative;
}
Add position:relative CSS property to your .hide h3 it will work fine.

Text Inside Div Overflowing Another Div

I'm having an issue where a search bar & text within a nav are overflowing it's div container. I have tried using various things like word-break and overflow-hidden but nothing seems to be working for me. If you see below I have my HTML code along with the CSS. Any help appreciated!
I know there are many other similar questions but nothing answers mine.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="Enter Book Title"/>
</form>
</div>
<ul>
<li>
<a id="firstlink">
Home
</a>
</li>
<li>
<a id="secondlink">
Categories
</a>
</li>
<li>
<a id="thirdlink">
Bestsellers
</a>
</li>
<li>
<a id="fourthlink">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #f1f6f6;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
margin: 2em 1em 1em 1em;
text-align: right;
color: #888888;
display: block;
}
#nav li{
list-style-type: none;
}
#searchbar{
padding-bottom: 0.5em;
text-align: center;
}
#firstlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#secondlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#thirdlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#fourthlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
Example of Problem - http://i.imgur.com/TigP5MD.png & http://i.imgur.com/nj2A9ka.png

Give the <input> a width:
#searchbar input { max-width: 100%; }
The way to investigate things like this is to use your browser's DOM inspector tools. In this case, I was able to see (by selecting the <div> and <form> containers) that your block-level elements were constrained within the sidebar area, but the <input> itself wasn't. (In the images you linked, the container size is indicated by the blue highlight box.) It was therefore pretty obvious that the answer lay in sizing that element directly.
Here's a jsfiddle with that CSS change.

#Pointy is right, but you will always geht in trouble with using percentage width on #sidebar and the text on your input and links. At a certain point they will be always greater than the #sidebar and overlap.
You may want to look in http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
to avoid this.

Develop Reference

JavaScript is the programming language of the Web.