So the title says it, ill upload screenshots of the issue:
Here are the images.
I have tried to fix this but im not the most experienced coder out there. If any one has run into this problem or knows the solution please answer :) Its proboly something simple that i cant find because im stupid, LOL. Any way thank you for looking :)
This is my index.html:
<!DOCTYPE HTML>
<!--
Aerial by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Oracle RPG</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="loading">
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
<div id="main">
<!-- Header -->
<header id="header">
<h1>Oracle RPG</h1>
<p>A BETTER EXPERIENCE • BUILT FOR THE GAMER • BY THE GAMER</p>
<nav>
<ul>
<li><span class="label">Forums</span></li>
<li><span class="label">Donor Area</span></li>
<li><span class="label">Youtube Channel</span></li>
<li><span class="label">Ranks & Apply Area</span></li>
</ul>
</nav>
</header>
<!-- Footer -->
<footer id="footer">
<span class="copyright"><font size="1">© Untitled. Design: HTML5 UP.</span></font>
</footer>
</div>
</div>
</body>
</html>
In your all your css files you state your div with id #bg as follows:
bg {
background-size: 2250px auto; /*the first value is different in all css files*/
width: 6750px;
}
The first value is the width of you images and the second one the height. The width is different in each of the css files (wide, normal, mobile, etc) so what you have to do is just change the width of the background-size to whatever you want and your problem is gone! :)
Related
So I am new to html coding and am trying to just make a simple portfolio and I want it to look nice so I have been looking at tutorial websites online however I did something weird and I don't know what I did. If anyone could help me with this issue that would be great.
Screenshot:
The Code Is Below (https://pastebin.com/GDCW2jsu):
<!DOCTYPE html>
<html>
<head>
<title>Ryan Cole Home</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1><a href="index.html"><border>Ryan Cole Home</border>
</a></h1>
<nav>
About Me
Portfolio
Contact Me
</nav>
</header>
<!-- Welcome To The Homepage -->
<footer>
<p>Welcome To The Homepage</p>
</footer>
</body>
</html>
<!-- Scripts -->
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js">
</script><![endif]-->
<script src="assets/js/main.js"></script>
</div>
</body>
</html>
I want to add a html5 slider to a webside instead of a flash slider that i have on my website but when i insert the html5 slider it does not show on the website i want to specific that the website was not created by me
link download website
http://www35.zippyshare.com/v/TOkalFb5/file.html
What i want to do is to put the slider that is in slider.html in index.html instead of that slider with that bmw picture
Please i'm disperated i want to tell that i dont know very well webprograming
you have some errors in your page.
First of all the scripts order :
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Slider, Hi Slider, Simple HTML5 Slideshow, Free js slider" />
<meta name="description" content="Slider created with Hi Slider which enable you to publish responsive jQuery image slideshows, seamless WordPress slider plugins, amazing website sliding banners and fancy JavaScript slideshow presentation" />
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/grid_24.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/superfish.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/tms.css">
<script type="text/javascript" src="sliderengine/jquery.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/jquery.equalheights.js"></script>
<script type="text/javascript" src="sliderengine/jquery.hislider.js"></script>
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'> <img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" alt="" /></div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
And next, you need a height in pixel on this line :
<!----begin------Insert to your webpage where you want to display the slider-->
<div id='hislider1' style="max-width:960px; max-height:360px; height:500px; margin: 0 auto;">
And be careful, you replace your metadata by the slider's one.
Here your files with the correct syntax : http://www65.zippyshare.com/v/DnLpAt9O/file.html
Its difficult to understand what you asked for, but if you want html5 slider please take a look at Bxslider - http://bxslider.com
You can create something similar to your slider.
So I have spent more than an hour trying to figure this out.
I am trying to use a ToolTip from html5-kickstart and it doesn't seem to work when I use it, but the kickstart's kitchen sink works fine. I even copied all of their code into my web server and it didn't work?
I copied their headers and it didn't work, copied their code and it didn't work.
I am using Apache 2 pretty much out of the box. everything else html5 seems to work fine, but kickstart's tool tip.
Here is my code.
<html>
<head>
<title>Please Set name in fuction!</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://xxx.xxx.xxx.xxx/xxxxdesk/css/mainpage.css" />
<link rel="stylesheet" type="text/css" href="http://xxx.xxx.xxx.xxx/xxxxdesk/css/kickstart.css" />
<link rel="stylesheet" type="text/css" href="http://xxx.xxx.xxx.xxx/xxxxdesk/css/tiptip.css" />
<script src="http://192.168.77.74/xxxxdesk/js/mainpage.js" ></script>
<script src="http://192.168.77.74/xxxxdesk/js/kickstart.js" ></script>
<script src="http://192.168.77.74/xxxxdesk/js/jquery-1.6.4.min.js" ></script>
<script src="http://192.168.77.74/xxxxdesk/js/helium.js"></script>
</head>
<body>
<nav>
<div class="grid">
<div id="title" class="col_8 left">
<span>xxxxdesk<span>
</div>
<div id="login" class="col_4 right">
<!-- Click Action -->
<button class="tooltip" data-content="#usermenu" data-action="click">
<i class="icon-user"></i> UserName <i class="icon-sort-down"></i>
</button>
<div class="tooltip-content" id="usermenu"><h5>Menu</h5>
<button class="button meduim red pill" href="index.php/auth/logout">Logout</button>
</div>
</div>
</div>
</nav>
<div class="background">
<header>
A header .........
</header>
<main>
Content ...........
</main>
</div>
<footer>
A Footer ..............
</footer>
Please note that all this code is generated by my PHP code. So it is a dynamic site, but this is all that matters concerning HTML5 Kickstart.
Ok I finally figured it out.
The kitchen sink displays an older version of the package, and it uses an older version of jQuery.
My 1st mistake was that I had the old version of jQuery.
My 2nd mistake was that I was calling jQuery after I called kickstart.js. jQuery needs to come first.
I hope this help others down the road.
i am using this in HTML5
<link rel="stylesheet" type="text/css" href="css/loader.css" media="all"/>
But w3c validator giving me this error:-
Element link is missing required attribute property.
Please help i am stucked with it,
My Code is:
<!DOCTYPE html>
<html lang="en">
<!--[if IE 7]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><html lang="en"><![endif]-->
<!--[if !IE]><html lang="en"><![endif]-->
<head>
<!-- The title of your site -->
<title>Directus Media LTD</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Always make sure to check the robots tag -->
<meta name="robots" content="index,follow">
<meta name="description" content="Directus Media specialises in websites for small to medium businesses"><meta name="keywords" content="southport graphic design, liverpool web design, southport social media management"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="js/lib/modernizr.js"></script>
<!-- Liquid Slider Master -->
<!-- Essential stylesheets -->
<link rel="stylesheet" href="css/loader.css" media="all"/>
<link rel="stylesheet" href="css/lib/essentials.css"/>
<link rel="stylesheet" href="css/lib/ytplayer.css"/>
<link rel="stylesheet" href="css/lib/font-awesome.min.css"/>
<link rel="stylesheet" href="css/lib/magnific-popup.css"/>
<link rel="stylesheet" href="css/lib/jquery.bxslider.css"/>
<!-- Main stylesheet -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/colors/black.css"/>
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
Everything is according to standards. Please have a look on the code. I don't know why validator is not passing my page.
you can add property="stylesheet" in the link tag
link tags don't need self closes. Remove that and try again.
http://www.w3schools.com/tags/tag_link.asp
I'm trying to use a CDN on Bootstrap to increase performance to my website. However when referencing the CSS directly it works whereas using the CDN doesn't.
How would I go about resolving this- my code is attached bolow. ?
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<html>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Website</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog
</div>
</html>
As others have mentioned, using a CDN is usually as easy as adding:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
into your HTML. But this doesn't work when you are loading your html from a local file.
The reason is the missing protocol. When using a CDN, it's usually a good idea not to specify the protocol, so that your browser will use either http or https depending on the protocol used to get your html in the first place.
This is important because if your server is using https, it is better to have all references using https to avoid browsers (specially IExplorer) complaining about mixing content. On the other hand, using a protocol-less URL for CDN is more cache friendly (http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).
Unfortunately, a protocol-less URL is a bad idea if the protocol is file://. So if you are creating private HTML that will be loaded from your disk, then you should add the protocol and use the CDN like this:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
I hope this will be useful to someone...
Hi Akkatracker I appreciate your question; it helped me. You can use a CDN for Bootstrap. Here is a simple complete html example where you do not have to download bootstrap since you are linking to a public content distributed network of the css & js files.
Simple Bootstrap CDN HTML Example
<html>
<head>
<title>Bootstrap CDN Simple Example</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1> Bootstrap CDN Simple Complete HTML Example</h1>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Please note JQuery needs to come before bootstrap.js. The order of our JavaScript libraries is significant.
Hope this helps
follow this fiddle cdn usage http://jsfiddle.net/MgcDU
css
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
html
<div class="container">
<div class="hero-unit">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
<p>
<a class="btn btn-primary btn-large" href="http://twitter.github.com/bootstrap/index.html" target="_blank">
Learn more about Bootstrap
</a>
</p>
</div>
Make your HTML look like this:
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
<li class="active">Home</li>
<li>Blog</li>
<li>Twitter</li>
</ul>
</div>
</div>
<div class="btn">Click Here to Visit my Blog </div>
</body>
</html>
I am new to using Twitter Bootstrap as well as BootstrapCDN. I did some brief experimenting tonight and I made my site look correct, well almost, using the following 'Head'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
<!--script src="js/less-1.3.3.min.js"></script-->
<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-
combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
</script>
<!-- my custom stylesheet -->
<link href="/word/css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">
</head>
So I have replaced the old style sheets with the ones provided at BootstrapCDN.com. I am not sure if it is proper to replace the existing stylesheets, but here goes to experimentation and my result is so so...
This gets everything styled almost right; well maybe its styled totally right. I am still stepping through the DOM tools to see why my modals are non-functional. I suspect my issue with the modals is the JavaScript and the fact the site was just migrated from a local folder.
Using Microsoft Ajax Content Delivery Network as Bootstrap CDN:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Demo</h1>
</div>
</body>
</html>