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
Related
So I have been wracking my brain trying to figure out why my CSS file cannot be read by my Xampp server. I think everything is written correctly and all the references are where they should be but I'm not getting different results.
body {
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ETB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header ">
<a id="logo" href="homepage.html"><img src="media/logotext.png" class="wtv"></a>
<ul id="navigation" class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
The bootstrap link is overriding your css link so just put the css link below the bootstrap and it will work.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
Put the link to your css/theme.css after all other references as shown below (it looks like the property was overridden by Bootstrap css):
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
The problem is, I think, that the <body> is only the space between the open and close <body> tags, which is immediately overlaid by the <nav> bar, so the black is being set, it's just that you cannot see it. To set the whole page background, you can use this:
html
{
background-color: black;
}
See this JSFiddle - the body rule does nothing, but the html rule sets the whole page bar the toolbar.
There are two options here:
When you are deploying, whatever the code you are using to deploy is either changing the path of theme.css, or it's not actually copying it over.
Bootstrap.min.css is overriding your css styles (see answer by alex-bell)
Checking #1... I'm honestly not sure, never used your deployment system. Usually I would just check the files on disk and make sure I can access them. Another choice is wherever you access your .html, try accessing css/theme.css through your browser. It should attempt to download the file. If it doesn't attempt to download the file, this is likely your issue.
Checking #2 is easy. Simply open up the page in any browser (let's use chrome for this example) and open Web Developer tools. Inspect the body element, and you will see how specific styles are being applied or overridden.
Get familiar with the Developer tools in your browser. They are very handy at helping solve these kinds of issues.
Using Chrome as an example hit f12 to bring up the developer tools
Go to the Network Tab and reload the page. Check that your css file is being loaded. I suspect not, as your path is css/themes/theme.css is going to resolve to http:\\yoursite.com\folder-where-the-page-is\themes\theme.css. You more than likely want to use /css/theme.css which will resolve to http:\\yoursite.com\themes\theme.css
Once you have confirmed you have the path correct using the Network Tab, you can use the Elements Tab to inspect the various elements of the page. Here you can see what styles are being applied to an element and where they are coming from.
Finally, and unrelated to the Dev Tools, learn about CSS Specificity
I had the same problem. I just decided to put the CSS code on the same document as my html code. All you need to do is type this:
<style>
body {
background-color:black;
}
</style>
I assume you do, but just incase you do not know each html document can contain multiple <style> tags.
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
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)
I have following code in index.html:
<a data-ajax="false" rel="external" href="../Info/BasicDefinition.pdf"
data-theme="c" data-iconpos="top" data-icon="arrow-d" data-role="button">Structure</a>
But i get 404 error - file not found after click on structure link. What i must change? I want to open .pdf file from browser.
My file structure (MPSR - root folder of my web site)
-MPSR
-----index.html
-Info
-----BasicDefinition.pdf
Linking without Ajax
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
Source: http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html
So, you can remove the rel="external" from your tag and it should work.
I can't post this on jsFiddle, as it wouldn't work, but I've tested here and it worked fine:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>
<a data-ajax="false" href="../info/test.txt" data-iconpos="top" data-icon="arrow-d" data-role="button">Link</a>
</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Folder structure:
\test
\info
\test.txt
\root
\index.html