So my mission is to get the gray rectangle (<div class="brand"> </div>) to go automatic below the others, right now it's stuck between the header and my two other body divs. As I am a beginner I have no idea about how to fix this, i've searched a little and tried to add a clear: both, but that didn't solve my problem. Would love if someone out there can take a look at my code and see what's wrong. I'm sorry for no structure in my code.
Thanks,Filip
:D
CODE (CSS FIRST, THEN HTML):
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: #fff;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-search{
color: black;
font-size: 14px;
transform:scaleX(-1);
margin-left: 50px;
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
nav i:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 100px;
weight: 400px;
background-color: gray;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<i class="fas fa-search"></i>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
</div>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
</body>
</html>
Sorry for no structure ;D
//Filip
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: #fff;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-search{
color: black;
font-size: 14px;
transform:scaleX(-1);
margin-left: 50px;
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
nav i:hover{
color: red;
cursor: pointer;
}
.package {
width: 80%;
margin: 30px auto;
}
.bild2 {
height: 350px;
width: 50%;
background-color: #3D6BB8;
float: left;
}
.entrytext {
margin-left: 30px;
float: left;
margin-bottom:70px;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand {
height: 100px;
background-color: gray;
clear: both;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<i class="fas fa-search"></i>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
</div>
<div class="bild1">
</div>
<div class="package">
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div></div>
<div class="brand">
</div>
</body>
</html>
Add position its styling and add botom:0;
Related
https://sagarj2021.github.io/first-website/
This is my website but it only open fullscreen in destop of my laptop. It does not open in fullscreen in smartphones destop as well as in normal search. (Actully in smartphone right side is 50% of white blank color). I dont know how to fix this issue..
I have given my code also,
so please can you help mi ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.hero {
height: 100vh;
width: 100%;
background-color: black;
background-size: cover;
background-position: center;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 45px;
padding-left: 8%;
padding-right: 8%;
}
.logo {
color: white;
font-size: 35px;
letter-spacing: 1px;
cursor: pointer;
}
span {
color: red;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 25px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
text-transform: capitalize;
}
nav ul li a:hover {
color: red;
transition: .4s;
}
.btn {
background-color: red;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
border-radius: 30px;
transition: transform .4s;
}
.btn:hover {
transform: scale(1.2);
}
.content {
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
h1 {
color: white;
margin: 20px 0px 20px;
font-size: 75px;
}
h3 {
color: white;
font-size: 25px;
margin-bottom: 50px;
}
h4 {
color: #fcfc;
letter-spacing: 2px;
font-size: 20px;
}
.newslatter form {
width: 380px;
max-width: 100%;
position: relative;
}
.newslatter form input:first-child {
display: inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid #f9004d;
outline: none;
border-radius: 30px;
}
.newslatter form input:last-child {
position: absolute;
display: inline-block;
outline: none;
border: none;
padding: 10px 30px;
border-radius: 30px;
background-color: #f9004d;
color: white;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
top: 6px;
right: 6px;
}
.about {
width: 100%;
padding: 100px 0px;
background-color: #191919;
}
.about img {
height: auto;
width: 430px;
}
.about-text {
width: 550px;
}
.main {
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-text h2 {
color: white;
font-size: 75px;
text-transform: capitalize;
margin-bottom: 20px;
}
.about-text h5 {
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transform: capitalize;
}
.about-text p {
color: #fcfc;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.service {
background: #101010;
width: 100%;
padding: 100px 0px;
}
.title h2 {
color: white;
font-size: 75px;
width: 1130px;
margin: 30px auto;
text-align: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.card {
height: 365px;
width: 335px;
padding: 20px 35px;
background: #191919;
border-radius: 20px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
.card i {
font-size: 50px;
display: block;
text-align: center;
margin: 25px 0px;
color: #f9004d;
}
h5 {
color: white;
font-size: 23px;
margin-bottom: 15px;
}
.pra p {
color: #fcfc;
font-size: 16px;
line-height: 27px;
margin-bottom: 25px;
}
.card .button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 9px 22px;
border-radius: 30px;
transition: .4s;
}
.card .button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.contact-me {
width: 100%;
height: 290px;
background: #191919;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.contact-me p {
color: white;
font-size: 30px;
font-weight: bold;
margin-bottom: 25px;
}
.contact-me .button-two {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
.contact-me .button-two:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
footer {
position: relative;
width: 100%;
height: 400px;
background: #101010;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer p:nth-child(1) {
font-size: 30px;
color: white;
margin-bottom: 20px;
font-weight: bold;
}
footer p:nth-child(2) {
color: white;
font-size: 17px;
width: 500px;
text-align: center;
line-height: 26px;
}
.social {
display: flex;
}
.social a {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #f9004d;
border-radius: 50%;
margin: 22px 10px;
color: white;
text-decoration: none;
font-size: 20px;
}
.social a:hover {
transform: scale(1.3);
transition: .3s;
}
.end {
position: absolute;
color: #f9004d;
bottom: 35px;
font-size: 14px;
}
<!--Sagar personal website-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="personalprofile.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/34d51c031e.js" crossorigin="anonymous"></script>
<title>Personal website</title>
</head>
<body>
<div class="hero">
<nav>
<h2 class="logo">Portfo<span>lio</span></h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Blog
</nav>
<div class="content">
<h4>hello, my name is</h4>
<h1>Sagar<span>Jadhav</span></h1>
<h3>I'm a Web Developer.</h3>
<div class="newslatter">
<form action="">
<input type="email" name="email" id="mail" placeholder="Enter Your Email">
<input type="submit" name="submit" value="Let start">
</form>
</div>
</div>
</div>
<!---About section start-->
<section class="about">
<div class="main">
<img src="#" alt="">
<div class="about-text">
<h2>About Me</h2>
<h5>Developer & Designer</h5>
<p>
I am a front-end web developer. I can provide clean code and pixel perfect design. I also make the website more & more interactive with web animations. I can provide clean code and pixel perfect design. I also make the website more & more interactive
with web animations. A responsive design makes your website accessible to all users, regardless of their devices.
</p>
<button type="button">Let's Talk</button>
</div>
</div>
</section>
<!--Service section start-->
<div class="service">
<div class="title">
<h2>Our Services</h2>
</div>
<div class="box">
<div class="card">
<i class="fas fa-bars"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-user"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-bell"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<!--Contact Me-->
<div class="contact-me">
<p>For any help.</p>
<a class="button-two" href="#">Contact Me</a>
</div>
<!--Footer start-->
<footer>
<p>Sagar Jadhav</p>
<p>For coding and syber security related update follow my blog chennal - please click on the link below to follow me:
</p>
<div class="social">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-linkedin"></i>
</div>
<p class="end">CopyRight By Sagar Jadhav</p>
</footer>
</body>
</html>
Replace this code in your code
.title h2 {
color: white;
font-size: 75px;
width: 130px;
margin: 30px auto;
text-align: center;
}
In the mobile version (width max 411px) when I create a navbar and I use absolute position when the dropdown active, why the background color don't cover all the element inside nav div?
Codepen <<-- Here's the codepen version
I've using overflow hidden and still doesn't work
$(document).ready(function(){
$('.navbar-burger').click(function(){
$('.inactive').toggleClass('active-nav');
$('.navbar-burger').toggleClass('inactive');
$('.navbar-close').toggleClass('close-navi');
$('.header').toggleClass('border-bg');
})
$('.navbar-close').click(function(){
$('.inactive').removeClass('active-nav');
$('.navbar-burger').removeClass('inactive');
$('.navbar-close').removeClass('close-navi');
$('.header').removeClass('border-bg');
})
})
*{
font-family: 'Open Sans Light', sans-serif;
color: black;
}
body{
margin: 25px 60px;
background-color: #fafafa;
font-size: 16px;
}
.header{
float: right;
transition: 0.4s ease-in-out;
}
.navbar{
font-size: 1.2em;
}
.navbar ul{
list-style: none;
margin: 0px;
padding: 0;
}
.navbar ul li{
display: inline-block;
margin: 0px 15px;
}
.navbar ul li a{
text-decoration: none;
}
.navbar ul li a:hover{
color: #70BCFF;
}
.content{
width: 100%;
display: grid;
grid-template-columns: 50% 50%;
padding: 70px 0px;
cursor: default;
}
.welcome-message h1{
font-size: 5.3em;
margin: 0px;
}
.welcome-message h2{
font-size: 2.15em;
font-weight: 100;
margin: 0px;
line-height: 60px;
color: #707070;
}
.welcome-message h4{
font-size: 1.0625em;
color: #8D8D8D;
margin-left: 4px;
}
.welcome-message p{
font-size: 1.0625em;
color: #8D8D8D;
margin-left: 4px;
}
.expand-bio{
background-color: #fff;
border: 0.3px solid rgba(0, 0, 0, .16);
font-size: 1.0625em;
padding: 20px 30px;
box-shadow: rgba(0, 0, 0, .16) 2px 7px 8px;
border-radius: 15px;
margin-left: 4px;
cursor: pointer;
}
.expand-bio:hover{
box-shadow: rgba(0, 0, 0, .16) 2px 7px 14px;
}
.ava{
display: grid;
grid-template-areas: 100%;
}
.ava img{
width: 70%;
overflow: hidden;
align-self: center;
justify-self: center;
margin: 0px;
}
.navbar-burger,.navbar-close{
display: none;
}
.active a{
color: #70BCFF;
}
/* Responsive Design */
#media only screen and (max-width: 1140px){
body{
font-size: 11px;
}
}
/* iPad && iPad Pro && another tablet */
#media only screen and (max-width: 1024px) and (max-height: 1366px){
body{
font-size: 20px;
}
.content{
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
}
.ava{
grid-area: 1/1;
margin-bottom: 80px;
}
.welcome-message h1, .welcome-message h2, .welcome-message h4, .welcome-message p{
text-align: center;
}
.welcome-message h4{
margin-top: 15px;
}
.expand-bio{
display: block;
margin: 0 auto;
margin-top: 26px;
}
}
/* ================= */
#media only screen and (max-width: 412px){
body{
margin: 25px 10px;
font-size: 20px;
}
.navbar-burger{
position: absolute;
display: block;
right: 20px;
cursor: pointer;
}
.close-navi{
position: absolute;
display: block;
right: 20px;
cursor: pointer;
}
.navbar ul li{
padding-bottom: 15px;
}
.inactive{
display: none;
}
.active-nav{
display: block;
position: absolute;
}
.header{
float: left;
width: 100%;
}
.border-bg{
background-color: #aaa;
}
.content{
padding-top: 0px;
}
}
<!DOCTYPE html>
<head>
<title>Ananda Vijaya</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/b1643406ad.js"></script>
</head>
<body>
<div class="header">
<div id="navbar" class="navbar">
<span class="navbar-burger"><i class="fas fa-bars"></i></span>
<span class="navbar-close"><i class="fas fa-times"></i></span>
<ul class="nav">
<li class="active">Introduction</li>
<span class="inactive">
<li>Finished Project List</li>
<li>Contact Me</li>
</span>
</ul>
</div>
</div>
<div class="content">
<div class="welcome-message">
<h1>Hi There~</h1>
<h2>This is the Place Where You Can Get to<br>Know Me Better</h2>
<h4>Ananda Vijaya || Web Developer</h6>
<p>I'm a Front-end Developer Who Currently a College Student<br>Majoring in Computer Science at Diponegoro University</p>
<button class="expand-bio">My Complete Profile</button>
</div>
<div class="ava">
<img src="ava.png">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
I expect to have all the element (navbar menu) get the gray background color
I am having a little bit of trouble figuring this out.
On the site I am working on, in between the two sections and footer, there seems to be a blank space with the background color showing, and I can't figure out how to get rid of that so the sections and footer sit on top of each other with no space between them. If someone could check out the code, it'll be much appreciated.
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: #5CDB95;
font-family: 'Gamja Flower', sans-serif;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: black;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-left: 20px;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
text-align: center;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
text-align: center;
}
footer {
background-color: black;
padding: 80px 0 80px;
margin: 50px 0px 50px;
text-align: center;
font-size: 20px;
}
<!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=Gamja+Flower" rel="stylesheet">
<title>Raijin Studios</title>
</head>
<header>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle" onmouseover="changeColor(this)" onmouseout="changeColor(this)">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
</div>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
</div>
</header>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>©Raijin Studios 2018.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
1) you can just delete margins for sections and increase paddings instead;
OR
2) You can make body background white, and than change add background color and padding bottom to sign-up-form
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: 'Gamja Flower', sans-serif;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: black;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-left: 20px;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
font-size: 16px;
text-align: center;
background: #5CDB95;
padding-bottom: 50px;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
text-align: center;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
font-size: 20px;
text-align: center;
}
footer {
background-color: black;
padding: 80px 0 80px;
margin: 50px 0px 50px;
text-align: center;
font-size: 20px;
}
<!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=Gamja+Flower" rel="stylesheet">
<title>Raijin Studios</title>
</head>
<header>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
</div>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
</div>
</header>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>©Raijin Studios 2018.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
Use Margin for section margin: 0px;
There you go.
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: #5CDB95;
font-family: 'Gamja Flower', sans-serif;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: black;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-left: 20px;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
font-size: 20px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
text-align: center;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
padding: 80px 0 80px;
background-color: white;
font-size: 20px;
text-align: center;
margin-top:-50px;
}
footer {
background-color: black;
padding: 80px 0 80px;
margin: 50px 0px 50px;
text-align: center;
font-size: 20px;
}
So, my goal is to create a simple navigation bar with centered links/elements. I kinda succeeded... Kinda because when i set the floating option it changes spaces between elements and twitches the text out of position (run the snippet to see the efect).
Wanna have some space between the words, but to stay fixed when floated over or activated/selected.
I tried to make it work with styling only ul and li tags but it didnt work, so i tried placing the li tags into separate divisions. Still no success.
Looked through every possible solution i could think of - adding margins, padding, setting them to auto, looked through similar questions here and around web and i got nothing.
Obviously i'm missing something and i would appreciate your help very much so i can continue working on my website.
Here is the code:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
margin: 0;
position: fixed;
height: 85px;
width: 100%;
text-align: center;
background-color: #002345;
}
.about {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.portfol {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.cont {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.active {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #fff;
color: #002345;
}
a:hover {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #777;
color: #002345;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PortfolioPage</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<div class="about"> <li>ABOUT ME</li> </div>
<div class="portfol"> <li>PORTFOLIO</li> </div>
<div class="cont"> <li>CONTACT</li> </div>
</ul>
</div>
</header>
</body>
it happens because you have added padding on the :hover state but it is not present in the normale state rule...
a {
padding-left: 15px;
padding-right: 15px;
}
a:hover {
display: block;
/*padding-left: 15px;
padding-right: 15px;*/
background-color: #777;
color: #002345;
}
It is because in your hover class you are adding padding to the a tag, add them by default like the example
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
margin: 0;
position: fixed;
height: 85px;
width: 100%;
text-align: center;
background-color: #002345;
}
.about {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.portfol {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.cont {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.active {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #fff;
color: #002345;
}
a{
padding-left: 15px;
padding-right: 15px;
}
a:hover {
display: block;
background-color: #777;
color: #002345;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PortfolioPage</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<div class="about"> <li>ABOUT ME</li> </div>
<div class="portfol"> <li>PORTFOLIO</li> </div>
<div class="cont"> <li>CONTACT</li> </div>
</ul>
</div>
</header>
</body>
just remove
padding-left: 15px;
padding-right: 15px;
from
a: hover
I'm trying to control the "show more" link and cannot, I've used link controls before, but this one is puzzling me. The link I've tried to control so far is #r_a_show_more_link ("show more" link on right under recent activity) it's code is at the bottom of the CSS, but I can't get it to work. Maybe I'm doing something wrong with the CSS selectors? Please look at the code and run the snippet!
Thanks a lot!
/* Main Nav */
#home_icon {
height: 40px;
float: left;
padding: 10px;
position: relative;
top: 95px;
}
li {
display: inline-block;
}
ul {
float: right;
position: relative;
top: 50px;
margin: 0px;
padding: 0px;
}
li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
margin: 3px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 5px;
}
nav li a:visited {
color: black;
}
nav li a:hover {
color: gray;
border-color: gray;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 150px;
background-color: rgba(255,255,255,0.9);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
float: right;
margin: 15px;
display: inline-block;
background: #2b303b;
border: none;
color: #63717f;
border-radius: 5px;
}
#logo {
float: left;
height: 150px;
display: inline-block;
}
body {
background-image: url("../pictures/test.jpg");
background-color: blue;
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.9);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
color: white;
font-size: 130px;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
padding: 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link :visited {
color: black;
}
#r_a_show_more_link :hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link :active {
color: black;
border-color: black;
}
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<a href="">
<img id="logo" src="pictures/jeff_logo.png" alt="Logo">
</a>
<img src="pictures/home_icon.png" id="home_icon"/>
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
<ul>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h1 id="welcome">Welcome to </br> my website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
You need to remove the space before :visited in the CSS:
#r_a_show_more_link:visited {
color: black;
}
you have an extra space before your :hover,:visited and:active, so remove it, like this:
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link:active {
color: black;
border-color: black;
}