Im trying to make a loading page for my website but there is a white line along the top and one down the left side. Could someone please help me with this,
Thanks.
<DOCTYPE html>
<html>
<head>
<style>
html {
cursor: none;
}
.container {
background-color: black;
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
}
p {
color: white;
text-align: center;
position: absolute;
top: 0; bottom:0; left: 0; right:0;
font-family: courier;
font-weight: bold;
}
img {
position: absolute;
top: 0; bottom:0; left: 0; right:0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<img src="progress.gif">
<p> Loading... Please wait </p>
</div>
It's the default margin, you can add
body {
margin: 0;
}
to your css.
Related
I am working on a school project, and i need to place 4 buttons in the 4 quadrants of the screen. However, the first button has a little gap between it and the top of the screen as well as the side.
Code:
game.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Game</title>
<link rel="stylesheet" href="css/game.css">
</head>
<body>
<div id="container">
<button class="button">A</button>
<button class="button">B</button>
<button class="button">C</button>
<button class="button">D</button>
</div>
</body>
</html>
game.css
body {
background-color: black;
overflow: hidden;
position: fixed;
}
h1, h2 {
color: white;
font-family: Ubuntu Mono;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
}
.button {
border: none;
color: white;
width: 50%;
height: 50vh;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Ubuntu Mono;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: fixed;
}
.button: nth-child(1) {
background-color: #bf0000;
top: 0;
left: 0;
}
.button:nth-child(2) {
background-color: #001fbf;
top: 0;
right: 0;
}
.button:nth-child(3) {
background-color: #e6c52d;
bottom: 0;
left: 0;
}
.button:nth-child(4) {
background-color: #1fbf1f;
bottom: 0;
right: 0;
}
However, i get the output shown here:
How can I remove the gap at the first button?
(and if you want, help me with the color :D)
Any help is appreciated! :D
It's a typo within CSS.
.button:nth-child(1) {
background-color: #bf0000;
top: 0;
left: 0;
}
Remove the space after .button:
I have added a texture background image in html body part and it is repeating the whole body section, but I want this texture will be repeat half of the browser
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background</title>
<style>
body{
background:url('bg.png');
}
</style>
</head>
<body>
</body>
</html>
reference image - what I want
Just use a pseudo-element on the body that is absolutely positioned.
It's 50% wide, 100% high and over 50%.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
position: relative;
}
body:before {
content: '';
position: absolute;
left: 50%;
height: 100%;
width: 50%;
background-image: url(http://lorempixel.com/image_output/abstract-q-c-25-25-1.jpg);
z-index: -1;
}
h1 {
text-align: center;
color: red;
margin: 0;
}
<h1>My Heading</h1>
Below is the solution
Demo
HTML:
<div id="background"></div>
<div id="wrap">content area</div>
CSS:
body {
background: url('bg.png');
}
#background {
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color:#fff;
z-index: 1;
}
#wrap {
position: relative;
z-index: 2;
padding: 30px;
text-align: center;
font-weight: bold;
}
I am using separate header.php and footer.php files which I include in the pages I want to place them in. now my header works well but my footer doesn't stick to bottom of page and when I tried to fix it by setting position: fixed; it takes in some portion of my content means covers some of content.
*{
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #eeeeee;
}
.logo img {
background-image: url(../img/menu_bg.png);
width: 150px;
height: 38px;
padding-top: 5px;
}
.search_box {
color: #198C9E;
background-color: #198C9E;
position: absolute;
top: 6px;
margin-left: 155px;
}
.headerMenu{
background-color:#5DBEDE;
}
#wrapper {
background-color:#5DBEDE;
}
.footer {
position: absolute;
bottom: 0;
width:100%;
height: 80px;
background-color:#5DBEDE;
}
For test purposes, my footer.php is empty
<?php
include ( "./inc/connect.inc.php" ); ?>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="js/main.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>
<body>
<div class="footer">
</div>
</body>
</html>
add padding-bottom: 80px; to content block, while position fixed.
If think globally, and content height more than screen height:
.content {
min-height: 100vh;
padding-bottom: 80px;
}
body {
position: relative;
}
.footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
height: 80px;
}
I found a very good way to put the footer at the bottom of the screen.
<div class="Content class">
content will go here.
</div>
<div class="footer">Footer</div>
The Stylesheet
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
Note: The main logic to add the footer at the end and add the style mentioned to it. For HTML and body add the style.
If you want the footer to stick to the bottom, no matter if the content is tall enough, you should use:
.footer{
position:fixed;
bottom:0;
width:100%;
height: 80px;
}
Since your footer has a fixed height, you can use for body:
body{
padding-bottom:80px
}
This way you make sure the content does not get cut of.
See example here https://jsfiddle.net/05zh0j6u/
The code:
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
How can I place the footer at the bottom of the page? I've tried experimenting with padding, bottom and margin but I haven't been very successful so far. Can someone tell me how to place the footer at the bottom of the page? Thanks
you can do this one sir:
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: fixed;;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
text-align:center;
}
HERE MY CODE
You need to set body height to 100%. Currently the body covers only upto the content you have. There was no explicit height set for the body element.
Since body needs to calculate 100% of the parent element, set html height to 100% as well.
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
If you aim to "fix" your element to the bottom of the screen, set:
position: fixed;
bottom: 0;
On a side note, it might be a good idea for you to start learning about HTML5 elements like "footer" instead of using divs for everything. Also note that id's are unique and styling is best applied in mass/generically (use classes instead).
I'm trying to put together a page that has a Header, navigation tabs that float over the bottom of the header, body content and then a footer. This should be fairly easy, but I'm running into a strange result.
The menu has to float over the header image, as that image may be static, or it may be a slider... or it may be an embedded Google map.
I've mocked up the code below and essentially the CSS for it. The problem is that even though I have the footer set to the bottom, when I view the page and the body has enough content, the footer seems to be floating over the body content and the body content extends past the bottom of the footer.
Here is my code.
Would appreciate someone smarter than me looking at this and making any suggestions.
<style>
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
.mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
}
.mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
z-index: 100;
color: #fff;
margin-top: 310px;
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
.mynavigation li.is-active {
color: #474747;
background-color: #fff;
}
.mynavigation li a{
color: #fff;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
</style>
<div id="header">
<img src="/images/myimage" />
</div>
<div id="mynavigation">
<!-- css makes this a tab menu and it needs to position at the bottom of the image <div> -->
<!-- so it looks like a white tab that is merged wit the whit body to look as if they are whole/together -->
<ul>
<li>Home</li>
<li>Examples</li>
<li>Other</li>
<li>Last</li>
</ul>
</div>
<div id="bodycontent">
<!-- page content goes here and has a white background -->
</div>
<div id="footer">
<!-- footer content here -->
</div>
Working Fiddle http://jsfiddle.net/u2qL4j8a/2/ You had wrongly mentioned the CSS selector for navigation and footer as classes whereas in the HTML you have mentioned these as IDs.
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
#mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
position: fixed;
top: 0;
left: 0;
}
#mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
/*z-index: 100;
color: #fff;
margin-top: 310px;*/
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
Make your HTML structure like so:
<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="mynavigation"></div>
<div id="content">
<!-- CONTENT STUFF -->
</div>
<div id="footer"><!-- FOOTER STUFF --></div>
</body>
</html>
...And your CSS like so:
html{
padding: 0;
margin: 0;
}
body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#mynavigation{
position: absolute;
top: 350px;
height: 50px;
width: 100%;
}
#content{
position: absolute;
top: 350px;
bottom: 100px;
width: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}