I am very frustrated with this all, I never had such an easy and annoying and at the same time difficult problem
i can't set the footer element at the end of the site.
I need to keep this footer at the down of the site, and it shouldn't override the main content.
HTML
<!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="styles.css" rel="stylesheet" type="text/css"/>
<title>ARL</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1 class="header-title">
Need a good coder? contact us!
</h1>
</header>
<main>
<section class="main-section">
<div class="team">
<h3 class="team-manager">
our general manager, Pavel
</h3>
<img src="https://i.pinimg.com/originals/fc/8b/27/fc8b27f6c8102afdb9da962a22bcd5bc.jpg">
<div class="container">
<ul>
<li>Members</li>
<ul>
<li>Aleksandr</li>
<li>Ruslan</li>
<li>Leonard</li>
</ul>
</ul>
</div>
</div>
</section>
</main>
<footer>
<div class="contacts">
<p>
call us: 5555555555
</p>
<a class="link" href="https://www.facebook.com" target= "_blank"><img src="https://img.icons8.com/color/480/000000/facebook-new.png"/></a>
<a class="link" href="https://codepen.io/" target="_blank"><img src="https://cdn0.iconfinder.com/data/icons/social-media-2091/100/social-32-512.png"></a>
<a class="link" href="https://telegram.org/" target="_blank"><img src="https://img.icons8.com/color/240/000000/telegram-app.png"/></a>
<a class="link" href="https://www.fl.ru/" target="_blank"><img src="https://otzyvmarketing.ru/media/product/image_258.png"></a>
</div>
</footer>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100;300;500&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,700&family=Source+Sans+Pro:wght#200;300;400;600;700&display=swap');
html{
scroll-behavior: smooth;
}
body{
margin: 0;
padding: 0;
height: 100%;
background:#221F1F;
color: white;
font-family: monospace;
}
header{
background: #F65314;
box-shadow: 0px 11px 26px 0px rgba(0,0,0,0.75);
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
color: darkslategray;
font-size: 25px;
font-style:oblique;
font-weight: 100;
}
main{
min-height: 100vh;
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px;
display: block;
}
.main-section{
position: relative;
max-width: 1750px;
display: block;
margin: auto;
margin-top: 175px;
}.main-section img{
width: 385px;
}
.team{
position: relative;
margin-left: 5%;
}
.team-manager{
position: relative;
color: #F65314;
font-size: 25px;
font-style: italic;
}
.container{
position: relative;
font-size: 40px;
border: 5px solid #F65314;
width: 385px;
}
.container ul{
position: relative;
list-style: none;
}
.container ul li{
position: relative;
color: gray;
}
.container ul ul li{
position: relative;
margin-left: -40px;
line-height: 60px;
color: white;
}
.container ul ul{
position: relative;
margin-top: 35px;
}
footer{
bottom: 0;
width: 100%;
height: 100px;
position: absolute;
background: #303030;
}
.contacts{
display: flex;
justify-content: space-around;
align-items: center;
margin: auto;
width: 400px;
}
.contacts p{
font-size: 20px;
}
.link img{
width: 35px;
border-radius: 5px;
}
Here are some images, I have no idea how to deal with this
https://ibb.co/ssvBMQJ
https://ibb.co/hL9JLvv
https://ibb.co/HHgVKbc
(I don't need to make the footer element position: fixed;, i need to make average footer, which doesn't override the main content, and nested always at the bottom of the page)
Just remove bottom: 0 on footer, like this:
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100;300;500&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,700&family=Source+Sans+Pro:wght#200;300;400;600;700&display=swap');
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
height: 100%;
background: #221F1F;
color: white;
font-family: monospace;
}
header {
background: #F65314;
box-shadow: 0px 11px 26px 0px rgba(0, 0, 0, 0.75);
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
color: darkslategray;
font-size: 25px;
font-style: oblique;
font-weight: 100;
}
main {
min-height: 100vh;
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px;
display: block;
}
.main-section {
position: relative;
max-width: 1750px;
display: block;
margin: auto;
margin-top: 175px;
}
.main-section img {
width: 385px;
}
.team {
position: relative;
margin-left: 5%;
}
.team-manager {
position: relative;
color: #F65314;
font-size: 25px;
font-style: italic;
}
.container {
position: relative;
font-size: 40px;
border: 5px solid #F65314;
width: 385px;
}
.container ul {
position: relative;
list-style: none;
}
.container ul li {
position: relative;
color: gray;
}
.container ul ul li {
position: relative;
margin-left: -40px;
line-height: 60px;
color: white;
}
.container ul ul {
position: relative;
margin-top: 35px;
}
footer {
width: 100%;
height: 100px;
position: absolute;
background: #303030;
}
.contacts {
display: flex;
justify-content: space-around;
align-items: center;
margin: auto;
width: 400px;
}
.contacts p {
font-size: 20px;
}
.link img {
width: 35px;
border-radius: 5px;
}
<!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="styles.css" rel="stylesheet" type="text/css" />
<title>ARL</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1 class="header-title">
Need a good coder? contact us!
</h1>
</header>
<main>
<section class="main-section">
<div class="team">
<h3 class="team-manager">
our general manager, Pavel
</h3>
<img src="https://i.pinimg.com/originals/fc/8b/27/fc8b27f6c8102afdb9da962a22bcd5bc.jpg">
<div class="container">
<ul>
<li>Members</li>
<ul>
<li>Aleksandr</li>
<li>Ruslan</li>
<li>Leonard</li>
</ul>
</ul>
</div>
</div>
</section>
</main>
<footer>
<div class="contacts">
<p>
call us: 5555555555
</p>
<a class="link" href="https://www.facebook.com" target="_blank"><img src="https://img.icons8.com/color/480/000000/facebook-new.png" /></a>
<a class="link" href="https://codepen.io/" target="_blank"><img src="https://cdn0.iconfinder.com/data/icons/social-media-2091/100/social-32-512.png"></a>
<a class="link" href="https://telegram.org/" target="_blank"><img src="https://img.icons8.com/color/240/000000/telegram-app.png" /></a>
<a class="link" href="https://www.fl.ru/" target="_blank"><img src="https://otzyvmarketing.ru/media/product/image_258.png"></a>
</div>
</footer>
</body>
</html>
you need to add position: relative to the body and bottom: -100px in footer tag css
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100;300;500&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,700&family=Source+Sans+Pro:wght#200;300;400;600;700&display=swap');
html{
scroll-behavior: smooth;
}
body{
margin: 0;
padding: 0;
height: 100%;
background:#221F1F;
color: white;
font-family: monospace;
position: relative;
}
header{
background: #F65314;
box-shadow: 0px 11px 26px 0px rgba(0,0,0,0.75);
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
color: darkslategray;
font-size: 25px;
font-style:oblique;
font-weight: 100;
}
main{
min-height: 100vh;
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px;
display: block;
}
.main-section{
position: relative;
max-width: 1750px;
display: block;
margin: auto;
margin-top: 175px;
}.main-section img{
width: 385px;
}
.team{
position: relative;
margin-left: 5%;
}
.team-manager{
position: relative;
color: #F65314;
font-size: 25px;
font-style: italic;
}
.container{
position: relative;
font-size: 40px;
border: 5px solid #F65314;
width: 385px;
}
.container ul{
position: relative;
list-style: none;
}
.container ul li{
position: relative;
color: gray;
}
.container ul ul li{
position: relative;
margin-left: -40px;
line-height: 60px;
color: white;
}
.container ul ul{
position: relative;
margin-top: 35px;
}
footer{
bottom: -100px;
width: 100%;
height: 100px;
position: absolute;
background: #303030;
}
.contacts{
display: flex;
justify-content: space-around;
align-items: center;
margin: auto;
width: 400px;
}
.contacts p{
font-size: 20px;
}
.link img{
width: 35px;
border-radius: 5px;
}
<!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="styles.css" rel="stylesheet" type="text/css"/>
<title>ARL</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1 class="header-title">
Need a good coder? contact us!
</h1>
</header>
<main>
<section class="main-section">
<div class="team">
<h3 class="team-manager">
our general manager, Pavel
</h3>
<img src="https://i.pinimg.com/originals/fc/8b/27/fc8b27f6c8102afdb9da962a22bcd5bc.jpg">
<div class="container">
<ul>
<li>Members</li>
<ul>
<li>Aleksandr</li>
<li>Ruslan</li>
<li>Leonard</li>
</ul>
</ul>
</div>
</div>
</section>
</main>
<footer>
<div class="contacts">
<p>
call us: 5555555555
</p>
<a class="link" href="https://www.facebook.com" target= "_blank"><img src="https://img.icons8.com/color/480/000000/facebook-new.png"/></a>
<a class="link" href="https://codepen.io/" target="_blank"><img src="https://cdn0.iconfinder.com/data/icons/social-media-2091/100/social-32-512.png"></a>
<a class="link" href="https://telegram.org/" target="_blank"><img src="https://img.icons8.com/color/240/000000/telegram-app.png"/></a>
<a class="link" href="https://www.fl.ru/" target="_blank"><img src="https://otzyvmarketing.ru/media/product/image_258.png"></a>
</div>
</footer>
</body>
</html>
Related
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700;800&display=swap');
*{
margin: 0%;
padding: 0%;
}
.maincontainer
{
display: grid;
place-items: center;
}
.sec
{
font-family: Open Sans;
position: relative;
width: 70%;
display: flex;
align-items: center;
justify-content: space-evenly;
height: max-content;
margin-top: 15%;
}
ul{
display: flex;
justify-content: space-around;
list-style: none;
width: 100%;
}
.line
{
position: absolute;
z-index: -1;
width: 100%;
height: 5px;
background-color: #BDBDBD;
border-radius: 20px;
}
.circle
{
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background-color: #1AEF81;
}
.odd::after
{
content: "25/08/2021 8:00 PM";
position: absolute;
width: max-content;
height: max-content;
border-radius: 7px;
background-color: deepskyblue;
transform: translate(-43%, 250%);
}
.odd::before
{
content: "Approved By Co-ordinator";
position: absolute;
width: max-content;
font-weight: 600;
height: max-content;
border-radius: 7px;
background-color: deepskyblue;
transform: translate(-45%, 70%);
padding-top: 35px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
color: #ffffff;
}
.even::before
{
z-index: 1;
content: "25/08/2021 8:00 PM";
position: absolute;
top: -90px;
width: max-content;
height: max-content;
border-radius: 7px;
background-color: deepskyblue;
transform: translatex(-44%);
}
.even::after
{
content: "Approved By Co-ordiantor";
content: "25/08/2021 8:00 PM";
color: white;
font-weight: 600;
position: absolute;
top: -100px;
width: max-content;
height: max-content;
border-radius: 7px;
background-color: deepskyblue;
transform: translatex(-45%);
padding-top: 35px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.events
{
display: grid;
place-items: center;
margin-top: 15%;
}
.eventCards
{
width: max-content;
display: flex;
align-items: center;
justify-content: space-around;
font-family: Open Sans;
font-size: small;
border-radius: 10px;
padding: 10px;
background-color: rgba(0, 191, 255, 0.13);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.507);
margin: 15px;
}
.name
{
display: flex;
place-items: center;
}
.name p{
padding: 10px;
font-size: smaller;
color: #505050;
}
.right
{
width: 90px;
height: 30px;
border-radius: 5px;
background-color: #BDBDBD;
font-family: Open Sans;
font-weight: 700;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.eventCards .status
{
margin-left: 50px;
margin-right: 10px;
}
#one
{
background-color: #1AEF81;
}
#two
{
background-color: #ffc400;
}
#three
{
background-color: #c40d0d;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div class="maincontainer">
<div class="sec">
<div class="line"></div>
<ul>
<li class="circle odd"></li>
<li class="circle even"></li>
<li class="circle odd"></li>
<li class="circle even"></li>
<li class="circle odd"></li>
</ul>
</div>
<div class="events">
<div class="eventCards">
<div class="left">
<div class="name">
<h3>PHP-DC Introduction Session</h3>
<p>8sd7f8sd6f</p>
</div>
<p>27-08-2021</p>
</div>
<p class="status">Status : </p>
<div class="right" id="one">
Approved
</div>
</div>
<div class="eventCards">
<div class="left">
<div class="name">
<h3>PHP-DC Introduction Session</h3>
<p>8sd7f8sd6f</p>
</div>
<p>27-08-2021</p>
</div>
<p class="status">Status : </p>
<div class="right" id="two">
Pending
</div>
</div>
<div class="eventCards">
<div class="left">
<div class="name">
<h3>PHP-DC Introduction Session</h3>
<p>8sd7f8sd6f</p>
</div>
<p>27-08-2021</p>
</div>
<p class="status">Status : </p>
<div class="right" id="three">
Rejected
</div>
</div>
</div>
</div>
</body>
</html>
I have to add multiple texts in pseudo-selectors using it's content property. Is there any way to do it?
I would like to achieve something like this:
Result
I have used the :before and :after pseudo-selector of the middle circle and place the text there, but I think there must be an optical way to do it right?
Context: I have a relative div which contain an image and a card with some information. The card is overlapping the bottom of the image with an absolute position but when resizing, the card does not stay at the same position within his parent div and goes following the rule of another container:
Achievement: What I am trying to do is whine resizing the browser, I want the card to stay at the same position on the image (overlapping).
Here is my html:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
flex-direction: column;
color: white;
background-color: #181719;
}
main {
padding: 46px 76px 46px 77px;
max-width: 1440px;
margin: auto;
border: solid 1px;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: "Crimson Pro";
border: solid 1px;
padding: 8px;
font-size: 18px;
font-weight: 200;
}
ul {
display: flex;
justify-content: space-between;
list-style: none;
flex: 0.4;
font-family: "Montserrat";
font-weight: 500;
font-style: normal;
font-size: 18px;
}
.container {
display: flex;
margin-top: 177px;
justify-content: space-between;
gap: 139px;
}
.main_image {
border: #828282 solid;
position: relative;
}
.main_image img {
width: 100%;
height: auto;
}
h1 {
font-family: "Lora";
font-size: 48px;
}
.text_presentation i {
margin-left: 15px;
vertical-align: middle;
}
.text_presentation p {
font-family: "Montserrat";
font-weight: 300;
font-size: 24px;
margin-top: 40px;
width: 410px;
}
.text_presentation a {
font-family: "Montserrat";
font-weight: 600;
margin-top: 48px;
position: absolute;
}
.card {
position: absolute;
width: 410px;
height: 189px;
background-color: #181719;
top: 477px;
bottom: 30px;
right: 32px;
left: 300px;
border: solid red;
}
.card_info {
display: flex;
position: relative;
}
.card img {
border-radius: 50%;
width: 50px;
height: 50px;
margin: 18px 0px 0px 31px;
}
.card h3,
h4 {
font-family: "Montserrat";
font-weight: 500;
}
.card h3 {
position: absolute;
font-size: 14px;
top: 23px;
left: 100px;
}
.card h4 {
position: absolute;
color: #828282;
font-size: 12px;
width: 202px;
top: 48px;
left: 100px;
}
.card p {
font-family: "Lora";
font-weight: 700;
font-size: 24px;
width: 287px;
margin: 30px 0px 0px 28px;
}
footer {
font-family: "Montserrat";
font-size: 17px;
text-align: center;
margin-top: 206px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interior Design</title>
<link
href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght#200;400&family=Lora&family=Montserrat:wght#300;400;500&display=swap"
rel="stylesheet"
/>
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<main>
<nav>
<div class="logo">
<p>This Interior</p>
</div>
<ul>
<li>Home</li>
<li>Collection</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="container">
<div class="text_presentation">
<h1>Modern Interior</h1>
<p>
A full-Service residential & commercial interior design and staging
company offering professional organizing & eco-services.
</p>
<a>Read more<i class="lni lni-arrow-right"></i></a>
</div>
<div class="main_image">
<img src="/photo1.png" alt="photo" />
<div class="card">
<div class="card_info">
<img src="/photo2.png" alt="photo2" />
<h3>Aliza Webbler</h3>
<h4>Interior Designer</h4>
</div>
<p>Designed in 2020 by Aliza Webber</p>
</div>
</div>
</div>
<footer>
<p>Rémy # Devchallenge.io</p>
</footer>
</main>
</body>
</html>
I guess I am missing something but I do not know where.
Thank you for your help.
The changes I made are in classes: .card , .main_image and .main_image img
The way I made the changes makes this part of the web page responsive.
On the .card element the absolute position is replaced by a relative one. This allows you to position the element more flexibly.
For .main_image and .main_image img. I moved the border from the DIV element to the picture. In this way, the DIV element remains as a package for both elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interior Design</title>
<link
href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght#200;400&family=Lora&family=Montserrat:wght#300;400;500&display=swap"
rel="stylesheet" />
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
flex-direction: column;
color: white;
background-color: #181719;
}
main {
padding: 46px 76px 46px 77px;
max-width: 1440px;
margin: auto;
border: solid 1px;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: "Crimson Pro";
border: solid 1px;
padding: 8px;
font-size: 18px;
font-weight: 200;
}
ul {
display: flex;
justify-content: space-between;
list-style: none;
flex: 0.4;
font-family: "Montserrat";
font-weight: 500;
font-style: normal;
font-size: 18px;
}
.container {
display: flex;
margin-top: 177px;
justify-content: space-between;
gap: 139px;
}
.main_image {
position: relative;
}
.main_image img {
width: 100%;
height: auto;
border: #828282 solid;
}
h1 {
font-family: "Lora";
font-size: 48px;
}
.text_presentation i {
margin-left: 15px;
vertical-align: middle;
}
.text_presentation p {
font-family: "Montserrat";
font-weight: 300;
font-size: 24px;
margin-top: 40px;
width: 410px;
}
.text_presentation a {
font-family: "Montserrat";
font-weight: 600;
margin-top: 48px;
position: absolute;
}
.card {
position: relative;
width: 410px;
height: 189px;
background-color: #181719;
border: solid red;
margin-top: -80px;
margin-left: auto;
margin-right: 3%;
}
.card_info {
display: flex;
position: relative;
}
.card img {
border-radius: 50%;
width: 50px;
height: 50px;
margin: 18px 0px 0px 31px;
}
.card h3,
h4 {
font-family: "Montserrat";
font-weight: 500;
}
.card h3 {
position: absolute;
font-size: 14px;
top: 23px;
left: 100px;
}
.card h4 {
position: absolute;
color: #828282;
font-size: 12px;
width: 202px;
top: 48px;
left: 100px;
}
.card p {
font-family: "Lora";
font-weight: 700;
font-size: 24px;
width: 287px;
margin: 30px 0px 0px 28px;
}
footer {
font-family: "Montserrat";
font-size: 17px;
text-align: center;
margin-top: 206px;
}
</style>
<main>
<nav>
<div class="logo">
<p>This Interior</p>
</div>
<ul>
<li>Home</li>
<li>Collection</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="container">
<div class="text_presentation">
<h1>Modern Interior</h1>
<p>
A full-Service residential & commercial interior design and staging
company offering professional organizing & eco-services.
</p>
<a>Read more<i class="lni lni-arrow-right"></i></a>
</div>
<div class="main_image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/08/profile-view-of-a-brown-horse_by_54ka.jpg"
alt="photo" />
<div class="card">
<div class="card_info">
<img src="/photo2.png" alt="photo2" />
<h3>Aliza Webbler</h3>
<h4>Interior Designer</h4>
</div>
<p>Designed in 2020 by Aliza Webber</p>
</div>
</div>
</div>
<footer>
<p>Rémy # Devchallenge.io</p>
</footer>
</main>
</body>
</html>
I have been trying to solve this issue but for some reason my code is wrong and I am a beginner, I am trying to get those in place, but it isn't responsive, and they get distorted. I am seeking some help to solve this.
please do look at the link(https://i.stack.imgur.com/ZO5F2.jpg) above.
Thank you!!
#import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Alice&family=NTR&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #F4F4F4;
}
navup{
justify-content: space-around;
align-items: center;
display: flex;
min-height: 62px;
background-color: #000000;
color: white;
}
navup h1{
/*padding-left: 40rem;*/
font-family: 'alice', serif;
font-size: 36px;
font-weight: normal;
font-style: italic;
}
navup li{
list-style: none;
}
navup ul li{
display: flex;
}
navup li a{
/*padding-right: -10rem;*/
display: flex;
color: white;
text-decoration: none;
font-family: 'NTR', sans-serif;
font-size: 20px;
}
navup img{
/*margin-right: 200px;*/
}
navlo{
width: 100%;
justify-content: space-evenly;
align-items: center;
display: flex;
max-height: 60px;
margin: auto;
background-image: linear-gradient(#FFFFFF,#898989);
border-radius: 0px 0px 0px 9px;
}
navlo img{
width: 61px;
height: 61px;
margin-top: 2.95px;
}
navlo ul{
display: flex;
}
navlo ul li{
list-style: none;
display: flex;
padding: 0rem 1.5rem;
}
navlo li a{
color: #000000;
text-decoration: none;
font-family: 'NTR', sans-serif;
font-size: 20px;
font-weight: bold;
}
.barone img{
position: absolute;
width: 89px;
height: 10px;
left: 906px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.bartwo img{
position: absolute;
width: 102px;
height: 10px;
left: 1025px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barthree img{
position: absolute;
width: 109px;
height: 10px;
left: 1157px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barfour img{
/* Services bar */
position: absolute;
width: 89px;
height: 10px;
left: 1296px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barfive img{
/* Partners Bar */
position: absolute;
width: 101px;
height: 10px;
left: 1415px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barsix img{
position: absolute;
width: 111px;
height: 11px;
left: 1546px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.bars img{
display: inline;
/*width: 50%;*/
margin-top: 70px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="">
<link rel="stylesheet" href="style.css">
<title>Art</title>
<style>
/* width */
::-webkit-scrollbar {
background-color: grey;
width: 13px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: black;
}
</style>
</head>
<body>
<SECTION>
<navup>
<div class="logo">
<h1>Art</h1>
</div>
<!-- <ul>
<li>
Login/Signup
</li>
<li>
<img src="../images/account.png">
</li>
</ul> -->
</navup>
</SECTION>
<section>
<navlo>
<ul>
<li>
HOME
</li>
<li>
ABOUT ME
</li>
<li>
BUY ART
</li>
<li>
BLOG
</li>
<li>
PARTNERED
</li>
<li>
CONTACT ME
</li>
</ul>
</navlo>
<section class="bars">
<div class="barone"><img src="../images/homebar.svg" alt="a lower bar for home"></div>
<div class="bartwo"><img src="../images/aboutmebar.svg" alt="a lower bar for home"></div>
<div class="barthree"><img src="../images/buyartbar.svg" alt="a lower bar for home"></div>
<div class="barfour"><img src="../images/blogbar.svg" alt="a lower bar for home"></div>
<div class="barfive"><img src="../images/partnersbar.svg" alt="a lower bar for home"></div>
<div class="barsix"><img src="../images/contactmebar.svg" alt="a lower bar for home"></div>
</section>
</section>
</body>
</html>
Rajayogi Nandina
Nothing I try to find online works. When I hover over the link it goes to the link and the url changes but it doesn't move the page. I'm using chrome up to date.
Here is the code:
Edit: Apparently it has something to do with the CSS because when I took the CSS out it started to work, but I don't know why
$('.scroll').localScroll();
body {
margin:0;
color: #222;
background-color: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
overflow-y: scroll;
overflow-x: hidden;
}
html, body {
width: 100%;
height: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header::after{
content: '';
display: table;
clear: both;
}
#down{
filter: brightness(0) invert(1);
width: 3%;
height: auto;
position: absolute;
top: 50; bottom:0; left: 0; right:0;
padding-bottom: 20px;
margin: auto;
}
.movetobot{
height: 200vh;
}
section h1{
color: #fff;
position: absolute;
text-align: center;
top: 110%;
width: 100%;
line-height: 0.4em;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.center{
text-align: center;
}
header {
width: 100%;
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.logo {
color: white;
float: left;
font-family: 'Roboto', sans-serif;
}
.btext{
font-family: 'Roboto', sans-serif;
color: #f9f3f4;
position: absolute;
text-align: center;
top: 40%;
width: 100%;
line-height: 0.4em;
}
h1{
font-size: 50px;
}
.btn{
color: #fff;
font-family: 'Roboto' sans-serif;
font-weight: 300;
text-decoration: none;
border: #ccc 1px solid;
padding: 10px 15px;
border-radius: 8px;
line-height: 4em;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 85px;
padding-top: 25px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #ecf0f1;
}
nav a::after{
margin-top:5px;
content: '';
display: block;
height: 5px;
width: 0%;
background-color: black;
position: absolute;
transition: all ease-in-out 350ms;
}
nav a:hover::after {
width: 100%;
}
.btn:hover{
color: #b19295;
border: #fff 1px solid;
}
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300" rel="stylesheet">
<link href="css/hover.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/hover.css" rel="stylesheet" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="/icons8-home-24.png">
<title>Royal Services</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first">
<div class="container">
<h2 class="logo">R O Y A L</h2>
<nav class="scroll">
<ul>
<li>Home</li>
<li>Offering</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- <hr width="100%"> -->
<a href="#services">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/634848-200.png" alt="down" class="hvr-hang" id="down">
</a>
<div class="btext">
<h1>ROYAL SERVICES</h1>
Discord
</div>
</div>
<div id="services">
<section class="movetobot">
<h1>Services</h1>
</section>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/2.0.0/jquery.localScroll.min.js></script>
<script src="js.js"></script>
</html>
Set the "id" to page part tag where you want to move.
<div id="someIdName"></div>
It's because your content in <div id="first"> is either floating or position absolute that div have no high so <div id="services"> takes all of the page. When you click the link the page is already there.
What you can do is give min-height to <div id="first">.
What i would do is to structure the HTML in better way and remove all floats and absolute positions.
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