I'm learning NodeJS, and I'm having trouble loading the CSS. It loads with live server, but not found with localhost.
Also doesn't load the JS file. I need to do the script in the html with tag.
HTML:
<!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" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Raleway:400,500,500i,700,800i"
rel="stylesheet"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>My House Rent</title>
</head>
<body>
...
<h1>Index</h1>
<script>
$(document).ready(function () {
$(".navbar-light .dmenu").hover(
function () {
$(this).find(".sm-menu").first().stop(true, true).slideDown(150);
},
function () {
$(this).find(".sm-menu").first().stop(true, true).slideUp(105);
}
);
});
</script>
<!-- <script src="./javascript.js"></script> -->
</body>
</html>
Print:
Explorer:
Related
I'm tring to add a custom style sheet to one of my page without affecting the others
I have tried this bu it seems to be the wrong way since it's not working
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - RAZCA</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/RAZCA.styles.css" asp-append-version="true" />
#*<link rel="stylesheet" href="~/css/mytyleSheet.css"/>*#
<asp:contentPlaceholder id="head" runat="server" />
</head>
<asp:content contentplaceholderid="head" runat="server">
<link rel="stylesheet" href="~/css/mytyleSheet.css" />
</asp:content>
<div>
<h1>This is services page</h1>
</div>
abp.io landing page of blazor page loading and loading.
There is no error shown in the blazor application. HttpApi.Host projects work just fine. I have already upgraded Visual Studio 2022 Version 17.2.0 Preview 4.0. I have run the tutorial project without any problem.
Here's my index.html page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ListTrader</title>
<base href="/" />
<!--ABP:Styles-->
<link href="global.css?_v=637843235595560988" rel="stylesheet" />
<link href="_content/Volo.Abp.AspNetCore.Components.Web.LeptonTheme/styles/lepton6.css" rel="stylesheet" id=LeptonStyle />
<link href="main.css" rel="stylesheet" />
<!--/ABP:Styles-->
<link href="DecisionTree.ListTrader.Blazor.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
</head>
<body class="abp-application-layout">
<div id="ApplicationContainer">
<div class="loader">
<div id="cover-spin"></div>
</div>
</div>
<!--ABP:Scripts-->
<script src="global.js?_v=637843235597089265"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<!--/ABP:Scripts-->
</body>
</html>
Here's my logfile from HttpApi.Host projects.
It was the radzen script error. We remove it, and it works fine.
In my asp.net mvc web application I have a razor layout page with a partial view #Html.Partial("_HorizontalNavbar") in it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="#Url.Content("~/Content/kendo/2020.2.513/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/angular.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>
<body class="k-content">
#Html.Partial("_HorizontalNavbar")
<main>
<div class="container">
#RenderSection("featured", required: false)
#RenderBody()
</div>
</main>
</body>
</html>
For the partial view I do not need all the css that is referenced in the layout page; actually it interferes with the css that is inside the partial view.
Is there a way to setup a partial view so that it is not affected by the css of the layout page?
Any help will be gratefully appreciated.
My CSS doesn't work anymore since I'm using angular4.
Currently building the base template of the app, I've somes difficulties with the CSS which is not applying correctly on DIVS because of the generated Component DOM element of Angular.
This is what I want (1)
<div class="page-container ">
<div class="page-content-wrapper">
<div class="content">
Content here
</div>
<div class="container-fluid container-fixed-lg footer">
Footer here
</div>
</div>
</div>
This is what I have (2)
<div class="page-container ">
<div class="page-content-wrapper">
<div class="content">
<router-outlet>
Content here
</router-outlet>
</div>
<ae-footer-composant>
<div class="container-fluid container-fixed-lg footer">
Footer here
</div>
</ae-footer-composant>
</div>
</div>
This is my index.html
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta charset="utf-8" />
<title>Pages - Admin Dashboard UI Kit - Blank Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<link rel="apple-touch-icon" href="pages/ico/60.png">
<link rel="apple-touch-icon" sizes="76x76" href="pages/ico/76.png">
<link rel="apple-touch-icon" sizes="120x120" href="pages/ico/120.png">
<link rel="apple-touch-icon" sizes="152x152" href="pages/ico/152.png">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta content="" name="description" />
<meta content="" name="author" />
<base href="/">
<!--[if lte IE 9]>
<link href="assets/plugins/codrops-dialogFx/dialog.ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!-- jQuery -->
<script type="text/javascript" src="/assets/plugins/jquery/jquery-1.11.1.min.js" ></script>
</head>
<body class="fixed-header">
<app-root></app-root>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="/assets/plugins/pace/pace-theme-flash.css" />
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrapv3/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/assets/plugins/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/assets/plugins/jquery-scrollbar/jquery.scrollbar.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/select2/css/select2.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/assets/plugins/switchery/css/switchery.min.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/assets/pages/css/pages-icons.css">
<link rel="stylesheet" type="text/css" href="/assets/pages/css/pages.css" class="main-stylesheet"/>
<!--<link rel="stylesheet" type="text/css" href="/assets/pages/condensed/css/pages.css" class="main-stylesheet"/>-->
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-tag/bootstrap-tagsinput.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/dropzone/css/dropzone.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-datepicker/css/datepicker3.css" media="screen">
<link rel="stylesheet" type="text/css" href="/assets/plugins/summernote/css/summernote.css" media="screen">
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" media="screen">
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="/assets/plugins/jquery-datatable/media/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/jquery-datatable/extensions/FixedColumns/css/dataTables.fixedColumns.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/datatables-responsive/css/datatables.responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/assets/css/style.css"/>
<link rel="stylesheet" type="text/css" href="/assets/elium-style/css/elium.css"/>
<link rel="stylesheet" type="text/css" href="/assets/elium-style/css/pages.css"/>
</body>
</html>
This is my app.component.html
<!-- START PAGE-CONTAINER -->
<div class="page-container ">
<!-- START HEADER -->
<ae-header-composant></ae-header-composant>
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper">
<div class="content">
<router-outlet></router-outlet>
</div>
<ae-footer-composant></ae-footer-composant>
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTAINER -->
<ae-quickview-composant></ae-quickview-composant>
<ae-overlay-composant></ae-overlay-composant>
<ae-css-composant></ae-css-composant>
My CSS works with the (1), but not with the (2) because of the generated DOM of angular...
I already try the following, but still not working ...
import { Component, OnInit, ViewEncapsulation} from '#angular/core';
#Component({
selector: 'ae-sidebar-composant',
templateUrl: './sidebar-composant.component.html',
styleUrls: ['./sidebar-composant.component.css'],
encapsulation: **ViewEncapsulation.None**,
})
export class SidebarComposantComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Does anyone have an idea ?
Thank's
angular uses webpack . You must have a css loader in your webpack.config.js file .
if right, check if you have a src/style.css file in which you can import other styles.
or you can add your css in webpack.config.js as follow :
"styles": [
"./src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css", // if you have setted up ng-bootstrap ...
]
Can anyone help me please? There is some white space between top of my page and div container and I have no clue why: http://iwokolasinski.com/wtfq/
#optimus203 I can see that my HTML is messed up when look at it in browser. But this is my header.php file, it seems to be ok. I'm quite a newbie and I'm trying to create wordpress + bootstrap theme. I have no idea what am I doing wrong... :(
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php wp_title('|',1,'right'); ?> <?php bloginfo('name'); ?></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Styles -->
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lobster|Khula&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
<body>
<div class="container-fluid kol">
That is the default settings of current browsers.
You can override this by setting your CSS like this:
html, body {
margin: 0;
padding: 0;
}
Your HTML is all messed up. You had your head content in the body tag, and other issues.
<html lang="en">
<head>
<meta charset="utf-8">
<title> WTF Design</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Styles -->
<link href="http://iwokolasinski.com/wtfq/wp-content/themes/mywtftheme/style.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lobster|Khula&subset=latin,latin-ext,cyrillic" rel="stylesheet" type="text/css">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="WTF Design » główna Kanał z komentarzami" href="http://iwokolasinski.com/wtfq/?feed=rss2&page_id=5">
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-includes/js/jquery/jquery.js?ver=1.11.1"></script>
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-content/themes/mywtftheme/bootstrap/js/bootstrap.js?ver=4.1.1"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://iwokolasinski.com/wtfq/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://iwokolasinski.com/wtfq/wp-includes/wlwmanifest.xml">
<meta name="generator" content="WordPress 4.1.1">
<link rel="canonical" href="http://iwokolasinski.com/wtfq/">
<link rel="shortlink" href="http://iwokolasinski.com/wtfq/">
</head>
<body>
<div class="container-fluid kol"> <h1>główna</h1>
<h1 style="text-align: center;">Heading 1</h1>
<h2 style="text-align: center;">Heading 2</h2>
<h3 style="text-align: center;">Content</h3>
<p style="text-align: center;">Paragraph</p>
<footer>
<p>footer</p>
</footer>
</div> <!-- /container -->
</body>
</html>
I added this to the end of your <head> section and it worked:
<style>
body {
margin-top:-25px;
}
</style>