I'm trying to design a website for the first time in bootstrap and I've run into a problem I can't get my head around.
I have 5 pages inside the same directory including the index page.
HTML
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Rules
</li>
<li>
Want to Join?
</li>
</ul>
When I load About and Join from my index page, they load fine but when I try to open the Rules page, it redirects to parked-domain.org.
Similarly, when I am in the Join page and try to open the About or Rules Page, I run into the same problem.
I have all the html files in the directory and I can't understand what's the problem?
Any suggestions?
Similarly skeptical as putvande is about if this is the actual HTML you are using in all of those files so I'd recommend you triple check that but here are some thoughts.
If this is actually what is happening, you may be running into a browser/OS bug, what browser and OS are you testing in?
You may want to try adding in ./ before the links to explicitly say you want it to be a relative URL in the same directory, like
<a href="./rules.html">
I tried to simulate the problem. I don't get any problems in opening any page from anyother page. Please try the following code in all pages. Then try.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WWW- WEB</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Index</li>
<li>About</li>
<li>Rules</li>
<li>Join</li>
</ul>
</div>
</nav>
THIS IS INDEX PAGE..!!
</body>
</html>
If i understand correctly, your rules.html page redirects by itself??
Try directing your URL to the rules.html page by entering: yourdomian.com/rules.html
If it redirects im guessing there is a redirect link in your rules.html page. Hope this helps..
Maybe you want your href link to be relative to your base directory (absolute path)? If you are at www.example.com/folder/thispage.html and your base url is www.example.com/ then a link with a leading forward slash href="/anotherpage.html" will actually point to www.example.com/anotherpage.html
If you do want a relative link, try to make the href link an absolute path href="/folder/anotherpage.html" and see if it works. Perhaps you may want to change the base URL by adding the base tag to your HTML header. See here
Related
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
I just started a simple website on 000webhost. I uploaded the following index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tabs</title>
<meta charset="utf-8">
<meta name="description" content="Bootstrap.">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body style="margin:20px auto">
<div class="container">
<div class="row header" style="text-align:center;color:green">
<ul class="nav nav-tabs">
<li class="active"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
<li><a>Tab 3</a></li>
</ul>
<p><br></p>
</div>
</div>
</body>
Locally, and what I want it to show up as, is the following:
What I want.
And then what is shows up as on webhost, is the following:
Not what I want.
It's not using the CSS/js scripts (bootstrap stuff) I added at the top of the page. Any idea why?
Check the console for errors!
You're viewing your 000webhost page on https (secure), so it's not loading the assets that you're calling hardcoded on http (insecure).
You can either view your site over http to see everything loaded: http://temptry.000webhostapp.com/
Or, more preferably, fix your references to your assets to be https-agnostic (leading with //), or point directly to https. For example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
It's your cache, clear your cache and it will work.
Or you can wait until your computer reads the new changes. It can take up to 24 hours depending on your cache settings.
To clear your cache using Chrome:
Open settings
Search for "cache"
Click "Clear browsing data"
Change the range if it is not working
Click "Clear data"
Good luck.
Demonstrate picture
I have a navigation bar that I want to have in a seperate html file and then use in all my other pages. I feel like it will make the code look neater and more organized. However, I'm having some trouble. I started by trying to fix the home page and this is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="import" href="navigation.html">
</head>
<body>
<br><br>
<div class="zoom pic">
<center> <img src="images/technology.png" alt="portrait"> <center>
</div>
</body>
</html>
This is the navigation bar in a seperate html file, but in the same exact directory as all my other html files.
This is the navigation.html file if it helps anything:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<center> <b>World Congress CS-IT Conferences 2016</center>
<div id="horizontalmenu">
<ul>
<li>Home<br/></li>
<ul> <li>General Information <ul>
<li>About</li>
<li> Conference Fee</li>
<li>Hotel</li> </ul>
<li>Keynote Speakers<br/></li>
<li>Call for Papers<br/></li>
<li>Important Dates<br/></li>
<li>Major Areas<br/></li>
<li>Paper Submission<br/></li>
<li>Login<br/></li>
<li>Registration<br/></li>
<li>Conference Program<br/></li>
<li>Guidelines<br/></li>
<li>Comments<br/></li>
</ul>
</nav></b>
My current issue is that I'm not seeing the navigation bar now in my home page! Any ideas on how tackle this? Any help is greatly appreciated!!!!
PHP helps you do this.
Keep your navigation bar code in navbar.php file and include this file in a page you want the navigation bar. For example if you want to include the navigation bar in index.php file, you can just include it like this.
include_once("navbar.php");
You need a server to run php code. You cannot directly include a HTML file in an other HTML file.
This can be done using jQuery also. here, u write nagivation bars html in navigationBar.html and in whichever page u want to include it in, create an empty element with id #nav and in script replace the contents of it.
$.get("navigationBar.html", function(data){
$("#nav").replaceWith(data);
});
this can also be done using html5 imports tag http://blog.teamtreehouse.com/introduction-html-imports
check this link if u want.
I've made two identical pages, one calls another by clicking a link.
However, my top menubar changes significantly. What could be the reason?
HTML/CSS are absolutely same
<html> <head>
<link rel="stylesheet" href="css/index.css">
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body> <div class="wrapper">
<div id="topmenu" class="navigator">
<ul class="nav">
<li>(logo)</li>
<li>FAQ</li>
<li>ABOUT</li>
<li class="search">
<input type="text" placeholder="Search...">
</li>
<li class="right">Log In/Sign Up</li>
</ul>
</div>
</div>
</body>
</html>
and my CSS I will put to jfiddle not to overload the page.
http://jsfiddle.net/wg54d8az/
I am using same CSS file for both pages.
I've read some guides, however I was not able to fix the problem. HTML validator shown following mistake:
"Line 4, Column 42: Attribute content not allowed on element meta at this point.
"
However, I cant clearly get what the problem is.
Well the difference is that on FAQ page your links inside topmenu don't have font-size:18 like they do on the index page.
The problem is in the meta tag before css link on the FAQ page. Change
<meta content="text/html; charset="utf-8">
to
<meta content="text/html" charset="utf-8" >
and then page will properly load index.css
I guess they way you specify page content now it doesn't recognize UTF-8 as encoding format. That leads to problems with above attribute font-size:18 (notice you only wrote number without measure unit - pixels). Other way to fix your problem is to use:
font-size:18px;
inside your index.css
I’m just trying to insert an html absolute link to my texteditor on Mac and I get this on the browser url:
file:///Users/yasser/Desktop/211Website/Labs/https://delicious.com/jodi.reed/browsers...
and file not found in Firefox or Chrome or Safari. When I delete the path before the http the page opens fine...
The code is below-
<!DOCTYPE html>
<html>
<!-- Lab2 Yasser Abdelhalim -->
<head> <meta charset="UTF-8">
<title> Lab2 Yasser Abdelhalim </title>
</head>
<body>
<h1> Yasser’s Web Development resources </h1> this is description for heading number one
<div>
<h2> Background </h2>
<ul>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
</ul>
<h2> Web programing </h2>
<ul>
</div>
</body>
</html>
I think (without seeing anything else) you just need to add the initial part of your URLs, as your ocmputer is thinking they're local, relative files (in the same directory as the file with this code in).
Try using this code:
<!DOCTYPE html>
<html> <!-- Lab2 Yasser Abdelhalim -->
<head>
<meta charset="UTF-8">
<title>Lab2 Yasser Abdelhalim</title>
</head>
<body>
<h1>Yasser’s Web Development resources</h1> this is description for heading number one
<div>
<h2>Background</h2>
<ul>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
</ul>
</div>
</body>
</html>
Try typing the full address in here, including speech marks (double quotes).. sometimes when copying and pasting URLs it copies the formatted speech marks from some fontstyles.
Apache is the webserver that runs on Linux, it pretty much is a foundation or base of every website around (with some exceptions).
Are you using Windows or Mac? You would be better to be working in a proper web server environment (I can explain)