Im trying to build my website for my school project and im trying to make the navigation bar using flexbox. Everything else is working fine but for some reason the links Tietoa, Usein ja Yhteyttä are stacking on each other and I cant get it to work. I've tried adding the display flex and content justify in the nav and ul links but it still doesnt work
<!DOCTYPE html>
<head>
<meta charset="utf-8"
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"
</head>
<body>
<header>
<img class="logo" src="logo.png" alt="logo">
<nav>
<ul class="nav_links">
<li>Tietoa</li>
<li>Usein</li>
<li>Yhteydet</li>
</ul>
</nav>
<a class="cta" href="#"><button>yhteyttä</button></a>
</header>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
body {
background-color: #F5F5F5;
color: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 1px solid red;
}
li, a, button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: black;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: white;
box-shadow: 0px 2px 5px lightgray;
}
.logo {
cursor: pointer;
width: 100px;
height: 100px;
}
.nav__links {
list-style: none;
display: inline-block;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9
}
button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.8);
}
Your class names in html and css are different fix them :
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
body {
background-color: #F5F5F5;
color: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 1px solid red;
}
li, a, button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: black;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: white;
box-shadow: 0px 2px 5px lightgray;
}
.logo {
cursor: pointer;
width: 100px;
height: 100px;
}
.nav_links {
list-style: none;
display: flex;
flex-direction:row;
}
.nav_links li {
display:block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9
}
button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.8);
}
<!DOCTYPE html>
<head>
<meta charset="utf-8"
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"
</head>
<body>
<header>
<img class="logo" src="logo.png" alt="logo">
<nav>
<ul class="nav_links">
<li>Tietoa</li>
<li>Usein</li>
<li>Yhteydet</li>
</ul>
</nav>
<a class="cta" href="#"><button>yhteyttä</button></a>
</header>
</body>
</html>
Related
I started making a landing page for a coin counting website, but for no reason, I have a bottom x scrollbar but when I try to remove it with overflow-x it messes everything up. I think the title is causing the scrollbar to appear but IDK why or what style is causing it. I started a couple of weeks ago so I don't know a lot.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
}
li,
a,
button {
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo {
margin-right: auto;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #834bef;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: #834bef;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: #4400ff;
}
.title {
font-size: 240%;
position: relative;
left: 80px;
top: 120px;
color: white;
}
.text {
background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 100%;
}
.cta {
background: #834bef;
position: relative;
top: 160px;
left: 65px;
font-size: 1.5rem;
}
.cta:hover {
background: #4400ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Coin Counter</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<img class="logo" src="64x64.png" alt="image not found /:" />
<nav>
<ul class="nav__links">
<li>about</li>
<li>donate</li>
<li>home</li>
</ul>
</nav>
<a class="contact" href="#"><button>contact</button></a>
</header>
<hr />
<text class="text">
<h1 class="title">
want to make
<div class="gradient">coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<button class="cta" type="button">Try Now!</button>
</body>
</html>
Please try the below code that i have pasted, I hope it will work as expected .
let me tell you that what was the issue -
using "position: relative" for "title" class was causing issue .
And it is always good to use font-size in pixel instead of using in percentage like you are doing .. to adjust the content always ensure to use spacing like margin and padding .
happy coding .
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
}
li,
a,
button {
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo {
margin-right: auto;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #834bef;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: #834bef;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: #4400ff;
}
.title {
font-size: 30px;
margin-top: 60px;
margin-left: 60px;
left: 80px;
top: 120px;
color: white;
}
.text {
background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 100%;
}
.cta {
background: #834bef;
position: relative;
top: 160px;
left: 65px;
font-size: 1.5rem;
}
.cta:hover {
background: #4400ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Coin Counter</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<img class="logo" src="64x64.png" alt="image not found /:" />
<nav>
<ul class="nav__links">
<li>about</li>
<li>donate</li>
<li>home</li>
</ul>
</nav>
<a class="contact" href="#"><button>contact</button></a>
</header>
<hr />
<text class="text">
<h1 class="title">
want to make
<div class="gradient">coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<button class="cta" type="button">Try Now!</button>
</body>
</html>
You were correct that the title class was causing a problem.
It had been given a left position. But it also had remained at the default display: block - the 'extra' scroll part was caused by the addition of theleft: 80px
This snippet gives it display: inline-block:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
}
li,
a,
button {
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo {
margin-right: auto;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #834bef;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: #834bef;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: #4400ff;
}
.title {
font-size: 240%;
position: relative;
left: 80px;
top: 120px;
color: white;
display: inline-block;
}
.text {
background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 100%;
}
.cta {
background: #834bef;
position: relative;
top: 160px;
left: 65px;
font-size: 1.5rem;
}
.cta:hover {
background: #4400ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Coin Counter</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<img class="logo" src="64x64.png" alt="image not found /:" />
<nav>
<ul class="nav__links">
<li>about</li>
<li>donate</li>
<li>home</li>
</ul>
</nav>
<a class="contact" href="#"><button>contact</button></a>
</header>
<hr />
<text class="text">
<h1 class="title">
want to make
<div class="gradient">coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<button class="cta" type="button">Try Now!</button>
</body>
</html>
you are setting left property for title tag which shift the content right side from that left amount so it needs to show a horizontal scroll bar to view the content shifted from the viewing area.
You can resolve it by changing the left property to margin-left like in below code
.title {
font-size: 240%;
position: relative;
margin-left: 80px;
top: 120px;
color: white;
}
other wise you can set the width of the title by reducing the shifted value from it like below
.title {
font-size: 240%;
position: relative;
left: 80px;
top: 120px;
color: white;
width: calc(100% - 80px);
}
Hello I just started with HTML & CSS and I am currently working on my first website. I have the problem that my nav bar delays the div below it when the div (called Start) is set to relative. I have to scroll to see the full image in the div. But when I set it to absolute it centers the div perfectly but the nav bar is not visible anymore. I would be grateful if someone could help me!
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>RATA</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<img class="Logo" src="images/R-white.png" alt="Skull-Logo">
<nav>
<ul class="nav__links">
<li>Roadmap</li>
<li>About</li>
<li>Team</li>
<li>FAQ</li>
</ul>
</nav>
<a class="cta" href="#"><button>Mint</button></a>
</header>
<div class="Start">
<img class="background" src="images/RATA-small.svg" alt="RATA">
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
/************** PARAM SELECTORS ******************/
body {
margin: 0;
}
/*******************CLASS SELECTORS*****************/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #191919;
z-index: 1;
}
li, a, button {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.Logo {
cursor: pointer;
height: 100px;
margin: 0;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta button:hover {
background-color: rgba(0, 136, 169, 0.8)
}
/**Div**/
.Start {
position: relative;
bottom: 0;
width: 100%;
}
/** Image in Div**/
.background {
margin-top: 0px;
bottom: 0;
position: relative;
z-index: 0
}
I have to scroll to see the full image in the div.
That sounds like the image height is simply too large for your screen, here I set it to 200px:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
/************** PARAM SELECTORS ******************/
body {
margin: 0;
}
/*******************CLASS SELECTORS*****************/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #191919;
z-index: 1;
}
li, a, button {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.Logo {
cursor: pointer;
height: 100px;
margin: 0;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta button:hover {
background-color: rgba(0, 136, 169, 0.8)
}
/**Div**/
.Start {
position: relative;
bottom: 0;
width: 100%;
}
/** Image in Div**/
.background {
margin-top: 0px;
bottom: 0;
z-index: 0;
width: 100%;
height: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>RATA</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<img class="Logo" src="images/R-white.png" alt="Skull-Logo">
<nav>
<ul class="nav__links">
<li>Roadmap</li>
<li>About</li>
<li>Team</li>
<li>FAQ</li>
</ul>
</nav>
<a class="cta" href="#"><button>Mint</button></a>
</header>
<div class="Start">
<img class="background" src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
</div>
</body>
</html>
Click the Full Page button to see the snippet in full screen of your device
So I am extremely new to coding and I am doing this for my career school capstone project and I am running into a lot of problems. Mainly two: How to put the image above the content box? (even with a transparent background).
Here is my Code:
/*Header Begins*/
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #FFDAB9;
}
li, a, button {
font-family: "Monserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.5);
}
.logo {
cursor: pointer;
}
.nav__links{
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #fd56ed;
}
button {
padding: 9px 25px;
background-color: #79cdf6;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(0,136,169,1);
}
header img {
width: 13%;
height: 13%;
}
/*Header Ends*/
/*body begins*/
.container {
width: 90%;
margin: 50px auto;
}
.box {
margin: 30px auto 70px;
background: #FFFFFF;
opacity: 0.5;
display: flex;
position: relative;
}
#box img:logo.png {
opacity: 1;
}
/*body ends*/
/*footer begins*/
footer {
width: 100%;
text-align: center;
bottom: 0;
box-shadow: 0 -2px 2px -2px rgba(0,0,0,.5);
position: reflexive;
left: 0;
padding-top: 8px;
padding-bottom: 5px;
}
.nav_link_footer li a:hover {
list-style: none;
color: #fd56ed;
}
.nav_link_footer li a {
transition: all 0.3s ease 0s;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="images/logo.png" alt="Alt Image">
<nav>
<ul class="nav__links">
<li>Home</li>
<li>Catalog</li>
<li>Clothes</li>
<li>Corner</li>
</ul>
</nav>
<a class="cta" href="Contact.html"><button>Contact Us</button><a>
</header>
*** <div class="container">
<div class="box">
<img src="images/logo.png">
</div>
</div> ***
<footer>
<ul class="nav_link_footer">
<li><p>Marshion©</p></li>
<li>Email Us</li>
<li><p>YouTube: #Marshion!</p></li>
<li><p>Instagram: #Marshion</p></li>
<li><p>Facebook: #Marshion</p></li>
</ul>
</footer>
</body>
</html>
The white box appears next to the image. I wanted it to be inside the box. I also wanted to box to have it's own set of opacity and colors. Which I know that I need to adjust my DIV boxes and create better ones but I'm not sure where to start #1, and I don't necessarily have any guidance on how to do so.
So first at all:
If you want to make the background of the box a bit transparent then you should not give an opacity: 0.5; but a background: rgba(255,255,255,0.5);
Then I also saw this in your CSS code:
You used a class for the box in the HTML. For the box-image in CSS you used an ID. And if you want to address the image in the Box class then you don't say .box img:logo.png but .box img
The correct CSS code should look like this:
Here is the whole revised code again. If something is missing then let us know:
/*Header Begins*/
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #FFDAB9;
}
li, a, button {
font-family: "Monserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.5);
}
.logo {
cursor: pointer;
}
.nav__links{
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #fd56ed;
}
button {
padding: 9px 25px;
background-color: #79cdf6;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(0,136,169,1);
}
header img {
width: 13%;
height: 13%;
}
/*Header Ends*/
/*body begins*/
.container {
width: 90%;
margin: 50px auto;
}
.box {
margin: 30px auto 70px;
background: rgba(255,255,255,0.5);
display: flex;
position: relative;
}
.box img {
opacity: 1;
margin: 0 auto;
display: block;
}
/*body ends*/
/*footer begins*/
footer {
width: 100%;
text-align: center;
bottom: 0;
box-shadow: 0 -2px 2px -2px rgba(0,0,0,.5);
position: reflexive;
left: 0;
padding-top: 8px;
padding-bottom: 5px;
}
.nav_link_footer li a:hover {
list-style: none;
color: #fd56ed;
}
.nav_link_footer li a {
transition: all 0.3s ease 0s;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="images/logo.png" alt="Alt Image">
<nav>
<ul class="nav__links">
<li>Home</li>
<li>Catalog</li>
<li>Clothes</li>
<li>Corner</li>
</ul>
</nav>
<a class="cta" href="Contact.html"><button>Contact Us</button><a>
</header>
*** <div class="container">
<div class="box">
<img src="images/logo.png">
</div>
</div> ***
<footer>
<ul class="nav_link_footer">
<li><p>Marshion©</p></li>
<li>Email Us</li>
<li><p>YouTube: #Marshion!</p></li>
<li><p>Instagram: #Marshion</p></li>
<li><p>Facebook: #Marshion</p></li>
</ul>
</footer>
</body>
</html>
Try this
#box img:logo.png {
float: none;
opacity: 1;
}
I'm trying to make a webpage to put some academic/work related stuff on it, but can't seem to figure out how to just put some buttons around my text without the button's margin totally running into each other.
My issue is when I try to add a margin to my projects button, it pushes the contact info button down a line. Any suggestions?
Here's what I have:
Please run code snippet in a full window
html {
font-size: 10px;
font-family: 'Raleway', sans-serif;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
}
h1 {
padding: 20px;
font-size: 60px;
text-shadow: 3px 3px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li>Contact Info</li>
</ul>
</body>
</html>
You should never use px value for alignement, you can use float:right and float-left instead of them , but they are not working in your exemple , or to be more specific, only the float:rightis not working, because that the width it is not taking 100% of the screen width , here's the fix : https://stackblitz.com/edit/angular-jihnyk
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li class="right-button"><a href="#contacts" >Contact Info</a></li>
</ul>
</body>
</html>
CSS :
html {
font-size: 10px;
font-family: 'Raleway', sans-serif;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
}
h1 {
padding: 20px;
font-size: 60px;
text-shadow: 3px 3px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
transition: all 0.4s ease 0s;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%
}
.right-button{
float: right;
padding-right: 47px
}
a small hint : you can add the same transition you added in hover to the normal class, to get the same transition when the mouse leaves the button
I'm new to the web design world, so I was playing a bit with bootstrap's and w3 help and I encountered the following issue.
I've got this right now:
what I have
and I want to make the two buttons on the right to fit the whole navigation bar height, is there a way to do that? something like a match_parent in android.
Here's my code:
li {
display: inline;
float: left;
}
li a {
width: 80px;
height: match-parent;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 24px;
text-decoration: none;
padding-bottom: 8px;
padding-top: 8px;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
li a:hover {
background: #1075e9;
/*border-radius: 50px;*/
border-color: #1075e9;
transition: all .4s ease 0s;
}
li a:active{
background-color: #07274d;
border-color: #07274d;
transition: 0s;
}
.right-li{
float: right !important;
}
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
}
#banner-img{
/*border: 1px solid black;*/
border-radius: 30px;
width: 80px;
height: 105.8px;
padding: 4px;
}
#banner-img:hover{
background: rgb(168, 168, 168);
transition: all .4s ease 0s;
}
#banner-img:active{
background-color: rgb(24, 24, 24);
border-color: white;
transition: 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
<meta charset="utf-8">
<title>Test page</title>
<script src="script.js"></script>
</head>
<header>
<!--Main Navigation-->
<div class="navbar-container">
<ul class="navbar">
<li>
<img src="logo.png" id="banner-img" href="#home">
</li>
<li class="right-li">
Me
</li>
<li class="right-li">
About
</li>
</ul>
</div>
</header>
<body>
<!-- page content -->
</body>
</html>
Use Height for li as 100% and remove the top and bottom padding from a. Use line height to vertically align the text.
li {
display: inline;
height:100%;/* made the height to be the same as the parent's height */
float: left;
}
li a {
line-height:110px; /* line height should be the same as the element's height*/
width: 80px;
height: 100%;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 0 24px; /* removed the padding from top and bottom to prevent the a element overflowing*/
text-decoration: none;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
EDIT. Oh and if you use Chrome, Firefox , they have developer tools which you can use to see what elements to edit.
You can use display: flex; and flex-grow: 1; to get the contents to the right. Much cleaner than using floats.
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
display: flex;
}
.logo {
flex-grow: 1;
}
li a {
width: 80px;
height: match-parent;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 24px;
text-decoration: none;
padding-bottom: 8px;
padding-top: 8px;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
#banner-img {
/*border: 1px solid black;*/
border-radius: 30px;
width: 80px;
height: 105.8px;
padding: 4px;
}
#banner-img:hover {
background: rgb(168, 168, 168);
transition: all .4s ease 0s;
}
#banner-img:active {
background-color: rgb(24, 24, 24);
border-color: white;
transition: 0s;
}
<header>
<!--Main Navigation-->
<div class="navbar-container">
<ul class="navbar">
<li class="logo">
<img src="logo.png" id="banner-img" href="#home">
</li>
<li class="right-li">
Me
</li>
<li class="right-li">
About
</li>
</ul>
</div>
</header>
change the navbar height
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
}
or if you want to keep the navbar same size and
.right-li {
float: right !important;
height: 104px;
}
Add line height for anchor elements
li {
display: inline;
float: left;
height: 100%;
}
li a {
width: 80px;
line-height: 4.2;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 24px;
text-decoration: none;
padding-bottom: 8px;
padding-top: 8px;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
li a:hover {
background: #1075e9;
/*border-radius: 50px;*/
border-color: #1075e9;
transition: all .4s ease 0s;
}
li a:active{
background-color: #07274d;
border-color: #07274d;
transition: 0s;
}
.right-li{
float: right !important;
}
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
}
#banner-img{
/*border: 1px solid black;*/
border-radius: 30px;
width: 80px;
height: 105.8px;
padding: 4px;
}
#banner-img:hover{
background: rgb(168, 168, 168);
transition: all .4s ease 0s;
}
#banner-img:active{
background-color: rgb(24, 24, 24);
border-color: white;
transition: 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
<meta charset="utf-8">
<title>Test page</title>
<script src="script.js"></script>
</head>
<header>
<!--Main Navigation-->
<div class="navbar-container">
<ul class="navbar">
<li>
<img src="logo.png" id="banner-img" href="#home">
</li>
<li class="right-li">
Me
</li>
<li class="right-li">
About
</li>
</ul>
</div>
</header>
<body>
<!-- page content -->
</body>
</html>
This is your solution
li {
display: inline;
float: left;
height: 100%;
}
li a {
line-height:110px; /* line height should be the same as the element's height*/
width: 80px;
height: 100%;
background-color: rgb(49, 48, 48);
font-family: Arial;
color: white;
font-weight: 700;
font-size: 24px;
padding: 0 24px; /* removed the padding from top and bottom to prevent the a element overflowing*/
text-decoration: none;
text-align: center;
display: inline-block;
border-left: 1px solid black;
border-right: 1px solid black;
transition: all 0.3s ease 0s;
}
li a:hover {
background: #1075e9;
/*border-radius: 50px;*/
border-color: #1075e9;
transition: all .4s ease 0s;
}
li a:active{
background-color: #07274d;
border-color: #07274d;
transition: 0s;
}
.right-li{
float: right !important;
}
.navbar {
list-style: none;
background: rgb(49, 48, 48);
height: 115.8px;
}
#banner-img{
/*border: 1px solid black;*/
border-radius: 30px;
width: 80px;
height: 105.8px;
padding: 4px;
}
#banner-img:hover{
background: rgb(168, 168, 168);
transition: all .4s ease 0s;
}
#banner-img:active{
background-color: rgb(24, 24, 24);
border-color: white;
transition: 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
<meta charset="utf-8">
<title>Test page</title>
<script src="script.js"></script>
</head>
<header>
<!--Main Navigation-->
<div class="navbar-container">
<ul class="navbar">
<li>
<img src="logo.png" id="banner-img" href="#home">
</li>
<li class="right-li">
Me
</li>
<li class="right-li">
About
</li>
</ul>
</div>
</header>
<body>
<!-- page content -->
</body>
</html>
See Code Here you can edit also See Code