Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have strange case:
I try to make an inner container to fill parent (height with 100% height), but as result I get overflowed content in bottom:
But it must be so (100% except margin top and bottom):
code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="main-wrapper">
<aside class="full-nav" action-bar>
</aside>
<section class="wrapper">
<header>
</header>
<div class="content">
<div class="innner-wrapper">
<div class="main-partial">
<div class="content-wrapper">Content</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
and plunker (CSSit there):
http://plnkr.co/edit/ku7ZXK6uezfZ86cMFhds?p=preview
(when I set absolute position I get strange width...)
You can calculate the height of the .content-wrapper and adjust it.
.content-wrapper {
height: calc(100% - 70px);
}
Output:
/* Styles go here */
html,
body {
height: 100%;
min-height: 100%;
}
body {
min-width: 1024px;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
border: 0;
}
.pull-right {
float: left;
}
.pull-left {
float: left;
}
.main-wrapper {
width: 100%;
height: 100%;
}
aside {
width: 48px;
height: 100%;
float: left;
background: #dedede;
position: absolute;
}
aside.full-nav {
width: 168px;
}
section.wrapper {
width: 100%;
height: 100%;
float: left;
padding-left: 168px;
background: #eeeeee;
}
section.wrapper.full-size {
padding-left: 48px;
}
aside ul.full-width {
width: 100%;
list-style-type: none;
}
aside nav ul li {
height: 34px;
}
aside nav ul li:hover {
opacity: 0.9;
}
aside.full-nav nav ul li.company-name {
width: 100%;
height: 80px;
background: #717cba;
position: relative;
}
aside.full-nav nav ul li.company-name span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
aside nav ul li a {
height: 34px;
line-height: 1;
max-height: 34px;
font-size: 14px;
font-weight: 400;
color: #ffffff;
margin: 5px 0 0 12px;
text-decoration: none;
display: block;
}
aside.full-nav nav ul li a.first {
margin: 20px 0 0 12px;
text-decoration: none;
}
aside nav ul li a:hover {
color: #ffffff;
}
aside nav ul li.company-name .nav-company-overflow {
display: none;
}
aside nav ul li.company-name .nav-company-logo {
display: none;
}
aside.full-nav nav ul li.company-name a {
height: 16px;
color: #ffffff;
margin: 10px 0 0 12px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
position: absolute;
z-index: 20;
}
aside.full-nav nav ul li.company-name .nav-company-overflow {
width: 168px;
height: 80px;
position: absolute;
top: 0;
background: rgba(78, 91, 169, 0.8);
z-index: 15;
display: block;
}
aside.full-nav nav ul li.company-name .nav-company-logo {
width: 168px;
height: 80px;
position: absolute;
top: 0;
z-index: 10;
display: block;
}
aside nav ul li a em {
line-height: 100%;
display: inline-block;
vertical-align: middle;
margin: 0 18px 0 0;
}
aside nav ul li a span {
width: 110px;
display: inline-block;
line-height: 100%;
vertical-align: middle;
max-width: 110px;
}
aside nav ul li a.profile em {
width: 18px;
height: 18px;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -676px;
margin: 6px 8px 0 0;
}
aside.full-nav nav ul li a.profile em {
margin: 0 8px 0 0;
}
aside nav ul li a.contacts em {
width: 20px;
height: 20px;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -224px;
}
aside nav ul li a.events em {
width: 20px;
height: 22px;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -268px;
}
aside nav ul li a.policy em {
width: 20px;
height: 23px;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -310px;
}
aside nav ul li a.admins em {
width: 18px;
height: 18px;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -676px;
}
aside.full-nav nav ul li a span {
display: inline-block;
}
aside nav ul li a span {
display: none;
}
aside .hide-sidebar {
width: 100%;
height: 34px;
background: #455095;
position: absolute;
bottom: 0;
}
#hide-sidebar-btn {
width: 30px;
height: 34px;
line-height: 40px;
background: #394485;
float: right;
text-align: center;
}
#hide-sidebar-btn:hover {
cursor: pointer;
}
aside .collapse-btn-icon {
width: 8px;
height: 15px;
display: inline-block;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -353px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
aside.full-nav .collapse-btn-icon {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.innner-wrapper {
height: 100%;
margin: 0 12px 0 12px;
}
.main-partial {
height: 100%;
}
header {
height: 40px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
header .buttons-header-area {
float: right;
}
header .company-header-avatar {
width: 28px;
height: 28px;
-webkit-border-radius: 28px;
-webkit-background-clip: padding-box;
-moz-border-radius: 28px;
-moz-background-clip: padding;
border-radius: 28px;
background-clip: padding-box;
margin: 7px 0 0 5px;
float: left;
}
header .info {
height: 40px;
line-height: 40px;
margin: 0 5px 0 0;
}
header .info em {
width: 28px;
height: 28px;
display: inline-block;
vertical-align: middle;
background: url(../images/png/profile_spritesheet.png);
background-position: -10px -53px;
}
header .dropdown-toggle {
width: 170px;
height: 40px;
border: none;
padding: 0;
background: transparent;
font-size: 12px;
color: #444444;
}
header .btn-group {
height: 40px;
vertical-align: top;
}
header .btn-group.open {
background: #eeeeee;
}
header .open > .dropdown-menu {
width: 170px;
font-size: 12px;
border-color: #d9d9d9;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.11);
margin: 2px 0 0 0;
}
header .dropdown-toggle:hover {
background: #eeeeee;
}
header .profile-name {
width: 100px;
height: 40px;
line-height: 40px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
header .caret {
height: 40px;
border-top: 6px solid #bfbfbf;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.content {
height: 100%;
margin: 12px 0;
overflow: hidden;
}
.content-wrapper {
background: #ffffff none repeat scroll 0 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
height: calc(100% - 70px);
width: 100%;
}
.content-row.company {
height: 300px;
}
.content-row-wrapper {
margin: 0 18px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="main-wrapper">
<aside class="full-nav" action-bar>
</aside>
<section class="wrapper">
<header>
</header>
<div class="content">
<div class="innner-wrapper">
<div class="main-partial">
<div class="content-wrapper">Content</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
I think the problem is that you are assigning 100% height to the container and this one is getting the relative window height. The problem is the header at the top of the page does not let this to work. Maybe you have to calculate with javascript or something to apply the correct height to that container.
Related
I have a div class, containing buttons, selectboxes and input texts (shared as a div in all my jsp files) in which I set the css style (text-align: center);
While this div is aligned left, I can press and enter all of them.
This is the jsp file I included http://scratchpad.io/first-protest-1771
If I don't include the whole code, my div work no matter how I text-align them.
Could someone tell me, please, what's wrong?
You can use this code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="javascript/lib/jquery-1.11.0.js"></script>
<title>eBanking</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">
#media print {
.example-screen {
display: none;
}
.example-print {
display: block;
}
}
.extraCont {
color: white;
}
td {
/* text-align: center; */
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
body {
margin: 0;
padding: 0;
background: url(bg.jpg) no-repeat;
background-size: cover;
font-family: Arial;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 420px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0, 0, 0, .5);
}
h2 {
margin: 0;
padding: 0 0 20px;
color: #efed40;
text-align: center;
}
h3 {
color: #efed40;
}
h1 {
color: #efed40;
text-align: center;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"],
.loginBox input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
::placeholder {
color: rgba(255, 255, 255, .5);
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: #ff267e;
cursor: pointer;
border-radius: 20px;
}
.loginBox input[type="submit"]:hover {
background: #efed40;
color: #262626;
}
.loginBox a {
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.menuBox ul {
margin: 0 auto;
padding: 0px;
list-style: none;
text-align: center;
}
.menuBox ul li {
float: left;
width: 210px;
height: 40px;
background-color: black;
color: white;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 25px;
}
.menuBox ul li a {
text-decoration: none;
color: white;
display: block;
padding: 0px 15px;
}
.menuBox ul li a:hover {
background-color: green;
}
.menuBox .menuboxli {
text-align: center;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
float: none;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.sanBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 500px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0, 0, 0, .5);
}
.menuBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 870px;
height: 500px;
padding: 80px 40px;
/* box-sizing: border-box; */
/* background: rgba(0,0,0,.5) ; */
}
.mapBox {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
width: 1280px;
height: 600px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0, 0, 0, .5);
}
.user {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-100px/2);
left: calc(50% - 50px);
}
.menuRight ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
}
.menuRight li {
float: right;
}
.menuRight li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.vizCont {
margin-top: 120px;
text-align: center;
}
.white {
color: white;
}
#renunta {}
#renunta a {
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
<div class="menuRight">
<ul>
<li>Logout</li>
</ul>
</div>
<div class="menuBox">
<h1>eBanking</h1>
<ul>
<li class="menuboxli"><a>CONTURIffgfdfg</a>
<ul>
<li>AdministrareCont</li>
<li>VizualizareCont</li>
</ul>
</li>
<li class="menuboxli"><a>OPERATII</a>
<ul>
<li>Transfer</li>
<li>OperatiiInCurs</li>
</ul>
</li>
<li class="menuboxli"><a>RAPOARTE</a>
<ul>
<li>ExtraCONT</li>
</ul>
</li>
<li class="menuboxli">APROBARE</li>
</ul>
</div>
<footer> Tomuta Dan Claudiu dannyetlv #2019 </footer>
</body>
</html>
I am working on web page layouts. I created this one.
https://codepen.io/iamgonge/pen/paOxxb
I dont understand why the .container .left-side and .right-side elements start at the top of the browser and not below the header. Shouldn't the layout out be header->section(hero)->section(one)? I would think that the top of any of those three divs would be underneath the header but they are not. What amy I not understanding here?
body {
font-family: Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.container {
background: #333338;
display: inline-block;
width: 60%;
height: 800px;
}
header {
position: fixed;
background: #10105f;
width: 100%;
height: 150px;
}
.main-links a {
text-decoration: none;
color: #fff;
font-size: 20px;
text-transform: uppercase;
}
.main-links a:hover {
color: #00843d;
}
.main-links a:active {
color: red;
}
.left-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: left;
}
nav {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}
nav ul {
margin: auto;
padding: 0;
display: inline-block;
list-style: none;
color: #fff;
// border: 1px solid #00843D;
width: 60%;
;
}
nav li {
display: inline-block;
margin: 5px -3px;
padding: 5px 10px;
// border: 1px solid#fff;
}
nav li:hover {
background: rgba(255, 255, 255, 0.25);
}
nav li:active {
border-bottom: 2px solid red;
color: red;
}
.nav-left {
float: left;
height: 50px;
width: 20%;
padding-bottom: 96px;
// border: 1px solid #00843D;
}
.nav-right {
float: right;
height: 50px;
width: 20%;
padding-bottom: 96px;
//border: 1px solid #00843D;
}
.nav-center {
position: relative;
padding-bottom: 21px;
margin: 0 auto;
height: 75px;
width: 300px;
// border: 1px solid #00843D;
}
.nav-right p a {
font-size: 16px;
text-decoration: none;
color: #fff;
}
.nav-right p a:hover {
color: #00843d;
}
.nav-right p {
margin: 20px;
padding: 0;
color: #fff;
}
.one {
display: block;
width: 100%;
height: 800px;
background: #080853;
}
.right-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: right;
}
.rss-title,
.rss-date {
margin: 0px!important;
}
.rss-feed {
margin: 10px 5px 20px 0px;
}
.rss-date {
padding: 0;
font-size: 12px;
font-style: italic;
}
.hero,
.one {
position: relative;
height: 100%;
}
.success {
display: block;
text-align: center;
margin-top: 20%;
font-size: 69px;
color: #00843d;
// margin-left: auto;
// margin-right: auto;
}
.success:hover {
font-size: 71px;
}
#timestamp {
margin: 10px 5px 20px 0px;
text-align: center;
color: #fff;
font-size: 16px;
}
#timestamp,
.rss-feed {
background: #080853;
padding: 10px;
height: 110px;
}
#media (min-width:1530px) {}
<body>
<header>
<div class="nav-left">
<div id="timestamp"></div>
</div>
<div class="nav-right"></div>
<div class="nav-center"></div>
<nav>
<ul class="main-nav">
<li class="main-links">home</li>
<li class="main-links">about</li>
<li class="main-links">projects</li>
<li class="main-links">portal</li>
<li class="main-links">links</li>
</ul>
</nav>
</header>
<section="hero">
<div class="left-side"></div>
<div class="right-side"></div>
<div class="container">
<div class="success"></div>
</div>
<!--***Container***-->
</section>
<section class="one"></section>
</body>
The reason is that you have applied position: fixed; to your <header> tag. When you do this you must account for the height of the header and push down other elements to restore the layout.
I have a rather nice navbar but unfortunatly, when I resize my laptop window a bit, the text starts overlapping. It seems to be stuck in the middle and wont make use of all the space, despite me having checked throughly that here are no padding or margins causing this.
This is how it looks on a big screen
this is the problem when I narrow the window a bit
Could someone please help me figure out why this is happening, please?
I would be very grateful.
My main CSS navbar (displayed on small screens):
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* I tilfælde af at der skal cleares */
br.tabula {
clear: both;
}
a {
text-decoration: none;
color: orange;
}
/*Fjerner underline osv.*/
a:link, a:visited {}
a:hover {}
a:active {}
/***********************************************************/
/* Specielle! */
/***********************************************************/
/***********************************************************/
/* Billeder! Img! ****** Video! */
/***********************************************************/
#burger {
width: 15px
}
img.lille-l {
float: left;
margin: 8px 20px 20px 0;
width: 160px;
height: 165px;
}
img.mellem-r {
float: right;
padding: 20px;
width: 350px;
}
img.top {
margin: 8px 0 20px 0;
}
.sponsor {
width: 50px;
height: 50px;
border: 0;
padding-bottom: 22px;
}
.klik {
padding: 5px;
box-shadow: 3px 5px #888888;
}
#socialbar img {
width: 30px;
height: 30px;
}
iframe {
width: 390px;
height: 250px;
float: left;
padding: 10px 15px 10px 0px;
border: none;
}
/***********************************************************/
/* Tekst! */
/***********************************************************/
h1, h2, h3 {
margin: 0 0 1% 0
}
/*****************************************************************************/
/* HEADER! ****** BANNER! */
/******************************************************************************/
#bannerkat {
margin-top: 1%;
width: 100%;
height: 46px;
background-image: url("billeder/katte/mathilde.jpg");
background-size: cover;
color: white;
border-bottom: solid 1px #444444;
}
/******************************************************************************/
/* NAV! */
/******************************************************************************/
/* Menu Button */
#menu-button {
z-index: 1;
text-align: center;
padding: 5px 5px 5px 5px;
position: absolute;
position: fixed;
top: 15px;
right: 5px;
transition: all 0.2s ease;
cursor: pointer;
width: 50px;
height: 35px;
background-color: #19c589;;
border-radius: 5px; /* pæne runde hjørner*/
-moz-border-radius: 5px; /* Fox*/
-webkit-border-radius: 5px; /* IE */
}
nav p {display:none;}
#mainlogo {display:none;}
#menu-button .bar {
display: block;
height: 4px;
background: black;
margin: 4px;
}
#menu-checkbox {
display: none;
}
#menu-checkbox:checked ~ #menu-button {
transform: rotate(90deg);
}
nav ul {
position: fixed;
display: none;
width: 100%;
}
#menu-checkbox:checked ~ #menu {
display: block;
}
#menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
border-radius: 20px;
overflow: hidden;
}
#menu li {
width: 100%;
background-color: beige;
text-align: center;
padding: 7px 2px 7px 2px;
}
This is the code for the nav in the images, displayed on larger screens with media query:
#mainlogo {display: block;}
#bannerkat {display: none;}
#menu-button {
display: none;
}
#menu {
display: block;
border-radius: 0;
text-align: center;
position: relative;
}
.mainheader {width: 100%; padding: 0 auto;
margin: 0}
#menu ul {width:100%; padding: 0 auto;
margin: 0}
#menu li {
display: inline-block;
width: 12%;
background: none;
padding: 0 ;
margin: 0;
}
#menu li a {
font-size: normal;
text-decoration: none;
color: #505050;
text-align: center;
line-height: 75px;
text-transform: uppercase;
transition: all .4s ease;
display: inline-block;
width: 100%;
border-top: 5px solid #80bb80;
}
#menu li:nth-of-type(2) a {
border-top: 5px solid #9b5e5e;
}
#menu li:nth-of-type(3) a {
border-top: 5px solid #5656b3;
}
#menu li:nth-of-type(4) a {
border-top: 5px solid grey;
}
#menu li a:hover {
border-top: 5px solid darkgreen;
}
}
nav { font-family: helvetica, arial, sans-serif;}
/* højde for billed-sektion*/
section {min-height: 204px;}
#baggrund {
background:
url("billeder/katte/sophi.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;}
#mainlogo {
font-size: 37px;
color: white;
border: 7px solid white;
display: inline-block;
padding: 10px;
position: absolute;
height: 123px;/* hvid boks*/
line-height: 25px;
top: 202px;
margin-top: -180px;
left: 50%;
width: 600px;
text-align: center;
margin-left: -300px;
text-shadow: 1px 2px 1px #000;
box-shadow: 1px 2px 1px #000; }
/* og omegns */
#mainlogo p {font-size: 20px; padding:5px;}
.vector{width: 60px;
margin-left: -450px;
margin-top: -36px;}
.mainheader {margin-top: 10px;}
/* Navigations menuen (links osv) */
#nav_wrap {
background: #f9f4ea;
width: 100%;
white-space: nowrap;
float: left;
height: auto;;
position: relative;
margin-top: 144px;
bottom: 0;
overflow: hidden;
z-index: 00;
opacity: .9;
box-shadow: 0px 1px 4px beige;
padding: 0;
}
/* MAIN! BODY! *********************************************************/
body {
background-image: url("billeder/bgorange.jpg");
background-size: cover;
color: black;
/* Base font size (14px)? 7%*/
font-family: sans-serif, arial;
line-height: 1.5;
text-align: left;
}
.body { width: 90%;}
.maincontent {
line-height: 20px;
width: 79%;
float: left;
border-radius: 5px;
/* pæne runde hjørner*/
-moz-border-radius: 5px;
/* Fox*/
-webkit-border-radius: 5px;
/* IE */
}
#Ginger
You should remove fixed width: 12% from #menu li.
#menu li word needs to be wrapped and font-size should be small on lower screen size. i.e word-wrap:break-word
My mobile css hamburger menu isn't working, if I click on it it doesn't stay open, and I have no clue on how to open the dropdown menu inside the hamburger menu. Also my nav title (.logo) is hard to center, does anyone have a solution for that?
JSFidlle for easy viewability (Mobile css & Style.css in are merged here only the background is missing)
Thanks for any help, and sorry if my code looks messy :/
My Code:
Index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, I'm Sten</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="nav animated slideInDown">
<img src="img/hamburger.png" alt="" class="hamburger">
<div class="logo">
<h1>STEN</h1>
</div>
<ul>
<li>
PAGE
<ul>
<li>DROPDOWN</li>
<li>DROPDOWN</li>
</ul>
</li>
<li>PAGE</li>
<li>PAGE</li>
<li>PAGE</li>
</ul>
</div>
<div class="landing animated fadeIn">
<div class="container">
<h1>STEN</h1>
<hr>
<p>I'M A</p>
<h2>-OCCUPATION-</h1>
<button>KNOP</button>
<button>KNOP</button>
</div>
<div class="scroll" onClick="">
</div>
</div>
<div class="about">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="main.js"></script>
</body>
</html>
Style.css (Master css file)
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 300;
font-size: 50px;
}
.nav {
width: 100%;
height: 10%;
background-color: #F2F2F2;
border-bottom: 1px solid #E4E4E4;
text-align: center;
position: fixed;
z-index: 999;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav .hamburger {
display: none;
}
.nav .logo {
float: left;
margin-left: 10%;
}
.nav .logo h1 {
color: #000;
line-height: 10vh;
font-size: 32px;
}
.nav > ul {
height: 100%;
width: auto !important;
display: inline-block;
float: right;
margin-right: 10%;
}
.nav > ul > li {
display: inline-block;
list-style: none;
padding: 0 20px 0 20px;
vertical-align: top;
position: relative;
}
.nav > ul > li:first-child > a:after {
width: 6px;
height: 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
position: absolute;
margin-top: calc(5vh - 5px);
margin-left: 8px;
content: "";
transform: rotate(45deg);
}
.nav > ul > li > ul {
display: none;
margin-left: -50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav > ul > li > ul > li {
list-style: none;
background-color: #F2F2F2;
padding: 0 20px 0 20px;
position: relative;
}
.nav li:hover > ul {
display: block;
position: absolute;
}
.nav ul a {
color: #000;
text-decoration: none;
line-height: 10vh;
}
.nav a:hover {
color: #999;
}
.landing {
padding-top: 10vh;
height: 90%;
width: 100%;
background: url('../img/bg.jpg');
background-size: cover;
background-position: center;
position: fixed;
text-align: center;
color: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
z-index: 0;
}
.landing:before {
content: " ";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.landing .container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 100%;
}
.landing .container h1 {
letter-spacing: 6px;
font-size: 78px;
}
.landing .container p {
font-size: 20px;
font-weight: 100;
}
.landing hr {
width: 300px;
margin: 25px 0 25px 0;
margin-left: calc(50% - 150px);
border-bottom: 3px solid #EF2D56;
}
.landing button {
width: 200px;
padding: 24px;
margin-top: 20px;
position: relative;
color: #FFF;
background-color: transparent;
border: 1px solid #FFF;
}
.landing button:first-child {
margin-right: 1%;
}
.landing button:last-child {
margin-left: 1%;
background-color: #EF2D56;
border: 1px solid #EF2D56;
}
.landing button:hover {
cursor: pointer;
}
.landing button:focus {
outline: none;
}
.scroll {
width: 16px;
height: 16px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
position: absolute;
content: " ";
transform: rotate(45deg);
bottom: 0;
margin-bottom: 30px;
margin-left: calc(50% - 8px);
cursor: pointer;
}
.about {
height: 200%;
width: 100%;
background-color: #FFF;;
z-index: 50;
position: absolute;
margin-top: 100vh;
}
Mobile css file
#media only screen and (max-device-width: 850px){
.nav .hamburger {
height: 6vh;
width: 6vh;
display: inline-block;
float: left;
margin: 2vh 0 0 2vh;
}
.nav .logo {
position: relative;
}
.nav > ul {
display: none;
float: none;
margin-top: 10vh;
}
.nav .hamburger:hover ~ ul {
display: block;
width: 100%;
margin: 0;
}
.nav > ul > li {
display: block;
background-color: #F2F2F2;
}
.about {
margin-top: 100vh;
}
}
Change the way you wrote media query, Try this way:
#media only screen and (max-width: 850px) {
//Your mobile CSS code
}
See the fiddle: https://jsfiddle.net/7xjyutuf/1/
chnage your media query into this #media only screen and (max-width:850px){}.
If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;
If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.
for more info you can visit this http://www.menucool.com/3613/max-device-width-vs-max-width-Which-one-should-I-use
check this fiddle https://jsfiddle.net/ok7hmodo/1/
For making the menu static use Jquery.Please check this https://jsfiddle.net/7xjyutuf/10/.
This is a css only solution.You have to make the ul display block when user hovers on it
https://jsfiddle.net/tucsgohy/1/
I have this problem where Firefox and IE refuse to render a border behind an image no matter what I do, while Chrome and Opera do fine. I've moved the div containing the arrow all over the place, even tried to force it with z-index, but it won't budge. Any advice?
Chrome/Opera and IE/Firefox:
I have a JSFiddle setup here: http://jsfiddle.net/3Lqoxv2r/
CSS:
html {
height: 100%;
background: #eee;
}
body {
background: url(../img/background.jpg);
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
height: 100%;
overflow: hidden;
background-position: center;
font-family: Helvetica;
}
body.welcome {
background: url(../img/welcome_background.jpg);
background-size: cover;
background-position: center;
}
p {
margin: 0px;
}
::-webkit-scrollbar {
width: 1px;
}
.wrapper {
overflow-y: scroll;
height: calc(100% - 90px);
}
header {
position: static;
top: 0;
height: 60px;
}
header .logo {
float: left;
width: 256px;
}
header .logo .container {
padding: 0 0 0 128px;
height: 60px;
background: white;
}
header .logo .container img {
margin: 13px 0 0 0;
width: 63px;
height: 66px;
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-o-filter: hue-rotate(0deg);
-ms-filter: hue-rotate(0deg);
}
header .menu {
float: left;
background: white;
width: calc(100% - 256px);
height: 100%;
}
header .menu nav {
float: left;
}
header .menu nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header .menu nav ul li {
float: left;
width: 128px;
line-height: 57px;
letter-spacing: -2px;
text-align: center;
font-size: 19px;
text-transform: uppercase;
color: #8a8a8a;
border-top: 3px solid white;
}
header .menu nav ul li.active {
color: #f05555;
border-top: 3px solid #f05555;
}
header .menu .container {
float: right;
padding-right: 128px;
}
.before {
content: "";
position: absolute;
top: 60px;
left: 130px;
border-top: 23px solid white;
border-left: 28px solid transparent;
border-right: 28px solid transparent;
}
div.content {
width: 100%;
height: calc(100% - 90px);
}
div.content .menu {
height: 50px;
}
div.content .container {
overflow-y: scroll;
height: 100%;
margin: 0 128px 0 128px;
width: calc(100% - 256px);
background: white;
}
footer {
position: static;
bottom: 0;
height: 30px;
background: white;
padding: 0 0 0 128px;
line-height: 30px;
font-size: 10px;
color: #8a8a8a;
}
You have used position: static for header tag. Use position: relative instead, it will work in ff and IE11.