Friends, I am working on making a website in which there is an Index.html page, I have defined the title of that page to be for example "Some title here" and a favicon, both of them are getting displayed on localhost but not on server.
I am using Asp.net MVC but the page is basic html i.e. not razor view or anything. The code of tag of that page is
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Some title here</title>
<link rel="shortcut icon" href="../gfiwebsite/img/favicon.png">
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Added
I found that when I hit the temp url of the server that I am using, I am able to see the favicon and title but when I map it to my domain which I have purchased from godaddy, the favicon and title just goes away, any idea why?
Any thoughts?
You can use an url helper to generate the link to the favicon. Assuming that you have placed the file inside img/favicon.png:
<link rel="shortcut icon" href="#Url.Content("~/img/favicon.png")">
The ~ indicates the root of your website.
In asp.net, elements aren't the same as in regular .html files.
Do you have the following syntax at the top of your page?
<%# Page Language="C#" Title="Default Title" %>
If you do, you should try to remove the title attribute and see if it works now. If you don't, try doing it ;) (Been a while since I've worked in classic asp myself)
Do you have <head runat="server">? Because <head> doesn't work.
ASP.NET does not use the same flat html as a regular .html file.
If you really want to work without razor and such, this might be an interesting read:
http://www.asp.net/web-forms/overview/older-versions-getting-started/master-pages/specifying-the-title-meta-tags-and-other-html-headers-in-the-master-page-cs
edit: You said it works on a temporary domain but not on Godaddy? Are you 100% sure that Godaddy doesn't have any strange caching enabled?
I have run into this issue a great many times... Webhosts introducing certain types of caching that nearly always interfere with these things.
Also, open your console, and go to "network". Make sure you leave it open and make sure "disable caching" is checked. Now, refresh the website.
Related
PROBLEM SOLVED BY DELETING ALL THE FILES ON THE SERVER AND UPLOADING AGAIN MY WEBSITE!
Screenshot of the console error
Hi,
my website looks fine when I open it offline on my browser but after having uploaded it on the server when I go to the web address it only shows the text and images without any formatting and CSS.
I don't know what to do to fix this :\ What could be the problem?
If it can be of help here is the current folder structure of my website:
"public_html" >
css, img, js, mail, scss, vendor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="">
<meta name="author" content="">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>website title</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/agency-edit.min.css" rel="stylesheet" type="text/css">
<link href="css/adjustment.css" rel="stylesheet" type="text/css">
</head>
And here some scripts that are at the end of the "body".
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
Thank you
In your case, it can be:
Uncorrect relative location (your css and other files are not found by code, check paths of included files)
Files are not uploaded to server (try to upload them again)
I bet if you put a slash / in front of all of your local paths, things will magically work for you.
Explanation:
vendor/ looks in the current folder for the "vendor" folder.
/vendor/ looks in the root of the site.
../vendor/ looks in the parent of my current folder.
./vendor/ looks "here". (Side note: This is more useful within the server itself when files are referenced by other files in another location for server-side processing.)
I'm currently working on my own website. So i coded some HTML with a style.css . Testing it offline - everything works as expected but when I upload it to my webhoster and get a preview of my website, there is only the raw html visible without anything from the style.css
I already checked the path and overwrote it with the for me correct path (from the root of the webserver) - it changed a little bit but still is far away from the right appearance.
The head of my index.html (The only page I have)
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> test </title>
<link rel="icon" href="img/fav.png" type="image/x-icon">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="ionicons/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- main css -->
<link href="httpdocs/css/style.css" rel="stylesheet">
<!-- modernizr -->
<script src="js/modernizr.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
as well as my path:
https://i.imgur.com/0YNkUrJ.png
The result is a described aboth only some html text but not how it would looks like with style.css
You should use relative paths from the httpdocs.
So change httpdocs/css/style.css to ./css/style.css.
I am pretty new to Grails/ Bootstrap/ HTML and webprogramming in general. I am not an IT-guy but I have to implement a little monitoring website for a research project. I am pretty sure there is a simple solution to my problem - I would really appreciate if someone could help me!
I am using IntelliJ with Grails 3 and I am trying to integrate the SB Admin2 Bootstrap template from Start Bootstrap into my project.
My problem is, that the Website is not displayed as it should. First I tried to follow this tutorial http://grails.asia/how-to-apply-a-commercial-bootstrap-theme-to-your-grails-application/ but it didn't work for me - don't know where I failed. Then I just copied the index.html content into my gsp file. First only the text was shown, then I followed an answer from this post Bootstrap template not getting displayed and added a link to BootstrapCDN - It worked.. but not correctly. Screenshot
Now the head of my layout gsp file looks the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 -Bootstrap Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../vendor/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Hope someone can help me!
Thank you in advance!
edit1: If I use the IntelliJ preview in the html file it works perfect.
First of all, I saw you use relative paths in your links to the javascripts etc.
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
I would prefere to use absolute ones like
<link href="${request.contextPath}/css/sb-admin-2.css" rel="stylesheet">
I use a few Bootstrap-Layouts in different Grails Applications (in one application even the sb-admin). Let me try to explain my way (btw. seems that it's nearly the same as your first link, but another description might help out a bit) ...:
copy the index.html to views->layout->main.gsp
place the e.g. g:layoutBody in apropriate places in the main.gsp page and remove the elements which are not useful for your app.
<div id="page-wrapper">
<g:layoutBody/>
</div>
<!-- /#page-wrapper -->
copy the javascripts, images etc. to the web-app directory and check the references in the main.gsp layout that they refer to the javascripts etc. via
<script src="${request.contextPath}/js/bootstrap.min.js"></script>
after that, your views could look like this:
<%# page import="urlaub.Employee" %>
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<g:set var="entityName" value="${message(code: 'employee.label', default: 'Employee')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
<g:if test="${session.user.admin}">
<div class="row">
<g:link class="btn btn-primary btn-flat" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link>
</div>
</g:if>
<g:render template="/flash_message" bean="${flash}" />
<div class="row">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<hr>
</div>
Grails 3 comes with Asset pipeline plugin to manage static assets, minimize them, etc,...
Check its documentation. In your case you should move your assets to the corresponding asset folder (javascripts, stylesheets, images) into de assets folder.
For example, for including a css placed in assets/stylesheets/bootstrap/bootstrap.min.css you have to include in you gsp the following:
<asset:stylesheet href="bootstrap/bootstrap.min.css"/>
Other example with javascript and assetPath:
<script type="text/javascript" src="${assetPath(src:'register.js')}"></script>
I created web application using CesiumJS.
On computers its working just fine, but on mobile just Reloading (Safari) and Error (Chrome).
I get Mac from my friend I use developer tools and see error on mobile (see picture)
I tried some solutions for this, to disable iFrame sandbox attribute, but wont works again.
The web site is:
This is my web site
Can you give me a solution please?
Thanks
I spent 30 hours working on different version of my Web site.
I tried without bootstrap, with bootstrap, with scripts, allow-scripts, everything.
I found a solution!!!!!!!!!
I put all my and tags in tag in my .html document.
Also I used tags from Hello world.html document.
My header looks like this now:
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Molim te radi</title>
<!-- LBOOT -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="Cesium.js"></script>
<script src="CesiumBootstrap.js"></script>
<script src="knockout-3.4.0.js"></script>
<link rel="stylesheet" href="Widgets/widgets.css">
<link rel="stylesheet" href="CesiumBootstrap.css" type="text/css">
</head>
Just this tags is all you (I) need!
I am encountering strange problem while developing a static website for my customer. Every time when I push my changes to the server on my hosting (through to FTP to usuall public_html folder), my customer needs to delete cache of the browser in order to see new changes that I put there. This also happens on other computers with exception of my own. This is head of all my pages
<!DOCTYPE html>
<html lang="en">
<head>
<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="">
<meta name="author" content="">
<title>STINGPRO s.r.o.</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="css/main.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
So should I forbid caching in meta header like in this question or problem lies somewhere else?
Your server is most likely sending the Cache-Control and Expires headers when serving up the page and telling the browser not to check for the content. If you cannot control the request headers, you can manually force the reload. See this other question for details on turning off caching.