I'm almost done with my website but I have one little problem.
I have have a fixed header and fixed footer on my site with a responsive layout.
All works just like I want it, except when i "tilt" my phone to "landscape" mode. Then the site creates a "padding/margin" at the bottom and the footer gets "forced" up with the content creating a grey border at the bottom. The footer follows the content.
But here's the thing. It works fine on my other pages that have more content (for scrolling) but not on my index page that only have some contact info.
When I add more text to the index page it becomes normal.
Anyone know what I'm doing wrong and can help?
I assume there is a easy fix for this but I can't seem to find it.
<title>Name</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="images/icons/favicon.ico">
<link rel="stylesheet" href="style/structure.css">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui" />
<?php include("style/header.php"); ?>
<div class="container">
<div class="content">
<h1>
Name
<br>
Tlf: Tlf
<br>
E-post: mail
</h1>
</div> <!-- END CONTENT -->
</div> <!-- END CONTAINER -->
<?php include("style/footer.php"); ?>
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0 auto;
width: 90%;
clear: both;
background-color: #FFFFFF;
color: #444444;
font-size: 87.5%; /* 14px */
font-family: times, 'timesnewroman', 'times new roman', 'bakersville', serif;
line-height: 1.5;
-webkit-font-smoothing: 'antialiased';
position: relative;
display: block;
}
header {
height: 40px;
width: 90%;
position: fixed;
z-index: 1;
border-bottom: 1px solid rgba(136, 136, 136, 0.4);
background-color: #FFFFFF;
top: 0;
display: block;
}
footer {
width: 90%;
height: 35px;
float: left;
border-top: 1px solid rgba(136, 136, 136, 0.4);
text-align: center;
position: fixed;
bottom: 0;
background-color: #FFFFFF;
padding-top: 5px;
display: block;
}
.container {
max-width: auto;
min-height: auto;
float: none;
display: block;
text-align: center;
}
.content {
background-color: #ffffff;
color: #999999;
margin: 0 auto;
display: block;
padding-top: 40px;
padding-bottom: 40px;
}
.content h1 {
color: #000000;
float: left;
font-size: 13px;
line-height: 1.3;
font-weight: normal;
font-family: helvetica;
text-align: left;
}
If you get the grey area in your site on safari (iOS7) it might just be your viewport. Adding to the viewport meta: (height="device-height") will probably solve you problem.
Related
I'm having an issue where the footer of my page has now moved up and is stuck with in the picture. This problem didn't use to occur and I'm unsure as to how to fix it.
When entering the website : https://gyazo.com/bcd6fe2f9514e761035deee64d820e22
After scrolling down : https://gyazo.com/cb9b9917d7d1730484c18a093b2a5f12
Here is the part of the code for index.php
html {
scroll-behavior: smooth;
}
body,
.cover {
height: 100%;
}
.cover {
background: url('img/main.jpeg') top left no-repeat;
background-size: cover;
display: table;
width: 100%;
padding: 20%;
box-shadow: inset 0 0 100px #000;
}
.cover-text {
text-align: center;
color: white;
display: table-cell;
vertical-align: middle;
}
.cover-text h1 {
margin: 0;
font-size: 70px;
letter-spacing: -3px;
}
nav.navbar-inverse {
background: rgba(0, 0, 0, 0.5);
border: none;
}
.the-quote {
background: #222;
}
blockquote1 {
border: none;
margin: 0;
font-family: Georgia, Times, serif;
font-style: italic;
font-size: 32px;
color: white;
}
blockquote1 cite {
display: block;
text-align: right;
text-transform: uppercase;
font-family: Helvetica, Arial, sans-serif;
font-style: normal;
font-size: 18px;
font-weight: bold;
color: #888;
margin-top: 40px;
}
section {
padding: 100px;
}
h2 {
text-align: center;
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
margin: 0 0 60px;
}
h2 + p {
text-align: center;
margin-top: -60px;
}
#team {
background: url('img/fan.jpg') top left no-repeat;
background-size: cover;
color: white;
text-align: center;
}
#reviews p {
color: black;
}
#reviews h4 {
font-weight: 600;
}
#reviews {
text-align: center
}
#contact-us {
background: url('img/straighten.jpg') left no-repeat;
background-size: cover;
text-align: center;
}
footer {
background: #222;
color: black;
text-align: white;
padding: 20px;
font-family: Georgia, Times, serif;
position:absolute;
bottom: 0;
width: 100%;
}
footer a {
color: hotpink;
}
#media only screen and ( max-width : 568px ) {
.cover h1 {
font-size: 40px;
}
section {
padding: 20px;
}
}
.login-cover {
background: #333;
background-size: auto;
padding-top: 300px;
min-height: 93.8vh;
min-width: 100vw;
color: black;
text-align: center;
}
<!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">
<title>Modern Haircut Designs</title>
<!-- Bootstrap Stuff -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Coursework Style that's seperate -->
<link href="coursework_style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse">
#My navigation bar code
</nav>
<div class="cover" id="top">
<div class="cover-text">
<h1>Professional Haircut Service at its finest</h1>
<p class="lead">It's your haircut so why not choose the exact date, time and barber of your preference.</p>
Sign up by clicking right here!
</div>
</div>
<section class="the-quote">
# Quote
</section>
<section id="services">
#List of the services we offer
</section>
<section id="team">
# Team members
</section>
<section id="reviews">
#Reviews
</section>
<section id="contact-us">
#Contact-Us information
</section>
<!-- jQuery for javascript stuff-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap javascript code / might remove tho -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
<footer>
crafted with ♥ in Bangladesh by Roman Ryan Karim
</footer>
</html>
Before this error persisted, the footer used to appear underneath the contact-us section however it now appears the instance you go to the website and is stuck there. Can someone help? I don't mind sharing more of the code if you need it.
Try to remove your position absolute, of your footer
So I want the link at the bottom of my page to have a bigger font-size on screens smaller than 580px (which should obviously be nearly all phone screens).
If I check it in dev tools and change the width it looks fine like this
but once I use 'phone screen mode' and for example iPhone 5 it's back to the normal font-size of 25px, what the media query should've increased?
body{
font-family: Raleway;
margin: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/****************************/
img{
width: 96%;
margin: 2%;
}
/*********** Footer Section **************/
#link-back a, #link-back p{
color: #666666;
font-family: Raleway;
font-weight: bold;
text-decoration: none;
float: none;
text-align: center;
padding-top: 10px;
font-size: 25px;
margin: 10px 0 -10px 0;
display: block;
}
#link-back::before
{
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 50px;
background:#666666;
opacity: .4;
}
:hover#link-back a {
color: red;
}
#copyright p, #copyright{
text-align: center;
float: none;
margin: 0 0 5px 0;
padding: 0;
color: #b7b7b7;
font-size: 13px;
}
#media all and (max-width: 580px){
#link-back a, #link-back p{
font-size: 45px;
padding-top: 15px;
}
#link-back::before{
height: 80px;
{
}
<html>
<head>
<title>Typographic Pairing</title>
<link rel="icon" type="image/png" href="../img/heart.png">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Raleway" rel="stylesheet">
</head>
<body>
<img src="http://heartcube.co.uk/typographic-pairing/project2.jpg" alt="project 2">
<p id="copyright">© 2017 Bettina Bremm</p>
<p id="link-back">back to heartcube</p>
</body>
</html>
As #CBroe noticed, the meta tag was missing for the viewport!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I did check the other questions, but none of them fixed my problem. When I resize the page, my elements are moving everywhere, all squashed up. I even tried doing a wrapper div, and that didn't help. Are we allowed to post web sites? Because I have the site live.
<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body {
margin: 0 auto;
width: 370px;
height: 1%;
margin-top: 100px;
border-radius: 15px;
border: 5px dotted #00A396;
background-clip: content-box;
background-color: #F8B72E;
text-align: justify;
font-family: Kirvy;
overflow: hidden;
font-size: 13px;
}
#wrapper {
width: 100%;
margin: 0%;
padding: 0%;
}
p { padding: 10px;}
#title {
text-align: center;
font-size: 24px;
top-margin: 0px;
padding: 0px;
}
nav {
font-family: KBAStitchInTime;
font-size: 12px;
color: #EC225F;
right: 220px;
top: 140px;
position: relative;}
#dot1 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot2 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot3 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot4 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
a:link { color:#EC225F; text-decoration:none; }
a:visited{ color: purple; }
a:hover{ color: ;}
a:active {}
body {background-color: #262626;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<span id="dot1">.</span>About<br>
<span id="dot2">.</span>Pages<br>
<span id="dot3">.</span>Poems<br>
<span id="dot4">.</span>Home<br>
</nav>
<div id="body">
<p id="title">Contact!</p>
<p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>
I am making a layout for one of my sites and i have a div in the middle of the page. When i type text into the div there seems to be a big gap between the border of the div and the text. i have set padding to 0 on the div and it is still applying some sort of padding. i have tested this on IE 10 and Google Chrome 29. My code is below Here is a jsFiddle.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Club Website</title>
<link rel="stylesheet" href="Assets/Stylesheets/Global/Global.css" />
<link rel="stylesheet" href="Assets/Stylesheets/Bootstrap/css/bootstrap.min.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Assets/Scripts/Javascript/jQuery/jQuery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
});
</script>
</head>
<body>
<div id="Wrapper">
<div id="Header">
<div id="HeaderInner">
Main Page
Other Page
Other Page
Other Page
Other Page
</div>
</div>
<div id="Body">
<div id="BodyInner">
Hi
</div>
</div>
</div>
</body>
</html>
CSS
/* Layout */
html, body, #Wrapper {
width: 100%;
min-width: 1000px;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f2f2f2;
}
#Header {
width: 100%;
height: 45px;
display: block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #333;
box-shadow: 2px 2px 3px #999;
}
#HeaderInner {
width: 965px;
height: 45px;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
line-height: 45px;
text-align: center;
}
#Body {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
position: absolute;
top: 45px;
left: 0;
background-color: transparent;
}
#BodyInner {
width: 965px;
height: auto;
min-height: 100%;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
word-wrap: break-word;
white-space: pre-wrap;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
/* Layout */
/* Links */
.HeaderLink {
color: #999;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
cursor: pointer;
margin: 0 15px;
}
.HeaderLink:hover {
text-decoration: none;
color: #FFF;
}
.HeaderSelectedLink {
color: #FFF;
}
/* Links */
The spacing is caused by the following CSS rule:
white-space: pre-wrap;
Which renders similarly to the <pre> tag, drawing a line for every newline/line-break in the HTML source.
So with the following HTML:
<div id="BodyInner">
Hi
</div>
the whitespace before and after Hi are being drawn on-screen.
remove
white-space: pre-wrap;
BodyInner in your code,
refer this: http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-wrap
I'm creating a banner at the top of my page. It's built using 3 banners that will have content. When I horizontally shrink the browser window, my green banner component(on the right) moves with the edge of the screen eventually overlapping or going under my blue banner component (on the left).
How do I set a browser(body?) width at which the banner on the right stops moving with the shrinking browser and instead enable the browser scroll bars so the page stops shrinking?
If there's an entirely different/better way to approach this please throw all suggestions at me. Trying to learn as much as possible.
Your help is much appreciated. My code is as follows.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
.bannerBackground
{
width: 100%;
position: absolute;
top: 0;
height: 27px;
background-color: orange;
}
.rightBanner
{
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
height: 27px;
padding-right: 20px;
width: 200px;
text-align: right;
color: #CCCCCC;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
background-color: green;
margin:0;
display: block;
}
.leftBanner
{
white-space: nowrap;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
white-space: nowrap;
margin-bottom: 0px;
width: 645px;
background-color: blue;
height: 27px;
display: block;
}
body
{
font-family: arial;
margin: 0;
padding: 0;
color: #EEEEEE;
}
</style>
</head>
<body>
<div class="leftBanner">
</div>
<div class="rightBanner">
<div>
Some Title Text
</div>
</div>
<div class="bannerBackground">
</div>
</body>
</html>
When you absolutely position elements you take them out of the flow of the page. You can instead use floats.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
.bannerBackground
{
width: 100%;
height: 27px;
background-color: orange;
}
.rightBanner
{
z-index: 9;
height: 27px;
padding-right: 20px;
width: 200px;
text-align: right;
color: #CCCCCC;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
background-color: green;
margin:0;
float: right;
}
.leftBanner
{
white-space: nowrap;
z-index: 10;
white-space: nowrap;
margin-bottom: 0px;
width: 645px;
background-color: blue;
height: 27px;
float: left;
}
body
{
font-family: arial;
margin: 0;
padding: 0;
color: #EEEEEE;
min-width: 960px;
}
</style>
</head>
<body>
<div class="leftBanner">
</div>
<div class="rightBanner">
<div>
Some Title Text
</div>
</div>
<div class="bannerBackground">
</div>
</body>
</html>
You need to remove the position:absolute . Then you could put it all in a container div and float the banners left and right with the body in the middle . That's how I'd do it.