Unwanted space before page-header in Bootstrap - html

Just starting with Bootstrap and I am trying to make the page-header align to the top of page with no space between the start of header and web page (just like the black StackOverflow header on this page).
The code for the same is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="css/bootstrap.min.css" ></link>
</head>
<body>
<div class="page-header" style="color:#FFFFFF;background-color:#009688;margin-top:0px">
<h1 style="text-align:center" >Welcome to USICT ATTENDANCE RECORD</h1>
</div>
<div class="container-fluid">
<p style="padding:1em 2em 1sem 2em">The table lists the name of people
studying in USICT along with their attendance in each subject.
</p>
<br/>
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Attendance(in %)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rahul</td>
<td>Tyagi</td>
<td>rahul.1992.tyagi#gmail.com</td>
<td>70</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
However I am getting a space between header and address bar of browser as shown in picture below:
I have tried setting
margin-top:0px;
and
position:absolute;
top:0px;
both don't work.

The h1 has a margin that exceeds the green bar.
Apply the following styles:
<div class="page-header" style="color:#FFFFFF;background-color:#009688;padding:9px 4px;margin-top:0;">
<h1 style="text-align:center;margin-top:10px;">Welcome to USICT ATTENDANCE RECORD</h1>
Working JSFiddle.

I Found out the culprit actually it was the h1 which was causing problems.
Since bootstrap applies default margins to h1,h2,h3 ...etc .
So I had to set both the margin of page-header as well as h1 to zero
which solved the problem.
Thank you for the slight hint about h1 from Xufox

Every heading tag such as h1, h2, h3 etc has its own margin thats why you get a white space.Before style your markup you should initializing some style example: tag , , so that you do get twitter bootstrap's own style.This is good practicing of style from markup.

Why don't you put a container-fluid and then a row and your page-header ?
Like this :
<div class="container-fluid">
<div class="row">
<div class="page-header">blabla</div>
</div>
</div>

Related

bgcolor attribute not working with bootstrap

Hi i am new to bootstrap i am facing a problem here is my code
<!DOCTYPE html>
<head>
<title>Bootstrap Progress Bar</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body bgcolor="red">
<p>Progress Bar</p>
<div class="container">
<div class="progress bg-danger">
<div class="progress-bar bg-success text-center" style="width:77%;">11
</div>
</div>
</div>
</body>
</html>
i am trying to change background colour with
<body bgcolor="red">
but i don't know why this code is not working only working with inline css
style="background-color:red;"
is there any solution?
From https://getbootstrap.com/docs/4.3/getting-started/introduction/
Bootstrap requires the use of the HTML5 doctype
From https://www.w3schools.com/tags/att_body_bgcolor.asp
The bgcolor attribute is not supported in HTML5. Use CSS instead.
So basically if you are using bootstrap, you need to define the background color in css as you are bound to use html5 doctype (which does not support bgcolor attribute of the body tag).
Hope this helps you to understand your situation a bit better.

How not to overlap the header from another file?

I've made a header jsp file to use other pages.
In the header file, there is a nav bar that sticks to the top(using bootstrap)
When I include the header file at another page, navbar is all good
but contents are overlapped by the nav bar.
Below is the code from another page, and I also attached how it looks.
<html>
<%# include file="../include/header.jsp" %>
<head>
<title>Home</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</script>
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
td {
white-space:pre
}
</style>
</head>
<body>
<div class="container">
<br>
<h2>English lines are under here</h2>
<h5>Just click each cell if you want to modify</h5>
<br>
<table id="btable" class="bg-light table table-hover table-condensed">
<thead>
<th class= "text-center" width="6%">No</th>
<th class= "text-center" width="12%">Word</th>
<th class= "text-center" width="44%">Dialogue</th>
<th class= "text-center" width="40%">Practice</th>
</thead>
The picture is being overlapped by navbar

Redesign grid-layout without table-tags

I'm reworking an existing module to make it more adaptive. Below is a general mock-up of the current design. This design is used for multiple things, and the goal is that adding or removing modules should be easy.
Right now, we're using a HTML <table> to achieve the lay-out, using col-span and row-span everywhere, but that becomes very messy, very fast (especially if we want to remove a module, or add another module of a different size).
What would a proper way to work around this, be? I'm not looking after a full solution, I'd rather have a small example that I can extend on.
I tried Bootstrap, but some of the modules have fixed sizes, which messes up the GRID-design of Bootstrap. Float has issues with the vertical stacking, ...
Code snippet of how it's created right now:
<table>
<tbody>
<tr>
<td colspan="4" rowspan="2">module</td>
<td>module</td>
<td colspan="3" rowspan="2">module</td>
</tr>
<tr><td>module</td></tr>
</tbody>
</table>
Customize grid according to your needs
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:black;">.col-sm-6</div>
<div class="col-sm-3" style="background-color:green;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:blue;">.col-sm-3</div>
</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:red;">.col-sm-6</div>
<div class="col-sm-3" style="background-color:pink;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:yellow;">.col-sm-3</div>
</div>
</div>
</body>
</html>

<Head> appears inside the <body>

The following html intepreted wrongly.
Using debug tool of chrome, the <head> appears inside the <body>.
Why is that happening ?
Code:
<!DOCTYPE html>
<html>
<hed>
<meta charset="utf-8"/>
<link href="_css/style.css" rel="stylesheet" />
<title>Position test</title>
</hed>
<body>
<div class="block">
<p>this p inside a div</p>
</div>
<table>
<tr>
<td><p>this p inside td</p></td>
<td></td>
</tr>
</table>
<div class="table">
<p>this p inside a div displayed as a table</p>
</div>
</body>
</html>
Result:
https://zoharch.github.io/position/index.html
Because you have a error in the head tag
<hed> should be <head>
</hed> should be </head>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="_css/style.css" rel="stylesheet" />
<title>Position test</title>
</head>
<body>
<div class="block">
<p>this p inside a div</p>
</div>
<table>
<tr>
<td><p>this p inside td</p></td>
<td></td>
</tr>
</table>
<div class="table">
<p>this p inside a div displayed as a table</p>
</div>
</body>
</html>
Your spelling is not correct for head. you wrote hed.
it will be:
<head></head>
It happens because the <hed> tag (misspelling of <head>) is not recognized, so the browser treats it as starting a hed element of unknown type. Since no such element is allowed in a head element, the browser implies the start of a body element, containing all the rest in the document. Before this, it implies an empty head element.
In most situations, this does not really matter, since the division of an HTML document to head and body elements is syntactical and “philosophical”. The meta, link, and title element work normally in practice, even though the browser treats them as being inside body. But of course you should correct the misspellings of the <head> and </head> tags.
it should be like this just copy paste this head and it will be OK :)
<head>
<meta charset="utf-8">
<link href="_css/style.css" rel="stylesheet">
<title>Position test</title>
</head>

Google font acting up?

So this is my syntax (just a clip)
<link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'>
<div style="background-color:black;width:auto">
<div style="width:1000px; margin:0 auto;">
<table style="width:1000px;">
<td><p align="right"><h1 style="color:white;font-family:Exo"> When strategy meets chance, champions born</h1></p></td>
<tr>
</table>
</div>
</div>
So, nothing should go wrong right?
But here's a funny thing when I block it.
It shows the right text!
WHY?
(And as you can see, not all text is effected)
You set style about:
<link href="//fonts.googleapis.com/css?family=Exo:100italic,100,200italic,200,300italic,300,400italic,400,500italic,500,600italic,600,700italic,700,800italic,800,900italic,900" rel="stylesheet" type="text/css">