Long story short: Is it possible to make the hover effect appear inside the animation box without going out of border? Right now it's because of the .menu li having a display: flex. Without it, animation breaks. I am pretty sure I'm doing something wrong but I haven't been able to figure it out. I'm a newbie so any help is appreciated. Code attached. Thanks in advance!
I have this --->>>
Looking to get this without breaking the animation ---->>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/158ff5ced2.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Live like legends</title>
<link rel="stylesheet" href="./css/style.css">
<script src="javakood.js"></script>
</head>
<body>
<nav class="navbar">
<input type="checkbox" id="check">
<label for="check" class="menubtn">
<i class="fas fa-bars"></i>
</label>
<div class="logo">
<img src="./veebipilt.png" width="128" height="56">
</div>
<ul class="menu">
<li>Beginning</li>
<li>About me</li>
<li>Statistics</li>
</ul>
<ul class="menu2">
<li><a class="speciall" href="#">Objectives</a></li> <! -- this is not a class typo, they need to be separated -->
<li><a class="special" href="#">Contact</a></li>
</ul>
</nav>
<! Esimene vahemik veebilehes kus on tekst ja pilt korvuti---->
<section class="home">
<div class="rida">
<div class="tekstall">
<h1>Tere tulemast minu lehele!</h1>
<p>siia tuleb veel midagi lahedat veel ei tea</p>
</div>
<div class="piltnext">
<img src="./12345.jpg" width="500" height="300">
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<section class="about">
<div class="tekstabout">
<h1><mark>Veidi</mark> minust</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
background: #cbcca3;
position: fixed;
width: 100%;
padding: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
margin-bottom: 0;
}
.home{
background: url("./sigma.gif") no-repeat center;
background-size: cover;
height: 100vh;
}
.logo {
float: left;
line-height: 70px;
margin-left: 30px;
margin-right: 50px;
}
.menu{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
align-items: center;
}
.menu li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
margin-right: 30px;
}
.menu li:after,
.menu li:before {
content: "";
position: absolute;
display: block;
border: 0px solid transparent;
}
.menu li:after {
width: 0%;
height: 80%;
border-top: 2px solid #8a2be2;
border-bottom: 2px solid #8a2be2;
transition: all 0.6s ease;
}
.menu li:before {
width: 120%;
height: 0%;
border-left: 2px solid #8a2be2;
border-right: 2px solid #8a2be2;
transition: all 0.5s ease;
}
.menu li:hover::before {
height: 75%;
}
.menu li:hover::after {
width: 110%;
}
.menu2{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
align-items: center;
}
.menu2 {text-align: right;}
.menu a {
margin: 0 5px;
font-size: 20px;
line-height: 70px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
.menu2 a {
margin: 0 5px;
font-size: 20px;
text-transform: uppercase;
line-height: 70px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
letter-spacing: 2px;
}
a.special,a:hover{
background-color: ghostwhite;
transition: .5s;
}
p{
color: floralwhite;
}
.menubtn {
color: blueviolet;
font-size: 25px;
float: right;
display: none;
cursor: pointer;
}
#check{
display: none;
}
#media (max-width: 933px){
.menubtn{
display: block;
}
.menu li, .menu2 li{
position: fixed;
width: auto;
height: auto;
background: white;
text-align: center;
top: 70px;
left: 0;
}
}
.rida{
display: flex;
align-items: center;
justify-content: space-between;
}
.tekstall{
flex-basis: auto;
min-width: 300px;
margin-left: 20px;
padding-left: 30px;
}
.piltnext{
max-width: 100%;
padding: 20px;
height: auto;
margin-top: 0px;
}
Related
I recently started developing my own website and I require some help from people who are more advanced in CSS and HTML. I am struggling with navbar alignment. I want my middle part as in "beginning" "about me" and "statistics" to be exactly in the middle. "Objectives" and "contact" to the right, logo to the left. Main problem is that I can't figure out how to perfectly align everything so the distance between left and right remains the same, as well as the middle part of the navbar. And yes, I am trying to make the website responsive so it looks good on every device. My end goal is to make an awesome portfolio site that also showcases my skill a little. I also haven't used bootstrap but I included it in my code. Sorry for a long text, I am very new to this so it's hard for me to describe the problem. My code is also very messy so if anyone has time to correct/give feedback, I would really really appreciate that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/158ff5ced2.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Live like legends</title>
<link rel="stylesheet" href="./css/style.css">
<script src="javakood.js"></script>
</head>
<body>
<nav class="navbar">
<!-- <input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars"></i>
</label>
-->
<div class="logo">
<img src="./veebipilt.png" width="128" height="56">
</div>
<ul class="menu">
<li>Beginning</li>
<li>About me</li>
<li>Statistics</li>
</ul>
<ul class="menu2">
<li>Objectives</li>
<li><a class="special" href="#">Contact</a></li>
</ul>
</nav>
<! Esimene vahemik veebilehes kus on tekst ja pilt korvuti---->
<section class="home">
<div class="rida">
<div class="tekstall">
<h1>Tere tulemast minu lehele!</h1>
<p>siia tuleb veel midagi lahedat veel ei tea</p>
</div>
<div class="piltnext">
<img src="./12345.jpg" width="500" height="300">
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<section class="about">
<div class="tekstabout">
<h1><mark>Veidi</mark> minust</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
background: #cbcca3;
position: fixed;
width: 100%;
padding: 15px 0;
display: flex;
}
.home{
background: url("./sigma.gif") no-repeat center;
background-size: cover;
height: 100vh;
}
.logo {
float: left;
line-height: 70px;
margin-left: 30px;
margin-right: 20px;
}
.menu{
text-align: center;
padding: 0;
margin: 0;
justify-content: space-between;
}
.menu2{
padding: 0;
margin: 0px 30px 0px 0px;
list-style-type: none;
text-align: center;
}
.navbar .menu li{
display: inline-block;
list-style-type: none;
margin: 0px 20px 0px 20px;
}
.navbar .menu li a{
font-size: 17px;
line-height: 70px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
.navbar .menu2 li{
display: inline-block;
margin: 0px 20px 0px 20px;
}
.navbar .menu2 li a{
font-size: 17px;
text-transform: uppercase;
line-height: 70px;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
a.special,a:hover{
background-color: paleturquoise;
transition: .5s;
}
p{
color: floralwhite;
}
.rida{
display: flex;
align-items: center;
justify-content: space-between;
}
.tekstall{
flex-basis: auto;
min-width: 300px;
margin-left: 20px;
padding-left: 30px;
}
.piltnext{
max-width: 100%;
padding: 20px;
height: auto;
margin-top: 0px;
}
Currently I'm working in laptop so my screen isn't big. But, I made some adjustments to your code and I think it's what you want.
You just need to define the width values for everything and make sure it all works in mobile to.
Regards
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
background: #cbcca3;
position: fixed;
width: 100%;
padding: 15px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.home {
background: url("./sigma.gif") no-repeat center;
background-size: cover;
height: 100vh;
}
.logo {
line-height: 70px;
margin-left: 30px;
margin-right: 20px;
max-width: 20px;
}
.menu {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 20px;
}
.menu a {
margin: 0 5px;
font-size: 17px;
line-height: 70px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
.menu2{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 20px;
}
.menu2 a {
margin: 0 5px;
font-size: 17px;
text-transform: uppercase;
line-height: 70px;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
}
a.special,a:hover{
background-color: paleturquoise;
transition: .5s;
}
p{
color: floralwhite;
}
.rida{
display: flex;
align-items: center;
justify-content: space-between;
}
<nav class="navbar">
<div class="logo">
<img src="./veebipilt.png" width="128" height="56">
</div>
<div class="menu">
<div>Beginning</div>
<div>About me</div>
<div>Statistics</div>
</div>
<div class="menu2">
<div>Objectives</div>
<div><a class="special" href="#">Contact</a></div>
</div>
</nav>
Welcome to stackoverflow. Your css needs some tweaking. try this (note vertical-align and line-height):
.navbar .menu li a{
font-size: 17px;
line-height: 56px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
vertical-align: middle;
}
I am not entirely clear what you asking for but to create a truly centered Navbar, with variable-length left and right-aligned items, CSS Flexbox can be used. My Codepen implementation (of the original idea from Keep the middle item centered when side items have different widths) could be modified for a Navbar: https://codepen.io/sam-miller-the-flexboxer/pen/OJQoGGq?editors=1100
The centerline class and div add a central divider to check the alignment of the center div in this example.
CSS:
.centerline {
position: fixed;
top: 0;
left: 50%;
width: 10px;
height: 100%;
background: black;
transform: translateX(-50%);
opacity: 0.5;
z-index: 1
}
.parent {
display: flex;
}
.left,
.right {
background-color: red;
flex: 1 1 0%;
overflow: auto;
}
.right {
text-align: right;
}
.center {
background-color: green;
}
Html:
<div class="centerline"></div>
<div class="parent">
<div class="left">
short text.
</div>
<div class="center">
I'm in the center.
</div>
<div class="right">
Very loooooooong text.
</div>
</div>
For more ideas regarding Bootstrap see:
https://github.com/twbs/bootstrap/discussions/36486
https://github.com/twbs/bootstrap/pull/36523/commits/fca49e8ee6b4d768d0ec144fb3b73ac2c5ff3cc0
Bootstrap Navbar 4 code examples (some of the classes would have to be updated for Boostrap 5):
https://codepen.io/yesiamrocks/pen/MVOWXZ
Hello there i want to ask something related to (maybe) element positioning.
So i've been stuck with this problem for a while. The and the are stacking on top of each other. Is there a efficient workaround so the will be directly under the ? And weirdly the is stuck there too.
Here's the screenshoot of it:
Screenshot of the page
Here's my css and html snippet:
#-ms-viewport {
width: device-width;
}
* {
box-sizing: border-box;
}
/* FONT */
#import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght#0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
body,
html {
width: 100%;
height: 100%;
margin: auto 0;
/*background-color: #FDE500;*/
font-family: 'Arimo', sans-serif;
}
ul {
list-style: none;
}
li {
padding: 20px;
margin: 10px;
}
h3 {
font-family: 'Arimo', sans-serif;
font-size: 1em;
}
.nav-container li a {
text-decoration: none;
color: black;
font-family: 'Arimo', sans-serif;
font-weight: 1000;
}
/* NAV */
.zone-nav {
background-color: #1A1EB0;
width: 100%;
display: block;
}
.nav-container li a {
color: #FDE500;
}
ul.nav-container {
padding-left: 0;
margin: 0 auto;
}
.nav-container {
display: flex;
flex-flow: row wrap;
font-size: 1.2em;
margin: 0;
justify-content: space-between;
align-items: center;
width: 100%;
margin: auto 0;
}
#media only screen and (max-width: 600px) {
.nav-container {
font-size: 1.3em;
padding: 0;
flex-flow: column wrap;
}
}
.nav-container li a img {
display: block;
width: 1.5em;
margin: 0 auto;
margin-bottom: -10px;
}
.item-1 {
margin: 0 auto;
flex: 1 1 0px;
text-align: center;
}
li.item-1 {
padding: 30px;
}
/*.logo {
margin: auto 0;
}*/
.item-2 {
margin: auto 0;
background-color: ;
}
li.item-1.logo img {
width: 5em;
display: block;
margin: 0 auto;
padding: auto 0;
}
li.item-1.logo {
margin: auto 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
/* z-index: 1;*/
}
/* MAIN */
.zone-main {
display: flex;
flex: 1 0 auto;
max-width: 100%;
background: rgb(238, 174, 202);
background: linear-gradient(90deg, rgba(238, 174, 202, 1) 38%, rgba(148, 187, 233, 1) 100%);
}
.wrap-main {
flex: 1 1 auto;
max-width: 100%;
position: relative;
}
/* FOOTER */
.zone-footer {
background-color: #FDE500;
}
.footer-container {
display: flex;
flex-flow: row wrap;
font-size: 16px;
color: #1A1EB0;
font-weight: 1000;
margin: 0;
justify-content: safe center;
align-items: center;
margin: auto 0;
padding: 0 20px 0 20px;
}
.footer-item {
margin: 0;
padding: 10px;
text-align: center;
}
li.footer-item-buffer {
flex-grow: 1;
}
.push {
margin-left: auto;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | P.Y.G. Headquarters</title>
<link rel="stylesheet" type="text/css" href="style-base.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=Arimo:ital,wght#0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width">
</head>
<body>
<nav class="zone-nav sticky">
<ul class="nav-container">
<li class="item-1">
<img src="assets/img/join.png" alt="ICON I"><br>JOIN
</li>
<li class="item-1">
<img src="assets/img/home.png" alt="ICON II"><br>HOME
</li>
<li class="item-1">
<img src="assets/img/lineups.png" alt="ICON I"><br>LINEUPS
</li>
<li class="item-1 logo"><img src="assets/img/pyg.png" alt="ICON I"></li>
<li class="item-1">
<img src="assets/img/tickets.png" alt="ICON III"><br>SCHEDULE
</li>
<li class="item-1">
<img src="assets/img/shopping-bag.png" alt="ICON IV"><br>STORE
</li>
<li class="item-1">
<img src="assets/img/link.png" alt="ICON IV"><br>LINKS
</li>
</ul>
</nav>
<main class="zone-main">
<div class="wrap-main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</main>
<footer class="zone-footer">
<ul class="footer-container">
<li class="footer-item">P.Y.G. Administrative Service - Since 2012</li>
<li class="footer-item-buffer"></li>
<li class="footer-item push">PRIVACY POLICY</li>
<li class="footer-item push">HELP</li>
</ul>
</footer>
</body>
</html>
Thanks in advance.
Remove the sticky css class on the nav element.
The sticky css class makes your main content sticking to the top of the page.
And add the following css on the body
body {
display:flex;
flex-direction: column;
height: 100%;
}
This puts all containers (nav, main, footer) under each other.
I am trying to create a fixed nav. For the most part, it works. But I want to center the h1 for responsive design. I could just push it away from the burger menu but then it wouldn't be responsive and bang in the middle.
Also I would like to push the .intro paragraph down away from the top. But every time I do a margin gap appears at the top, and I can't for the life of me remember how to get rid of this.
Thank you to anyone who takes a look. Means a lot! Hopefully one day I can repay the favor!
Below is my HTML and CSS. I also used a standard normalize.css, and some Js but I don't think you will need that. If you do, let me know:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Code Review</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
</head>
<body>
<header>
<!-- Introduction -->
<div class="background">
<nav class="navbar">
<span class="open-slide" onclick="openSideMenu()">
<!-- <a href="#" onclick="openSideMenu()">-->
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="4"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="4"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="4"/>
</svg>
<!-- </a>-->
</span>
<div id="main">
<h1>Luke Bennett</h1>
</div>
<!--
<ul class="navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
-->
</nav>
<!-- Side Navigation Bar -->
<div id="side-menu" class="side-nav">
<span class="btn-close exit" onclick="closeSideMenu()">×</span>
Home
<a onclick="closeSideMenu()" href="#about">About</a>
<a onclick="closeSideMenu()" href="#portfolio-link">Portfolio</a>
<a onclick="closeSideMenu()" href="#resume-link">Resume</a>
<a onclick="closeSideMenu()" href="#contact">Contact</a>
</div>
<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</header>
<main>
<!-- About Me -->
<div class="about-me"><a id="about"></a>
<h2>About Me</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<!-- Portfolio -->
<div class="portfolio"><a id="portfolio-link"></a>
<h2>Portfolio</h2>
<!-- Front Page -->
<img src="img/well-being/well-being.png" alt="Donjas-Well-Being-For-Kids"/>
</div>
<!-- Resume -->
<div class="resume">
Download Resume
</div>
<!-- Contact Form -->
<div class="contact-form"><a id="contact"></a>
<form>
<fieldset>
<legend>Contact Form</legend>
<ul>
<li>
<label for="name">Name</label>
<input required type="text" id="name" name="full_name" placeholder="Required">
</li>
<li>
<label for="email">Email</label>
<input required type="text" id="email" name="email_address" placeholder="Required">
</li>
<li>
<label for="message">Message</label>
<textarea id="message" name="other_topics"></textarea>
</li>
<button type="submit">Hello!</button>
</ul>
</fieldset>
</form>
</div>
</main>
<footer>
<p>My name is Luke Bennett and I am a Human - Luke Bennett</p>
</footer>
<script src="javascript/menu.js"></script>
*,
input,
textarea,
button {
font-family: 'Lato', sans-serif;
}
h1 {
font-size: 1.7rem;
font-weight: 300;
letter-spacing: 3px;
}
h2 {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 2px;
}
p {
letter-spacing: 1px;
}
ul {
list-style: none;
padding: 0;
}
a {
text-decoration: none;
}
/************************************************************
HEADER
*************************************************************/
.navbar {
display: flex;
position: fixed;
overflow: hidden;
height: 40px;
padding: 16px 16px;
align-items: center;
}
#main {
margin: 0 auto;
}
#main a {
color: black;
}
.background {
background: linear-gradient(0deg, #fff, transparent 40%),
#333333 url('../img/sophie.jpg') no-repeat center;
background-size: cover;
padding-bottom: 50%;
margin-bottom: 30px;
}
.intro {
background: white;
opacity: 0.65;
line-height: 40px;
letter-spacing: 4px;
padding: 20px;
margin: 0 15% 15%;
}
/************************************************************
SIDE NAV
*************************************************************/
svg {
padding-top: 3px;
transition: 1s;
/*
border: 1px solid black;
border-radius: 50%;
*/
}
svg:hover {
opacity: 0.3;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #333333;
opacity: 0.9;
overflow-x: hidden;
text-align: center;
transition: 0.5s;
padding-top: 90px;
}
.side-nav a,
.btn-close {
display: block;
font-weight: 400;
color: white;
padding: 15px;
transition: 1s;
}
.side-nav a:hover,
.btn-close:hover {
background: white;
color: black;
font-weight: 400;
cursor: pointer;
}
.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
/************************************************************
MAIN
*************************************************************/
main {
margin-bottom: 0
}
.about-me {
margin-bottom: 40px;
}
.about-me h2 {
margin-bottom: 30px;
}
.about-me h2,
.about-me p {
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
.about-me p {
font-weight: 300;
margin-bottom: 0px;
}
/************************************************************
PORTFOLIO
*************************************************************/
.portfolio {
background: #DCEAF5;
text-align: center;
padding: 20px 20px 50px;
}
.portfolio h2 {
color: black;
margin-bottom: 40px;
}
.portfolio img {
width: 80%;
padding: 3px;
transition: 1s;
margin-bottom: 10px;
border: 2px solid grey;
}
.portfolio img:hover {
opacity: 0.6;
}
/************************************************************
RESUME
*************************************************************/
/* #DCEAF5 #659EB8 */
.resume {
display: flex;
background: #969DA3;
padding: 10%;
}
.resume a {
display: block;
background: #DCEAF5;
color: black;
font-size: 1.2rem;
text-align: center;
margin: auto;
padding: 7%;
border-radius: 5px;
transition: 0.5s;
}
.resume a:hover {
opacity: 0.6;
}
/************************************************************
CONTACT
*************************************************************/
.contact-form {
background: #cc8c33;
height: 500px;
padding: 20% 10%;
}
fieldset {
border: 0;
}
legend {
font-size: 1.5rem;
font-weight: 400;
text-align: center;
color: white;
}
label {
display: block;
color: white;
margin-bottom: 10px;
}
input,
textarea {
box-sizing: border-box;
border-radius: 5px;
padding: 10px;
}
input:focus,
textarea:focus {
border: 2px solid #969DA3;
outline: none;
}
input {
border-style: none;
width: 100%;
border: 2px solid #cc8c33;
margin-bottom: 10px;
transition: 0.5s;
}
::placeholder {
text-align: right;
font-style: italic;
font-size: 0.7rem;
padding-right: 1px;
}
/* Textarea styling */
textarea {
height: 110px;
resize: none;
width: 100%;
margin-bottom: 30px;
border: 2px solid #cc8c33;
}
/* Button styling */
button {
border: none;
background: lightblue;
color: white;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 1px;
width: 100%;
border-radius: 5px;
padding: 20px;
transition: 0.5s;
}
button:hover {
background: #DCEAF5;
color: black;
}
/************************************************************
SOCIAL
*************************************************************/
footer {
background: lightblue;
height: 500px;
}
I'm making a page layout and I can't apply styles only to the footer for some reason, I've reviewed the code and did find anything wrong (But i'm sure there bc its not working -_-) I've tried rewriting the code and still not working.
//*GENERAL*//
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
border: 1px solid black;
}
.logo img {
width: 100px;
margin: 50px auto 10px;
display: block;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: black;
}
//*NAVIGATION*//
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
padding: 10px;
text-align: center;
margin: 5px;
}
nav ul li a {
color: black;
}
//*HERO*//
.wrap {
height: 400px;
padding: 1px
}
.head-content {
height: 505px;
background: url(../img/hero.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 40% 50%;
padding: 10px;
text-align: center;
}
.head-content h1, a {
color: white;
}
.head-content h1 {
margin-top: 130px;
font-size: 3em;
}
.head-content .btn {
padding: 15px 20px;
margin: 10px auto;
background: #FF0080;
border-radius: 3px;
display: inline-block;
border-radius: 5px;
}
.btn:hover {
color: #FF0080;
background: white;
font-weight: bold;
transition: .25s;
}
//*LEARN MORE*//
.wrap-services {
height: 1400px;
padding: 1px;
margin: 1px;
}
.headline {
color: rgba(0,0,0, .8);
text-align: center;
padding: 10px;
height: 100px;
margin: 70px 0 0 0;
}
.headline h2 {
font-size: 1.5em;
padding: 0;
margin: 0;
}
.headline h3 {
color: rgba(0,0,0, .4);
font-weight: lighter;
font-size: 1em;
}
.ser-1,
.ser-2,
.ser-3 {
height: 400px;
padding: 10px;
margin: 0 2.5%;
text-align: center;
/*border: 1px solid black;*/
}
.ser-1 h3,
.ser-2 h3,
.ser-3 h3 {
border-bottom: 2px solid #FF0080;
padding: 10px;
margin: 5px 5px 30px;
font-size: 1em;
}
.ser-1 p,
.ser-2 p,
.ser-3 p {
color: rgba(0,0,0, .5);
font-size: .9em;
line-height: 2em;
}
//*REVIEWS*//
.wrap-review {
height: 770px;
}
.content-review {
text-align: center;
height: 770px;
background: #FF0080;
color: white;
padding: 1px;
}
.content-review h3 {
margin-top: 80px;
font-size: 1.7em;
}
.review {
background: white;
color: #FF0080;
margin: 20px 2.5%;
border-radius: 2px;
height: 200px;
display: block;
}
.review-content {
text-align: center;
padding: 40px 20px 20px;
}
.review-name {
font-style: italic;
font-weight: bold;
}
.review-name-img {
display: none;
}
//*FORM*//
.wrap-form {
height: 770px;
padding: 1px;
}
.wrap-form-contect {
text-align: center;
height: 770px;
padding: 1px;
margin: 70px 10px 10px;
border: 5px solid black;
}
.wrap-form-contect p {
text-transform: capitalize;
line-height: 1.5em;
font-size: .95em;
}
input,
textarea {
border: none;
background: #eee;
margin: 10px;
padding: 20px;
}
textarea {
padding: 30px;
}
button {
display: block;
margin: 10px auto;
background: #FF0080;
color: white;
border: none;
padding: 20px;
width: 75%;
font: bold 1.4em/1 sans-serif;
}
button:hover {
cursor: pointer;
background: yellow;
color: black;
transition: .5s;
}
//*FOOTER*//
footer {
background: black;
height: 500px;
margin: 500px;
padding: 500px;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<title>FSA Doc.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/nor.css">
<link rel="stylesheet" type="text/css" href="style/main.css">
</head>
<body>
<header>
<div class="logo">
<img src="img/black.png" alt="FSA Doc.">
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>REVIEWS</li>
<li>CONTACT US</li>
</ul>
</nav>
</header>
<div class="head-content">
<h1>FSA Doc.</h1>
<a class="bth" href="#">CALL (866) 210-1337</a>
<a class="bth" href="#">LEARN MORE</a>
</div>
<div class="headline">
<h2>LEARN MORE</h2>
<h3>about how we help</h3>
</div>
<div class="ser-1">
<h3>SATISFACTION GUARANTEED</h3>
<p>Document Prep Express has a stellar success rate and we strive to provide services will get you the best results possible!</p>
</div>
<div class="ser-2">
<h3>NO UPFRONT FEES</h3>
<p>Period.</p>
</div>
<div class="ser-3">
<h3>WE’RE HERE TO HELP</h3>
<p>Confused? Don’t know where to turn? Our experts will answer all your questions.</p>
</div>
<div class="review">
<h3 class="head-review">what people say</h3>
<div class="review-contienr">
<p class="review">“FSA Doc. saved me from losing my car and apartment! I could not thank Document Prep Express enough.”</p>
<h3 class="reivew-name">Lindsay Anderson</h3>
</div>
<div class="review-contienr">
<p class="review">“Experts in their field! They told me everything to look out for and acted quickly”</p>
<h3 class="reivew-name">Ashley Guthrie</h3>
</div>
</div>
<div class="wrap-form">
<h3>get started</h3>
<p>let us know what can we do for you</p>
<form>
<input value="Your Name" type="text">
<input value="Email" type="text">
<textarea>Your Message</textarea>
<button type="submit">Send</button>
</form>
</div>
<footer>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</footer>
</body>
</html>
Remove the double back slashes from your css comments. Proper css comment syntax looks like this:
/* comment */
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 8 years ago.
Improve this question
i am making a website and i have noticed that i cannot scroll using the scroll wheel on a mouse. I can use two-finger scrolling on my chromebook but not the scroll wheel on my pc. The issue is with both of the browsers i use; firefox and chrome.
Thanks in advance, Liam
css:
header {
width: 100%;
}
body {
margin: 0;
overflow: hidden;
}
footer {
clear: both;
height: 100px;
width: 100%;
background-color: #3d3d3d;
position: relative;
}
.nav {
width: 100%;
height: 50px;
background-color: #3D3D3D;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0)
}
.navwrap{
position: fixed;
width: 100%;
}
.name-logo {
width: 100%;
height: 350px;
background-color: #4BD150;
overflow: hidden;
}
.content {
float: left;
background-color: #f5fafa;
padding-left: 3%;
padding-right: 2%;
border-right: 4px solid #F5f5f5;
width: calc(65% - 4px);
z-index: 1;
height: 300px;
}
.sidebar {
width: 30%;
float: right;
background-color: #f5fafa;
height: 300px;
}
.social {
width: 30%;
float: right;
}
.social-icon {
float: right;
padding-left: 10px;
padding-top: 15px;
width: 35px;
}
#facebook {
padding-right: 15px;
}
.coppyright {
color: #fff;
padding-left: 25px;
width: 40%;
float: left;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.name {
width: 60%;
height: 100%;
padding-left: 100px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.logo {
width: 60%;
height: 100%;
float: right;
white-space:nowrap;
margin-top: 20px;
margin-right: 20%;
margin-left: 20%;
}
.logo-img {
width: 100%;
vertical-align: middle;
}
#nav {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
height: 50px;
}
#nav li {
float: left;
font-family: Ubuntu, sans-serif;
font-size: 20px;
}
#nav li a {
display: block;
padding-left: 15px ;
padding-right: 15px;
padding-top: 11px;
text-decoration: none;
font-weight: bold;
color: #fff;
height: 50px;
width: auto;
}
#nav li a:hover {
color: #fff;
background-color: #333333;
height: 39px;
}
#home {
margin-left: 20px;
}
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
<title>Hackapi Mockup</title>
</head>
<!--This is where the navbar and splash title goes-->
<body><header>
<div class="navwrap">
<div class="nav">
<ul id="nav">
<li id="home">Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
<div class="name-logo">
<div class="logo">
<span class="helper"></span>
<img class="logo-img" src="https://imagizer.imageshack.us/v2/821x224q90/674/hloZoz.png">
</div>
</div>
</header>
<!--Main content and sidebar-->
<div class="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="sidebar">
</div>
<!--Here is where all extra links, coppyrights and social media links go-->
<footer>
<div class="coppyright">
<h4>Coppyright Hackapi 2014</h4>
</div>
<div calss="social">
<img id="facebook" class="social-icon" src="https://imagizer.imageshack.us/v2/128x128q90/538/Kk3S3f.png">
<img id="twitter" class="social-icon" src="https://imagizer.imageshack.us/v2/128x128q90/913/xP6ctI.png">
<img id="gplus" class="social-icon" src="https://imagizer.imageshack.us/v2/128x128q90/536/nkHuql.png">
<img id="ytube" class="social-icon" src="https://imagizer.imageshack.us/v2/128x128q90/906/Sct7fy.png">
</div>
</footer>
</body>
I believe it is due to this style:
body {
overflow: hidden;
margin: 0;
}
You have to remove overflow:hidden as it is preventing the scrollbars from showing.
CSS:
overflow: auto;
OR
overflow-y: auto;
on body {}