I am having trouble while putting a table border around each box in the table, its just showing the table without the borders.
I want it to show the table with the borders.
I have tried using the css for table borders in w3schools and it doesn't seem to work, I also added an !important tag to it and it still seemed to not work...
html:
<!DOCTYPE html>
<?php
$database = "seriousdiseases";
$database = new mysqli('localhost', 'root', '', $database) or die ("Unable to connect to the
DB");
?>
<html>
<head>
<title>Ribose-5-phosphate isomerase deficiency</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container2">
<div id="header">
<h1>Ribose-5-phosphate isomerase deficiency</h1>
</div>
<div id="content">
<div id="nav">
<h3>Navigation</h3>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Video</li>
<li>Serious Diseases</li>
<li>Update Diseases</li>
<img src="F1large.jpg" alt="Navigation Picture." style="height:500px;">
</ul>
</div>
<div id="main">
<table>
<tr>
<th>Id</th>
<th>Disease</th>
<th>Symptoms</th>
</tr>
<?php
$result = mysqli_query($database, "select * from feature") or die
("Unable to connect to the DB");
while ($row = mysqli_fetch_array($result)){
print("<tr><td>" . $row[0] . "</td><td>" . $row[1] . "</td><td>"
. $row[2] . "</td></tr>");
}
$database->close();
?>
</table>
</div>
</div>
</div>
<div id="footer">
Copyright © 2020 CLINIC SCOPE
</div>
</body>
</html>
css:
html, body {
height: 100%;
}
body {
background-color: #EEE;
font-family: Helvetica, Arial, sans-serif;
background-image: url (logo.png);
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
display: flex;
flex-direction: column;
}
table, th, td{
border: 1px solid black !important;
}
h1, h2, h3 {
margin: 0;
}
a {
text-decoration: none;
color: blue;
}
#container {
background-color: white;
margin-left: 0px;
margin-right: 0px;
position: relative;
min-height: 97.7vh;
}
#container2 {
background-color: white;
margin-left: 0px;
margin-right: 0px;
position: relative;
}
#header {
background-color: blue;
color: white;
text-align: center;
padding: 10px;
}
#content {
padding:10px;
margin-right:0px;
}
#nav ul {
list-style-type: none;
}
#nav .selected {
font-family: bold;
}
#nav {
width: 18%;
float: left;
}
#main {
width: 60%;
float: right;
}
#footer {
color: white;
background-color: black;
width: 100%;
text-align: center;
position: relative;
bottom: 0;
}
Try to add this attribute in your table tag <table border = "4">
Related
I need help displaying my footer at the bottom of a page that requires scrolling. The code used only works on pages that don't require scrolling. Currently the footer displays on the middle of the page. It is supposed to show at the bottom of the page. I have tried doing what websites tell me to do. Websites including:
https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
https://css-tricks.com/couple-takes-sticky-footer/#there-is-flexbox
However both websites don't work....
Cheers
Justin
This is my CSS code.
html, body {
height: 100%;
}
body {
background-color: #EEE;
font-family: Helvetica, Arial, sans-serif;
background-image: url (logo.png);
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
display: flex;
flex-direction: column;
}
h1, h2, h3 {
margin: 0;
}
a {
text-decoration: none;
color: blue;
}
#container {
background-color: white;
margin-left: auto;
margin-right: auto;
position: relative;
min-height: 100vh;
}
#header {
background-color: blue;
color: white;
text-align: center;
padding: 10px;
}
#content {
padding-top: 10px;
padding-left: 10px;
padding-right:10px;
padding-bottom: 2.5rem;
margin-right:0px;
min-height: 100vh;
}
#nav ul {
list-style-type: none;
}
#nav .selected {
font-family: bold;
}
#nav {
width: 18%;
float: left;
}
#main {
width: 60%;
float: right;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
color:white;
background-color:black;
}
Below is my HTML code.
<!DOCTYPE html>
<?php
$database = "seriousdiseases";
$database = new mysqli('localhost', 'root', '', $database) or die ("Unable to connect to the
DB");
?>
<html>
<head>
<title>Ribose-5-phosphate isomerase deficiency</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<div id="header">
<h1>Ribose-5-phosphate isomerase deficiency</h1>
</div>
<div class="content">
<div id="nav">
<h3>Navigation</h3>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Video</li>
<li>Serious Diseases</li>
</ul>
</div>
<div id="main">
<table>
<tr>
<th>Disease</th>
<th>Symptoms</th>
</tr>
<?php
$result = mysqli_query($database, "select disease, symptom from
feature") or die ("Unable to connect to the DB");
while ($row = mysqli_fetch_array($result)){
print("<tr><td>" . $row[0] . "</td><td>" . $row[1] . "</td>
</tr>");
}
$database->close();
?>
</table>
</div>
</div>
<footer class="footer">
Copyright © 2020 CLINIC SCOPE
</footer>
</div>
</body>
</html>
footer should not be in the container. If you take it out of there, your problem will be resolved. I recommend using it for other tags. (Header, nav etc.)
I'm building a website for my DofE expedition but am having some trouble making things work properly. The text that is currently floating on the right of the main container should be sat next to the navigation section but ma attempts to make it do so have been thus far unsuccessful. Any ideas on this?
If it helps, i'd like it to look something like this : W3schools CSS Help Code
#charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
body {
background-color: #EEE;
}
#header {
background-color: #66CCFF;
margin: auto;
text-align:center;
font-family: Helvetica;
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: Helvetica;
}
.main {
font-family: Helvetica;
width: 70%;
margin-left: auto;
float: right;
background-color:#f2f2f2;
clear: left;
display: inline;
/*margin: 1px;*/
}
#main2 {
width: 799px;
font-family: Helvetica;
width: 50%;
display: inline;
background-color:#f2f2f2;
/*margin: 1px;*/
}
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
}
#nav li a:hover {
color: red;
}
#nav li {
text-decoration: none;
display: block;
padding: 5px;
margin: 5px;
margin-left: 0px;
background-color: #dddddd;
width: 25%;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
fl
}
#content {
padding:10px;
}
#footer{
clear: both;
color: white;
background-color: grey;
text-align: right;
padding: 0.5px;
}
#footer-margin{
margin: 5px;
}
img {
/*margin-left: auto;
margin-right: auto;*/
text-align:center;
border-style: solid;
border-width: 1px;
border-color: black;
clear: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DofE:Expedition Aim</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "container"><!--start container-->
<div id = "header">
<h1>DofE Expedition Aim</h1>
</div>
<div id = "content">
<div id = "nav"><!-- start nav tag -->
<ul>
<li>Home</li>
<li>Our Aim</li>
<li>How we acheived it</li>
<li>Extra info (tbd)</li>
</ul>
</div><!-- nav close tag -->
<div class = "clearfix">
<div class = "main">
<p>This page shows what happened on out DofE expedition and the things that we did when not on expedition.</p>
<p>This includes doing map work, fitness and orginising and running events localy.</p>
<p>On the following pages, you can find the various evidence to show you what we did and how it benefited us. (or didn't)</p>
</div><!-- "main" end tag -->
<!--<div id = "main2">
<p>This is a test of a second column that should float to the right of the other.</p>
</div>-->
</div>
<!-- <div id = "img.1">
<img src="logo.jpg" alt="DofE Logo goes here" height="100" width="73">
</div>-->
</div>
<div id = "footer">
<div id = "footer-margin">
<p>Copyright © Dom Brown 2017</p>
</div>
</div>
</div>
</body>
</html>
You'll need to play with the padding and such, but this will get the nav and main content side by side. Basically you had your clearfix container wrapping around just the nav, which was full width. Also I applied float: left; to both nav and main.
#charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
body {
background-color: #EEE;
}
#header {
background-color: #66CCFF;
margin: auto;
text-align:center;
font-family: Helvetica;
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: Helvetica;
}
.main {
font-family: Helvetica;
width: 70%;
margin-left: auto;
float: left;
background-color:#f2f2f2;
display: inline;
/*margin: 1px;*/
}
#main2 {
width: 799px;
font-family: Helvetica;
width: 50%;
display: inline;
background-color:#f2f2f2;
/*margin: 1px;*/
}
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
width: 25%;
float: left;
}
#nav li a:hover {
color: red;
}
#nav li {
text-decoration: none;
display: block;
padding: 5px;
margin: 5px;
margin-left: 0px;
background-color: #dddddd;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#content {
padding:10px;
}
#footer{
clear: both;
color: white;
background-color: grey;
text-align: right;
padding: 0.5px;
}
#footer-margin{
margin: 5px;
}
img {
/*margin-left: auto;
margin-right: auto;*/
text-align:center;
border-style: solid;
border-width: 1px;
border-color: black;
clear: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DofE:Expedition Aim</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "container"><!--start container-->
<div id = "header">
<h1>DofE Expedition Aim</h1>
</div>
<div id = "content" class="clearfix">
<div id = "nav"><!-- start nav tag -->
<ul>
<li>Home</li>
<li>Our Aim</li>
<li>How we acheived it</li>
<li>Extra info (tbd)</li>
</ul>
</div><!-- nav close tag -->
<div class = "main">
<p>This page shows what happened on out DofE expedition and the things that we did when not on expedition.</p>
<p>This includes doing map work, fitness and orginising and running events localy.</p>
<p>On the following pages, you can find the various evidence to show you what we did and how it benefited us. (or didn't)</p>
</div><!-- "main" end tag -->
<!--<div id = "main2">
<p>This is a test of a second column that should float to the right of the other.</p>
</div>-->
<!-- <div id = "img.1">
<img src="logo.jpg" alt="DofE Logo goes here" height="100" width="73">
</div>-->
</div>
<div id = "footer">
<div id = "footer-margin">
<p>Copyright © Dom Brown 2017</p>
</div>
</div>
</div>
</body>
</html>
Set your css like this
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
position: absolute;
width: 100%;
}
My CSS style sheet header is not working. It works best in internal stylesheet or embedded stylesheet, but did not work when its code in external stylesheet. Only the header class did not wok but other code working best.
.header1{
background-color: brown ;
padding: 20px;
background-image: url("pics/saqib.png");
}
#pic{
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float:left;
background-color: #333;
border-top-left-radius: 35%;
border-top-right-radius: 35%;
margin-left:2px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: green;
}
.navbar{
padding: 20px;
margin-top: 150px;
}
/* End nav bar */
.skin{
background-color: lightblue;
}
.table {
margin-top: 0px;
width: 100%;
}
.table .sidebar{
border-right: 2px solid black;
width: 20%;
}
.footer{
background-color: blue;
padding: 20px;
padding: 100px;
}
.left{
float: left;
display: block;
width: 40%;
color: gray;
border-right: 2px solid white;
border-color: gray;
padding-right: 70px;
}
.right{
float: right;
display: block;
width: 40%;
color: gray;
}
pre a{
font-family: helvatic, sanshrif;
font-size: 15px;
color: white;
}
pre a:hover{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
<meta charset="UTF-8"/>
</head>
<body>
<header class="header">
<div id="pic"> <img src="pics/saqib.png"/></div>
<div class="navbar">
<ul>
<li>Home</li>
<li>Software</li>
<li>Contact Us</li>
<li>About us</li>
</ul>
</div>
</header>
<div class="skin">
<table class="table">
<tr>
<td class="sidebar">
This is sidebar
</td>
<td style="padding: 50px;">
<h1>My First Website</h1>
<p> A collection of all steps to complete a process in known as Transaction. DBMS should support transaction. It must ensure that all steps in a transaction are executed successfully or none of them is executed. It facility ensures that the database is always in consistent state even if a transaction fails due to some problem such as system crash or power failure etc.</p>
</td>
</tr>
<tr>
<th colspan="2">
<footer class="footer">
<div class="left">
<pre>Home | Software | Contact Us | About us</pre>
</div>
<div class="right">
The most important function of DBMS
is data processing. It includes creation,
storage and arrangements of data in database.
</div>
</footer>
</th>
</tr>
</table>
</div>
<body>
</html>
Your stylesheet defines a .header1 class but your HTML is looking for header. Make those the same.
You can change in either one place to make it work:
In HTML:
<header class="header">
to:
<header class="header1">
or in CSS:
.header1 {
background-color: brown;
padding: 20px;
background-image: url("pics/saqib.png");
}
to:
.header {
background-color: brown;
padding: 20px;
background-image: url("pics/saqib.png");
}
It should be:
.header{
background-color: brown ;
padding: 20px;
background-image: url("pics/saqib.png");
}
So I've managed to figure out how to set the footer at the bottom of the webpage.
However, I am running into problems when I have to scroll down a page, or when I zoom and unzoom. The footer doesnt actually stay at the bottom, and it seems to be just sitting in a fixed position to the size of the web page.
This is my html/php coding for the main webpage:
<html>
<head>
<title> First Html! </title>
<link rel="stylesheet" href="http://bdpastudents.com/~t4645202/2015-2016/%22my%20first%20html%20website%22%20assignment/firsthtml.css">
<?php include("header.php"); ?>
</head>
<body>
<?php include ("navigation.php"); ?>
<p> Welcome to my website! Have a look around! Have fun!<br>
Oh and dont forget... Images are not just images.</p>
<br>
<br>
<center>
<img src="https://lh3.googleusercontent.com/-o27DZE9cGwE/VpE4Thx7gSI/AAAAAAAAAIA/mXv9P9UQ3Ew/w488-h650-no/socer%2Bpic.jpeg" height="300" width="200">
</center>
</body>
</html>
<?php include ("footer.php"); ?>`
This is my footer coding:
<div id="footer">
<meta http-equiv="refresh" content="none">
<title> First Html! </title>
<link rel="stylesheet" href="http://bdpastudents.com/~t4645202/2015-2016/%22my%20first%20html%20website%22%20assignment/firsthtml.css">
<?php
// Prints the day, date, month, year, time, AM or PM
echo date("d/m/Y h:i A") ;
echo " Craed!." ;
?>
</div>
And this is my css:
body {
height:100%;
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-color: #a2a2a2;
}
p {
text-align:center;
color: white;
font-size: 150%;
}
ul {
color: white;
font-size:150%;
}
#fade {
display: none;
}
#head {
background-color: #65659a;
color: white;
text-align: center;
padding: 5px;
}
#footer {
height:50px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #65659a;
text-align: center;
color: white;
}
#nav {
position: absolute;
line-height:30px;
background-color: #000000;
height:85%;
width:120px;
padding:5px;
}
#nav ul {
margin: 0;
padding: 10px;
color: white;
font-size:125%;
}
#nav ul li {
list-style: none;
padding: 10px;
font-size: 93%;
What am I doing wrong? Is there something that I am missing?
Sorry for the long post, im pretty new to this.
Thanks!
I tried to clean the code a little bit, because it was so messy. I haven´t checked the CSS code so I don´t really know if there´s something wrong with it. Just fixed the HTML. I properly added the <head> section and fixed the problem with the markup for the <footer>
Check out this JSFiddle
Regards!
PS: Also I would suggest studying more about HTML. You can learn a lot here.
Okay here is a shot at it
Create a big container with an id called 'parent'. This div will occupy your whole screen
Make the main container a flexbox
create two flex boxes items in the flexbox
The first div flexbox will have an id 'main' and will hold are your main contents
The second div will have an id called 'footer_container' and will hold all the contents of your footer
This is the css styling for the flexbox with id 'parent' and its children
.parent {
display: flex;
min-height: 95vh; /* Or whatever */
flex-direction:column;
}
.child {
width: 100%;
margin: none;
padding:0px;
}
#footer_container{
flex-grow:0;
height:20%;
margin: auto;
border:solid;
}
#main{
flex-grow:1;
height:80%;
}
I also made some adjustments to your css (Note in you css file change #footer position to relative)
snippet below
body {
height:100%;
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-color: #a2a2a2;
}
p {
text-align:center;
color: white;
font-size: 150%;
}
ul {
color: white;
font-size:150%;
}
#fade {
display: none;
}
#head {
background-color: #65659a;
color: white;
text-align: center;
padding: 5px;
}
#footer {
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #65659a;
text-align: center;
color: white;
border:solid black;
}
#nav {
position: absolute;
line-height:30px;
background-color: #000000;
height:85%;
width:120px;
padding:5px;
border:solid;
}
#nav ul {
margin: 0;
padding: 10px;
color: white;
font-size:125%;
}
#nav ul li {
list-style: none;
padding: 10px;
font-size: 93%;
}
/*THIS IS THE END OF YOUR CSS STYLE*/
/*FLEXBOX STYLING */
.parent {
display: flex;
min-height: 95vh; /* Or whatever */
flex-direction:column;
}
.child {
width: 100%;
margin: none;
padding:0px;
}
#footer_container{
flex-grow:0;
height:20%;
margin: auto;
border:solid;
}
#main{
flex-grow:1;
height:80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='parent'>
<div class='child' id='main'>1
<?php include("header.php"); ?>
<?php include ("navigation.php"); ?>
<p> Welcome to my website! Have a look around! Have fun!<br>
Oh and dont forget... Images are not just images.</p>
<br>
<br>
<center>
<img src="https://lh3.googleusercontent.com/-o27DZE9cGwE/VpE4Thx7gSI/AAAAAAAAAIA/mXv9P9UQ3Ew/w488-h650-no/socer%2Bpic.jpeg" height="300" width="200">
</center>
</div>
<div class='child' id='footer_container'>
<div id="footer">
<meta http-equiv="refresh" content="none">
<?php
// Prints the day, date, month, year, time, AM or PM
echo date("d/m/Y h:i A") ;
echo " Craed!." ;
?>
</div>
</div>
</div>
The problem that i am facing is that text inside the a tag is not adjusting on a single line.
Here's my html.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="homepage">
Set as Homepage
</div>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="70" style="font-size:20pt;"/>
</form>
<div id="pic_2">
<img src="powerd-by-google.png">
</div>
</div>
<div id="footer">
© 2012 - We Respect your Privacy - About AVG Secure Search
</div>
</div>
</body>
</html>
and here's my css.
body
{
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3
{
margin: 0;
padding: 0;
}
p,ul,ol,li
{
margin: 0;
padding: 0;
}
#outer
{
background-color: rgb(67,68,71);
}
#outer ul
{
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li
{
float: left;
}
.current
{
background-color: rgb(56,63,137);
}
#outer a
{
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover
{
color: black;
background-color: white;
}
#outer .current a:hover
{
color: white;
background-color: inherit;
}
#homepage a
{
float: right;
font-weight: none;
color: white;
background-color: rgb(67,68,71);
display: inline;
text-transform: lowercase;
border-right: none;
}
#homepage a:hover
{
color: white;
background-color: inherit;
}
#clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin: 0 auto;
overflow: auto;
}
#pic
{
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content
{
position: absolute;
top: 60px;
left: 90px;
}
#forms
{
margin-top: 50px;
position: relative;
}
#pic_2
{
position: absolute;
top: 0px;
left: 867px;
}
#footer
{
width: 500px;
margin: 375px auto 0px;
}
#footer a
{
text-decoration: none;
}
now the problem is with the a tag in the homepage div, i have tried very hard but i have no idea why its text is not adjusting on a single line instead it seems to creep up on multiple lines.
Any suggestions in this matter would be really helpful.
thank you.
I'm assuming you're talking about the 'set as homepage' button.
If so, The issue is that your css is writing a fixed with to the element inherited from #outer a which is making that element 90px wide.
You can fix this by simply adding the css style width: inherit; to #homepage a
Example:
http://jsfiddle.net/2jByx/1/
You need to add width to the "set as homepage" element
#homepage a {
.....
width: 120px; //added width
}
Take a look at here, http://jsfiddle.net/VkmHr/
is that you looking for?