I'm currently making a navbar for my school's NJROTC program. However, when I add content, the content goes above the navbar, even though it's position is fixed and it's top position is set to 0px.
Code
index.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>SKHS NJROTC - Dashboard</title>
<link rel="stylesheet" href="src/styles/root.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
</head>
<body>
<header>
<nav>
<div class="nav-left">
<h1 class="nav-left__brand">NJ<span>ROTC</span></h1>
<div class="nav-left__links">
Issues
Promotions
Events
Create
</div>
</div>
<div class="nav-right">
<div class="nav-right__app__drawer">
<span class="material-symbols-sharp">apps</span>
</div>
<div class="nav-right__profile"></div>
</div>
</nav>
<span class="directory">Charlie Company » Red Platoon » Promotions</span>
</header>
<main>
lorem
</main>
</body>
</html>
src/styles/root.css
#import "./modules/navigation.css";
#import url('https://fonts.googleapis.com/css2?family=Jura:wght#300;400;600&family=Orbitron:wght#500&display=swap');
:root {
--accent-color: navy;
--heading-font-families: 'Orbitron', monospace, sans-serif;
--body-font-families: 'Jura', Arial, sans-serif;
}
body {
margin: 0px;
padding: 0px;
}
src/styles/modules/navigation.css
nav {
font-family: var(--heading-font-families);
text-transform: uppercase;
padding: 5px;
border-bottom: 2px solid #CECECE;
padding: 0rem 1rem 0rem 1rem;
display: flex;
align-items: center;
position: fixed;
top: 0px;
justify-content: space-between;
height: 5rem;
width: 100%;
}
nav .nav-left {
display: flex;
justify-content: left;
gap: 25px;
align-items: center;
}
nav .nav-left .nav-left__brand {
flex: 1;
font-size: 30px;
}
nav .nav-left .nav-left__brand span {
color: var(--accent-color);
}
nav .nav-left .nav-left__links {
flex: 2;
display: flex;
gap: 25px;
}
nav .nav-left .nav-left__links .nav-link {
text-decoration: none;
margin-top: 7px;
color: var(--accent-color);
}
nav .nav-left .nav-left__links .nav-link:hover {
border-bottom: 1px solid var(--accent-color);
}
nav .nav-left .nav-left__links .nav-button {
padding: 7px;
background-color: var(--accent-color);
color: white;
text-decoration: none;
}
header span.directory {
text-transform: uppercase;
font-family: var(--heading-font-families);
color: #CECECE;
font-size: 12px;
}
I can't figure out my problem. Is it something I simply overlooked? Thanks.
Current:
Currently, content in the header (not styled) and other page content in other sections are appearing above the navbar.
image of current page
Expected:
Content not inside nav tag appear below navigation content, and have navbar stay at top of page.
expected result
Thanks in advance!
it's position is fixed and it's top position is set to 0px.
That's actually the problem, why did you make it fixed? Removind those 2 lines fixed the problem.
#import url('https://fonts.googleapis.com/css2?family=Jura:wght#300;400;600&family=Orbitron:wght#500&display=swap');
:root {
--accent-color: navy;
--heading-font-families: 'Orbitron', monospace, sans-serif;
--body-font-families: 'Jura', Arial, sans-serif;
}
body {
margin: 0px;
padding: 0px;
}
nav {
font-family: var(--heading-font-families);
text-transform: uppercase;
padding: 5px;
border-bottom: 2px solid #CECECE;
padding: 0rem 1rem 0rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 5rem;
width: 100%;
}
nav .nav-left {
display: flex;
justify-content: left;
gap: 25px;
align-items: center;
}
nav .nav-left .nav-left__brand {
flex: 1;
font-size: 30px;
}
nav .nav-left .nav-left__brand span {
color: var(--accent-color);
}
nav .nav-left .nav-left__links {
flex: 2;
display: flex;
gap: 25px;
}
nav .nav-left .nav-left__links .nav-link {
text-decoration: none;
margin-top: 7px;
color: var(--accent-color);
}
nav .nav-left .nav-left__links .nav-link:hover {
border-bottom: 1px solid var(--accent-color);
}
nav .nav-left .nav-left__links .nav-button {
padding: 7px;
background-color: var(--accent-color);
color: white;
text-decoration: none;
}
header span.directory {
text-transform: uppercase;
font-family: var(--heading-font-families);
color: #CECECE;
font-size: 12px;
}
<!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>SKHS NJROTC - Dashboard</title>
<link rel="stylesheet" href="src/styles/root.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
</head>
<body>
<header>
<nav>
<div class="nav-left">
<h1 class="nav-left__brand">NJ<span>ROTC</span></h1>
<div class="nav-left__links">
Issues
Promotions
Events
Create
</div>
</div>
<div class="nav-right">
<div class="nav-right__app__drawer">
<span class="material-symbols-sharp">apps</span>
</div>
<div class="nav-right__profile"></div>
</div>
</nav>
<span class="directory">Charlie Company » Red Platoon » Promotions</span>
</header>
<main>
lorem
</main>
</body>
</html>
Related
I'm trying to remove the space on top right on corner next to "Contact Me" And I can't figure out why it's there. I tried pushing it there but it still doesn't work. I'm still new and trying to learn.
Code:
body{
font-family: 'Poppins', sans-serif;
margin: 0;
overflow-y: hidden;
overflow-x: hidden;
}
section {
background-color: gray;
}
.hero {
background-color: #1c1d25;
height: 100vh;
color: white;
font-size: 40px;
}
nav {
display: flex;
justify-content: space-between;
}
ul {
display: flex;
list-style-type: none;
width: 500px;
justify-content: space-around;
font-size: 20px;
}
li {
text-decoration: none;
}
h1 {
font-size: 90px;
margin: 0;
}
p{
margin: 0;
font-size: 30px;
font-weight: 300;
}
.logo {
height: 100px;
margin: 30px;
}
.home {
text-decoration: none;
color: white;
}
.myw {
text-decoration: none;
color: white;
}
.cm {
text-decoration: none;
color: white;
}
.logo2{
width: 400px;
position: relative;
margin-top: 200px;
margin-left: -200px;
border: 5px dotted purple;
}
p {
display: flex;
font-family: 'Poppins', sans-serif;
font-size: 1.5vw;
position: absolute;
left: 40vw;
bottom: 40vh;
width:50%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="src/aboutMeStyle.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=Acme&family=Poppins&display=swap" rel="stylesheet">
<title>About Me</title>
<meta charset="UTF-8">
</head>
<body>
<section class="hero">
<nav>
<img class="logo" src="images/pack.png" alt="Futsunohitos Logo">
<img class="logo2" src="images/32x_ava.png" alt="Futsunohitos Logo">
<div></div>
<ul>
<li> Home </li>
<li> My Work </li>
<li> Contact Me </li>
</ul>
<div class= "glow">
<p class="Description">Hello Im Oleg. Im 18 years old. I like to draw and make cool art. I take orders and can make you a custom avatar or anything you ask for. Ofcourse its gonna be really cheap I just want to start my own little business. I hope you enjoy my art (and maybe hire me). Have a great day!</p>
</div>
</nav>
<script>
"src/app.js"
</script>
</body>
</html>
You have justify-content: space-around; on flex ul that gives some space around the flex items.
justify-content: space-between might be something you are looking for.
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
.body {
display: flex;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.header a {
text-decoration: inherit;
color: #202124;
font-family: sans-serif;
margin-right: 20px;
}
.header a:hover {
text-decoration: underline;
}
.Righty {
display: flex;
justify-content: space-between;
margin: 0px 10px;
}
.Lefty {
display: flex;
justify-content: space-between;
margin: 0px 15px;
}
.header_app {
margin-right: 20px;
color: grey;
margin-top: -6px;
padding-top: 0%;
}
.mainBody {
flex: 1;
display: flex;
margin-top: 5%;
flex-direction: column;
}
.mainBody img {
object-fit: contain;
height: 100px;
}
.search_input {
display: flex;
justify-content: space-between;
margin: 0 auto;
margin-top: 30px;
border-style: ridge;
height: 48px;
max-width: 600px;
border-radius: 30px 30px 30px 30px;
}
.search_input input {
flex: 1;
padding: 10px 20px;
border: none;
outline: none;
font-size: medium;
}
.search-ico {
color: grey;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
.search_buttons {
display: flex;
justify-content: center;
color: rgb(244, 240, 240);
}
.search_buttons button {
padding: 10px 20px;
margin: 28px 10px;
border-radius: 4px;
background-color: white;
outline: none;
border: none;
}
.search_buttons button a {
text-decoration: none;
color: #3c4043;
font-size: 14px;
}
.search_buttons button :hover {
border: 1px;
padding: inherit;
margin: inherit;
background-color: rgb(245, 244, 244);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/practice.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Google Clone</title>
</head>
<!--Header section starts-->
<div class="header">
<div class="Lefty">
About
Store
</div>
<div class="Righty">
Gmail
Images
<span class="material-icons header_app">
apps
</span>
<span class="material-icons header_app">
account_circle
</span>
</div>
</div>
<!--Header section ends-->
<!--Main Body section starts-->
<br>
<div class="mainBody">
<img src="/graphics.html/googlelogo_color_272x92dp.png" alt="google logo">
<div class="search">
<div class="search_input">
<span class="material-icons search-ico">
search
</span>
<input type="text" />
<span class="material-icons search-ico">
mic
</span>
</div>
<div class="search_buttons">
<button>
Google Search
</button>
<button>
I'm Feeling Lucky
</button>
</div>
</div>
</div>
<!--Main Body section ends-->
</body>
</html>
When I use hover for buttons, hovering over 1 button makes the other buttons move too.
It's a clone of the Google Search page, made using HTML and CSS
When I hover over the "Google search" button, the "I'm feeling lucky" button next to it moves towards the left.
I have added the code but the problem is just with the Google Search and I'm feeling lucky buttons
I would like to decrease the space between my different social networks and by making :
margin: 2px; or padding: 2px;
It doesn't apply any change: how to apply a change between my different icons for my social networks please?
I would like to reduce the spacing between my 3 icons, here is a screen to illustrate my words, if you did not understand even if I think I have correctly explained the problem I will answer in comment, thank you in advance (If you have understood and you want to help me I am interested if you have explanations, I am trying to improve and it's been a few days that I block on this problem): The screen to illustrate my words: https://prnt.sc/13n7pss
If you see other things wrong in my code like this I'm interested, I'm a beginner and I don't necessarily have the best ways to develop so if you think I can improve it don't hesitate to tell me etc. Thank you very much
<!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>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Premium
Support
</div>
<div class="right">
<img src="https://img.icons8.com/windows/32/000000/github.png"/>
<img src="https://img.icons8.com/material-rounded/32/000000/discord-logo.png"/>
<img src="https://img.icons8.com/android/32/000000/twitter.png"/>
</div>
</nav>
</header>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/white.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #065299;">My Discord Id</span></div>
</div>
<div class="social"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" /></div>
<div class="social"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" /></div>
<div class="social"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" /></div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 16px;
}
.topbar {
height: 80px;
background-color: #fff;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
}
.topbar nav a:hover, .topbar nav a.active {
color: #000;
}
.right {
cursor: pointer;
display: flex;
}
.header-logo {
cursor: pointer;
width: 25vh;
}
h1 {
text-align: center;
color: #fff;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
}
.resources {
grid-area: resources;
font-size: 20px;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-left: .3rem;
padding-bottom: .3rem;
font-size: .6em;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
padding-right: .5rem;
padding-bottom: 1rem;
}
Here you go...
Add this to your CSS:
.right a {
margin-right: -10%;
}
If you want to decrease white space between your icons, you need to set negative margin-right (not positive!). Positive margin-right will do exactly the opposite that you want to achieve.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62, 62, 62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35, 35, 35);
padding: 192px 16px;
}
.topbar {
height: 80px;
background-color: #fff;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
}
.topbar nav a:hover,
.topbar nav a.active {
color: #000;
}
.right {
cursor: pointer;
display: flex;
}
.right a {
margin-right: -10%;
}
.header-logo {
cursor: pointer;
width: 25vh;
}
h1 {
text-align: center;
color: #fff;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
}
#footer li a {
color: rgb(22, 145, 176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97, 97, 97);
}
.product {
grid-area: product;
font-size: 20px;
}
.resources {
grid-area: resources;
font-size: 20px;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-left: .3rem;
padding-bottom: .3rem;
font-size: .6em;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
padding-right: .5rem;
padding-bottom: 1rem;
}
<!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>
</head>
<body>
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Premium
Support
</div>
<div class="right">
<img src="https://img.icons8.com/windows/32/000000/github.png" />
<img src="https://img.icons8.com/material-rounded/32/000000/discord-logo.png" />
<img src="https://img.icons8.com/android/32/000000/twitter.png" />
</div>
</nav>
</header>
</body>
</html>
When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot
Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}
I am trying to add a button to my simple web page. The button itself looks great, but I am not quite sure how to position it. I would like for it to be centered and positioned below the main text. It currently sits off to the left side. Any idea on how to do so?
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
Learn More
</body>
</html>
Any help would be greatly appreciated. Thanks!
You don't necessarily need a container. Try the following:
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
width: 62px;
}
Auto margins don't apply to inline-block elements.
You can add a container to the buttons and align them to center . see example below
also when you are trying to create a style . try to make them reusable as they can be. One advantage of this is you can write lesser css.
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
.text-center {
text-align: center;
}
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class="text-center">
Learn More
</div>
Try putting the Button in a <div> and make text-align:center
<div class="btnContainer ">
Learn More
</div>
<style>
.btnContainer {
text-align:center;
}
</style>
Without extra markup adding the following rules to .button will do the trick
left: 50%;
position: absolute;
transform: translate(-50%, 0);
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
}
.button:hover {
background-color: #707488;
}
#button {
text-align: center;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class id="button">
Learn More
</div>
</body>
</html>
how do you think this way?