I'm making a website for school, but i have a problem with my css code. I want to place the section1 and the section2 underneath the header so that it looks like that :
WANTED
The problem is that it looks like that (the problem is this enormous gap on the left) :
REALITY
I know that the problem comes from the float on the header and nav bar but i don't know how to keep the header look and having the two boxes ("section1" and "section2", grouped as "content").
The CSS code :
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
The HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</<div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Thanks for your help !
Your example seems to work for me provided .container has a width: 100% on it.
But for what you want exactly, I would use the following:
.container {
display: flex;
align-items: center;
justify-content: space-evenly; // google all the different options for this
}
// Get rid of the `float` properties on the sections, you won't need them
Below, is your original code in a snippet, and with that width property it's working for me.
But I highly recommend switching to flex box over floats, as it will give you way more control and better results.
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
width: 100%;
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</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'm working on a Site for myself, but I have no clue how I get the Navigationbar centered in the site.
I thought that maybe someone else has an idea :) the whole navigation bar is slightly to the left & I don't know how to fix it.. Hope you guys out there can do this :) I'm a beginner # coding & I have so much more to learn ..
screenshot of the page
logo
thank you for your help :)
Html:
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Sets</li>
<li>About</li>
<li class="logo">SueZ Logo</li>
<li>Gigs</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>Copyright © 2020 SueZ</footer>
</body>
</html>
CSS:
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
height: 150px;
padding: 20px;
text-align: center;
}
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
text
}
header .logo a {
background-image: url(Fotos/SueZ_Logo_Red_BG_Transparent.PNG);
background-size: 100px;
background-repeat: no-repeat;
display: inline-block;
height: 190px;
position: relative;
text-indent: -9999999px;
top: -40px;
width: 200px;;
margin-left: 20%;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
Here I made a snippet for the solution of your issue. check it. Hope it helps.
Updated CSS marked with /*----------*/
...............................................................................
A TIP for you
Don't use height.
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
/*------------------------*/
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
/*height: 150px;*/
padding: 40px;
text-align: center;
position:relative;
}
.logo{width:100px;position:absolute; left:0; right:0; margin: 0 auto; top:0; z-index:10;}
.logo img{width:100%;}
/*------------------------*/
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
/*------------------------*/
nav li:last-child{margin-right:0}
nav li:nth-child(2){margin-right:120px}
/*------------------------*/
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://i.stack.imgur.com/yfW19.png" alt="logo">
</div>
<nav>
<ul>
<li>Sets</li>
<li>About</li>
<li>Gigs</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>
Copyright © 2020 SueZ
</footer>
I am studying CSS and creating a responsive web page. I have started working in a media query. When I maximize the screen, all works as expected, but when I reduce its size, the content that does not fit in the viewport is hidden, and a white space stays in its place. That space can be seen scrolling the screen to side. Why is that space appearing instead the rest of the content? I also don't understand why my content doesn't fit in the screen, because I am using percentage values to elements' width. My code is below:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 99.13vw;
}
body{
font-family: 'Open Sans', sans-serif;
margin: 0;
}
h2, h3{
margin-top: 10px;
margin-bottom: 10px;
}
a{
text-decoration: none;
transition: 0.2s linear;
}
header{
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding: 10px 30px;
width: 100%;
}
header img{
width: 45px;
}
header h1{
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul{
display: flex;
list-style: none;
}
nav ul li a{
margin-left: 55px;
}
nav a{
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover{
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
nav img{
display: none;
width: 30px;
height: 35px;
}
#firstsection{
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div{
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1{
margin-bottom: 45px;
}
#firstsection div a{
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover{
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#textboxes{
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
#textboxes div{
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
width: 27%;
}
#middlesection img:first-of-type{
width: 55px;
}
#middlesection h2{
text-align: center;
width: 100%;
}
#lastsection{
text-align: center;
}
#lastsection img{
width: 30%;
margin: 100px auto 0px;
}
#lastsection div{
position: relative;
bottom: 450px;
}
#lastsection div a:visited{
color: blue;
}
footer{
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img{
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div{
text-align: center;
}
#media screen and (max-width: 800px){
#textboxes div{
width: 100%;
}
#lastsection img{
width: 85%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
<meta content="Bruno M. B. Sdoukos" name="author">
<meta content="finances, managing money, spending control" name="keywords">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png"> <a href="index.html">
<h1>Finances</h1></a>
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact us
</li>
<li>
Register
</li>
<li>
Login
</li>
</ul>
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50%20(1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br>
the best of Finances.</h2>Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
Actually it's not hidden. The links in the header just happen to have a color that's close enough to white that the contrast is really low. They're overflowing the right side of the header when the header's content is wider than the viewport.
The simplest solution would be to give flex-wrap:wrap to header, but I recommend using a media query to override the display:flex instead (for better backwards compatibility).
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html,
body,
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 99.13vw;
}
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
h2,
h3 {
margin-top: 10px;
margin-bottom: 10px;
}
a {
text-decoration: none;
transition: 0.2s linear;
}
header {
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding: 10px 30px;
width: 100%;
}
#media all and (max-width:56em) {
header {
display: block;
}
header>a,
header>nav {
display: inline-block;
}
}
header img {
width: 45px;
}
header h1 {
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul {
display: flex;
list-style: none;
}
nav ul li a {
margin-left: 55px;
}
nav a {
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover {
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
nav img {
display: none;
width: 30px;
height: 35px;
}
#firstsection {
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div {
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1 {
margin-bottom: 45px;
}
#firstsection div a {
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover {
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#textboxes {
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
#textboxes div {
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
width: 27%;
}
#middlesection img:first-of-type {
width: 55px;
}
#middlesection h2 {
text-align: center;
width: 100%;
}
#lastsection {
text-align: center;
}
#lastsection img {
width: 30%;
margin: 100px auto 0px;
}
#lastsection div {
position: relative;
bottom: 450px;
}
#lastsection div a:visited {
color: blue;
}
footer {
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img {
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div {
text-align: center;
}
#media screen and (max-width: 800px) {
#textboxes div {
width: 100%;
}
#lastsection img {
width: 85%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
<meta content="Bruno M. B. Sdoukos" name="author">
<meta content="finances, managing money, spending control" name="keywords">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png">
<a href="index.html">
<h1>Finances</h1>
</a>
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact us
</li>
<li>
Register
</li>
<li>
Login
</li>
</ul>
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50%20(1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br> the best of Finances.</h2>Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
html/css newbie here.
I have done some courses on html/css and now I'm testing my knowledge by attempting to copy some websites I like. Right now I'm trying my best to make Khan Academy's front page (https://www.khanacademy.org), but I've been struggling with something.
I have an <ul> that represents the top navigation bar of the page, and now I'm trying to center their logo (<div id="ka"> that is inside the navbar as a list item) to the page but using text-align: center and margin-left: auto; & margin-right: auto doesn't seem to do anything.
Here's my code:
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
padding: 13px 38px 0px 4px;
margin-left: -8px;
}
#ka {
display: inline-block;
}
#ka-logo {
float: left;
width: 24px;
margin-left: auto;
margin-right: auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
#sign {
float: right;
margin-right: 44px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<ul class="navbar">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
<li id="sign" class="navbar-text">New user / Sign up</li>
</ul>
</body>
</html>
I have seem this question but what was suggested didn't work for me.
My question is: how do I center the logo div?
A side note: since I'm fairly new to html there could be a lot of bad practices in the code above. Tips on how to do the things I did more efficiently would be highly appreciated.
here a solution for your problem.
In CSS, flex is very usefull, take a look at:
Flex guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
My CSS
I have used flexbox for centered verically divs and set the right div.
For the logo, I used a first div with the height and width of the taskbar (non-clickable) and a second with the logo centered (clickable) with position absolute.
Enjoy
body {
margin: 0;
padding: 0;
background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
background-repeat: no-repeat;
background-size: 157.75%;
background-position-x: 50.825%;
}
li {
display: inline-block;
}
.navbar {
overflow: hidden;
width: 100%;
height: 60px;
border-bottom-color: #68e2de;
border-bottom-width: 1px;
border-bottom-style: solid;
display: flex;
align-items:center;
position:absolute;
}
.navbar {
list-style: none;
}
.navbar-text {
color: white;
float: left;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 17px;
/**padding: 0 38px 0px 4px;**/
}
.logo {
position:absolute;
height:100%;
top:0;
left:0;
width:100%;
display:flex;
justify-content:center;
align-items:center;
pointer-events:none;
}
.logo-container {
display:flex;
align-items:center;
pointer-events:all;
}
.logo-container .ka-logo {
width: 24px;
}
.left, .right {
display:flex;
align-items:center;
}
.left {
margin:0 10px;
}
.right {
justify-content:right;
margin:0 10px 0 auto;
}
#search-icon {
width: 32px;
margin-left: -44px;
margin-top: 8px;
}
#search-bar {
background-color: #47dcd6;
border-radius: 4px;
margin-left: 8px;
border: 1px solid #47dcd6;
padding: 12px 175px 14px 12px;
}
#expand-triangle {
font-size: 13px;
margin-left: 7px;
color: #85e8e3;
}
.bold-signika {
display: inline;
font-family: 'Signika', sans-serif;
font-size: 23px;
color: white;
font-weight: 600;
}
.signika {
display: inline;
font-family: 'Signika', sans-serif;
color: white;
font-size: 23px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
<div class="left">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
</div>
<div class="logo">
<div class="logo-container">
<img class="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</div>
<div class="right">
<li class="navbar-text">New user / Sign up</li>
</div>
</div>
<!--<ul class="navbar">
<div class="left">
<li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
<li id="search-bar" class="navbar-text">Search</li>
<li><img id="search-icon" src="search.png"></li>
</div>
<div class="center">
<li>
<div id="ka">
<img id="ka-logo" src="leaf-green.svg">
<div class="bold-signika">KHAN</div>
<div class="signika">ACADEMY</div>
</div>
</li>
</div>
<div class="right">
<li id="sign" class="navbar-text">New user / Sign up</li>
</div>
</ul>-->
</body>
</html>