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>
Related
I'm working on d3.js design.
I'm using the python server to see my design by browser.
the problem is I can't see my design by just open the HTML file .
thank you
the index.html file
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Flag example</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom styling -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>x
<!-- Bootstrap grid setup -->
<div class="container">
<div class="row">
<div id="chart-area"></div>
</div>
</div>
<!-- External JS libraries -->
<script src="js/d3.min.js"></script>
<!-- Custom JS -->
<script src="js/main.js"></script>
</body>
</html>
This is my HTML and the nav is not working.
This is new to me, the only thing I am doing different this time is using Angular. When I click in any nav button the address bar goes like
http://localhost:8018/#/WebDev
insted of
http://localhost:8018/#WebDev
What am I doing wrong here?
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>DevMash</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400|Roboto+Mono" rel="stylesheet">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript" src="js\jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js\angular.min.js"></script>
</head>
<body>
<nav>
<ul>
<li>
WebDev
</li>
<li>
Android
</li>
<li>
Python
</li>
<li>
FAQs
</li>
</ul>
</nav>
<div id="WeDev"><ng-include src="'WebDev.html'"></ng-include></div>
<div id="Android" ng-include="'android.html'"></div>
<div id="Python" ng-include="'python.html'"></div>
<div id="faq" ng-include="'faq.html'"></div>
</body>
</html>
Update: I just want it to work as it does normally in HTML,ie, when tag is clicked, the page should be directed to the target div.
You are supposed to do it in AngularJs Way if you are in an AngularJs environment. if you want to do it in a native way, then remove angularJs from your script.
For more detail, please see https://docs.angularjs.org/api/ng/service/$anchorScroll
I replaced from href="#target" to href="##target". Seems to work.
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! :)
using a windows 7 and just a few days back i downloaded the bootstrap 3.3.1 dist file..... but i don't know how to install it.... i also don't know what to put for my href="???" in the link ....
this code is a mixture of my own writing and some copy/paste of the scripts from the bootstrap site... i'm totally messed up...someone please help......
<!DOCTYPE html>
<html lang="en">
<head>
<title>Edwin's School of Music</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="theme.css" rel="stylesheet">
<link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>C:\Users\user\Desktop\bootstrap-3.3.1-dist\dist\css\bootstrap.min.css
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About</li>
<li>Materials</li>
</ul>
<ul class="pull-right">
<li>Sign Up</li>
<li>Log In</li>
</ul>
</div>
</div>
<div class="jumbotron">
<h2>Welcome to...</h2>
<h1><strong>Edwin's School Of Music</strong></h1>
<h2>Make your DREAMS come true ...</h2>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
This will work & no need to install things
However, this will only work if you have an internet connection as they are being fetched from a server, rather than a local file on your machine.
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.