I am trying to do sticky header on my existing page an I have all margins in rem but when I set up font-size for main header which contains all header content is influenced just ul list part and other margins are the same. Can you please advice me what is problem?
I want to make header more slim when I scroll down.
JQuery code:
$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
$('.mheader').addClass("sticky_header");
}
else {
$('.mheader ').removeClass("sticky_header");
}
})
CSS header code:
.mheader {
width: 100%;
height: 4.75rem;
box-shadow: 1px 1px 1px #ccc;
background: #eee;
}
.sticky_header {
position: fixed;
z-index: 999;
font-size: 0.8rem !important;
transition: all 1s ease;
}
.mheader__logo img {
position: relative;
width: 10.1%;
float: left;
height: 2.3rem;
margin: 1.225rem 0.9375rem;
}
.mheader__nav {
float: left;
width: 55%;
margin: 0.9375rem 0 0.9375rem 0;
}
.mheader__nav-mobilemenu {
display: none;
}
.mheader__nav-list {
width: 100%;
margin: 0;
}
.mheader__nav-list li {
float: left;
width: 18%;
margin: 0 20px;
padding-left: 10px;
border-left: 1px solid #ccc;
list-style-type: none;
text-transform: uppercase;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
}
.mheader__nav-list a {
display: block;
text-decoration: none;
color: black;
}
.mheader__nav-list a:hover {
color: black;
border-bottom: 2px solid #111;
}
.mheader__search {
position: relative;
float: right;
width: 25%;
margin: 1.225rem 1.875rem 1.225rem 0;
}
.mheader__search input {
width: 100%;
height: 2.3rem;
border: 1px solid #aaa;
border-radius: 0.25rem;
font-size: 1.0625rem;
padding-left: 0.25rem;
}
.mheader__search-button {
position: absolute;
right: 0px;
top: 4px;
}
.mheader__search button {
float: right;
border: none;
background: none;
font-size: 1.125rem;
cursor: pointer;
}
HTML code
<header class="mheader">
<div class="mheader__logo">
<img src="/assets/img/logo.png" alt="">
</div>
<div class="mheader__nav">
<a href="#menu" class="mheader__nav-mobilemenu">
<img src="/assets/img/mob-menu.svg" alt="">
</a>
<!--<i class="fa fa-bars"></i>-->
<ul class="mheader__nav-list group">
<!-- use absolute path -> do not change path with subfolder-->
<li>Job </br>ToDo</li>
<li>Activity </br>Home</li>
<li></br>BLOG</li>
<li>Sign </br>Out</li>
</ul>
</div>
<div class="mheader__search">
<input type="text" placeholder="Search...">
<div class="mheader__search-button">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
</header>
Thank you
Make sure you use EM instead of REM if you want to make it relative to some parent. So all the REM sizes are based on the <html> tag.
If you do em,
$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
$('.mheader').addClass("sticky_header");
}
else {
$('.mheader ').removeClass("sticky_header");
}
})
body{
height:4000px;
}
.mheader {
width: 100%;
height: 4.75rem;
box-shadow: 1px 1px 1px #ccc;
background: #eee;
}
.sticky_header {
position: fixed;
z-index: 999;
font-size: 0.8em !important;
transition: all 1s ease;
}
.mheader__logo img {
position: relative;
width: 10.1%;
float: left;
height: 2.3em;
margin: 1.225em 0.9375em;
}
.mheader__nav {
float: left;
width: 55%;
margin: 0.9375em 0 0.9375em 0;
}
.mheader__nav-mobilemenu {
display: none;
}
.mheader__nav-list {
width: 100%;
margin: 0;
}
.mheader__nav-list li {
float: left;
width: 18%;
margin: 0 20px;
padding-left: 10px;
border-left: 1px solid #ccc;
list-style-type: none;
text-transform: uppercase;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
}
.mheader__nav-list a {
display: block;
text-decoration: none;
color: black;
}
.mheader__nav-list a:hover {
color: black;
border-bottom: 2px solid #111;
}
.mheader__search {
position: relative;
float: right;
width: 25%;
margin: 1.225em 1.875em 1.225em 0;
}
.mheader__search input {
width: 100%;
height: 2.3em;
border: 1px solid #aaa;
border-radius: 0.25em;
font-size: 1.0625em;
padding-left: 0.25em;
}
.mheader__search-button {
position: absolute;
right: 0px;
top: 4px;
}
.mheader__search button {
float: right;
border: none;
background: none;
font-size: 1.125em;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="mheader">
<div class="mheader__logo">
<img src="/assets/img/logo.png" alt="">
</div>
<div class="mheader__nav">
<a href="#menu" class="mheader__nav-mobilemenu">
<img src="/assets/img/mob-menu.svg" alt="">
</a>
<!--<i class="fa fa-bars"></i>-->
<ul class="mheader__nav-list group">
<!-- use absolute path -> do not change path with subfolder-->
<li>Job </br>ToDo</li>
<li>Activity </br>Home</li>
<li></br>BLOG</li>
<li>Sign </br>Out</li>
</ul>
</div>
<div class="mheader__search">
<input type="text" placeholder="Search...">
<div class="mheader__search-button">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
</header>
Related
Hi, I need to know the exact width of the inner text in CSS. As you can see in the image, I want those menu items to have a proper width respectively, not including paddings or margins, so that I can give them a hover effect like "Posts" item. Is there any method I can use to get the width of the inner text?
/* Basic settings */
#import url('https://fonts.googleapis.com/css?family=Roboto:100,400,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all .3s;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
li {
list-style-type: none;
}
img {
border: 0;
}
html, body {
height: 100%;
}
body {
font-family: "Roboto", Helvetica, sans-serif;
}
/* Main */
body {
background-color: whitesmoke;
}
header {
border-bottom: 1px solid #EEE;
height: 70px;
overflow: hidden;
background-color: white;
}
header > div {
vertical-align: middle;
}
header > #logo {
width: 15%;
padding: 20px;
border-right: 1px solid #EEE;
text-align: right;
display: inline-block;
}
header > #logo img {
width: 30px;
height: auto;
}
header > #search {
border-right: 1px solid #EEE;
width: 200px;
display: inline-block;
padding: 20px;
}
header > #search input {
border: 0;
outline: 0;
display: inline-block;
width: 80%;
vertical-align: middle;
padding-left: 10px;
}
header > #search a {
font-size: 1.2rem;
display: inline-block;
vertical-align: middle;
width: 20%;
}
header > #search > #search-box {
border: 1px solid #CCC;
border-radius: 100px;
overflow: hidden;
}
header > #gnb {
height: 70px;
display: inline-block;
vertical-align: middle;
border-right: 1px solid #EEE;
}
header > #gnb ul {
margin: 0 30px;
line-height: 70px;
}
header > #gnb li {
display: inline-block;
}
header > #gnb li:not(:last-child) {
margin-right: 20px;
}
header > #gnb a {
display: inline-block;
font-weight: lighter;
}
header > #gnb a:hover {
transform: translateY(-5px);
}
.premium {
color: orangered;
}
#social-media-icons {
display: inline-block;
vertical-align: middle;
border-right: 1px solid #EEE;
height: 70px;
}
#social-media-icons ul {
padding: 0 20px;
line-height: 70px;
}
#social-media-icons li {
display: inline-block;
}
#social-media-icons li:not(:last-child) {
margin-right: 15px;
}
#social-media-icons li a {
font-size: 2rem;
display: inline-block;
}
#social-media-icons li a:hover {
transform: translateY(-5px);
}
#profile {
display: inline-block;
vertical-align: middle;
}
#profile a {
margin-left: 20px;
}
#profile a img {
width: 50px;
height: 50px;
border-radius: 50%;
}
#sub-header {
border-bottom: 1px solid #EEE;
height: 50px;
background-color: white;
}
#sub-header ul {
width: 800px;
margin: 0 auto;
}
#sub-header li {
line-height: 47px;
display: inline-block;
border-bottom: 3px solid transparent;
padding: 0 20px;
}
#sub-header li:hover {
border-bottom: 3px solid cornflowerblue !important;
}
#sub-header a {
text-align: center;
display: inline-block;
width: 100%;
}
.selected {
border-bottom: 3px solid cornflowerblue !important;
}
main {
width: 1000px;
margin: 30px auto;
}
aside {
width: 200px;
background-color: white;
}
#bill-gates {
padding: 20px;
border-bottom: 1px solid #EEE;
}
#bill-gates-image {
margin-bottom: 20px;
}
#bill-gates-image > img {
margin: 0 auto;
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
}
#bill-gates-bio {
text-align: center;
margin-bottom: 30px;
}
#bill-gates-bio > h2 {
margin-bottom: 5px;
}
#bill-gates-bio > p {
font-weight: lighter;
margin-bottom: 3px;
}
#bill-gates-bio > p:last-child {
color: #CCC;
}
#bill-gates-follow-button {
text-align: center;
margin-bottom: 10px;
}
#bill-gates-follow-button > a {
display: inline-block;
line-height: 20px;
padding: 10px 50px;
background-color: cornflowerblue;
color: white;
border-radius: 30px;
border: 1px solid transparent;
}
#bill-gates-follow-button > a:hover {
background-color: rgb(70, 134, 253);
}
#bill-gates-connect-button {
text-align: center;
}
#bill-gates-connect-button > a {
line-height: 20px;
display: inline-block;
padding: 10px 40px;
background-color: white;
color: cornflowerblue;
border: 1px solid cornflowerblue;
border-radius: 30px;
}
#bill-gates-connect-button > a:hover {
background-color: #EEE;
}
#aside-middle {
overflow: hidden;
border-bottom: 1px solid #EEE;
height: 80px;
}
#connections {
text-align: center;
float: left;
width: 50%;
height: 100%;
border-right: 1px solid #EEE;
}
#followers {
text-align: center;
float: right;
width: 50%;
height: 100%;
}
<!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">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Bill Gates</title>
</head>
<body>
<header>
<div id="logo">
<a href="#">
<img src="./img/logo.png" alt="LinkedIn logo">
</a>
</div><!--
--><div id="search">
<div id="search-box">
<input type="search" name="search" placeholder="Search"><!--
-->🔍
</div>
</div><!--
--><div id="gnb">
<ul>
<li>
Home
</li>
<li>
Profile
</li>
<li>
Connections
</li>
<li>
Interest
</li>
<li class="premium">
Try Premium
</li>
</ul>
</div><!--
--><div id="social-media-icons">
<ul>
<li>
🗣
</li>
<li>
🔔
</li>
<li>
➕
</li>
</ul>
</div><!--
--><div id="profile">
<a href="#">
<img src="./img/avatar.jpg" alt="Profile image">
</a>
</div>
</header>
<div id="sub-header">
<ul>
<li class="selected">
Posts
</li><li>
Background
</li><li>
Recommendations
</li><li>
Following
</li>
</ul>
</div>
<main>
<aside>
<div id="bill-gates">
<div id="bill-gates-image">
<img src="./img/bill-gates-avatar.png" alt="Bill Gates Profile image">
</div>
<div id="bill-gates-bio">
<h2>Bill Gates</h2>
<p>Microsoft Founder</p>
<p>Greater Seattle Area</p>
</div>
<div id="bill-gates-follow-button">
Follow
</div>
<div id="bill-gates-connect-button">
Connect ↓
</div>
</div>
<div id="aside-middle">
<div id="connections">
<h3>200</h3>
<p>connections</p>
</div>
<div id="followers">
<h3>1.9M</h3>
<p>followers</p>
</div>
</div>
</aside>
</main>
</body>
</html>
Use the width property of an element, which gets the width of the content area excluding any paddings, borders or margins.
.bg-tag {
font-family: Arial, sans-serif;
font-size: 14px;
text-decoration: none;
}
.bg-tag:focus {
padding-bottom: 2px;
border-bottom: 2px solid #000; #change colour as you like
width: 100%;
}
Background
I am trying to make a note website. But I noticed that there is a differents between Firefox design tool and my own iphone
But when I test it on my mobile device (iphone 7+) I am getting a other result
I hope someone knows the answer to my problem.
Thanks in advance.
PS..
I used https://howchoo.com/g/mte2zgrhmjf/how-to-access-a-website-running-on-localhost-from-a-mobile-phone to acces the website on my phone
<style>
html{
width: 100vw;
}
/*thead a:link{
padding-left: 5px;
padding-top: 5px;
padding-bottom: 0px;
}*/
nav{
display: none;
}
thead a:link {
color: #262626;
padding: 13px 1px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.note{
/*display: none;*/
}
.page-header{
left: 50%;
}
h1{
color:#262626;
}
body{
text-align: center;
font-family: Arial;
}
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e6e6e6;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
nav a:link {
background-color: #e6e6e6;
color: #262626;
padding: 5px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
li {
float: left;
}
/*dropdown nav*/
.dropbtn {
background-color: #4CAF50;
color: white;
/*padding: 16px;*/
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
text-align: left;
position: relative;
display: block;
width: 100%;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
/*min-width: 160px;*/
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 100%;
}
#bars{
width: 22px;
font-size: 25px;
}
.dropdown-content a {
text-align: left;
color: black;
padding: 10px 10px 10px 10px;
text-decoration: none;
display: block;
width: 548px;
}
.dropdown-content a:hover {
background-color: #009fe3;
color: white;
}
.dropdown-content .active {
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #009fe3;
}
/*dropdown nav end*/
#text{
display: none;
}
.topnav-right a{
height: 25px;
}
.topnav-right {
float: right;
list-style-type: none;
}
li a {
display: block;
color: #262626;
text-align: center;
padding: 12px 16px;
text-decoration: none;
}
li a:hover {
background-color: #009fe3;
color: white;
}
.active:hover{
background-color:#009fe3;
}
.active {
background-color: #262626;
color: white;
}
/*form styling*/
.input_form {
width: 90%;
margin: 30px auto;
border-radius: 5px;
padding: 10px;
background: white;
border: 1px solid #262626;
}
.input_form {
color: red;
margin: 0px;
}
.task_input {
border-radius: 5px;
width: 50%;
height: 15px;
padding: 10px;
border: 1px solid #262626;
}
.date_input {
border-radius: 5px;
width: 100px;
height: 15px;
padding: 10px;
border: 1px solid #262626;
}
.add_btn {
cursor: pointer;
height: 39px;
background: white;
color: #262626;
border: 1px solid #262626;
border-radius: 5px;
margin: 5px;
padding: 5px 20px;
}
.add_btn:hover{
background: #009fe3;
color: white;
}
table {
width: 100%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #262626;
height: auto;
}
tr a{
height: auto;
}
th{
height: auto;
}
th, td {
text-align: left;
font-size: 19px;
color: #262626;
}
th, td{
border: none;
height: auto;
padding: 2px;
}
td{
border-left: 1px solid #262626;
border-left: none;
}
tbody a:link {
background-color: white;
color: #262626;
padding: 13px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.select{
display: none;
}
/*complete button*/
.complete{
text-align: center;
width: 10px;
}
.complete a:visited{
color: #262626;
}
.complete a{
color: #262626;
text-decoration: none;
}
.complete a:hover {
background-color: #009fe3;
color: white;
}
/*Delete button*/
.delete{
text-align: center;
width: 10px;
}
.delete a:visited{
color: #262626;
}
.delete a{
color: #262626;
text-decoration: none;
}
.delete a:hover {
background-color: #009fe3;
color: white;
}
.restore{
text-align: center;
width: 10px;
}
.restore a:visited{
color: #262626;
}
.restore a{
color: #262626;
text-decoration: none;
}
.restore a:hover {
background-color: #009fe3;
color: white;
}
/*completeAll button*/
.completeAll a:visited{
color: #262626;
}
.completeAll a:hover {
background-color: #009fe3;
color: white;
}
/*restoreAll button*/
.restoreALL, .restoreALL a:visited{
color: #262626;
}
.restoreALL a:hover {
background-color: #009fe3;
color: white;
}
/*Edit button*/
.edit a:visited{
color: #262626;
}
.edit{
/*text-align: left;*/
display: none;
width: auto;
text-align: center;
}
.edit a:hover{
color:white;
background-color: #009fe3;
}
.timer-off{
color:red;
}
#form3{
display: none;
}
#completed{
display: none;
float: center;
}
#link, #link:visited{
color: red;
float: right;
}
#link1, #link1:visited{
color: #009fe3;
}
#title{
cursor: pointer;
}
/*sort function styling for arrows*/
#up {
display: inline-block;
border: solid #262626;
border-width: 0 3px 3px 0;
padding: 3px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
#down {
display: inline-block;
border: solid #262626;
border-width: 0 3px 3px 0;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
/*search button*/
#myInput {
width: 50%;
font-size: 16px;
margin: 12px;
color: #262626;
padding: 12px 20px 12px 20px;
border: 1px solid #262626;
margin-bottom: 12px;
}
#myInput:focus{
border: 1px solid #009fe3;
}
/*style login page/register page*/
label{
float: left;
color: black;
}
.form-control[type=text], .form-control[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form-control1[type=text], .form-control1[type=date]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.button {
background-color: #009fe3;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
.button:hover {
opacity: 0.8;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img#randomImage {
width: 40%;
border-radius: 50%;
}
/*form edit.php and login.php */
#form{
margin: auto;
border: 1px solid #ccc;
box-sizing: border-box;
display: table;
width: 50%;
margin: 5% auto 15% auto;
}
/*form index.php*/
#form4{
margin: auto;
border: 1px solid #ccc;
box-sizing: border-box;
display: table;
width: 50%;
}
/*form register.php*/
#form1{
margin: auto;
border: 1px solid #ccc;
box-sizing: border-box;
display: table;
width: 100%;
margin: 1% auto 15% auto;
}
.form-group {
padding: 16px;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img#randomImage {
width: 40%;
border-radius: 50%;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
#form{
/*height: 50%;*/
}
}
.note1{
width: auto;
}
.input_form {
width: 80%;
margin: auto;
border-radius: 5px;
padding: 10px;
background: white;
border: 1px solid #262626;
}
#link2{
font-size: 20px;
font-style: normal;
float: right;
margin: 5px;
}
#link2:visited{
color: #009fe3;
}
#link2:hover{
color: red;
}
.note4{
}
.task p{
font-size: 16px;
}
.date{
float: right;
margin-top: 10px;
width: auto;
}
#media screen and (min-width: 768px) {
.edit{
display: block;
}
nav{
display: block;
}
.date{
float: right;
}
#text{
display: block;
}
.dropdown{
display: none;
}
.note{
height: auto;
display: table-cell;
}
.task_input{
width: 70%;
height: auto;
}
#myInput{
width: 50%;
}
.select{
display: block;
font-size: 19px;
width: auto;
font-family: Arial;
font-weight: bold;
color: #262626;
}
#media screen and (min-width: 992px) {
.input_form p {
color: red;
margin: 0px;
}
.note{
width: auto;
}
.note1{
width: 70%;
max-height: 300px;
}
.task_input {
width: 80%;
height: 15px;
padding: 10px;
border: 1px solid #262626;
}
#myInput{
width: 20%;
}
table {
width: 80%;
}
</style>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<title>To-Do</title>
<link rel="icon" href="img/to-do.png">
<img style="display: none;" src="img_avatar2.png" id="randomImage" alt="some image" />
</head>
<body>
<nav>
<ul>
<li title="Home">
<a href="index.php?Notes=Show" class="active">
<i class="material-icons">home</i>
</a>
</li>
<li title="Completed tasks">
<i class="material-icons">done</i>
</li>
<li title="Users">
<a href="index-admin.php">
<i class="material-icons">person</i>
</a>
</li>
<li title="Add Users">
<a href="register.php">
<i class="material-icons">person_add</i>
</a>
</li>
<div class="topnav-right">
<li title="Logout">
<a href="logout.php">
<i class="fa fa-sign-out" style="font-size:25px"></i>
</a>
</li>
</div>
</ul>
</nav>
<div class="dropdown">
<i id="bars" class="fa fa-bars"></i>
<div class="dropdown-content">
<a href="index.php?Notes=Show" class="active">
<i class="material-icons">home</i>
</a>
<i class="material-icons">done</i>
<a href="index-admin.php">
<i class="material-icons">person</i>
</a>
<a href="register.php">
<i class="material-icons">person_add</i>
</a>
<a href="logout.php">
<i class="fa fa-sign-out" style="font-size:25px"></i>
</a>
</div>
</div>
<div class="page-header">
<h1>Hi, <b style="color:#009fe3"> </b>. Welcome.</h1>
</div>
<i style="font-size: 20px; font-style: normal;">Add a task<br>
<!-- form input tasks -->
<div id="form3">
<form method="post" action="index.php?Notes=Show" id="form4">
<i class="material-icons">close</i><br>
<div class="form-group">
<label>Title</label>
<input type="text" maxlength="20" name="task" class="form-control1" placeholder="Title To-Do...">
</div>
<div class="form-group">
<label>Date</label>
<input class="form-control1" type="date" id="dates" name="dates" min="<?php echo $today;?>" value="<?php echo $today;?>">
</div>
<div class="form-group">
<label>Note</label>
<textarea name="note" class="form-control1" rows="10" cols="120" placeholder="Description To-Do..."></textarea><br>
</div>
<div class="form-group">
<button type="submit" name="submit" id="add_btn" class="button">
<i class="fa fa-plus"></i>`
</button>
</div>
</form>
</div>
</form>
<input type="text" id="myInput" autofocus="autofocus" onkeyup="myFunction()" placeholder="Search for anything..." title="Type something to search">
<table id="myTable">
<thead>
<!-- title for table -->
<tr>
<!-- message for no results found -->
<!--<p id="message"></p> -->
<th title="Completed all tasks" class="completeAll">
<a onclick="return checkCompleteAll()" href="#"><i class=material-icons>done</i>ALL</a>
</th>
<th title="Sort By title" id="title" onclick="sortTable(0)">Title
<i id="up"></i>
<i id="down"></i></th>
<th><select class="select" name="note" onchange="location = this.value;">
<option value="index.php?Notes=Show">Show Notes</option>
<option value="index.php?Notes=Hide">Hide Notes</option>
<option value="index.php?Notes=Hide">Hide Notes</option>
<option value="index.php?Notes=Show">Show Notes</option>
</select></th>
</tr>
</thead>
<tbody>
<!-- table content -->
<tr>
<th title="Complete task" class="complete">
<a onclick="return checkComplete('<?=$row['id'] ?>')" href="#"><i class=material-icons>done</i></a>
</th>
<td class="task" style="width: auto;"><b></p>
</td>
<th title="Edit task" class="edit" style="float: right; $color;">
</th>
<td class="date" >
</td>
</tr>
</tbody>
</table>
</body>
<script src="java.js"></script>
</html>
Does your HTML file have a viewport meta tag in its head? It looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Firefox's mobile editor is likely going to ignore this and automatically adjust the scale of the page.
The iPhone screenshot to me looks like Safari is parsing the page in a manner where it doesn't expect the page to be mobile optimised, so basicslly the pixels aren't being adjusted to the viewing distance of the device.
Another thing to consider is that Firefox and Safari do not use the same underlying technology so there could always be variances in end results. That's why it is best to test your websites on as many browsers as possible, which it seems that you have done by testing on a real mobile device.
To read more about the meta viewport tag see Firefox's documentation (it applies to other browsers, too*)
(*Mozilla typically includes a compatibility table if there is an exception or non-standard behavior)
I'm trying to recreate the Google homepage but I'm struggling with some issues.
The footer is a bit tall and when I try and add a height figure to it, it makes the screen bigger. Also, it looks like the search buttons overlap the search box. On my browser it looks ok but I'm not sure how to get it to stay below.
How can I achieve that?
body {
background-color: #fff;
font-family: arial, sans-serif;
font-size: small;
}
ul li img {
width: 25px;
height: auto;
}
.nav {
float: right;
height: 15px;
letter-spacing: .5px;
font-weight: lighter;
margin-right: 20px;
}
a {
text-decoration: none;
color: black;
}
#sign-in {
background-color: #4285f4;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
font-weight: bold;
}
li {
display: inline-block;
margin: 10px;
vertical-align: center;
}
#logo {
width: 272px;
height: 92px;
margin-left: 532px;
margin-top: 190px;
}
#input {
display: inline-block;
margin: 0 auto;
}
form input {
border: solid 1px #e5e5e5;
height: 35px;
width: 550px;
left: 30%;
position: absolute;
margin-top: 18px;
}
form input:hover {
border: solid 1px #aba2a1;
}
form input:active {
border: solid 0.5px #4285f4;
}
#left.nav {
margin-bottom: 0;
}
footer {
position: fixed;
}
.Search {
position: absolute;
display: inline-block;
top: 60%;
left: 41%;
border: none;
}
#gs {
float: left;
}
#lucky {
float: right;
margin-left: 15px;
}
button {
padding: 10px;
border: none;
background-color: #f1f1f1;
color: #757575;
font-weight: bold;
border-radius: 2px;
}
button:hover {
border: solid 1px #d7d7d7;
font-weight: bolder;
color: black;
}
.footer {
background-color: #f2f2f2;
border-top: solid 1px #E5E5E5;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: auto;
}
#left-nav {
float: left;
}
#right-nav {
float: right;
margin-right: 25px;
}
.footer ul {
color: #757575;
}
.footer ul li {
padding-left: 8px;
}
<div class="container">
<header>
<div class="nav">
<ul>
<li>Gmail
</li>
<li>Images
</li>
<li>
</li>
<li>Sign In
</li>
</ul>
</div>
</header>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="logo" alt="google">
<form>
<input type="text" name="input">
</form>
<div class="Search">
<button type="button" id="gs">Google Search</button>
<button type="button" id="lucky">I'm Feeling Lucky</button>
</div>
</div>
<div class="footer">
<div id="left-nav">
<ul>
<li>Advertising
</li>
<li>Business
</li>
<li>About
</li>
</ul>
</div>
<div id="right-nav">
<ul>
<li>Privacy
</li>
<li>Terms
</li>
<li>Settings
</li>
</ul>
</div>
</div>
View on CodePen
Change .footer attributes to position: fixed and height: 40px to decrease footer height
.footer {
background-color: #f2f2f2;
border-top: solid 1px #E5E5E5;
position: fixed; // before: absolute
right: 0;
bottom: 0;
left: 0;
height: 40px; // before: auto
}
body {
background-color: #fff;
font-family: arial, sans-serif;
font-size: small;
}
ul li img {
width: 25px;
height: auto;
}
.nav {
float: right;
height: 15px;
letter-spacing: .5px;
font-weight: lighter;
margin-right: 20px;
}
a {
text-decoration: none;
color: black;
}
#sign-in {
background-color: #4285f4;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
font-weight: bold;
}
li {
display: inline-block;
margin: 10px;
vertical-align: center;
}
#logo {
width: 272px;
height: 92px;
margin-left: 532px;
margin-top: 190px;
}
#input {
display: inline-block;
margin: 0 auto;
}
form input {
border: solid 1px #e5e5e5;
height: 35px;
width: 550px;
left: 30%;
position: absolute;
margin-top: 18px;
}
form input:hover {
border: solid 1px #aba2a1;
}
form input:active {
border: solid 0.5px #4285f4;
}
#left.nav {
margin-bottom: 0;
}
footer {
position: fixed;
}
.Search {
position: absolute;
display: inline-block;
top: 60%;
left: 41%;
border: none;
}
#gs {
float: left;
}
#lucky {
float: right;
margin-left: 15px;
}
button {
padding: 10px;
border: none;
background-color: #f1f1f1;
color: #757575;
font-weight: bold;
border-radius: 2px;
}
button:hover {
border: solid 1px #d7d7d7;
font-weight: bolder;
color: black;
}
.footer {
background-color: #f2f2f2;
border-top: solid 1px #E5E5E5;
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
}
#left-nav {
float: left;
}
#right-nav {
float: right;
margin-right: 25px;
}
.footer ul {
color: #757575;
margin-top: 3px
}
.footer ul li {
padding-left: 8px;
}
<div class="container">
<header>
<div class="nav">
<ul>
<li>Gmail
</li>
<li>Images
</li>
<li>
</li>
<li>Sign In
</li>
</ul>
</div>
</header>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="logo" alt="google">
<form>
<input type="text" name="input">
</form>
<div class="Search">
<button type="button" id="gs">Google Search</button>
<button type="button" id="lucky">I'm Feeling Lucky</button>
</div>
</div>
<div class="footer">
<div id="left-nav">
<ul>
<li>Advertising
</li>
<li>Business
</li>
<li>About
</li>
</ul>
</div>
<div id="right-nav">
<ul>
<li>Privacy
</li>
<li>Terms
</li>
<li>Settings
</li>
</ul>
</div>
</div>
I was trying to make this category search box to fill the heigh of of the menu bar, but I was not able to make it work and be the same height.
How can I achieve this? What I'm missing? Thanks in advance.
Here is the code:
.fa {
line-height: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
/*hack stack-overflow*/
ul::after {
display: block;
clear: both;
content: "";
}
li {
display: inline-block;
}
li.left {
float: left;
border-right: 1px solid white;
}
li.right {
float: right;
border-left: 1px solid white;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li span {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: gray;
}
li span:hover {
background-color: gray;
}
li#login {
position: relative;
}
li#login form {
display: none;
position: absolute;
z-index: 999;
background-color: gray;
padding: 20px;
border-radius: 20px 0px 20px 20px;
right: 0;
box-shadow: 5px 5px 5px black;
}
li#login:hover form {
display: block;
}
input.login_field {
margin: 10px;
}
#submit-div {
text-align: center;
}
#form-wrapper {
width: 100%;
height: 40px;
}
.nav-list {
padding: 10px 25px 10px 5px;
position: relative;
float: left;
border: 1px solid orange;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#dropdown {
cursor: pointer;
position: absolute;
height: 40px;
left: 0;
top: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid orange;
}
#dropdown:hover {
background-color: lightgray;
}
.current-selection {
display: inline-block;
font-size: 14px;
}
.in-wrap {
overflow: hidden;
height: 100%;
}
#search-box {
width: 100%;
min-width: 400px;
height: 36px;
border: 1px solid orange;
border-left: none;
border-right: none;
line-height: 25px;
font-size: 18px;
padding-left: 100px;
}
#search-box:focus {
outline: none;
}
.go-button {
float: right;
height: 100%;
background-color: orange;
border: 1px solid orange;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin: 0;
padding: 0 15px;
}
.go-button:hover {
background-color: #ff7300;
cursor: pointer;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="menu">
<ul>
<li class="left"><a class="fa fa-home" href="index.jsp"> Home</a>
</li>
<li class="left"><a class="fa fa-shopping-cart" href="#home"> Carrello</a>
</li>
<li class="left"><span id="totale" class="fa fa-money"> €0</span>
</li>
<li id="search" class="left">
<div id="form-wrapper">
<button class="go-button fa fa-search"></button>
<span class="nav-list">
<span class="current-selection">
</span>
<select id="dropdown">
<option value="books-and-ebooks">Books & eBooks</option>
<option value="audiobooks">Audiobooks</option>
<option value="dvds">DVDs</option>
<option value="other-resources">Other Resources</option>
<option value="random">Random</option>
</select>
</span>
<div class="in-wrap">
<input type="text" name="query" id="search-box">
</div>
</div>
</li>
<li class="right"><a class="fa fa-user-plus" href=""> Signup</a>
</li>
<li id="login" class="right">
<a class="fa fa-sign-in" href=""> Login</a>
<form id="login_form" action="login" method="post">
<input id="login_username" class="login_field" name="username" type="text" placeholder="username" />
<br />
<input id="login_password" class="login_field" name="password" type="password" placeholder="password" />
<br />
<div id="submit-div">
<input type="submit" value="login" />
</div>
</form>
</li>
</ul>
</nav>
Well... It seems that your CSS is a bit messy to achieve the rendering you want. If I were you, I'll try to simplify it first...
Moreover, on the provided sample, we can not know the targeted rendering: You want to decrease height of the menu bar, or increase height of the search box?
Below a CSS sample (taken from yours) where search box height is increased to fit the menu bar's height. A not good looking CSS, as a lot of sizes are hardcoded here....
.fa {
line-height: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
/*hack stack-overflow*/
ul::after {
display: block;
clear: both;
content: "";
}
li {
display: inline-block;
}
li.left {
float: left;
border-right: 1px solid white;
}
li.right {
float: right;
border-left: 1px solid white;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li span {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: gray;
}
li span:hover {
background-color: gray;
}
li#login {
position: relative;
}
li#login form {
display: none;
position: absolute;
z-index: 999;
background-color: gray;
padding: 20px;
border-radius: 20px 0px 20px 20px;
right: 0;
box-shadow: 5px 5px 5px black;
}
li#login:hover form {
display: block;
}
input.login_field {
margin: 10px;
}
#submit-div {
text-align: center;
}
#form-wrapper {
width: 100%;
height: 44px;
}
.nav-list {
padding: 5px 25px 5px 5px;
position: relative;
float: left;
border: 1px solid orange;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#dropdown {
cursor: pointer;
position: absolute;
height: 43px;
left: 0;
top: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid orange;
}
#dropdown:hover {
background-color: lightgray;
}
.current-selection {
display: inline-block;
font-size: 14px;
}
.in-wrap {
overflow: hidden;
height: 100%;
}
#search-box {
width: 100%;
min-width: 400px;
height: 40px;
border: 1px solid orange;
border-left: none;
border-right: none;
line-height: 25px;
font-size: 18px;
padding-left: 100px;
}
#search-box:focus {
outline: none;
}
.go-button {
float: right;
height: 100%;
background-color: orange;
border: 1px solid orange;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin: 0;
padding: 0 15px;
}
.go-button:hover {
background-color: #ff7300;
cursor: pointer;
}
This question was posted a few years ago By Sally but she solved it herself and her solution is not working for me.
I have gone through practically all of the relevant sticky footer pages on this site and a bunch from other places but I cannot find anything answering this question. I am sure it has to do with my layout but I have tried every way I have researched and can think of and this is the closest I could get to a sticky footer I am happy with.
Here is the HTML I am working with.
<body>
<div id="container">
<header class="main-header">
<img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<body class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs">
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="quote">
<h6>""</h6>
<p> - </p>
</div>
</footer>
</div>
</body>
and the CSS
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content: " ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover{
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
.footer .quote {
float: right;
color: rgb(56, 56, 56);
}
.footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
.footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
Here is my JSfiddle
In my normal full screen the three 300px x 300px squares fit in a line and everything is well and good but when the window size is reduced (like the one in my fiddle) the squares turn into two lines and are pushed off the screen. The footer stays in place at the bottom of the screen until you scroll then it just stays put and does not follow the bottom of the page.
I would like the footer to either get pushed to the bottom of the screen when the squares get forced into two lines.
-or-
Stay at the bottom of the screen and scroll with the user.
Any help would be very much appreciate!
I removed the excess body and turned it into a div. I ended the container before the footer and added a push div, equal in height to the footer. Seems to work now. Check out the fiddle
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content:" ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover {
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
.push{height:60px;}
footer {
position: relative;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
footer .quote {
float: right;
color: rgb(56, 56, 56);
}
footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
<body>
<div id="container">
<header class="main-header"> <img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<div class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs"> <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</div>
</div>
<div class="push"></div>
<footer class="footer">
<div class="quote">
<h6>"Hello"</h6>
<p>-</p>
</div>
</footer>
</body>