<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<script src="/assets/js/jquery-2.1.4.min.js"></script>
<script src="/assets/js/bootstrap.min.js" rel="script"></script>
<script src="/assets/js/bootstrap.js"></script>
<link href="/assets/css/style.css" rel="stylesheet" type="text/css"/>
<title>
Title
there is no error , but when i run program , css and script don't run and in view source when i click on link, i get 404 error
Related
I'm trying to inlcude a css file on slim project but the file its not found even the path its correct ,maybe its a routing error??
files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
{% block main %}{% endblock %}
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
{% block scripts %}{% endblock %}
</html>
I could not open your png image, but I assume that your CSS folder file is on the same level as your index.php file so, try
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
...
<link rel="stylesheet" href="css/styles.css">
</head>
<body> ... </body>
</html>
Please let me know if it works.
Don't use relative path. Use absolute path.
<link rel="stylesheet" href="/css/styles.css">
This works when your css folder resides in the root of the public directory.
The button color is not blue when i use the btn-info class, but works fine when i tried in jsfiddle.
<!DOCTYPE html>
<html>
<head>
<title>my app</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
<link rel="stylesheet" type="text/css" href="css/ripples.min.css">
</head>
<body>
<!-- carousel code here -->
Click here
</body>
</html>
screenshot
I think there are conflict between the material-bootstrap and bootstrap stylesheets. Try commenting one ans leave the other one, it should work. And if you do not want that way ,try manually via CSS coding, try the following:
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;}
Did you try :
"background-color:#000;"
for example on .btn-info ?
I think you have some problem with your bootstrap file try using these cdns.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Working fine here
<!DOCTYPE html>
<html>
<head>
<title>my app</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
<link rel="stylesheet" type="text/css" href="css/ripples.min.css">
</head>
<body>
<!-- carousel code here -->
Click here
</body>
</html>
Where am I going wrong please guys, tried a lot of variations from various sources, but to no avail - Here is the code, I hope you can help as going slightly bonkers - thanks in advance guys...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="shortcut icon" href="assets/img/favicon.ico">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.jpg">
<link rel="apple-touch-icon" sizes="72x72" href="assets/img/apple-touch-icon-72x72.jpg">
<link rel="apple-touch-icon" sizes="114x114" href="assets/img/apple-touch-icon-114x114.jpg">
<link rel="stylesheet" type="text/css" href="assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
First: I would try adding an additional forward-slash before your CSS paths, e.g.
<link rel="stylesheet" type="text/css" href="/assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
If that doesn't work, then try testing the absolute paths in place of the relative ones, e.g.
<link rel="stylesheet" type="text/css" href="http://www.daveswebsite.com/assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="http://www.daveswebsite.com/assets/css/style.css" />
If the latter still doesn't work, then there could be a problem with the formatting of your CSS file(s).
My css work fine in main page of my site but im facing a problem in the other page.
inside the views there is a Welcome_message.php inside of it is my css links..
in my views folder i have a folder named templates, inside it there are a header.php, main_nav.php and footer.php
in my controller folder there are 2 php files named Welcome.php which is the default_controller that set inside the routes.php and the staff.php that the css wont work.
i have also a folder inside the views that name staff folder. inside of it i have a staff-body.php
here is my code in controller staff.php
class staff extends CI_Controller {
public function index()
{
$this->load->helper('html');
$this->load->helper('url');
$data['title'] = 'NMSC Online Library';
$this->load->view('welcome_message', $data);
$this->load->view('templates/main_nav');
$this->load->view('templates/header');
$this->load->view('templates/footer');
}
}
in my views/welcome_message.php code
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<title><?php echo $title ?></title>
<meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels" />
<meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/demo.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/icons.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/component.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/my_style.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/table.css"/>
<link rel="stylesheet" type="text/css" href="http://www.w3schools.com/lib/w3.css"/>
</head>
in first run in my mainpage its work will with my css but when i click the button that link in the staff.php in controller, only the text show not the css.
In view create file call header.php. Inside that place
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<title><?php echo $title ?></title>
<meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels" />
<meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/demo.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/icons.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/component.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/my_style.css"/>
<link rel="stylesheet" type="text/css" href="<?php base_url();?>icj/css/table.css"/>
<link rel="stylesheet" type="text/css" href="http://www.w3schools.com/lib/w3.css"/>
</head>
and in controller
$this->load->view('templates/header');
$this->load->view('templates/body');
$this->load->view('templates/footer');
There is an order to be load view.
Head of page
Body of page
Tail of the page
I have the following code in my html5.Master file for my C# ASP.NET pages using Twitter Bootstrap. Still some pages are rendered by IE 9 in Quirks 5.5 mode. Is there anything else that can be done to get them to render correctly and print correctly?
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="bootstrap.css" rel="stylesheet">
<!-- CSS concatenated and minified via ant build script-->
<link href="<%=Page.ResolveUrl("~/css/bootstrap.css?v=2")%>" rel="stylesheet">
<link href="<%=Page.ResolveUrl("~/css/docs.css?v=2")%>" rel="stylesheet">
<link href="<%=Page.ResolveUrl("~/css/prettify.css?v=2")%>" rel="stylesheet">
<link rel="stylesheet" media="print" href="<%=Page.ResolveUrl("~/css/print.css?v=2")%>" />
<script src="js/libs/modernizr-2.0.6.min.js"></script>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script> window.jQuery || document.write("<script src='/scripts/libs/jquery-1.7.1.min.js'>\x3C/script>")</script>
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet">
<![endif]-->
</head>