I'm new to HTML and CSS, and I'm having issues with my nav bar. I cannot appoint my Navbar on top of the page when scrolling through the sections, and when I finally solve my question, the hover effects inside my sections stop working. Anyone here knows how to fix this ?
Here is my code:
#charset "utf-8";
/* CSS Document */
html{
height:100%;
overflow:hidden;
}
body{
font-family: "Walkway Black";
border:0;
margin:0;
padding:0;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
overflow-x:hidden;
overflow-y:scroll;
perspective: 1.1px;
}
nav {
float:right;
z-index: 2;
position:fixed;
top:0;
right:90;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left:60px; /* distanciamento de cada palavra*/
padding-top: 20px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase; /*texto em letra maiuscula*/
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
#secao1{
display: flex;
background-image:url(../imagens/intro_cloud.png);
background-position:center;
background-size:cover;
z-index:1;
}
#secao2{
display: flex;
background-image: url(../imagens/image4.png);
background-size: cover;
transform: translateZ(-1px) scale(2);
z-index: 0;
}
#secao3{
display:flex;
background-image: url(../imagens/image2.jpg);
background-size:cover;
z-index:1;
}
.slide{
display: flex;
width:100vw;
height:100vh;
justify-content: center;
position:relative;
padding: 25% 10%;
min-height: 100%;
width: 100%;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0,0,0,.7);
transform-style: inherit;
overflow: auto;
}
#box { /*box*/
position:absolute;
top:20%;
left:15%;
width: 880px;
height: auto;
margin: 15px auto;
display: flex;
margin-bottom: 50px;
box-shadow: rgba(0, 0, 0, 0.7);
}
#box:after { /*efeito box*/
display: flex;
content: '.';
line-height: 0;
visibility: hidden;
}
.estilo {
display: flex;
width: 880px;
list-style: none;
}
.estilo li {
position: relative;
display: flex;
float: left;
width: 400px;
height: 300px;
margin:20px;
cursor: pointer;
}
.estilo li img {
border-radius: 15%;
width: 80%;
height: 80%;
display: flex;
z-index: 999;
position: absolute;
transition:.5s;
border:-2px;
}
.conteudo {
display: flex;
width: 80%;
height: 80px;
background-color:#363739;
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
opacity:.5;
overflow: hidden;
margin-top: 160px;
}
.estilo li:hover img { /*efeito bloco*/
margin-top:-80px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alt</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Serviços</li>
<li>Equipe</li>
<li>Orçamento</li>
<li>Contato</li>
</ul>
</nav>
<section id="secao1" class="slide">
</section>
<section id="secao2" class="slide">
<div id="box">
<ul class="estilo">
<li>
<img src="../código/imagens/giphy.gif" alt="">
<div class="conteudo"></div>
</li>
<li>
<img src="../código/imagens/systems.gif" alt="">
<div class="conteudo"></div>
</li>
</ul>
</div>
</section>
<section id="secao3" class="slide"></section>
</body>
</html>
PS.: Hope you understand the problem.
Related
So i have made a website with HTML and CSS. It has different effects like the parallax effect(a very simple version of it), transparent navbar, and now I am trying to make my Navbar responsive. Everything works, but my hamburger menu is very far to the left and when I find a way to move it, it doesnt work after i moved it.
As you can see it is very close to the top of the screne and so far to the left that it is past the logo. I want it to stay to the right even if i made the screen smaller ofr bigger, like it moves with the screen when i move it.
This is my css code:
#font-face {
font-family: 'Poppins';
src: url(Fonts/Poppins-Regular.ttf
}
#font-face {
font-family: 'Comfortaa';
src: url(Fonts/Comfortaa-VariableFont_wght.ttf);
}
#font-face {
font-family: 'DancingScript';
src: url(Fonts/DancingScript-VariableFont_wght.ttf);
}
* {
padding: 0;
margin: 0;
color: #A6808C;
box-sizing: border-box;
}
body {
background-color: #565264;
font-family: Poppins;
}
html {
overflow: scroll;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 0%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.4);
border-bottom: 0px solid #fff;
z-index: 9999
}
nav .logo {
padding: -22px 20px;
height: 50px;
float: left;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 60px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 25px;
}
nav ul li a:hover {
background: rgba(0,0,0,0.1);
border-radius: 5px;
}
.text {
font-size: 2rem;
padding: 2rem;
background-color: #565264;
color: whitesmoke;
}
.title {
font-size: 7rem;
color: whitesmoke;
text-shadow: 0 0 5px black;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(3);
background-repeat: no-repeat;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
.hamburger {
position: relative;
width: 30px;
height: 4px;
background: #fff;
border-radius: 10px;
cursor: pointer;
z-index: 2;
transition: 0.3s;
}
.hamburger:before, .hamburger:after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}
.hamburger:before {
top: -10px;
width: 20px;
}
.hamburger:after {
top: 10px;
width: 20px;
}
.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
z-index: 3;
cursor: pointer;
opacity: 0;
}
.hamburger, .toggle-menu {
display: none;
}
.navigation input:checked ~ .hamburger {
background: transparent;
}
.navigation input:checked ~ .hamburger::before {
top: 0;
transform: rotate(-45deg);
width: 30px;
}
.navigation input:checked ~ .hamburger::after {
top: 0;
transform: rotate(45deg);
width: 30px;
}
.navigation input:checked ~ .menu {
right: 0;
box-shadow: -20px 0 40px rgba(0,0,0,0.3);
}
#media screen and (max-width: 1062px) {
.hamburger, .toggle-menu {
display: block;
}
.header {
padding: 10px 20px;
}
nav ul {
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: -300px;
background-color: #565264;
width: 300px;
height: 100%;
padding-top: 65px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a:hover {
padding: 30px;
font-size: 24px;
box-shadow: 0 1px 0 rgba(112,102,119,0.5) inset;
}
}
<head>
<meta charset="utf-8">
<meta name="veiwport" content="width=device-width, initalscale=1.0">
<Title>Test</Title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">
<img src="Pictures\Logo DesignK whitegreen.png" alt="DesignK" height="50px" width="200px">
</a>
</div>
<div class="navigation">
<input type="checkbox" class="toggle-menu">
<div class="hamburger"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Feedback</li>
</ul>
</div>
</nav>
<div class="wrapper">
<header>
<img src="Pictures/LakeandMoutains.jpg" class="background">
<h1 class="title">Welcome!</h1>
</header>
<section class="text">
<h3>Essay on Mountains</h3>
</section>
</div>
</body>
Does anyone know how to make the hamburger menu move to the right side of the screen?
Update your .hamburger, .toggle-menu styles like this
.hamburger, .toggle-menu {
display: block;
position: absolute;
right: 30px;
}
Update the value of right according to your need.
You could always use flexbox. The following lines of code will display this on the right hand side:-
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.navigation {
margin-left: auto;
}
Add this to your navigation class:
.navigation{
position:relative;
}
and then this to your hamburger menu to make it stick to the right.
.hamburger{
position:relative;
right:8%;
}
The position absolute will make the hamburger-menu stick relative to the navigation bar and right 8% will stick it to the right.
You must understand the importance of HTML structure and positioning because this is the problem in your HTML.
To fix your problem, you need to put the burger menu and the check box in one container and then position the container.
The problem now is that you are positioning every part individually and their width and height are not properly set.
try to follow the steps I mentioned then let us know if you can do it or not.
Good day guys,
As you can see in the image they are stick to each other in desktop view, however on the real code I wasn't been able to do it, I tried to use the overflow but the result is not what I expected. Heres my code https://jsfiddle.net/Jury/0bqpLw1h/1/.. Thank you so much for your help
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
a {
text-decoration: none;
}
.body {
height: 100vh;
background-image: linear-gradient(
rgba(0, 31, 63, 0.958),
rgba(0, 31, 63, 0.958) )
,url(img/bgmain.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.overlay{
background-color: rgba(0,0,0,.95);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}
/* Hamburger Menu */
.menu-toggle {
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #eeeeee;
font-size: 3rem;
cursor: pointer;
z-index: 1000;
display: none;
}
/* End of Hamburger Menu */
/* Navagation Link */
header {
font-family: "Raleway", sans-serif;
position: relative;
width: 100%;
height: 10rem;
z-index: 2;
}
nav {
/* padding-top: 5rem; */
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
}
nav img {
height: 7rem;
margin: 0 0 0 12rem;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
font-weight: 900;
font-size: 1.4rem;
padding: 1rem 0;
margin: 0 1rem;
position: relative;
color: #eee;
}
.menu {
margin: 0 12rem 0 0;
}
.menu a {
font-size: 1rem;
margin: 0 .1rem;
outline: none;
}
.menu a:last-child{
margin-right: 0;
}
nav ul li a::before,
nav ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #f4511e;
left: 0;
transform: scaleX(0);
transition: all .5s;
}
nav ul li a::before{
top: 0;
transform-origin: left;
}
nav ul li a::after{
bottom: 0;
transform-origin: right;
}
nav ul li a:hover::before,
nav ul li a:hover::after{
transform: scaleX(1);
}
.btn {
border: none;
border-radius: 30px;
background-color: #f4511e;
color: #fff;
font-size: 1rem;
font-weight: bold;
text-align: center;
padding: 9px;
width: 70px;
text-transform: uppercase;
}
.btninfo{
padding: 9px 19px;
}
/* End of Navagation Menu */
/* Content of the Website */
/* .content {
height: 100vh;
overflow: hidden;
} */
.possible {
color: #fff;
text-align: center;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 6rem;
font-family: "Coiny", sans-serif;
font-size: 3.2rem;
}
.circle {
position: absolute;
border-radius: 50%;
width: 100%;
height: 50rem;
background-color: #6CA9A5;
z-index: 1;
margin: 0;
margin-top: -75%;
}
.about {
height: 100vh;
width:100%;
background-color: crimson;
z-index: 3;
position:absolute;
/*bottom : 0;*/
}
/* Media Queries for tablet and mobile */
#media screen and (max-width: 990px) {
.menu-toggle {
display: block;
}
nav {
display: none;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
text-align: center;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin-top: 5rem;
}
nav ul li a {
margin 0;
font-size: 3rem;
}
nav ul li:first-child{
margin-top: 0;
}
.overlay.menu-open,
nav.menu-open{
display: flex;
transform: scale(1);
opacity: 1;
}
nav img {
height: 15rem;
margin: 0;
}
.menu {
margin-right: 0;
}
}
<!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 href="https://fonts.googleapis.com/css?family=Raleway|Coiny|Roboto|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="style.css">
<title>Jury Gregorio - Welcome</title>
</head>
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
<script>
var open = document.getElementById('hamburger');
var changeIcon = true;
open.addEventListener("click", function(){
var overlay = document.querySelector('.overlay');
var nav = document.querySelector('nav');
var icon = document.querySelector('.menu-toggle i');
overlay.classList.toggle("menu-open");
nav.classList.toggle("menu-open");
if (changeIcon) {
icon.classList.remove("fa-bars");
icon.classList.add("fa-times");
changeIcon = false;
}
else {
icon.classList.remove("fa-times");
icon.classList.add("fa-bars");
changeIcon = true;
}
});
</script>
</body>
</html>
Small changes in the css can make the image like look. Just make a small change in .about. and this will work. output of the below code
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
I have made some changes along with some brief explanation to the CSS file, in particular, the .content and .circle selector. Best viewed in desktop environment.
Fiddle
Just add this style before your media query also you check it on this fiddle https://jsfiddle.net/v8r463je/
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
.content{
background-color: #0b2947;
}
/* Media Queries for tablet and mobile */
Output here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
a {
text-decoration: none;
}
.body {
height: 100vh;
background-image: linear-gradient(
rgba(0, 31, 63, 0.958),
rgba(0, 31, 63, 0.958) )
,url(img/bgmain.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.overlay{
background-color: rgba(0,0,0,.95);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}
/* Hamburger Menu */
.menu-toggle {
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #eeeeee;
font-size: 3rem;
cursor: pointer;
z-index: 1000;
display: none;
}
/* End of Hamburger Menu */
/* Navagation Link */
header {
font-family: "Raleway", sans-serif;
position: relative;
width: 100%;
height: 10rem;
z-index: 2;
}
nav {
/* padding-top: 5rem; */
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
}
nav img {
height: 7rem;
margin: 0 0 0 12rem;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
font-weight: 900;
font-size: 1.4rem;
padding: 1rem 0;
margin: 0 1rem;
position: relative;
color: #eee;
}
.menu {
margin: 0 12rem 0 0;
}
.menu a {
font-size: 1rem;
margin: 0 .1rem;
outline: none;
}
.menu a:last-child{
margin-right: 0;
}
nav ul li a::before,
nav ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #f4511e;
left: 0;
transform: scaleX(0);
transition: all .5s;
}
nav ul li a::before{
top: 0;
transform-origin: left;
}
nav ul li a::after{
bottom: 0;
transform-origin: right;
}
nav ul li a:hover::before,
nav ul li a:hover::after{
transform: scaleX(1);
}
.btn {
border: none;
border-radius: 30px;
background-color: #f4511e;
color: #fff;
font-size: 1rem;
font-weight: bold;
text-align: center;
padding: 9px;
width: 70px;
text-transform: uppercase;
}
.btninfo{
padding: 9px 19px;
}
/* End of Navagation Menu */
/* Content of the Website */
/* .content {
height: 100vh;
overflow: hidden;
} */
.possible {
color: #fff;
text-align: center;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 6rem;
font-family: "Coiny", sans-serif;
font-size: 3.2rem;
}
.circle {
position: relative;
border-radius: 50%;
width: 50rem;
height: 50rem;
background-color: #6CA9A5;
margin: 10rem auto;
z-index: 1;
}
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
.content{
background-color: #0b2947;
}
/* Media Queries for tablet and mobile */
#media screen and (max-width: 990px) {
.menu-toggle {
display: block;
}
nav {
display: none;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
text-align: center;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin-top: 5rem;
}
nav ul li a {
margin 0;
font-size: 3rem;
}
nav ul li:first-child{
margin-top: 0;
}
.overlay.menu-open,
nav.menu-open{
display: flex;
transform: scale(1);
opacity: 1;
}
nav img {
height: 15rem;
margin: 0;
}
.menu {
margin-right: 0;
}
}
<!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 href="https://fonts.googleapis.com/css?family=Raleway|Coiny|Roboto|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="style.css">
<title>Jury Gregorio - Welcome</title>
</head>
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
<script>
var open = document.getElementById('hamburger');
var changeIcon = true;
open.addEventListener("click", function(){
var overlay = document.querySelector('.overlay');
var nav = document.querySelector('nav');
var icon = document.querySelector('.menu-toggle i');
overlay.classList.toggle("menu-open");
nav.classList.toggle("menu-open");
if (changeIcon) {
icon.classList.remove("fa-bars");
icon.classList.add("fa-times");
changeIcon = false;
}
else {
icon.classList.remove("fa-times");
icon.classList.add("fa-bars");
changeIcon = true;
}
});
</script>
</body>
</html>
Example of how the webpage looks like:
So I tried doing this using flexbox. but I'm not very familiar with flexbox.
The goal is to have 4 equal boxes in the center of the page. Similar to the current frontpage of this websie: http://arma-life.org/# (Scroll down to see the boxes in the section "For You').
I have tried looking at the current code, but the old designer did something and I can't seem to get that code to work on the new frontpage. It should be almost similar with the image, title and explanation. But the href can be dropped.
Can anyone point me in the right direction to do this please or help me out. I've litterally tried flexbox, align, margins, ...
It should also be responsive for phones and stuff. It should be underneath the HR.
Here is my current code:
body {
width: 100%;
margin: 0;
font-family: 'open sans', sans-serif;
zoom: 1;
overflow-x: hidden;
}
header {
padding: 20px 0;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
padding: 0 20px;
margin: 0 auto;
}
.logo-box {
float: left;
margin-right: 20px;
}
.logo-box a {
outline: none;
display: block;
}
.logo-box img {display: block;}
nav {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0px 10px 0px 0px;
float: right;
}
nav li {
display: inline-block;
margin-left: 25px;
height: 70px;
line-height: 70px;
transition: .5s linear;
}
nav a {
text-decoration: none;
display: block;
position: relative;
color: #868686;
text-transform: uppercase;
}
nav a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 15px;
background: #868686;
transition: width .5s linear;
}
nav a:hover:after {width: 100%;}
#media screen and (max-width: 660px) {
header {text-align: center;}
.logo-box {
float: none;
display: inline-block;
margin: 0 0 16px 0;
}
ul {float: none;}
nav li:first-of-type {margin-left: 0;}
}
#media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
display: block;
margin: 0;
height: 40px;
line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}
.A3L_Slogan, .slideshow{
position: relative;
}
.slideshow{
height: 600px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 600px;
left:0;
top:0;
}
.slogan_hr {
width: 960px;
margin: 15px auto 15px auto;
}
hr.style14 {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.A3L_Slogan {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.slogan_title {
font-size: 46px;
font-weight: 700;
padding: 15px;
text-transform: uppercase;
}
.slogan_catchphrase {
font-size: 30px;
font-weight: 500;
text-transform: uppercase;
}
#media only screen and (max-width: 640px) {
.slideshow{
height: 300px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 300px;
left:0;
top:0;
}
.slogan_hr {
width: 600px;
margin: 15px auto 15px auto;
}
}
#media only screen and (max-width: 600px) {
.slideshow{
height: 200px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 200px;
left:0;
top:0;
}
.slogan_hr {
width: 560px;
margin: 15px auto 15px auto;
}
}
#media only screen and (max-width: 480px) {
.logo {
max-width: 270px;
}
}
/** features & articles **/
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 4000);
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo-box">
<a href="/">
<img class="logo" src="images/logo.png">
</a>
</div>
<nav>
<ul>
<li>Forums</li>
<li>Rules</li>
<li>Monetization</li>
<li>Sign-up</li>
<li>Staff</li>
</ul>
</nav>
</div>
</header>
<div class="slideshow">
<div class="fadein">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg" alt="">
</div>
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
<div class="slogan_catchphrase">
The next level roleplay experience
</div>
<div class="slogan_hr">
<hr class="style14">
</div>
</div>
</body>
</html>
I hope this is what you want
body {
width: 100%;
margin: 0;
font-family: 'open sans', sans-serif;
zoom: 1;
overflow-x: hidden;
}
.flexbox {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.flexbox .box {
background: #0077dd;
/* width: 150px; */
height: 150px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 40%;
margin: 2%;
}
header {
padding: 20px 0;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
padding: 0 20px;
margin: 0 auto;
}
.logo-box {
float: left;
margin-right: 20px;
}
.logo-box a {
outline: none;
display: block;
}
.logo-box img {display: block;}
nav {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0px 10px 0px 0px;
float: right;
}
nav li {
display: inline-block;
margin-left: 25px;
height: 70px;
line-height: 70px;
transition: .5s linear;
}
nav a {
text-decoration: none;
display: block;
position: relative;
color: #868686;
text-transform: uppercase;
}
nav a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 15px;
background: #868686;
transition: width .5s linear;
}
nav a:hover:after {width: 100%;}
#media screen and (max-width: 660px) {
header {text-align: center;}
.logo-box {
float: none;
display: inline-block;
margin: 0 0 16px 0;
}
ul {float: none;}
nav li:first-of-type {margin-left: 0;}
}
#media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
display: block;
margin: 0;
height: 40px;
line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}
.A3L_Slogan, .slideshow{
position: relative;
}
.slideshow{
height: 600px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 600px;
left:0;
top:0;
}
.slogan_hr {
width: 960px;
margin: 15px auto 15px auto;
}
hr.style14 {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.A3L_Slogan {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.slogan_title {
font-size: 46px;
font-weight: 700;
padding: 15px;
text-transform: uppercase;
}
.slogan_catchphrase {
font-size: 30px;
font-weight: 500;
text-transform: uppercase;
}
#media only screen and (max-width: 640px) {
.slideshow{
height: 300px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 300px;
left:0;
top:0;
}
.slogan_hr {
width: 600px;
margin: 15px auto 15px auto;
}
}
#media only screen and (max-width: 600px) {
.slideshow{
height: 200px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 200px;
left:0;
top:0;
}
.slogan_hr {
width: 560px;
margin: 15px auto 15px auto;
}
}
#media only screen and (max-width: 480px) {
.logo {
max-width: 270px;
}
}
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 4000);
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo-box">
<a href="/">
<img class="logo" src="images/logo.png">
</a>
</div>
<nav>
<ul>
<li>Forums</li>
<li>Rules</li>
<li>Monetization</li>
<li>Sign-up</li>
<li>Staff</li>
</ul>
</nav>
</div>
</header>
<div class="slideshow">
<div class="fadein">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg" alt="">
</div>
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
<div class="slogan_catchphrase">
The next level roleplay experience
</div>
<div class="slogan_hr">
<hr class="style14">
</div>
</div>
<div class="flexbox">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Easiest way to create 4 boxes in 2 columns (with no need for flex) is to put 50% width inline-blocks inside an element and remove everything what may cause extra whitespace from parent:
html:
<div class="parent">
<div class="child">
<div class="boxcontent">1</div>
</div>
<div class="child">
<div class="boxcontent">2</div>
</div>
<div class="child">
<div class="boxcontent">3</div>
</div>
<div class="child">
<div class="boxcontent">4</div>
</div>
</div>
css:
.parent {
width: 100%;
max-width: 1000px; // limit width for extra large screens
font-size: 0;
line-height: 0;
letter-spacing: 0;
margin: 0 auto; // to center on less than 100% width
}
.child {
display: inline-block;
vertical-align: middle;
width: 50%;
box-sizing: border-box;
padding: 100px;
}
.boxcontent {
font-size: 16px;
line-height: 20px;
background-color: red;
height: 25%;
}
For mobile set child width to 100%;
I got an image in the middle of my navbar which is blocking my link, I made a bit of code below to show that. I tried to fix this with z-index's but it keeps blocking my link.
I can't place the image in the nav bar itself because of the rest of my code (which is not in this snippet). I think it should be solved if I get the absolute image behind the <a> but I can't get that done with z-index's
$(document).ready(function () {
$("nav a").click(function(event){
$("article").removeClass("slide_1");
$("article").removeClass("slide_2");
$("article").removeClass("slide_3");
var clickedId = event.target.id;
$('article').addClass("slide_"+clickedId);
});
});
header {
width: 100%;
height: 100px;
position: relative;
background: #ffe7d9;
}
nav{
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
border: 1px solid black;
background-color: #fed5b7;
}
nav ul{
display: inline-block;
margin: 0;
width: 100%;
padding: 0;
}
nav li{
width: 30%;
text-align: center;
box-sizing: border-box;
display: inline-block;
list-style-type: none;
color: black;
font-size: 1.1em;
line-height: 35px;
}
nav li a{
width: 100%;
height: 100%;
display: block;
color: black;
cursor: pointer;
}
nav li a.no-background{
background-image: none !important;
}
img.headerlogo{
position: absolute;
width: 15%;
height: 200%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0;
}
article{
width: 100%;
height: 200px;
}
.slide_1{
background-color: red;
}
.slide_2{
background-color: green;
}
.slide_3{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id="menu">
<img src="http://lorempixel.com/160/90" class="headerlogo">
<ul>
<li><a id="1">Link1</a></li>
<li class="logo"><a id="2">Link2</a></li>
<li><a id="3">Link3</a></li>
</ul>
</nav>
</header>
<article>
</article>
use this
nav{
z-index:9;}
img.headerlogo{
z-index:-1;
opacity:0.5;
}
$(document).ready(function () {
$("nav a").click(function(event){
$("article").removeClass("slide_1");
$("article").removeClass("slide_2");
$("article").removeClass("slide_3");
var clickedId = event.target.id;
$('article').addClass("slide_"+clickedId);
});
});
header {
width: 100%;
height: 100px;
position: relative;
background: #ffe7d9;
}
nav{
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
border: 1px solid black;
background-color: #fed5b7;
z-index:9;
}
nav ul{
display: inline-block;
margin: 0;
width: 100%;
padding: 0;
}
nav li{
width: 30%;
text-align: center;
box-sizing: border-box;
display: inline-block;
list-style-type: none;
color: black;
font-size: 1.1em;
line-height: 35px;
}
nav li a{
width: 100%;
height: 100%;
display: block;
color: black;
cursor: pointer;
}
nav li a.no-background{
background-image: none !important;
}
img.headerlogo{
position: absolute;
width: 15%;
height: 200%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0;
z-index:-1;
opacity:0.5;
}
article{
width: 100%;
height: 200px;
}
.slide_1{
background-color: red;
}
.slide_2{
background-color: green;
}
.slide_3{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id="menu">
<ul>
<img src="http://lorempixel.com/160/90" class="headerlogo">
<li><a id="1">Link1</a></li>
<li class="logo"><a id="2">Link2</a></li>
<li><a id="3">Link3</a></li>
</ul>
</nav>
</header>
<article>
</article>
Put img tage outside and change css for class headerlogo
$(document).ready(function () {
$("nav a").click(function(event){
$("article").removeClass("slide_1");
$("article").removeClass("slide_2");
$("article").removeClass("slide_3");
var clickedId = event.target.id;
$('article').addClass("slide_"+clickedId);
});
});
header {
width: 100%;
height: 100px;
position: relative;
background: #ffe7d9;
}
nav{
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
border: 1px solid black;
background-color: #fed5b7;
}
nav ul{
display: inline-block;
margin: 0;
width: 100%;
padding: 0;
}
nav li{
width: 30%;
text-align: center;
box-sizing: border-box;
display: inline-block;
list-style-type: none;
color: black;
font-size: 1.1em;
line-height: 35px;
}
nav li a{
width: 100%;
height: 100%;
display: block;
color: black;
cursor: pointer;
}
nav li a.no-background{
background-image: none !important;
}
img.headerlogo{
position: relative;
width: 15%;
height: 100%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0;
}
article{
width: 100%;
height: 200px;
}
.slide_1{
background-color: red;
}
.slide_2{
background-color: green;
}
.slide_3{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id="menu">
<ul>
<li><a id="1">Link1</a></li>
<li class="logo"><a id="2">Link2</a></li>
<li><a id="3">Link3</a></li>
</ul>
</nav>
</header>
<img src="http://lorempixel.com/160/90" class="headerlogo">
<article>
</article>
Give z-index:-1 to z-index: 1; and z-index:1; position:relative; to nav.
$(document).ready(function () {
$("nav a").click(function(event){
$("article").removeClass("slide_1");
$("article").removeClass("slide_2");
$("article").removeClass("slide_3");
var clickedId = event.target.id;
$('article').addClass("slide_"+clickedId);
});
});
header {
width: 100%;
height: 100px;
position: relative;
background: #ffe7d9;
}
nav{
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
border: 1px solid black;
background-color: #fed5b7;
z-index: 1;
}
nav ul{
display: inline-block;
margin: 0;
width: 100%;
padding: 0;
position: relative;
}
nav li{
width: 30%;
text-align: center;
box-sizing: border-box;
display: inline-block;
list-style-type: none;
color: black;
font-size: 1.1em;
line-height: 35px;
}
nav li a{
width: 100%;
height: 100%;
display: block;
color: black;
cursor: pointer;
}
nav li a.no-background{
background-image: none !important;
}
img.headerlogo{
position: absolute;
width: 15%;
height: 200%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
article{
width: 100%;
height: 200px;
}
.slide_1{
background-color: red;
}
.slide_2{
background-color: green;
}
.slide_3{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id="menu">
<img src="http://lorempixel.com/160/90" class="headerlogo">
<ul>
<li><a id="1">Link1</a></li>
<li class="logo"><a id="2">Link2</a></li>
<li><a id="3">Link3</a></li>
</ul>
</nav>
</header>
<article>
</article>
I’m creating this website and I made this nav bar. It had dummy links in the anchor tags and I had a hover property on my buttons. All of this was working properly. I had made a few changes to the code and now none of it works. I cannot figure out where I went wrong. I was editing properties and things just stopped working.
* {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Arial";
color: white;
}
html,
body {
margin: 0 auto;
background-color: black;
max-width: 940px;
min-height: 100%;
}
.wrapper {
margin: 0 auto;
width: 92%;
background-image: url("images/backgrounds/wood.jpg");
}
/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/
.header {
position: relative;
height: 100px;
background-color: #111111;
}
.header h1 {
position: relative;
margin: 0;
height: 20px;
text-align: center;
font-size: 2.3em;
top: 25%;
}
.header p {
position: relative;
top: 25%;
width: 100%;
font-size: 1em;
text-align: center;
}
/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/
nav {
height: 40px;
}
nav ul {}
nav ul li {
background-color: #111111;
text-align: center;
list-style-type: none;
width: 25%;
float: left;
/*margin: 0 1%;
border-radius: 10px;
box-shadow: 5px 5px 5px #000;*/
}
nav ul li a {
text-decoration: none;
line-height: 40px;
display: block;
}
nav ul li a:hover {
background-color: #222222;
}
/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/
.jumbotron {
position: relative;
background-image: url(images/jumbotron/studiopic.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 53%;
}
.jumbotext h1 {
display: inline-block;
position: absolute;
bottom: 0px;
text-align: right;
}
/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/
.footer {
height: 100px;
width: 100%;
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<title>CM Sound | Home</title>
<meta charset="UTF-8">
<meta name="description" content="CM Sound's studio webpage">
<meta name="author" content="Ryan Buck | May 2015">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>CM Sound</h1><br/>
<p>Create with us</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Audio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
<div class="jumbotron">
<div class="jumbotext">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Add this in nav ul li a
:
position: relative;
* {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Arial";
color: white;
}
html, body {
margin: 0 auto;
background-color: black;
max-width: 940px;
min-height: 100%;
}
.wrapper {
margin: 0 auto;
width: 92%;
background-image: url("images/backgrounds/wood.jpg");
}
/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/
.header {
position: relative;
height: 100px;
background-color: #111111;
}
.header h1 {
position: relative;
margin: 0;
height: 20px;
text-align: center;
font-size: 2.3em;
top: 25%;
}
.header p {
position: relative;
top: 25%;
width: 100%;
font-size: 1em;
text-align: center;
}
/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/
nav {
height: 40px;
}
nav ul {
}
nav ul li {
background-color: #111111;
text-align: center;
list-style-type: none;
width: 25%;
float: left;
/*margin: 0 1%;
border-radius: 10px;
box-shadow: 5px 5px 5px #000;*/
}
nav ul li a {
text-decoration: none;
line-height: 40px;
display: block;
position: relative;
}
nav ul li a:hover {
background-color: #222222;
}
/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/
.jumbotron {
position: relative;
background-image: url(images/jumbotron/studiopic.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 53%;
}
.jumbotext h1 {
display: inline-block;
position: absolute;
bottom: 0px;
text-align: right;
}
/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/
.footer {
height: 100px;
width: 100%;
background-color: #111111;
}
<div class="wrapper">
<div class="header">
<h1>CM Sound</h1><br/>
<p>Create with us</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Audio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
<div class="jumbotron">
<div class="jumbotext">
</div>
</div>
<div class="footer">
</div>
</div>
nav {
height: 40px;
position: relative;
}
just add the position relative to nav