so i don't think my website is picking up the css as when i make it live, the content is there but the style is not. The background is black when it should be white, the font isnt taking effect & the nav isnt showing either. I have done 2 sites the same way only difference is i have uploaded the site to a HTDOCS folder rather than a public_html as this what the hosting said to do...
this is what it looks like live
but should look like this
HEAD OF INDEX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- PAGE TITLE -->
<title>Peacehaven Golf & Fitness</title>
<!-- MAKE IT RESPONSIVE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO -->
<meta name="description" content=peacehavengolfcourse">
<meta name="author" content="">
<!-- BOOTSTRAP -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- STYLES -->
<link href="css/style.css" rel="stylesheet" media="screen">
<!-- FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
If you're sure that CSS is there, it may be a cache issue. The old assets are cached by your browser and the new assets are not loaded.
To test, load the website in incognito mode, and the browser won't cache/load the cache.
Mac:
Cmd + Shift + N
Windows/Linux:
Ctrl + Shift + N
hi your site is working but can you change this code line 10:
<meta name="description" content=peacehavengolfcourse">
to
<meta name="description" content="peacehavengolfcourse">
and remove line 38 and 40 </li> </ul>
add line 309 <footer>
You have syntax errors...
Related
[UPDATE]
Please not that most of these elements are loaded from the cache so no need to connect to the database which means it's not a database or server delay.
I'm using Laravel in my project and here's the main header code
<!DOCTYPE html>
<html lang="{{ $lang }}" dir="#if($lang == 'ar') rtl #else ltr #endif">
<head>
<meta charset="utf-8">
<meta name="_token" id="main_token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<script src="<?=config("app.public_path")?>js/jquery-2.2.4.min.js"></script>
<script src="<?=config("app.public_path")?>js/bootstrap.3.4.min.js"></script>
<!-- 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="<?=config("app.public_path")?>js/modernizr-2.7.1.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="<?=config("app.public_path")?>bootstrap/css/bootstrap.min.css">
#if($lang == 'ar') <link rel="stylesheet" href="<?=config("app.public_path")?>css/bootstrap-rtl.css"> #endif
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" type="text/css" href="<?=config("app.public_path")?>css/style_{{$lang}}.css">
And the config public path
'public_path' => 'http://www.example.com/public/',
The elements load in wrong places with wrong sizes then in seconds the stylesheet loads and elements get positiined correctly and resized too which makes the page look ugly at the beginning and I'm talking about css not javascript or jQuery. Why does this happen and how to solve it?
You should be using the asset function instead of PHP shorthand echo tags and config paths.
For example, instead of this:
<?=config("app.public_path")?>js/jquery-2.2.4.min.js
You are supposed to do this:
{{ asset('js/jquery-2.2.4.min.js') }}
Also, consider using defer for your scripts e.g.:
<script src="{{ asset('js/jquery-2.2.4.min.js') }}" defer></script>
I want to make login page using bootstrap and react. I use the following style from official page. I added these all bootstrap and css files in index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="all.css" rel="stylesheet">
<link href="autorization.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="bootstrap.bundle.min.js"></script>
<script src="jquery.min.js"></script>
</html>
But result is another than when I open throug a regular html page. The font is different.
This is how it should be:
And this is what I have:
I don't understand why, because I didn't change css files...
This could be the issue with index.js file. There you remove importing index.css line.
Remove this line in index.js file.
import './index.css';
You maybe load another CSS file after bootstrap rewrites CSS style rules from BS or bootstrap CSS file is not loaded, please check it in the console or in the browser which style from which file is applied like a first
You can dominate with important;
example:
font-family: 'Lilita One'!important;
A couple weeks ago I noticed that the favicon stopped loading for my website: http://makingspidersense.com/Schubert/
I haven't changed the code for that section and the png file still exists on the server. It appears that all the tags are properly closed. This code used to work and still works just fine for my other websites. So what caused it to stop loading and how do I fix it?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/schubert.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<meta name="description" content="The official website for Schubert's Hartford Theatre in Hartford, WI. Purchase your tickets online, find showtimes, movie trailers, shows that are coming soon, discount prices and more!" />
<meta name="keywords" content="Schubert, Theatres, Cinemas, tickets, showtimes, movies, Hartford, WI" />
<meta property="fb:admins" content="ben.moran.28" />
<meta name="viewport" content="width=1075px"/>
<title>Schubert's Hartford Theatre in WI - Purchase tickets, find showtimes and movie info</title>
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="scripts/coin-slider.js"></script>
<link rel="icon" type="image/png" href="img/favicon.png">
</head>
When I go to your website I get this as your head:
<head>
<title>Schubert Theatres </title>
</head>
I have not worked with frameset before, and it seems that the rest of your website is shown via a frameset of some type, but I would suggest trying to put the icon in the actual head of your page. That could help.
I am using semantic ui, and the html works fine on my pc. When I upload it and run my site from the internet, it looks like the normal html is working, but sematic specific functionality is missing. Is it not getting the semantic .css or something? I'm a bit new to this, so if you could help me debug I would be be grateful.
I am using Semantic version 1.8.1.
My html is located relative to all the source files in the same way as the examples which come with the release in the /examples directory. So I access the file relatively such as "../dist/semantic.css"
Here is the head section of the default.htm main html page.
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Spin Boogie</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="kitchensink.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<!-- Used with Tab History !-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.min.js"></script>
<script src="../dist/semantic.js"></script>
</head>
I have a j2ee application I'm building and deploying to gae, and for some reason, when there is a trailing slash at the end of my url, the CSS does not load.
For example:
mysite.com/account works perfectly
but
mysite.com/account/ loads the page without the CSS
Any idea what I can do to fix this?
CSS Stylesheets:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="/css/rrstyles.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/grayscale.css" rel="stylesheet">
<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" 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]-->
<title>My app</title>
</head>
I am including this header as a separate jsp, but it works when I go to /account but not /account/ for some reason. I don't understand how that could be.
Most of your CSS links have relative URLs. This means they will be interpreted relative to the directory of the URL of the calling page. When the caller URL is mysite.com/account, the URL css/grayscale.css is interpreted as mysite.com/css/grayscale.css. But when the caller URL is mysite.com/account/, the CSS URL is treated as mysite.com/account/css/grayscale.css.
The simplest solution is to use absolute paths in your URLs:
<link href="/css/grayscale.css" rel="stylesheet">
it will work 100%
step 1
<mvc:resources location="/WEB-INF/assets/" mapping="/resources/**"></mvc:resources>
setp 2
<spring:url var="css" value="/resources/css/"/>
<spring:url var="js" value="/resources/js/"/>
<spring:url var="image" value="/resources/image/"/>
add a slash after value
step 3
add your style sheet like this
<link rel="stylesheet"
href="${css}/common/bootstrap.min.css">