Bootstrap normalize does not seem to remove top and left/right spacing from theme i am developing. Could somebody give hint where is the problem in my code. I have tried several reset css files also without any effects.
Index
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- /GOOGLE FONTS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/flaticon.css">
<!--do not edit-->
<link rel="stylesheet" href="css/style.css">
<!-- do not edit-->
<!-- add override css here-->
<link rel="stylesheet" href="css/mystyle.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Favicons ================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
topbar-content
http://codepen.io/anon/pen/ZGJaVb
As far as I see you have this style
.wrapper {
border: 1px solid white;
}
Try to remove the border style. It should help you.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Start Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Beorx - Creative Agency HTML5 Template" />
<meta name="author" content="ThemeOri">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title of Site -->
<title>Protonix</title>
<!-- Favicons -->
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- fontawesome -->
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Swiper -->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!-- Magnific -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- Nice Select -->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!-- Mean menu -->
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<!-- Flaticon -->
<link rel="stylesheet" href="assets/fonts/flaticon.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/sass/style.css">
<!--#include file="header.shtml"-->
</head>
above is the code of my html plesk panel file I copied data of header.shtml from the same file and then removed that data from source file while keeping those in header.shtml without making any change but issue is the file header.shtml is not getting called any solution for it?
I can't get my CSS to be rendered locally. It was up before and I'm wondering if it is the order in which it appears in the head tag or if I am simply using the wrong path.
I've tried changing the order and different file paths including:
<link rel="stylesheet" href="css/styles.css"> (this one I thought should work but doesn't).
<head>
<meta charset="utf-8">
<title>SoundOff</title>
<!-- Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Favicon -->
<link rel="icon" href="/docs/4.1/assets/img/favicons/favicon.ico">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?
family=Poppins:300,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Montserrat:900|Ubuntu" rel="stylesheet">
<!-- <!All fonts-->
<link href="http://allfont.net/allfont.css?fonts=antonio-bold"
rel="stylesheet" type="text/css">
<!-- CSS -->
<link href="css/styles.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous">
<link rel="canonical"
href="https://getbootstrap.com/docs/4.1/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
</head>
I have the following head section,
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<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>
</head>
and my styles -- from both Bootstrap and my local stylesheet -- don't seem to be loading when I'm trying to test locally in the browsers. This happens in both Google Chrome and Firefox.
However, when I push to my Github Pages repository, the styles are applied and working.
Side note: some of the alignment styles seem to apply but none of the padding, colours etc.
Try to load just your CSS inside the <head> tag:
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
After, go to the final of the <body> tag and paste the other dependencies left:
<body>
...
<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>
</body>
It will improve your system because starting with the CSS, i will not stop reading any script while loading your page.
Edit:
If still not working, try to remove:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Can be a problem with external links instead.
This part of code seems to be the problem:
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
Seemingly the file structure you are using locally differs from the file structure you are using on your remote repo. stylesheets.css is in the root folder in your remote repo, but it is not there in your local environment. Probably your page and stylesheets.css are in the same folder in both occurrences but the difference between the two cases is that they are in root in one case and not in root in the other case.
I am getting 404 error while loading css in webapp.
My html content is like below:
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="ISO-8859-1"> -->
<meta charset="utf-8">
<title>PSL Inter App</title>
<meta name="description" content="PSL Inter app for accounting"/>
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
<!-- Loading Bootstrap -->
<link href="WEB-INF/css/bootstrap/bootstrap.min.css" rel="stylesheet" type='text/css'>
<!-- Loading Flat UI -->
<link href="WEB-INF/css/flat-ui.css" rel="stylesheet" type='text/css'>
<link href="WEB-INF/css/assets/demo.css" rel="stylesheet" type='text/css'>
<!-- <link rel="shortcut icon" href="img/favicon.ico"> -->
</head>
<body>
<div class="col-xs-3">
Please Login!!
<div class="form-group">
<input type="text" value="" placeholder="Username" class="form-control">
</div>
</div>
</body>
</html>
My directory structure is like below:
Can anyone help here?
Thanks!!
You need to find what folder is the root of your app.
I think <link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet" type='text/css'> this can help you.
your css path should be
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" type='text/css'>
<!-- Loading Flat UI -->
<link href="css/flat-ui.css" rel="stylesheet" type='text/css'>
<link href="css/assets/demo.css" rel="stylesheet" type='text/css'>
I moved css folder from WEB-INF to WebContent and included it like below and it WORKED!!
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" type='text/css'>
<!-- Loading Flat UI -->
<link href="css/flat-ui.css" rel="stylesheet" type='text/css'>
<link href="css/assets/demo.css" rel="stylesheet" type='text/css'>
Can any of you spot an error here?? If there is one... I'm going bananas here... CSS page is not linking with html when uploaded to server. And W3 validation says "No Character Encoding Found! Falling back to UTF-8." ???
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text</title>
<meta name="description" content="Another text">
<meta name="author" content="Content Text">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="initial-scale=1" />
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet' type='text/css'><!-- About page Services -->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'> <!-- H1, h2 -->
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'><!-- p -->
<!-- Stylesheets -->
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/grid.css" rel="stylesheet" type="text/css" />
<link href="css/style3.css" rel="stylesheet" type="text/css" />
Do you need
#charset "utf-8";
/* CSS Document */
before starting css files?
<?php include('inc/header.php'); ?>
<div id="index" class="container">
<div class="container">
That ok to do isn't it? this include line is top of the page and above all other content
Your index file is not getting parsed as php. 1) Did you give it a .php extension? 2) Does your server have php installed on it?