So everywhere i go to this code does something weird with the vertical scrollbar. If you know what it is tell me the error and how i can solve it.
The error is probably in the css but I included all the code just so you can take a look.
I'll just give all the code and you tell me what's wrong. Thx
I need to write some random words so I can post this.
*::selection {
background: #333;
}
*::-moz-selection {
background: #333;
}
#font-face {
font-family: 'watchmen';
src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: red;
font-family: 'Hind', sans-serif;
}
* {
padding: 0;
margin: 0;
}
#titletext {
font-family: watchmen;
color: #FEEE2E;
font-size: 6.5vw;
}
#logo_span {
color: #146EAD;
}
#linktotwo {
text-decoration: none;
color: #146EAD;
}
#title {
position: absolute;
width: 82vw;
height: 12vh;
text-align: center;
line-height: 12vh;
top: 50%;
left: 50%;
margin-top: -6vh;
margin-left: -41vw;
}
#one {
background-color: #030200;
background-size: cover;
width:100vw;
height: 100vh;
}
#two {
height: 100vh;
width: 100vw;
background-color: #0B4F77;
}
#favul {
list-style-type: decimal;
font-family: 'Josefin Sans', sans-serif;
padding-left: 8vw;
margin: 6.5vh auto;
}
#favul > li {
margin: 1vw 0;
}
#favtit {
text-align: center;
}
#fav {
border: 1px solid #000;
position: absolute;
font-size: 48px;
left: 50%;
padding: 15px;
width: 600px;
height: 50vh;
margin-left: -316px;
overflow: hidden;
top: 150vh;
margin-top: -32vh;
background-color: #0A4366;
}
#flash {
color: #FF4500;
}
#bat {
color: #000;
}
#arrow {
color: green;
}
#manh {
color: #1580c1;
}
#images {
position: absolute;
bottom: 0%;
left: 0%;
}
#images > img {
width: 100%;
}
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<title>I Love DC Comics</title>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<meta name="description"
content="I just love DC Comics and I write some stuff on this Website"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jumpto.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="one">
<div id="title">
<p id="titletext">ONLY DC <span id="logo_span"><a id="linktotwo" href="#two">¤</a></span> COMICS!</p>
</div>
</div>
<div id="two">
<div id="fav">
<p id="favtit">My Favorite Characters</p>
<ul id="favul">
<li>The <span id="flash">Flash</span></li>
<li><span id="bat">Batman</span></li>
<li><span id="arrow">Green</span> Arrow</li>
<li>Dr. <span id="manh">Manhattan</span></li>
</ul>
<div id="images">
<img src="characters.jpeg" alt="characters"/>
</div>
</div>
</div>
</body>
</html>
#one {
width: 100%;
}
#two {
width: 100%;
}
First of all vw is not the same as %. Have a look at this explanation:
Difference between Width:100% and width:100vw?
So you have to use % instead of vw and also I would give #fav box-sizing: border-box:
*::selection {
background: #333;
}
*::-moz-selection {
background: #333;
}
#font-face {
font-family: 'watchmen';
src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: red;
font-family: 'Hind', sans-serif;
}
* {
padding: 0;
margin: 0;
}
#titletext {
font-family: watchmen;
color: #FEEE2E;
font-size: 6.5vw;
}
#logo_span {
color: #146EAD;
}
#linktotwo {
text-decoration: none;
color: #146EAD;
}
#title {
position: absolute;
width: 82vw;
height: 12vh;
text-align: center;
line-height: 12vh;
top: 50%;
left: 50%;
margin-top: -6vh;
margin-left: -41vw;
}
#one {
background-color: #030200;
background-size: cover;
width:100%;
height: 100vh;
}
#two {
height: 100vh;
width: 100%;
background-color: #0B4F77;
}
#favul {
list-style-type: decimal;
font-family: 'Josefin Sans', sans-serif;
padding-left: 8vw;
margin: 6.5vh auto;
}
#favul > li {
margin: 1vw 0;
}
#favtit {
text-align: center;
}
#fav {
border: 1px solid #000;
position: absolute;
font-size: 48px;
left: 50%;
padding: 15px;
width: 600px;
height: 50vh;
margin-left: -302px;
overflow: hidden;
top: 150vh;
margin-top: -32vh;
background-color: #0A4366;
box-sizing: border-box;
}
#flash {
color: #FF4500;
}
#bat {
color: #000;
}
#arrow {
color: green;
}
#manh {
color: #1580c1;
}
#images {
position: absolute;
bottom: 0%;
left: 0%;
}
#images > img {
width: 100%;
}
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<title>I Love DC Comics</title>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<meta name="description"
content="I just love DC Comics and I write some stuff on this Website"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jumpto.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="one">
<div id="title">
<p id="titletext">ONLY DC <span id="logo_span"><a id="linktotwo" href="#two">¤</a></span> COMICS!</p>
</div>
</div>
<div id="two">
<div id="fav">
<p id="favtit">My Favorite Characters</p>
<ul id="favul">
<li>The <span id="flash">Flash</span></li>
<li><span id="bat">Batman</span></li>
<li><span id="arrow">Green</span> Arrow</li>
<li>Dr. <span id="manh">Manhattan</span></li>
</ul>
<div id="images">
<img src="characters.jpeg" alt="characters"/>
</div>
</div>
</div>
</body>
</html>
Related
I made a header, and it was all looking good until I decided to add more text there, because the text went behind the header, and I don't want that to happen. I know that I can just use something like top: 100px on the text in the CSS file, but I wanna know a proper solution to this.
// html
<!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="template.css">
</head>
<body>
<div class="heading">
<a class="logo" href="home">go back</a>
<a class="sign_in" href="sign_in">sign in</a>
<a class="sign_up" href="sign_up">sign up</a>
</div>
<h1>Hello there</h1>
<h1>Hello there</h1>
<h1>Hello there</h1>
</body>
</html>
// CSS
.heading {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100px;
background: teal;
font-size: 30px;
}
a.logo {
top: 25px;
padding: 5px;
left: 30px;
position: fixed;
text-decoration: none;
color: white;
}
a.logo:active, a.logo:visited, a.logo:link {
background-color: dodgerblue;
}
a.logo:hover {
background-color: navy;
}
a.sign_in {
top: 25px;
padding: 5px;
right: 200px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_in:active, a.sign_in:visited, a.sign_in:link {
background-color: dodgerblue;
}
a.sign_in:hover {
background-color: navy;
}
a.sign_up {
top: 25px;
padding: 5px;
right: 50px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_up:active, a.sign_up:visited, a.sign_up:link {
background-color: dodgerblue;
}
a.sign_up:hover {
background-color: navy;
}
html {
background-color: rgb(175, 220, 235);
}
I tried using different positions, but I would either have this problem again, or the header wouldn't be touching the side of the website.
Switch the .heading to be position: sticky. This allows it to still take up space don't he page, while staying at the top when the user scrolls.
Margin: You can add margin: -10px; to the .heading to allow it to still touch the edges of the screen. Then add width: calc(100% + 20px); so it still takes up the whole width.
.heading {
top: 0;
left: 0;
position: sticky;
margin: -10px;
width: calc(100% + 20px);
height: 100px;
background: teal;
font-size: 30px;
}
a.logo {
top: 25px;
padding: 5px;
left: 30px;
position: fixed;
text-decoration: none;
color: white;
}
a.logo:active, a.logo:visited, a.logo:link {
background-color: dodgerblue;
}
a.logo:hover {
background-color: navy;
}
a.sign_in {
top: 25px;
padding: 5px;
right: 200px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_in:active, a.sign_in:visited, a.sign_in:link {
background-color: dodgerblue;
}
a.sign_in:hover {
background-color: navy;
}
a.sign_up {
top: 25px;
padding: 5px;
right: 50px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_up:active, a.sign_up:visited, a.sign_up:link {
background-color: dodgerblue;
}
a.sign_up:hover {
background-color: navy;
}
html {
background-color: rgb(175, 220, 235);
}
<!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="template.css">
</head>
<body>
<div class="heading">
<a class="logo" href="home">go back</a>
<a class="sign_in" href="sign_in">sign in</a>
<a class="sign_up" href="sign_up">sign up</a>
</div>
<h1>Hello there</h1>
<h1>Hello there</h1>
<h1>Hello there</h1>
</body>
</html>
use position:sticky all element have default margin and padding it's better to assign all element margin to 0 by
* {
margin: 0
}
we will get more control when we design or you can add margin:0 to specific class which is having margin
* {
margin: 0
}
.heading {
top: 0;
left: 0;
position: sticky;
width: 100%;
height: 100px;
background: teal;
font-size: 30px;
display: block
}
a.logo {
top: 25px;
padding: 5px;
left: 30px;
position: fixed;
text-decoration: none;
color: white;
}
a.logo:active,
a.logo:visited,
a.logo:link {
background-color: dodgerblue;
}
a.logo:hover {
background-color: navy;
}
a.sign_in {
top: 25px;
padding: 5px;
right: 200px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_in:active,
a.sign_in:visited,
a.sign_in:link {
background-color: dodgerblue;
}
a.sign_in:hover {
background-color: navy;
}
a.sign_up {
top: 25px;
padding: 5px;
right: 50px;
position: fixed;
text-decoration: none;
color: white;
text-align: right;
}
a.sign_up:active,
a.sign_up:visited,
a.sign_up:link {
background-color: dodgerblue;
}
a.sign_up:hover {
background-color: navy;
}
html {
background-color: rgb(175, 220, 235);
}
<!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="template.css">
</head>
<body>
<div class="heading">
<a class="logo" href="home">go back</a>
<a class="sign_in" href="sign_in">sign in</a>
<a class="sign_up" href="sign_up">sign up</a>
</div>
<div>
<h1>Hello there</h1>
<h1>Hello there</h1>
<h1>Hello there</h1>
</div>
</body>
</html>
I am currently attempting to increase the width of the back-drop filler effect and I am confused on how to do it. The first picture is what I have and the second is what it should look like. I feel it possibly has something to do with increasing the width and height of my nav but when I tried it didn't work out. Could also have something to do with the fact I used absolute with the nav instead of using float but im so copnfused. Thanks.
This is the HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<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=Bellefair&display=swap" rel="stylesheet">
<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=Barlow+Condensed&display=swap" rel="stylesheet">
<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=Barlow&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>Frontend Mentor | Space tourism website</title>
</head>
<body>
<div class="top-logo">
<img class="logo" src="assets/shared/logo.svg" alt="logo">
<hr>
</div>
<div class="nav">
<span class="nav-number">00</span>Home
<span class="nav-number">01</span>Destination
<span class="nav-number">02</span>Crew
<span class="nav-number">03</span>Technology
</div>
<div class="description-container">
<h5>So, you want to travel to</h5>
<h1>Space</h1>
<p>Let’s face it; if you want to go to space, you might as well genuinely go to
outer space and not hover kind of on the edge of it. Well sit back, and relax
because we’ll give you a truly out of this world experience!</p>
</div>
<button class="btn">Explore</button>
</body>
</html>
This is the CSS code
body {
background-image: url(assets/home/background-home-desktop.jpg);
background-color: black;
color: #FFFFFF;
}
hr {
width: 40%;
display: inline-block;
position: absolute;
top: 75px;
}
a {
text-decoration: none;
}
h1 {
margin: 0;
font-size: 9.375rem;
font-family: 'Bellefair', serif;
text-transform: uppercase;
font-weight: normal;
}
h2 {
font-size: 6.25rem;
}
h3 {
font-size: 3.5rem;
font-family: 'Bellefair', serif;
font-weight: normal;
}
h4 {
font-size: 2rem;
font-family: 'Bellefair', serif;
}
h5 {
margin: 0 0 0 10px;
font-size: 1.75rem;
letter-spacing: 4.75px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: normal;
color: #D0D6F9;
}
p {
width: 32%;
font-family: 'Barlow', sans-serif;
line-height: 2;
color: #D0D6F9;
}
.logo {
margin-right: 70px;
}
.top-logo {
margin: 53px 0 0 50px;
display: inline-block;
}
.nav > a {
color: grey;
margin-right: 40px;
}
.nav-number {
color: white;
margin-right: 8px;
}
.nav {
display: inline-block;
position: absolute;
top: 74px;
right: 230px;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
}
.description-container {
position: absolute;
bottom: 150px;
left: 150px;
}
.btn {
position: absolute;
bottom: 150px;
right: 150px;
}
Hello i have rewrite your code to make an clean code on my version.
body {
background-color: black;
}
.wrapper_navbar {
display: flex;
flex-direction:row;
align-items: center;
}
.logo_navbar {
display: flex;
}
.img_logo {
width: 60px;
height: 60px;
}
hr {
width: 100%;
display: inline-block;
top: 75px;
}
.hr_line{
display:flex;
flex:auto;
}
.navbar {
display: flex;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
padding: 10px 17px;
justify-content: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
text-decoration: none;
color: #ccc;
}
li a {
display: block;
padding: 8px;
}
.item_nav {
margin: 0 5px;
}
<div class="wrapper_navbar">
<div class="logo_navbar">
<div class="logo">
<img src="https://img1.pngdownload.id/20171220/dxq/google-png-5a3aafee6ff5c8.9595681415137955664586.jpg" class="img_logo" />
</div>
</div>
<div class="hr_line">
<hr />
</div>
<div class="navbar">
<ul>
<li class="item_nav">Item 1</li>
<li class="item_nav">Item 2</li>
<li class="item_nav">Item 3</li>
</ul>
</div>
</div>
https://jsfiddle.net/dimaswahyu/ntg09e5b/86/
Here's a simple explanation. Every picture paints a thousand words...
/*****************************/
/* overall setup*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #454545;
font-family: 'Rubic';
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
/******************************/
.row {
max-width: 1140px;
margin: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)) ,url(images/business-1845350.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
right: 50%;
transform: translate(65%, -50%);
}
h1 {
margin: 0;
color: #fff;
font-size: 240%;
font-weight: 300;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn-full {
display: inline-block;
padding: 10px,30px;
font-weight: 300;
}
<!DOCTYPE html>
<html dir="rtl" lang="he-IL">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources//css/style.css">
<link href="https://fonts.googleapis.com/css?family=Rubik:300,300i,400&display=swap&subset=hebrew" rel="stylesheet">
<title>לימור מלול - יבוא בידיים טובות</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1> יבוא מוצלח מתחיל כאן.<br> המרכז ליבואנים מתחילים. </h1>
<a class="btn-full" href="#"> אני רוצה להתחיל לייבא </a>
<a class="btn btn-outline" href="#"> אני רוצה לקרוא עוד </a>
</div>
</header>
</body
</html>
I can't add padding to the btn-full class.
plus i'm not sure if the hero-text-box is centered because in the course i'm learning from he is ltr and i'm rtl.
the instructor used the code
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
}
could you also tell me if my code on the .hero-text-box part is ok and matches the code of the instructor?
thx for the helpers
write this way
.btn-full {
display: inline-block;
padding: 10px 30px; /*remove ',' */
font-weight: 300;
}
I'm trying to change the text color in a menu, I have tried the color tag and the text-decoration-color tag, but neither of them work. Here is what I am working on, in CSS
#meny {
position: absolute;
top: 201px;
left: 290px;
width: 800px;
height: 50px;
text-align: center;
position: fixed;
top: 201px;
width: 60%;
display: flex;
font-weight: bold;
font-size: smaller;
color: #cccccc !important;
}
#meny a {
line-height: 50px;
flex: 1 0 auto;
font-family: verdana;
text-decoration: none
}
<!doctype html>
<html>
<head>
<title>Markveien legesenter</title>
<meta charset="utf-8">
<link href="medic.ico" rel="icon" type="image/x-icon" />
<link href="stil.css" rel="stylesheet">
</head>
<body>
<div id="header">
<img src="del2.jpg">
</div>
<div id="bilde">
<img src="del1.jpg">
</div>
<div id="meny"> HJEMOM OSSSLIK BESTILLER DUINFORMASJONLENKER
</div>
</body>
</html>
You should override the color of a, but you are putting the color on the container:
#meny a {
line-height: 50px;
flex: 1 0 auto;
font-family: verdana;
text-decoration: none;
color: #ccc; /*add color here*/
}
You should also reset color for the links:(as i commented earlier :) )
#meny {
position: absolute;
top: 201px;
left: 290px;
width: 800px;
height: 50px;
text-align: center;
position: fixed;
top: 201px;
width: 60%;
display: flex;
font-weight: bold;
font-size: smaller;
color: #cccccc !important;
}
#meny a {
color:inherit;
line-height: 50px;
flex: 1 0 auto;
font-family: verdana;
text-decoration: none
}
<!doctype html>
<html>
<head>
<title>Markveien legesenter</title>
<meta charset="utf-8">
<link href="medic.ico" rel="icon" type="image/x-icon" />
<link href="stil.css" rel="stylesheet">
</head>
<body>
<div id="header">
<img src="del2.jpg">
</div>
<div id="bilde">
<img src="del1.jpg">
</div>
<div id="meny"> HJEMOM OSSSLIK BESTILLER DUINFORMASJONLENKER
</div>
</body>
</html>
This is what it looks like.
.rectangle{
position: absolute;
top:61px;
left:116px;
width: 2px;
height: 210px;
background-color: rgba(255,255,255,0.4);
}
This is what I have, what have done wrong? No matter what I change the size remains the same.
html{background-color:#272a32;}
{
margin: 0;
padding: 0;
}
.container{
width: 320px;
height: 568px;
color:white;
}
.container div:not(.line):not(.pm):not(.month){
position: absolute;
height: 60px;
width: 80px;
text-align: right;
font-size: 70px;
font-family: 'bold';
}
.line{
position: absolute;
top:61px;
left:116px;
width: 2px;
height: 210px;
background-color: rgba(255,255,255,0.4);
}
.rectangle{
position: absolute;
top:61px;
left:116px;
width: 2px;
height: 210px;
background-color: rgba(255,255,255,0.4);
}
.pm{
position: absolute;
text-align: left;
width: 80px;
font-family: 'light';
top:86px;
left:123px;
}
.month{
position: absolute;
text-align: right;
font-family: 'light';
width: 80px;
top:248px;
left:31px;
}
.hour{
top:64px;
left:31px;
}
.minute{
top:125px;
left:31px;
}
.date{
top:187px;
left:31px;
}
#font-face{
font-family: 'bold';
src:url('BebasBold.otf');
}
#font-face{
font-family: 'light';
src:url('BebasLight.otf');
}
Desire result it box around the entire clock
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<script src="js/lang.js"></script>
<script src="js/sjs.js"></script>
<script src="js/clock.js"></script>
</head>
<body>
<section class="container">
<div class="hour">12</div>
<div class="minute">30</div>
<div class="date">20</div>
<div class="month">may</div>
<div class="pm">am</div>
<div class="line"></div>
<div class="rectangle"></div>
</section>
<script>
/* User Settings */
var highlight = "#c2332c";
var twentyfour = false;
var padzero = true;
/* End User Settings */
$$('.hour').set(clock.hour(twentyfour,padzero));
$$('.minute').set(clock.minute());
$$('.date').set(clock.date());
$$('.pm').set(clock.am());
$$('.month').set(month[clock.month()]);
$$('.minute').color(highlight);
$$('.hour').color(highlight);
$$('.pm').color(highlight);
</script>
<script src="js/sizing.js"></script>
</body>
</html>