Hey guys I want that the text "LETS SAVE PETS" and "We need you in this mission" to be responsive according to the screen size but what happening is they doesn't shrink when the screen size is small and ends up adding a lot of white and empty space to the website. I have used also but it is not working according to my will. Guys please help me. My website is http://letsavepet.com/ . Image I used here for background is different from the website one. Forget that and please help me.
HTML and CSS code is as below
/*This is for links*/
a{text-decoration: none;
color: Black;}
div#sub{display: inline;
color: #339900;}
body {margin:0;}
/*This is for navigation*/
.topnav {
overflow: hidden;
background-color: #4caf50;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #666666;
color: white;
}
.topnav a.active {
background-color: white;
color: black;
}
/*This is the end*/
/*This is for parallax scrolling*/
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url('http://letsavepet.com/images/20170122_150254.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
#media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}
/*This is the end*/
/*This is for header*/
body {
margin: 0;
font-family: Arial;}
.top-container {
background-color: white;
padding: 0px;
text-align: left;}
.content {
padding-top: 14px;}
.header {
padding: 0px 0px;
background: #4caf50;
color: #4caf50;
z-index:100;}
.sticky {
position: fixed;
top: 0;
width: 100%;}
.sticky + .content {
padding-top: 64px;}
/*This is the end*/
/*This is for text*/
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 120px;}
.sub-text{ position: absolute;
top: 63%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 40px;
font-family: apple chancery;}
/*This is for footer*/
.footer {
background-color: #0b0c0c;
padding: 10px;
color: white;
padding-top: 70px;
padding-bottom: 100px;
padding-left: 40px;}
.footer_2{background-color: #1e1f21;
padding-top: 20px;
padding-bottom: 30px;
color: white; }
div#info{ color: #9fa1a3;}
.copy_reg{float:right;
display: inline-block;
padding-right: 10px; }
/*This is for media buttons*/
.fa {
padding: 6px;
font-size: 5px;
text-align: center;
text-decoration: none;
margin: 5px 5px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;}
.media{font-size: 20px;
padding-right: 60px;
float: right;
display: inline-block;}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lets Save Pets</title>
<link rel="stylesheet" href="index.css" type="text/css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body style=background:white>
<div class="header" id="myHeader">
<div class="topnav" id="myTopnav">
Home
News
Gallery
Join Us
About
</div>
</div>
<div class="text"><b>LETS SAVE PETS</b></div>
<div class="sub-text"><b>We need you in this mission!</b></div>
<div class="parallax"></div>
<div class="content" style="background-color:white;">
<h1><u>Saving a life is easier than you think.</u></h1>
<p><font size="5">
“You can do it!” Every day, we say those four magical words to people around the globe who
want to help animals in need but are unsure of their abilities. With some friendly encouragement
and guidance, you’ll be amazed at what you can accomplish.
<h2>Helping to save animals</h2>
Each of us can help bring about a time when there are No More Homeless Pets. In fact, that’s just
what it is going to take — every person reading this article committing to do just a little bit to
reach this goal. Sure, many of us think we can’t make a difference for one reason or another, but
the truth is that no matter how little time, money or experience you have, you can still save
an animal’s life. It’s easier than you think, and makes you feel good, too.
<br /> <br />
We’ve heard from so many of you who want to help but aren’t sure how, so we’re going to tell you
about simple ways that you can make a huge impact. It’s time to do all we can to save the lives of
homeless animals. They’re counting on us — and we know <b>you can do it!
</b></font></p>
</div>
<div class="footer">
<div class="media">FIND US ON</div>
CONTACT INFO<br /><br />
<div id="info"><i class="material-icons">local_phone</i> +91 7982189411<br /><br />
<i class="material-icons">local_post_office</i> letsavepet#gmail.com<br /><br />
<i class="material-icons">map</i> 1/5300-C, Street no.- 11,<br />
Balbir Nagar Ext., Shahdara,<br />
Delhi-110032, India</div>
</div>
<div class="footer_2"> © Letsavepet
<div class="copy_reg">All Rights Reserved®</div></div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</body>
</html>
If you don't need browser support below IE 11, I would probably use vw for the font size. Give the .text div font-size: 11vw; and .sub-text: 4vw; or adjust it as needed. The space between the two divs will probably need to be adjust at different screen widths but the font size will adjust.
/*This is for links*/
a{text-decoration: none;
color: Black;}
div#sub{display: inline;
color: #339900;}
body {margin:0;}
/*This is for navigation*/
.topnav {
overflow: hidden;
background-color: #4caf50;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #666666;
color: white;
}
.topnav a.active {
background-color: white;
color: black;
}
/*This is the end*/
/*This is for parallax scrolling*/
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url('http://letsavepet.com/images/20170122_150254.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
#media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}
/*This is the end*/
/*This is for header*/
body {
margin: 0;
font-family: Arial;}
.top-container {
background-color: white;
padding: 0px;
text-align: left;}
.content {
padding-top: 14px;}
.header {
padding: 0px 0px;
background: #4caf50;
color: #4caf50;
z-index:100;}
.sticky {
position: fixed;
top: 0;
width: 100%;}
.sticky + .content {
padding-top: 64px;}
/*This is the end*/
/*This is for text*/
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 11vw;}
.sub-text{ position: absolute;
top: 63%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 4vw;
font-family: apple chancery;}
/*This is for footer*/
.footer {
background-color: #0b0c0c;
padding: 10px;
color: white;
padding-top: 70px;
padding-bottom: 100px;
padding-left: 40px;}
.footer_2{background-color: #1e1f21;
padding-top: 20px;
padding-bottom: 30px;
color: white; }
div#info{ color: #9fa1a3;}
.copy_reg{float:right;
display: inline-block;
padding-right: 10px; }
/*This is for media buttons*/
.fa {
padding: 6px;
font-size: 5px;
text-align: center;
text-decoration: none;
margin: 5px 5px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;}
.media{font-size: 20px;
padding-right: 60px;
float: right;
display: inline-block;}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lets Save Pets</title>
<link rel="stylesheet" href="index.css" type="text/css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body style=background:white>
<div class="header" id="myHeader">
<div class="topnav" id="myTopnav">
Home
News
Gallery
Join Us
About
</div>
</div>
<div class="text"><b>LETS SAVE PETS</b></div>
<div class="sub-text"><b>We need you in this mission!</b></div>
<div class="parallax"></div>
<div class="content" style="background-color:white;">
<h1><u>Saving a life is easier than you think.</u></h1>
<p><font size="5">
“You can do it!” Every day, we say those four magical words to people around the globe who
want to help animals in need but are unsure of their abilities. With some friendly encouragement
and guidance, you’ll be amazed at what you can accomplish.
<h2>Helping to save animals</h2>
Each of us can help bring about a time when there are No More Homeless Pets. In fact, that’s just
what it is going to take — every person reading this article committing to do just a little bit to
reach this goal. Sure, many of us think we can’t make a difference for one reason or another, but
the truth is that no matter how little time, money or experience you have, you can still save
an animal’s life. It’s easier than you think, and makes you feel good, too.
<br /> <br />
We’ve heard from so many of you who want to help but aren’t sure how, so we’re going to tell you
about simple ways that you can make a huge impact. It’s time to do all we can to save the lives of
homeless animals. They’re counting on us — and we know <b>you can do it!
</b></font></p>
</div>
<div class="footer">
<div class="media">FIND US ON</div>
CONTACT INFO<br /><br />
<div id="info"><i class="material-icons">local_phone</i> +91 7982189411<br /><br />
<i class="material-icons">local_post_office</i> letsavepet#gmail.com<br /><br />
<i class="material-icons">map</i> 1/5300-C, Street no.- 11,<br />
Balbir Nagar Ext., Shahdara,<br />
Delhi-110032, India</div>
</div>
<div class="footer_2"> © Letsavepet
<div class="copy_reg">All Rights Reserved®</div></div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</body>
</html>
In order to have text resize according to screen size you need to add additional style rule for that size in a media-query. Media queries make it so the css inside of them will only be applied in certain conditions specified inside the "()" brackets. Example:
h1 {
font-size: 16px;
}
#media screen and (max-width:600px) {
h1 {
font-size: 12px;
}
}
The above h1 will normally be 16px big, and 12px size will only kick in on devices that have smaller screen than 600px (phones).
Read more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Related
I am recreating website to practice my html and css skills.
I am doing mobile first, and when i set my device width/height on Iphone 6/7/8 ( 375x667 ) (and of course it may be the case for other widths ) body content spills to the right of viewport border.
I know this may be too much code but i am really stuck on this and i don't really know what is causing this problem.
I am previewing it in Opera Developer Tools.
Thanks in advance .
CSS:
body {
background-color: #fff;
font-family: sans-serif;
overflow: auto;
}
/* NAVIGATION HEADER */
header {
display: flex;
height: 80px;
max-width: 100%;
}
.logo {
flex-basis: 27%;
padding: 14px 5px;
}
.menu {
list-style-type: none;
flex-basis: 70%;
}
.menu li {
display: inline-block;
padding: 20px 3px;
}
.menu a {
text-decoration: none;
color: #595959;
font-size: 20px;
}
/* HERO */
.hero {
position: relative;
text-align: center;
}
h1 {
font-size: 39px;
font-weight: 800;
text-align: center;
line-height: 1;
margin-top: 55px;
}
.hero h3 {
text-align: center;
font-size: 19px;
font-weight: normal;
color: #595959;
word-wrap: normal;
margin: 20px 20px;
}
.button {
/* position: absolute; */
display: inline-block;
background-color: #e54545;
padding: 8px 26px;
padding-top: 13px;
border-radius: 60px;
color: white;
line-height: 1.5;
font-size: 18px;
text-align: center;
font-weight: 400;
}
/*
.seework {
top: 230px;
left: 30%;
}
*/
.bckgrnd {
position: relative;
display: inline-block;
background-image: url("pozadina.png");
background-size: cover;
background-position: center;
width: 100%;
height: 250px;
top: -50px;
z-index: -1;
margin: 0;
}
.strelica {
display: inline-block;
position: relative;
font-size: 30px;
font-weight: bold;
color: #595959;
z-index: 2;
text-align: center;
top: 80%;
border: 2px solid #595959;
box-sizing: border-box;
padding: 1px 12px 6px;
border-radius: 50%;
}
/* SIVI SKROL*/
.skrol {
position: relative;
left: 0;
background-color: #595959;
padding: 20px;
margin: 0;
min-width: 100%;
}
#media(min-width: 750px) {
.logomob {
display: none;
}
}
#media(max-width: 750px) {
.logodesk {
display: none;
}
}
HTML:
<!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>nLight - User Experiance & User Interface Design Studio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logomob.png" alt="nLight logo" class="logomob hidedesk">
<img src="logodesk.png" alt="nLight logo" class="logodesk hidemob">
</div>
<nav>
<ul class="menu">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Independent Interface design studio.</h1>
<h3>We are located in sunny Novi Sad, Europe, and work with people worldwide</h3>
<div class="button seework">See Work</div>
<div class="bckgrnd"> <div class="strelica"> ↓ </div> </div>
</section>
<section class="skrol">
<div class="skrolhed">
<h2> Simple solutions to complex problems. </h2>
<p> User Experience / Interface Design & Front-end Development.
One man studio. 10+ years of experience.
</p>
</div>
<div class="skrolbox1">
<em>DESIGN</em>
<h3>We do Interface design and we are serious about it.</h3>
<p>Web applications, SAAS, marketing web sites. From discovery, prototyping, and design, through iterations to final product.</p>
</div>
<div class="skrolbox2">
<em>DEVELOPMENT</em>
<h3>Front-end Development</h3>
<p>Creating front end strategy that scales. Including living style guide, documentation and methodology to on-board new developers.</p>
</div>
<div class="button about">About Us</div>
</section>
<footer>
<img src="logofut.png" alt="nLight logo" class="logofut">
<p>© 2019 nLight. Hand Made in Europe.</p>
</footer>
</body>
</html>
Not sure if this is the fix you are looking for, but replacing min-width: 100% by max-width: 100% for skrol seems to do it.
.skrol {
position: relative;
left: 0;
background-color: #595959;
padding: 20px;
margin: 0;
max-width: 100%; /*instead of min-width*/
}
I am trying to make a website and am running into an issue of not being able to remove a chunk of white space.
I am using an image as a background and want the main text and logo to be in the middle of the background image.
I have tried using overflow-x: hidden; as well as messing with margin, padding, width and height values of different elements in the css file but, I cannot get it to work. I tried to set the width and height bigger but it won't expand to any size screen.
I haven't had this issue before and do not know why it is happening now.
My Code:
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
width: 50em;
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
margin-top: .5em;
margin-left: 13.7em;
margin-right: auto;
padding: 0em 0em 0em 0em;
}
#background {
position: absolute;
z-index: -1;
left: -40px;
top: -88px;
width: 100%;
height: 100%;
padding: 0 0 0 0;
margin: 0 auto;
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
width: 40em;
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<img id="logo" src="images/logo.jpg" width="840" height="200" />
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
<img id="background" src="images/background.jpg" />
</html>
This is happening because your background image is outside your <body> tag.
There's better and more maintainable ways of doing what you're trying to do, without all that "hacking".
I'll try to modify a bit of your code and comment it out so you can understand it a bit more.
Using images as a background
When you want to use an image as a background, use it as a CSS background-image Property. There's some occasions it would be better to use the way you were trying to use it, but generally and for this specific case background-image is more suitable.
.myElement {
background-image: url("paper.jpg");
}
If you want your text centralized inside of an element with a background, wrap your content with a new element, insert the content inside of it, and then give to this new element the background-image property.
<div class="newElement">
<div class="content-wrapper">
<h2>Your Title Goes Here</h2>
<p>Your Description Goes Here</p>
</div>
</div>
.newElement{
background-image: url("paper.jpg");
}
All together your code should look something like this:
/* New Code Added */
.newElement {
background-image: url(http://lorempixel.com/400/400/abstract/);
background-repeat: no-repeat; /* Makes background nto repeat */
background-size: cover; /* Sets background size as a cover */
background-color: #cccccc;
padding: 2rem; /* Give the padding here instead of logo to avoid "breadking" the image's 100% width. A lesson for another day */
}
/* Old Code. Check comments */
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
/* width: 50em; No need for this being added */
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 100%;
max-width: 840px; /* Sets a max-width. Same size of the picture's width. So we avoid image losing focus when the screen gets bigger */
height: auto; /* automatically follows the lead of the width, scalling the image equally without distortion */
margin: 0 auto; /* Centers image horizontally */
display: block; /* Needed for the horizontal center */
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
/* width: 40em; No need for this being added */
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="newElement">
<div class="content-wrapper">
<img id="logo" src="http://lorempixel.com/840/200/food/" width="840" height="200" />
</div>
</div>
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
</html>
If you wanted a background image for all the website, just move the
background-image attributes to the body tag instead.
body {
background-image: url("paper.jpg");
}
Removing the width you were adding to the box and mainnav
elements, the content even becomes responsive so it's ready for mobile
devices.
Read more about background-image and its properties.
Not sure if I understood your question a 100%, but if you're trying to get the background image to cover the entire document, try wrapping it around the entire document with a css property.
Example: remove the img tag that you have.
<body id="background">
<!-- rest of your code here -->
</body>
then in the css add background-image to reference your img under the id background :
#background {
background-image: url("images/background.jpg");
}
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<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>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
I am working on a website, but I have an issue with white bars on the side of my image.
I tried to fix that with margin, but they are still there.
Here is the code:
body {
overflow: hidden;
height: 100%;
}
.navbar {
overflow: hidden;
background: #1A1A1A;
font-family: Arial, Helvetica, sans-serif;
margin: -10px;
font-size: 14px;
margin-bottom: 0px;
}
.navbar a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 20px;
text-decoration: none;
transition: 0.4s;
}
.navbar a:hover {
background-color: #36A9E0;
color: #000;
transition: 0.4s;
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.navbar.responsive {
position: relative;
}
.navbar.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
.footer {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
background-color: #000;
color: #fff;
padding: 30px;
margin: -10px;
font-size: 11px;
margin-top: -4px;
}
<html lang="fr">
<head>
<title>Wolftime</title>
</head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/logo.png">
<body>
<div class="navbar" id="myNavbar">
Home
Actualités
Joueurs
Vidéos
Contacter
A propos
☰
</div>
<div class="row">
<img src="http://edeboer.free.fr/img/1.png" width="100%">
</div>
<div class="footer">
<p class="legal">
© 2018 Wolftime Entertainment. All Rights Reserved. The Wolftime logo and Wolftime.tk are trademarks of Wolftime Entertainment in FR and/or other countries.
</p>
</div>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
</body>
</html>
Have you tried changing the margin to 0; on the body element in your CSS?
I just did it in the codepen and it worked.
body {
overflow: hidden;
height: 100%;
margin: 0;
}
Thanks,
It's hard to fully see the impact of the default styling given the example, but the issue is visible in the code snippet.
You image does not have white bars. Your image has a fixed aspect ratio within the html page body.
The content of the page has padding. Your nav element is stacked at the top of the page and has margin: -10px. As the page has a natural padding you've "overridden" the built-in style.
The image is stacked correctly within the confines of a padded body. Removing the negative margin will realign the header to your image left and right edges.
Check any unwanted margins within parent elements of your image - including the html and body tags.
I'm having trouble adjusting an image (folk.jpg) so that it covers the background of my page, just underneath the navigation bar. I've tried adjusting the size, but it doesn't seem to want to do anything. I'm wondering if there's something in my CSS that's preventing me from adjusting the image. Here's the code:
body,
html {
height: 100%;
margin: 0;
}
.topnav {
overflow: hidden;
font-family: 'Lato', sans-serif;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav a {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 6px;
font-size: 17px;
border: none;
background-color: #D7D2D2;
}
.topnav .search-container button {
background: #5AA797;
margin-top: 6px;
color: white;
}
.banner {
background-position: center;
background-size: cover;
margin-top: -10px;
}
<link rel="stylesheet" href="://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<div class="topnav">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="search" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<a class="active" href="#about">ABOUT</a>
NEWS
EVENTS
CONTACT
</div>
<div class="banner">
<img class="imgheader" src="/Users/Desktop/folk.jpg" alt="folk band">
</div>
Considering you're probably going to want to have actual content underneath your header, rather than just the image, I'd recommend making use of the background-image CSS property rather than an <img> tag. This will make it so that content entered into .banner (or similar) will be able to sit on top of the background.
For this, you're looking for background-image: url(''). That, in combination with background-size: cover (which you already have on .banner), will give you the background image, but it will only take up a sliver of the height. As such, you'll need to specify the height, taking the navbar into consideration.
This can be done with the calc() function, subtracting the height of the navbar from 100%. In my snippet, this is 96px, though note that you don't actually specify a fixed height for the navbar. As such, you may want to make use of media queries to adjust this 'offset' at different resolutions.
Finally, you'll want to remove the margin-top: -10px from .banner so that it sits 'flush' up against your navbar.
All of this can be seen in the following:
body,
html {
height: 100%;
margin: 0;
}
.topnav {
overflow: hidden;
font-family: 'Lato', sans-serif;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav a {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 6px;
font-size: 17px;
border: none;
background-color: #D7D2D2;
}
.topnav .search-container button {
background: #5AA797;
margin-top: 6px;
color: white;
}
.banner {
background-image: url('http://placehold.it/100');
background-position: center;
background-size: cover;
height: calc(100% - 96px);
}
#media screen and (min-width: 768px) {
.banner {
height: calc(100% - 48px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="indyfolk.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<script src=""></script>
<title>Indy Folk News</title>
</head>
<body>
<div class="topnav">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="search" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<a class="active" href="#about">ABOUT</a>
NEWS
EVENTS
CONTACT
</div>
<div class="banner">
</div>
</body>
</html>
Also, as an aside, you have an erroneous </script> tag at the end of your Font Awesome reference :)
In your way, the image will display on the div you defined (banner). If you want to make it a background image, you just set your css:
html {
background: url(ImagePath) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}