I want to make a fixed-header, with the clickable links on the left and our logo on the right.
No issues with floating the text + image to it's corresponding place and to make the header take up the whole width of the screen. Once I make it "fixed" the header's width shrinks to the width of the 3 links I have added.
The width of the header is already set to 100% and I cannot seem to find what the underlying issue is
html {
scroll-behavior: smooth;
}
.clear {
clear: both;
}
header {
width 100%;
height: 100px;
position: fixed;
color: rgb(255, 0, 0);
top: 0;
left: 0;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
z-index: 999;
}
footer {
height: 30px;
color: black;
text-align: center;
box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1);
}
header ul {
list-style: none;
float: left;
text-transform: uppercase;
font-family: 'Source Sans Pro';
font-weight: bold;
}
header ul li {
float: left;
margin-left: 60px;
line-height: 100px;
}
header ul a {
text-decoration: none;
}
header ul a:hover {
color: rgb(200, 0, 0);
}
.thumb-container {
max-width: calc(960px + 40px);
margin: 110px auto 0 auto;
}
.thumb-container a {
width: calc(960px / 3);
height: calc(960px / 3);
background: aqua;
float: left;
margin: 0 5px 10px 5px;
}
#media screen and (max-width: 1000px) {
.thumb-container {
max-width: 660px;
/* in midden zetten */
background: black;
}
}
#media screen and (max-width: 660px) {
.thumb-container {
max-width: 100%;
/* in midden zetten */
background: black;
}
.thumb-container a {
width: 100%;
/* maakt containers volledige breedte*/
margin: 0 0 10px 0;
}
}
<header>
<nav>
<ul>
<li> Home </li>
<li> Benodigdheden </li>
<li> Over ons </li>
</ul>
</nav>
<img src="img/" alt="lol">
</header>
<main>
<div class="thumb-container">
<div class="clear"></div>
</div>
</main>
<footer> Test footer text</footer>
Try this
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="navbar">
Home
Benodigdheden
Contact
</div>
<div class="main">
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>
You have missed a ":" for the width property.
Kindly correct it.
You are missing a ":" when setting your width!
It should be width: 100%; not width 100%;
html {
scroll-behavior: smooth;
}
.clear {
clear: both;
}
header {
width: 100%;
height: 100px;
position: fixed;
color: rgb(255, 0, 0);
top: 0;
left: 0;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
z-index: 999;
}
footer {
height: 30px;
color: black;
text-align: center;
box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1);
}
header ul {
list-style: none;
float: left;
text-transform: uppercase;
font-family: 'Source Sans Pro';
font-weight: bold;
}
header ul li {
float: left;
margin-left: 60px;
line-height: 100px;
}
header ul a {
text-decoration: none;
}
header ul a:hover {
color: rgb(200, 0, 0);
}
.thumb-container {
max-width: calc(960px + 40px);
margin: 110px auto 0 auto;
}
.thumb-container a {
width: calc(960px / 3);
height: calc(960px / 3);
background: aqua;
float: left;
margin: 0 5px 10px 5px;
}
#media screen and (max-width: 1000px) {
.thumb-container {
max-width: 660px;
/* in midden zetten */
background: black;
}
}
#media screen and (max-width: 660px) {
.thumb-container {
max-width: 100%;
/* in midden zetten */
background: black;
}
.thumb-container a {
width: 100%;
/* maakt containers volledige breedte*/
margin: 0 0 10px 0;
}
}
<header>
<nav>
<ul>
<li> Home </li>
<li> Benodigdheden </li>
<li> Over ons </li>
</ul>
</nav>
<img src="img/" alt="lol">
</header>
<main>
<div class="thumb-container">
<div class="clear"></div>
</div>
</main>
<footer> Test footer text</footer>
You can fix that by setting the property right: 0;. If you look at my example I would recommend you that you remove the float: left; and use display: flex; instead. I changed your example to reflect what I mean. Hope this helps.
I recommend you to look at this post and video
css-tricks.com
Wes Bos (it is free)
html {
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
}
.header {
position: fixed;
top: 0;
right: 0;
left: 0;
display: flex;
align-items: center;
height: 100px;
color: rgb(255, 0, 0);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
z-index: 2;
background-color: deepskyblue;
}
.header__logo {
width: 4rem;
height: 2rem;
margin-left: auto;
background-color: aqua;
}
.navigation-links {
display: flex;
list-style: none;
text-transform: uppercase;
font-family: 'Source Sans Pro';
font-weight: bold;
}
.navigation-links__link {
margin-left: 60px;
line-height: 100px;
}
.navigation-links__link a {
display: block;
text-decoration: none;
}
.navigation-links__link a:hover {
color: rgb(200, 0, 0);
}
footer {
height: 30px;
color: black;
text-align: center;
box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1);
}
.thumb-container {
display: flex;
flex-wrap: wrap;
max-width: calc(960px + 40px);
margin: 110px auto 0 auto;
}
.thumb-container a {
width: calc(960px / 3);
height: calc(960px / 3);
background: aqua;
margin: 0 5px 10px 5px;
}
#media screen and (max-width: 1000px) {
.thumb-container {
max-width: 660px;
/* in midden zetten */
background: black;
}
}
#media screen and (max-width: 660px) {
.thumb-container {
max-width: 100%;
/* in midden zetten */
background: black;
}
.thumb-container a {
width: 100%;
/* maakt containers volledige breedte*/
margin: 0 0 10px 0;
}
}
<header class="header">
<nav class="navigation">
<ul class="navigation-links">
<li class="navigation-links__link"> Home </li>
<li class="navigation-links__link"> Benodigdheden </li>
<li class="navigation-links__link"> Over ons </li>
</ul>
</nav>
<!--<img src="img/" alt="lol" class="header__logo">-->
<div class="header__logo"></div>
</header>
<main>
<div class="thumb-container">
</div>
</main>
<footer> Test footer text</footer>
Related
there is full code of my plugin > https://codepen.io/doodlemarks/pen/aFcly
in my code element #slider ul li have width bigger than 900px and it is not scaling smaller on device with smaller resolution.
can anyone help me how to improve it and make it responsible to scale ul li element on devices e.g. mobile?
html/css:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}
a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
<h1>Incredibly Basic Slider</h1>
<div id="slider">
>
<
<ul>
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
</div>
<div class="slider_option">
<input type="checkbox" id="checkbox">
<label for="checkbox">Autoplay Slider</label>
</div>
You can use #media CSS at-rule in your code just for example
<style>
/* First Example */
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
/* Second Example */
#media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
</style>
You can learn more about responsive web by these links
https://www.w3schools.com/css/css_rwd_intro.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/#media
I am having an issue with this new website for my local Church. I followed this tutorial to create a burger menu with just HTML and CSS: https://www.youtube.com/watch?v=xMTs8tAapnQ&list=PLu-osytzWPuUXmu5BZTuHNRyMBpZS1bsG&index=4&t=0s
Now after learning how to do it, the issue I am running into is I am trying to put an image in the body under the navigation menus, however, when I make my web resolution smaller and click on the burger menu. It is under the image.
I appreciate any help, I tried to look for it everywhere, or I tried at least. I am new to coding. So thank you for your time spent helping me. I really do appreciate it.
**HTML**
<!DOCTYPE html>
<html>
<head>
<title>Church of Christ</title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<meta name="viewport" contet="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> The Church of Christ </h1>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
Home
Contact
About
<span>Members</span>
</div>
</div>
<h2> location </h2>
<img src="IMG_2597.jpg" alt="Church of Christ">
</body>
</html>
**CSS**
html, body {width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", "sans sherif";
}
.nav {
border-bottom: 1px solid gold;
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
text-decoration: none;
color: rgb(255, 255, 255);
margin: 0 10px;
line-height: 70px;
clear: right;
}
span {
color: gold;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
color: gold;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid gold;
margin: 0;
}
#toggle:checked + .menu {
display: block;
}
}
h1 {
text-align: center;
font-size: 50px;
margin: 10px 0px -10px 0px;
color: gold;
}
a {
font-size: 25px;
}
h2 {
text-align: center;
font-size: 45px;
color: rgb(255, 255, 255);
}
img {
width: 100%;
height: auto;
}
body {
background-color: rgb(0, 0, 0);
}
just remove css clear:right and add float:right
.menu {
margin: 0 30px 0 0;
float: right;
}
.menu a {
text-decoration: none;
color: white;
margin: 0 10px;
line-height: 70px;
}
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
html {
font-family: "helvetica neue", "sans sherif";
}
.nav {
border-bottom: 1px solid gold;
text-align: right;
height: 70px;
line-height: 70px;
/* this line changed */
position: relative;
}
.menu {
margin: 0 30px 0 0;
}
/* i advice,that a tag will made bacgraund-color,because when dropdown menu covering image */
.menu a {
text-decoration: none;
color: rgb(255, 255, 255);
margin: 0 10px;
line-height: 70px;
clear: right;
/* background-color: blue; */
}
span {
color: gold;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
color: gold;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid gold;
margin: 0;
}
#toggle:checked + .menu {
display: block;
}
}
h1 {
text-align: center;
font-size: 50px;
margin: 10px 0px -10px 0px;
color: gold;
}
a {
font-size: 25px;
}
h2 {
text-align: center;
font-size: 45px;
color: rgb(255, 255, 255);
}
img {
width: 100%;
height: auto;
}
body {
background-color: rgb(0, 0, 0);
}
I have created a website for my dad as a favour for putting me through design school. After uploading it to the network hosting site that my dad uses I discovered that when opening the site on my iPhone, all the text (or most of it) completely disappears. I am not sure what is doing this because when I test the site through Chrome Developer Tools, JsFiddle, etc it appears to be fine. The site is pretty simple so I am using Flexbox for the layout. Let me know if you need any other details.
I am not sure what is going on and would very much appreciate it if someone could take a poke around and point me in the right direction. I am providing a JsFiddle that includes the homepage html and the relevant CSS as well as posting it here. Thanks.
https://jsfiddle.net/ericvnwk/vfnejmw7/2/
The HTML:
<title>
Fairfield Tree Nurseries Inc.</title>
<script src="https://use.typekit.net/hlp7xgg.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<body>
<div class="header">
<img class="logo" src="https://s1.postimg.org/1ic483yqhr/logo.png" alt="Fairfield Tree Nurseries Inc." width="80px" height="80px">
<div class="title"> Fairfield Tree Nurseries Inc.
</div>
<nav class="navbar navtop">
<ul>
<li>About</li>
<li>Products</li>
<li>Shipping</li>
<li>Location</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="header-border">
</div>
<div class="main">
<div class="fw-content fw-top">
<div class="fw-image">
<img src="https://s1.postimg.org/1ic4840vnj/welcome.jpg" alt="Welcome to Fairfield Tree Nurseries">
</div>
<div class="cntr-type">
<h2> Welcome to </h2>
<h1> Fairfield Tree Nurseries </h1>
</div>
</div>
<div class="arrow">
<div class="down-arrow"></div>
</div>
<div class="fw-content below">
<div class="fw-image">
<img src="https://s1.postimg.org/1lvq5tqycf/about-home.jpg" alt="Welcome to Fairfield Tree Nurseries">
</div>
<div class="cntr-type">
<h4 id="green"> We are a wholesale tree nursery producing field <br> grown nursery stock in the Lower Fraser Valley <br> community of Chilliwack, British Columbia. </h4>
<div class="btn" id="green-btn">
<a href="about.html">
<h3>Learn More</h3></a>
</div>
</div>
</div>
<div class="fw-content">
<div class="fw-image">
<img src="https://s1.postimg.org/51y1xx3dpr/field-wide.jpg" alt="Field wide angle">
</div>
<div class="cntr-type up">
<h4 class="shadow" id="white"> We offer an expanded product line to include a wide <br> range of field grown grafted conifers, specialty broadleaf <br> evergreen/deciduous shrubs and specimen plant material. </h4>
<div class="btn btn-shadow" id="white-btn">
<a href="products.html">
<h3 class="">Discover More</h3></a>
</div>
</div>
</div>
<div class="hw-content hide">
<div class="hw-left">
<div class="cntr-type cntr-type-special">
<h4 id="white"> Our products can be found throughout <br> North America and we pride ourselves in <br> providing expert service and support to all <br> of our clients, wherever they are. </h4>
<div class="btn" id="white-btn">
<a href="shipping.html">
<h3>Shipping Info</h3></a>
</div>
</div>
</div>
<div class="hw-right">
<img src="https://s1.postimg.org/2lbtizus33/leaves-sky-wide.jpg">
<div class="cntr-type cntr-type-special">
<h4 id="green"> We are located in the Lower <br> Fraser Valley community of Chilliwack, <br> British Columbia, Canada. </h4>
<div class="btn" id="green-btn">
<a href="location.html">
<h3>View Map</h3></a>
</div>
</div>
</div>
</div>
<div class="fw-content hidden-content empty bkg-green">
<div class="cntr-type">
<h4 id="white"> Our products can be found throughout <br> North America and we pride ourselves in <br> providing expert service and support to all <br> of our clients, wherever they are. </h4>
<div class="btn" id="white-btn">
<a href="shipping.html">
<h3>Shipping Info</h3></a>
</div>
</div>
</div>
<div class="fw-content hidden-content">
<div class="fw-image">
<img src="https://s1.postimg.org/2lbtizus33/leaves-sky-wide.jpg">
</div>
<div class="cntr-type">
<h4 id="green"> We are located in the Lower <br> Fraser Valley community of Chilliwack, <br> British Columbia, Canada. </h4>
<div class="btn" id="green-btn">
<a href="location.html">
<h3>View Map</h3></a>
</div>
</div>
</div>
<div class="fw-content empty">
<div class="cntr-type">
<h4 id="green"> For more information or to place an order please contact us, <br> we would love to hear from you. </h4>
<div class="btn" id="green-btn">
<a href="contact.html">
<h3>Contact Us</h3></a>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-main">
<img src="https://s1.postimg.org/8ax5ukoq6n/logo-white.png">
<!--<div class="logo-footer">
</div> -->
<div class="title" style="color: white;"> Fairfield Tree Nurseries </div>
<nav class="navbar navfoot">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Shipping</li>
<li>Location</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div class="copyright">
<p> © 2017 Fairfield Tree Nurseries Inc. All rights reserved.
</div>
</body>
And the CSS:
body {
margin: 0 auto;
font-family: "proxima-nova-alt", sans-serif;
text-align: center;
position: relative;
color: #707070;
}
/*================ NAV & HEADER STYLES + FOOTER ==================*/
.header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
top: 0;
height: 120px;
padding: 15px 40px 15px 40px;
max-width: 1200px;
margin: 0 auto;
}
.header-border {
background-color: #009948;
height: 2px;
width: 100%;
}
.title {
font-size: 24px;
font-weight: 300;
color: #009948;
padding-left: 20px;
text-align: left;
}
.navbar {
margin-left: auto;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
}
.navbar li {
display: inline-block;
font-weight: 400;
font-size: 16px;
padding-left: 4vw;
}
.navbar a {
text-decoration: none;
color: #969696;
text-transform: uppercase;
letter-spacing: 2px;
transition: .3s color;
}
.navbar a:hover {
color: #009948;
}
.footer {
width: 100%;
max-width: 1200px;
background-color: #333;
}
.footer-main {
height: 200px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 20px 80px 0px 80px;
margin: 0 auto;
}
.footer h6 a {
transition: .3s color;
}
.footer h6 a:hover {
color: #009948;
}
.copyright {
height: 80px;
padding: 20px;
color: #505050;
background-color: rgba(10, 10, 10, .5);
padding: 40px 80px 10px 80px;
}
.copyright p {
text-align: left;
font-size: 16px;
letter-spacing: 1px;
font-weight: 400;
max-width: 1500px;
margin: 0 auto;
}
.navfoot a {
color: #707070;
transition: .3s color;
}
.navfoot a:hover {
color: white;
}
/*================ PAGES STYLES ===================*/
.main {
max-width: 1500px;
margin: 0 auto;
overflow: hidden;
}
/*=============== Home PAGE ================*/
.fw-content {
display: flex;
flex-direction: column;
width: 100%;
height: 600px;
align-items: center;
justify-content: center;
position: relative;
z-index: 3;
}
.fw-top {
border-top: 2px solid white;
}
.below {
margin-top: -30px;
position: relative;
z-index: 1;
}
.fw-image img {
max-height: 600px;
}
.hw-content {
display: flex;
flex-direction: row;
width: 100%;
height: 600px;
position: relative;
background-color: #009948;
max-width: 1500px;
margin: 0 auto;
margin-top: -2px;
}
.hw-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
}
.hw-right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
width: 50%;
margin-left: auto;
}
.hw-right img {
height: 600px;
}
.cntr-type {
position: absolute;
left: auto;
}
.up {
margin-top: -60px;
}
.arrow {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
}
.down-arrow {
margin: -2px;
width: 0;
height: 0;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-top: 30px solid #009948;
}
/*================ TEXT STYLES ===================*/
h1 {
font-size: 60px;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
}
h2 {
margin: 0;
font-size: 36px;
font-weight: 100;
letter-spacing: 2px;
color: white;
text-transform: uppercase;
}
h3 {
font-size: 12px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
}
h4 {
font-size: 24px;
line-height: 36px;
font-weight: 300;
letter-spacing: 0.1px;
}
h5 {
text-align: left;
font-size: 24px;
font-weight: 400;
color: #009948;
margin: 10px 0 0 0;
letter-spacing: 1px;
}
h6 {
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
margin: 20px 0 0 0;
}
p {
font-size: 20px;
line-height: 28px;
font-weight: 300;
letter-spacing: 0.1px;
text-align: left;
}
a {
text-decoration: none;
color: inherit;
}
.currentlink a {
color: #009948;
}
#green {
color: #009948;
}
#grey {
color: #2f2f2f;
}
#white {
color: #fff;
}
.shadow {
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
/*================ BUTTON STYLES ====================*/
.btn {
width: 150px;
height: 30px;
margin: auto;
border: 2px solid;
border-radius: 20px;
line-height: 30px;
}
.btn a {
text-decoration: none;
}
#green-btn {
background-color: rgba(0, 153, 72, 0);
border-color: #009948;
color: #009948;
transition: .5s background-color, color;
margin-bottom: 15px;
}
#white-btn {
background-color: rgba(255, 255, 255, 0);
border-color: #fff;
color: #fff;
transition: .5s background-color, color;
}
#green-btn:hover {
border-color: #009948;
background-color: rgba(0, 153, 72, 1);
color: #fff;
}
#white-btn:hover {
border-color: #fff;
background-color: rgba(255, 255, 255, 1);
color: #009948;
text-shadow: none;
}
.btn-shadow {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
/*================================
RESPONSIVE Styling
================================*/
#media screen and (min-width:500px) {
.hidden-content {
display: none;
}
}
#media screen and (max-width:500px) {
.header {
flex-direction: column;
height: inherit;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.title {
text-align: center;
width: 100%;
padding: 0;
margin-top: 10px;
}
.navbar {
margin: 15px 0 0 0;
width: 100%;
padding: 0;
}
.navbar ul {
display: flex;
flex-direction: column;
}
.navbar li {
font-weight: 400;
padding: 7.5px 0 7.5px 0;
border-top: 2px solid #009948;
width: 100%;
}
.navbar a {
text-decoration: none;
width: inherit;
margin: 100px;
}
.navbar a:active {
background-color: white;
color: #009948;
}
.navtop {
padding: 10px 0 0 0;
}
.main {
overflow: hidden;
}
.arrow {
margin-top: -4px;
}
.cntr-type {
padding: 0 5%;
}
.up {
margin-top: 0px;
}
.btn {
width: 120px;
height: 30px;
margin: auto;
border: 2px solid;
border-radius: 20px;
line-height: 30px;
}
.btn-shadow {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
box-shadow: inset 2px 2px 40px rgba(255, 255, 255, 0.5);
}
.hide {
display: none;
}
.hidden-content {
display: flex;
}
.footer {
flex-direction: column;
justify-content: center;
height: inherit;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
}
.footer-main {
display: flex;
flex-direction: column;
padding: 30px 0 0 0;
height: inherit;
}
.navfoot {
background-color: #707070;
padding: 0px;
}
.navfoot li {
border-color: #333;
}
.navfoot a {
color: #333;
}
.copyright {
padding: 20px 0 0 0;
}
.copyright p {
width: 80%;
}
.questions {
padding-top: 0;
}
.question-box {
margin-top: 30px;
}
/*==============FONT STYLES==============*/
h1 {
font-size: 36px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 10px;
font-weight: 400;
}
h4 {
font-size: 16px;
line-height: 24px;
}
br {
display: none;
}
p {
font-size: 18px;
}
}
#media screen and (max-width:1024px) and (min-width:500px) {
.header {
flex-direction: column;
padding: 20px 0 0 0;
height: inherit;
}
.navbar {
margin: 0;
}
.navtop {
padding: 10px 0 0 0;
}
.title {
margin: 10px 0 10px 0;
}
}
#media screen and (max-width:1024px) {
.fw-content {
height: inherit;
overflow: hidden;
}
.fw-image {
height: inherit;
}
.fw-image img {
width: auto;
height: 45vh;
display: flex;
justify-content: space-between;
}
.fw-top {
border: none;
}
.cntr-type {
padding: 0 10%;
}
.cntr-type-special {
padding: 0;
width: 300px;
}
.cntr-type-special h4 {
font-size: 20px;
line-height: 32px;
}
.empty {
height: 60vh;
}
.empty-s {
height: 40vh;
}
h4 br {
display: none;
}
.question-mark {
margin-top: -30px;
}
}
#media screen and (min-width: 501px) {
.navtop {
padding: 10px 0 10px 0;
}
}
#media screen and (max-width: 700px) {
.bkg-green {
background-color: #009948;
}
.hw-contact .contact-info {
display: none;
}
.contact-info {
width: 75%;
}
.fw-contact {
padding: 15px 0 25px 0;
}
.contact-form {
width: 100%;
}
.contact-form form {
width: 90%;
}
}
#media screen and (min-width:700px) {
.hidden-content2 {
display: none;
}
}
#media screen and (min-width:1240px) {
.header {
max-width: none;
}
.footer {
max-width: none;
}
}
#media screen and (min-width:1580px) {
.header {
padding: 15px 0 15px 0;
max-width: 1500px;
}
.footer-main {
max-width: 1500px;
}
.copyright {}
}
You are adding the hidden-content and hide classes which have display: none in them.
In reference to my last question here
this time I'm facing issues when webpage scrolls. The content inside 'container' section is overlapping. I've tried to fix this many times but whenever I fix something, some other thing gets broken.
As you can see in the code snippet I've used 3 different stylesheets and custom Grid with 12 rows and 0.5% margin, so the page will show 3 different views according to the resolution. The problems with this code are:
Userinfo class is overlapped by the next class when zoomed.
When page is zoomed to 300%, the class next to 'userinfo' moves away.
Here's the code (I've included only one CSS because I can't find any option to add multiple css):
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
background: #eeeeee;
}
html {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 5.0vw;
}
h2 {
font-family: Roboto Light;
font-size: 30px;
}
h3 {
font-size: 2.5vh;
}
h4 {
font-size: 13px;
}
p {
font-size: 2vh;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
}
.nav {
font-family: Roboto Light;
height: 40px;
width: 100%;
position: fixed;
background: white;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
}
.nav a:link,
.nav a:visited {
font-size: 20px;
width: auto;
padding: 5px;
margin: 5px;
text-decoration: none;
color: black;
text-align: center;
}
.nav a:hover,
.nav a:active {
background-color: #eeeeee;
}
.header {
visibility: hidden;
}
.container {
margin-top: 10%;
margin-left: 20%;
margin-right: 20%;
background: white;
border-radius: 4px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
.usericon {
margin-left: 10%;
border-radius: 10%;
width: 176px;
height: 176px;
}
.hire {
background-color: #689f38;
font-family: Roboto;
border-radius: 4px;
border: none;
color: white;
padding: 15px 32px;
outline: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.hire:hover {
background-color: #8bc34a;
box-shadow: 0px 2px 0px 0px #668e36;
cursor: hand;
}
.button:active {
background-color: #33691e;
box-shadow: 0px 2px 0px 0px #668e36;
cursor: hand;
}
.line {
border-radius: 1px;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float: left;
margin: 1% 0 1% 0.5%;
}
.col:first-child {
margin-left: 0;
}
/* GROUPING */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
/* For IE 6/7 */
}
/* GRID OF TWELVE */
.span_12_of_12 {
width: 100%;
}
.span_11_of_12 {
width: 91.62%;
}
.span_10_of_12 {
width: 83.25%;
}
.span_9_of_12 {
width: 74.87%;
}
.span_8_of_12 {
width: 66.5%;
}
.span_7_of_12 {
width: 58.12%;
}
.span_6_of_12 {
width: 49.75%;
}
.span_5_of_12 {
width: 41.37%;
}
.span_4_of_12 {
width: 33%;
}
.span_3_of_12 {
width: 24.62%;
}
.span_2_of_12 {
width: 16.25%;
}
.span_1_of_12 {
width: 7.875%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
#media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
.span_1_of_12,
.span_2_of_12,
.span_3_of_12,
.span_4_of_12,
.span_5_of_12,
.span_6_of_12,
.span_7_of_12,
.span_8_of_12,
.span_9_of_12,
.span_10_of_12,
.span_11_of_12,
.span_12_of_12 {
width: 100%;
}
}
<html>
<head>
<title>
Yogesh Singh
</title>
<meta name="theme-color" content="#4caf50" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
</head>
<body>
<div class="nav">
<nav>
<img src="logo.svg" style="height:40px; float:left;">
About Me
My Projects
</nav>
</div>
<br>
<div class="header">
</div>
<div class="container">
<!-- Rows are horizontal and Columns are vertical-->
<div class="section group">
<div class="col span_3_of_12" style="margin-top:0; max-width:50%;">
<div class="userinfo">
<img src="large.png" class="usericon" srcset="large.png, medium.png, small.png">
</div>
</div>
<div class="col span_6_of_12" style="margin-top:0; max-width:50%;">
<h2>Yogesh Singh</h2>
<h4>cyogesh56#gmail.com</h4>
<p><b style="border: 0.5px solid black;">21</b>
</p>
</div>
</div>
<div class="section group">
<div class="col span_1_of_10" style="float:right; margin-right:3%;">
<center>
<button class="hire" type="submit" href="http://about.me/cy56">Hire</button>
</center>
</div>
</div>
<hr class="line" style="margin-left:3%; margin-right:3%;">
</body>
</html>
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.