This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 1 year ago.
I am trying to make my footer sit at the bottom of the page.
This is my code:
<html>
<head>
<title>Freds Cars, Trucks & Jeeps</title>
<style>
#container{
height: auto;
width: 100%;
}
</style>
</head>
<body style="margin: 0px;>
<div id="container">
<header style="background-color:black;
color: white;
text-align:center">
Fred's Cars, Trucks & Jeeps
</header>
<h1>Welcome to Freds Cars!</h1>
Thank you for visiting our site!
<footer style="background-color:black;
color: white;
text-align:center">
121 Fredway St.
Cartown USA
</footer>
</div>
</body>
</html>
But this is what my webpage looks like:
I thought the container id style would make the container div 100%.
This gets me every time. What is the simple way to do this?
UPDATE
This is what I did to fix
<html>
<head>
<title>Freds Cars, Trucks & Jeeps</title>
<style>
body{
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header{
height: 5vh;
padding-top:5;
background-color:black;
color: white;
text-align:center;
font-size: 16pt;
font-weight: bold;
font-family: arial;
}
.spacer {
flex: 1;
}
</style>
</head>
<body>
<header>
Fred's Cars, Trucks & Jeeps
</header>
<h1>Welcome to Freds Cars!</h1>
Thank you for visiting our site!
<div class="spacer"></div>
<footer style="background-color:black;
color: white;
text-align:center">
Contact us: (555)555-5555<br />
121 Fredway St.<br />
Cartown USA
</footer>
</body>
</html>
Now it looks correct like this:
You can use vh (view height) for your body in your css file.
Visit W3 School
<!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">
<title>Freds Cars, Trucks & Jeeps</title>
<style>
#container {
height: 100vh;
width: 100%;
}
header,
footer {
height: 10vh;
}
main {
height: 80vh;
}
</style>
</head>
<body style="margin: 0px">
<div id="container">
<header style="background-color:black;
color: white;
text-align:center">
Fred's Cars, Trucks & Jeeps
</header>
<main>
<h1>Welcome to Freds Cars!</h1>
Thank you for visiting our site!
</main>
<footer style="background-color:black;
color: white;
text-align:center">
121 Fredway St.
Cartown USA
</footer>
</div>
</body>
</html>
Related
I need to recreate this:
My Attempt:
I'm trying to recreate the first picture above and the result I got was the 2nd picture I need
this is a university homework, specifically how do you add a "Use the menu to select different stylesheets" in that way below the Header, at first i tried adding another but the result is as you can see
my code:
<!DOCTYPE html>
<html>
<body>
<head>
<style>
h1 {
text-align: center;
background-color: lightgreen;
font-family: Arial;
font-size: 200%;
}
h2 {
text-align: center;
background-color: lightgreen;
font-family: Arial;
font-size: 100%;
}
</style>
</head>
</body>
<h1>Welcome to my Homepage</h1>
<h2>Overview of Homepage</h2>
</html>
I think you want something like this.
<!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">
<title>Document</title>
<style>
.content{background-color: #2ed274; text-align: left; padding: 20px;}
body{color: white; font-family: Arial;}
h1 {font-size: 30px; margin-bottom: 0;}
h2 {font-size: 15px; margin-top: 0;}
</style>
</head>
<body>
<div class = 'content'>
<h1>Welcome to my Homepage</h1>
<h2>Overview of Homepage</h2>
</div>
</body>
</html>
I am trying to create a wholy grail template using flexbox and css. I'm new to this...
I have tried everything but i can not get the code to display in graphics (if that make sense). Please advise.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="flex-header">
HEADER
</header>
<main class="flex-main">
<nav class="flex-nav">
SIDENAV
</nav>
<article class="flex-article">
MAIN CONTENT
</article>
<aside class="flex-aside">
SIDEBAR
</aside>
</main>
<footer class="flex-footer">
FOOTER
</footer>
</body>
</html>
css file:
* {
margin: 2px;
}
body {
font-size: 24px;
color: white;`
height: 100vh;
text-align: center;
}
.flex-header {
background-color: #5070B5;
padding-top: 3rem;
padding-bottom: 3rem;
}
.flex-main {
}
.flex-nav {
background-color: #B95F21;
padding-top: 3rem;
}
.flex-article {
background-color: #81A43C;
padding-top: 3rem;
}
.flex-aside {
background-color: #B95F21;
padding-top: 3rem;
}
.flex-footer {
background-color: #5070B5;
padding-top: 3rem;
scroll-padding-bottom: 3rem;
}
It shows the text only, no graphics.
Please check line 6 of your CSS color: white;`.
There is an invalid character ` at the end of the line. Such errors may cause browser to stop processing any further CSS.
I'm creating a website for my school programming class and my css won't show up past my homepage, my pattern of creating css doesn't change, and so far 5 people in my class have checked and none know the reason
Homepage
<head>
<link rel= "stylesheet" href="css1.css">
<meta charset = "utf-8">
<meta name= "keywords" content= "photo">
<title> "trash" </title>
</head>
<body bgcolor="#F5F6E9">
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="index.html">LEGALIZE RANCH</h1>
</div>
<div class= "nav">
<ul>
<li>RANCH!</li>
<li>WHY?????</li>
<li>BROTENDO NATION</li>
</ul>
</div>
</div>
</div>
<div class= "mainpart">
<div class="statement">
<p>
WHATS UP BROTENDOS
</p>
</div>
<div class= "god">
<center> <img src= "god.png" alt="ranch dude"> </center>
</div>
<div class= "statement2">
<p>
RANCH IS THE #1 MOST RARE RESOURCE EVER!!!! THAT MEANS OUR GOVERNMENT IS LIMITING IT FOR DUDES LIKE THIS!!!!!
</p>
<p>
THIS NEEDS TO BE ADDRESSED AT THE NINTENDO CONVENTION!!!!!
</p>
</div>
<div class= birdup>
<center><img src= "birdup.jpg" alt= "bir ddup"></center>
</div>
</body>
CSS
body {
width: 100%;
margin : auto;
}
.container {
width: 960px:
margin: 0 auto:
}
.header {
background: #94DD6E;
height: 100px;
width: 100%;
top: 0;
position: fixed;
}
.logo {
float: left;
font-family: "Helvetica";
font-size: 15px;
margin-left:15px;
padding-top:10px;
}
a {
text-decoration: none;
color: #fff
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
font-family: Arial, Helvetica, sans-serif;
margin-right: 15px;
}
.nav {
float: right;
padding-top: 10px;
}
.content {
background: #e7e8e1;
}
.statement {
padding-top: 100px;
text-align: center;
font-family: "Helvetica";
font-size: 25px;
}
.statement2 {
text-align: center;
.god {
text-align: center;
}
.pimplepete {
margin-top: 50%;
text-align: center;
color: orange;
}
.mainpart {
background-color: #F5F6E9;
}
.video {
padding-top: 25px;
}
.donation {
text-align: center;
font-family: "Papyrus";
font-size: 50px;
}
Page that the CSS isn't working on
<!doctype html>
<head>
<link rel= "stylesheet" href="css1.css">
<meta charset = "utf-8">
<meta name= "keywords" content= "photo">
<title> "trash" </title>
</head>
<body bgcolor="#F5F6E9">
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="index.html">LEGALIZE RANCH</h1>
</div>
<div class= "nav">
<ul>
<li>RANCH!</li>
<li>WHY?????</li>
<li>BROTENDO NATION</li>
</ul>
</div>
</div>
</div>
<div class= "video">
<center>
<iframe width="640" height="360" src="https://www.youtube.com/embed/0V7FGCtnoJo" frameborder="0" allowfullscreen></iframe>
</center>
</div>
<div class= "donation">
<p>
OUR MOVEMENT IS GROWING!!! SPORT SOME <i>RANCHY</i> MERCH
</p>
<p>
LEGAL RANCH MERCH
</p>
</div>
</body>
Don't worry I know that the formatting isn't good.
Your CSS is linked relatively.
<link rel= "stylesheet" href="css1.css">
If your other pages are perhaps in different folders - folders that don't also have a css1.css alongside the html files inside them, it won't understand the reference to css1.css.
Try adding a leading slash /css1.css if you're accessing the site via a URL, rather than the filesystem, and the css is in the web root.
If you're loading the pages via the filesystem, adjust the reference to the css based on the file calling it. You might traverse up a level by referring to it as ../css1.css, instead.
To illustrate further, given a filesystem like:
public_html/
- index.html
- css1.css
- about/
- index.html
public_html/index.html knows about css1.css because they live in the same directory.
However, in public_html/about/index.html, if the <link> tag references css1.css, the browser will look for a file called public_html/about/css1.css, which I imagine doesn't exist.
I am using auto growable div to display code. It shows a line of space above the code and a line of space below the code. I want to remove it. I tried my best but failed. Can you please help it. I thank you for your all support. Here is image of how it looks -
image of output
This is my code
.code{
background-color: #d1e0e0;
font-family: 'Microsoft New Tai Lue', sans-serif;
font-size: 15px;
overflow: hidden;
height: auto;
width: 100%;
}
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<div class="code" id="text">
<xmp>
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
This is a simple HTML page
</body>
</html>
</xmp>
</div>
</body>
</html>
You can adjust the spacing in the html.
.code{
background-color: #d1e0e0;
font-family: 'Microsoft New Tai Lue', sans-serif;
font-size: 15px;
overflow: hidden;
height: auto;
width: 100%;
}
<div class="code" id="text">
<xmp> <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
This is a simple HTML page
</body>
</html></xmp>
</div>
give margin and padding 0px
element { margin: 0px; padding: 0px; }
Use this if your okay with it. Hope it helps you. Thank you.
.code{
background-color: #d1e0e0;
font-family: 'Microsoft New Tai Lue', sans-serif;
font-size: 15px;
overflow: hidden;
height: auto;
width: 100%;
}
xmp {
margin: 0px;
line-height: 1;}
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<div class="code" id="text">
<xmp>
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
This is a simple HTML page
</body>
</html>
</xmp>
</div>
</body>
</html>
or you can use negetive margin like
xmp{margin:-15px;}
xmp {
margin-top: -15px;
margin-bottom: -15px;
}
I feel like I'm going crazy, this is simple stuff yet it just refuses to work, I've done it a million times (although it's been awhile.)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style type="text/css">
title {
background-color: #000000;
float: left;
margin: 5px;
padding: 15px;
overflow:auto;
}
</style>
<body>
<div class="title">
<p>
<img src="images/new/Salon.jpg" width="530" height="180" style="" border="0" />
</p>
</div>
</body>
</html>
The background color is not changing and that is literally all I've coded so far
You wrote
title {
instead of
.title {