Does anyone know, why when I try previewing my site, it doesn't show anything? Something wrong with my code?
When I check the source code, it won't tell me accurately enough what the problem is?
<head>
<title>My Coursera Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" />
</head>
<body>
Home
About
Contact
<hr>
<div class="container">
<h1 id="title" onclick="alert('Hello');">This is a heading or title</h1>
<div="row">
<div class="col-md-6 thin_border">
some content for panel 1
</div>
<div class="col-md-6 thin_border">
some content for panel 2
</div>
</div>
</div>
</body>
Try to close explicitly the script tag
<script src="script.js" />
Should be
<script src="script.js" ></script>
If you need more explanations you can check this question.
You are missing the <HTML> and the <!DOCTYPE> tags. Your code code should be like this:
<!DOCTYPE html>
<html>
<head>
<title>My Coursera Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" />
</head>
<body>
Home
About
Contact
<hr>
<div class="container">
<h1 id="title" onclick="alert('Hello');">This is a heading or title</h1>
<div class="row">
<div class="col-md-6 thin_border">
some content for panel 1
</div>
<div class="col-md-6 thin_border">
some content for panel 2
</div>
</div>
</div>
</body>
</html>
Note that you also have a wrong div tag <div="row">, which I'm assuming might be the div class property that's why I set it as class attribute on the above example.
It is also recommended to add the type attribute and explicit closing tag on the JavacScript import, like this:
<script type="text/javascript" src="script.js"></script>
Related
So I'm building a website with Bootstrap and I also have a local CSS stylesheet I'm using for specific cases. It has worked alright so far, but for some reason, new classes I'm adding won't work. I've tried a number of things already and nothing gives. The class is not even showing up in the inspector (see picture).
What I've tried:
Clearing cache
Trying to be more specific than Bootstrap
Adding type text/css and media all
Here's the basic CSS:
p.description {
color: red;
}
And here is a snippet of the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../public/css/auto-complete.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../public/css/style.css?rnd=28" media="all" />
<link rel="stylesheet" type="text/css" href="../public/css/all.css" media="all" />
</head>
<body class="bg-light">
<div class="container">
<main>
<div class="row g-5">
<div class="col-md-8 col-lg-12">
<form class="needs-validation" action="dbcmds/ajout-outil.php" method="post" enctype="multipart/form-data" name="activity" autocomplete="off">
<div class="row g-3">
<div class="col-sm-6">
<p class="description">Description</p>
</div>
</div>
</form>
</div>
All suggestions welcome! I could inline the CSS but I'd rather do it properly... and understand what's going on!
Many thanks!
Edit------
Here's the structure of the project. The current page is in the admin directory.
Go straight for the route method:
<link rel="stylesheet" href="/public/css/auto-complete.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/public/css/style.css?rnd=28"/>
<link rel="stylesheet" type="text/css" href="/public/css/all.css"/>
Also, I have never seen the media="all" used before, try without.
The CSS file is not able to take effect in the HTML files. What could be the reason if I ask please?
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\gadhavi\Desktop\Header\header.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<div class="header">
</div>
<div class="inner_header">
<div class="logo_container">
<h1>MY<span>APP</span></h1>
</div>
</div>
<ul class="navigation">
<a><li>Home</li></a>
<a><li>About</li></a>
<a><li>Portfolio</li></a>
<a><li>Contact</li></a>
</ul>
</div>
</body>
</html>
Am I making mistake to include CSS file?
The issue is in the path where your css is being called from.
Replace this
<link rel="stylesheet" type="text/css" href="C:\Users\gadhavi\code\hussain\src\header.css">
with
<link rel="stylesheet" type="text/css" href="header.css">
How do i center a h1 in a div.This is the picture of my project and i want to center "about me" with hover effect to center it with header, to be right beneath that green line.
this
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My Portfolio</title>
</head>
<body>
<div id="header">
<header>Mr. Philip Braun</header>
<img src="img/greeny.png">
<h1 class="hvr-float-shadow">About Me</h1>
<br>
<p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
</div>
<br><br>
<img class="braun" src="img/braun3.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My Portfolio</title>
</head>
<body>
<div id="header">
<header>Mr. Philip Braun</header>
<img src="img/greeny.png">
<h1 class="hvr-float-shadow" style="text-align:center">About Me</h1>
<br>
<p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
</div>
<br><br>
<img class="braun" src="img/braun3.jpg">
</body>
</html>
Using CSS, you can apply the text-align property to set the element to center through the inline method within the snippet I have provided or, through internal or external styling referring to either the class or element.
h1{
text-align:center;
}
h1{
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My Portfolio</title>
</head>
<body>
<div id="header">
<header>Mr. Philip Braun</header>
<img src="img/greeny.png">
<h1 class="hvr-float-shadow">About Me</h1>
<br>
<p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
</div>
<br><br>
<img class="braun" src="img/braun3.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My Portfolio</title>
</head>
<body>
<div id="header">
<header>Mr. Philip Braun</header>
<img src="img/greeny.png">
<center>
<h1 class="hvr-float-shadow">About Me</h1>
</center>
<br>
<p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
</div>
<br><br>
<img class="braun" src="img/braun3.jpg">
</body>
</html>
This is the easiest way out to center the text.
I am building a huge one-page site, so I wanted to keep my code clean. I decided to part it into several HTML files and include them in one main index.html. So I wrote a snippet of code in index.html and everything worked fine. However, as I tried to include this snippet from another file, my web page did not appear properly.
Here is the snippet I wrote:
<div class="hidden-sm hidden-xs" id="containerStart">
<div id="left" class="start">
<img src="../pics/svg/Logo%20links.svg" class="logoStart hidden img-responsive" id="logoLeft">
</div>
<div id="right" class="start">
<img src="../pics/svg/Logo%20rechts.svg" class="logoStart hidden img-responsive" id="logoRight">
</div>
<div id="captions">
<h3 class="hidden" id="mivalStart">Mival</h3>
<h5 class="hidden" id="mivalMotto">Innovative Vertriebskonzepte</h5>
</div>
</div>
Here is my index.html:
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!--Start animation css-->
<link rel="stylesheet" href="../css/start.css">
<link rel="stylesheet" href="../css/letterFx.css">
<title>Mival</title>
</head>
<body ng-app>
<!--Intro-->
<div ng-include src="'intro.html'"></div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-letterfx.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/start.js"></script>
</body>
</html>
Maybe you know any solutions for my problem?
I just want to ask how can I disable responsiveness of Bootstrap. I currently followed the instructions in the tutorial but I can't make my page non-responsive.
What I did in my code is:
1. I removed the viewport in meta tag
2. Set a width in the class .container
When I resized my windows the 3 columns are became responsive.
Here's my sample fiddle
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chuosenko</title>
<link rel="stylesheet" type="text/css" href="./third_party/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="./third_party/bootstrap/dist/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="./third_party/jqueryui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./third_party/jqueryui/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./third_party/jqueryui/external/jquery/jquery.js"></script>
<script type="text/javascript" src="./third_party/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="./third_party/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="./js/packery.pkgd.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-4">
<h1>COL 1</h1>
</div>
<div class="col-md-4">
<h1>COL 2</h1>
</div>
<div class="col-md-4">
<h1>COL 3</h1>
</div>
</div>
</body>
</html>
Here's my css:
.container {
width: 1280px;
max-width: none !important;
}
Can you help me with this?
use col-xs-* class for grid. Like suggested in the tutorials.