Here is the code I tried to make nav bars with. I have troubles to get familylink at the left then the population in the middle and the contact in the right. I tried to add and remove padding but I cannot find a way.
.buttons {
background-color: #0d3c4b;
border: none;
color: white;
padding: 15px 32px;
padding-left: 674px;
padding-right: 467px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.navbar {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Welcome</title>
<div class="navebar">
<ul class="buttons">
<li style="display:inline-block;" classe="family">
The Family</li>
<li style="display:inline-block;">
Population</li>
<li style="display:inline-block;">
Contact</li>
</ul>
</div>
</head>
<body>
</body>
</html>
I'm looking it to make it more presentable.
Your css missing family class and in html you have classe instead of class="family"
Also <div class="navebar"> should be <div class="navbar">
The spelling of the class navbar in your HTML is wrong, you can change it to navbar from navebar and then for the css use padding: 0;
And for the links
#royal { display: flex; justify-content: flex-start; }
#population { display: flex; justify-content: center; }
#contact { display: flex; justify-content: flex-end; }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Welcome</title>
<div class="navbar">
<ul class="buttons">
<li style="display:inline-block;" classe="family">
The Family</li>
<li style="display:inline-block;">
Population</li>
<li style="display:inline-block;">
Contact</li>
</ul>
</div>
</head>
<body>
</body>
</html>
i modified navbar but i can still not find a way to turn buttons as here
Try using a display: flex;
here is brief tutorial
you should use
flex-wrap: nowrap;
for the row to not be for two lines according your previous inline-block styling
and
order: 1-3;
for positioning elements from 1 that is far left to 3 that is all the way to the right
Start with assigning li id so you can do styling for each element
and then assign order 1, 2, 3 for them.
.navebar{
display: flex;
}
#family{
order: 1;
width: 100%;
}
#population{
order: 2;
width: 100%;
}
#contact{
order: 3;
}
<div class="navebar">
<div id="family" >
The Family</div>
<div id="population">
Population</div>
<div id="contact">
Contact</div>
</div>
Related
This question already has an answer here:
Proper use of flex properties when nesting flex containers
(1 answer)
Closed 2 years ago.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins' , sans-serif;
}
header{
height: 10vh;
width: 90%;
margin: auto;
align-items: center;
display: flex;
}
nav {
flex:1;
background-color: darkorchid;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 18px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="decorate.css">
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<header>
<nav>
<ul class = "nav-links">
<li ><a class="nav-link" href="#">education</a></li>
<li ><a class="nav-link" href="#">work</a></li>
<li ><a class="nav-link" href="#">certificates</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
This outputs the expected results with the space between navigation links . whereas the below code has a different output when div is included.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins' , sans-serif;
}
header{
height: 10vh;
width: 90%;
margin: auto;
align-items: center;
display: flex;
}
nav {
flex:1;
background-color: darkorchid;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 18px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="decorate.css">
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul class = "nav-links">
<li ><a class="nav-link" href="#">education</a></li>
<li ><a class="nav-link" href="#">work</a></li>
<li ><a class="nav-link" href="#">certificates</a></li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
why does including the tag give a different output even when the div tag is not used in CSS . I am novice , so I might not be understanding some of the concepts in both HTML and CSS .
header has display: flex wich is why the nav can grow, if you put the container div around the nav without display flex. it cant anymore.
adding display: flex to the container fixes this issue
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins' , sans-serif;
}
header{
height: 10vh;
width: 90%;
margin: auto;
align-items: center;
}
.container{display: flex;}
nav {
flex:1;
background-color: darkorchid;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 18px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="decorate.css">
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul class = "nav-links">
<li ><a class="nav-link" href="#">education</a></li>
<li ><a class="nav-link" href="#">work</a></li>
<li ><a class="nav-link" href="#">certificates</a></li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
because div is a block element that means it sets your tag into a block or a square which uses the whole line where as without div it works as inline elements which only occupy the space bounded by the tags
I am learning how to create header and I have problem with proper link href. My logo-box wraps image(logo) and name of the company but in order to align them with display flex it covers full width. I want that href only works when I hover logo or name not whole box. I don't know how to solve this problem.
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="container">
<div class="logo-block">
<a href="" class="logo-block-link">
<img src="logo.png" alt="" class="logo">
<h3 class="logo-tittle">Company</h3>
</a>
</div>
<ul class="nav-list">
<li>About</li>
<li>Projects</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
nav{
background-color: salmon;
}
.container{
padding: 15px 0;
background-color: #fdcb9e;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1140px;
margin: 0 auto;
}
.logo-block{
flex:1;
border:1px solid gold;
}
.logo-block-link{
display: flex;
border:1px solid black;
}
.logo{
width: 50px;
height: 50px;
}
.nav-list{
flex:1;
display: flex;
justify-content: space-between;
}
.logo-tittle{
font-size:20px;
color:#3f3f44;
text-transform: uppercase;
letter-spacing: 2px;
font-family: monospace;
margin-left: 10px;
}
.nav-list li a{
font-size:16px;
color:#3f3f44;
font-family: monospace;
}
To do this, you should break the <img src="logo.png" alt="" class="logo"> and <h3 class="logo-tittle">Company</h3> into 2 div. Then, use float: left to make the 2 div in one row. After that, place the flex: 1 to parent of the 2 div. You will be able to use href working when you click on the logo or the name.
For more detail, see below sample code:
<html lang="en"><head>
<link rel="stylesheet" href="style.css">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
nav{
background-color: salmon;
}
.container{
padding: 15px 0;
background-color: #fdcb9e;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1140px;
margin: 0 auto;
}
.logo-block{
border:1px solid gold;
}
.logo-block-link{
display: flex;
border:1px solid black;
}
.logo{
width: 50px;
height: 50px;
}
.nav-list{
flex:1;
display: flex;
justify-content: space-between;
}
.logo-tittle{
font-size:20px;
color:#3f3f44;
text-transform: uppercase;
letter-spacing: 2px;
font-family: monospace;
margin-left: 10px;
}
.nav-list li a{
font-size:16px;
color:#3f3f44;
font-family: monospace;
}
</style>
</head>
<body>
<nav>
<div class="container">
<div style="flex: 1;">
<div class="logo-block" style="float: left;">
<a href="#" class="logo-block-link">
<img src="https://www.gravatar.com/avatar/7d821e531f911facf0f644c1e708dd99?s=32&d=identicon&r=PG" alt="" class="logo">
</a>
</div>
<div style="float: left;">
<a href="#">
<h3 class="logo-tittle">Company</h3>
</a>
</div>
<div style="clear: both;"></div>
</div>
<ul class="nav-list">
<li>About</li>
<li>Projects</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
" I want that href only works when I hover logo or name not whole box "
I recomend you do it in JS, for example you can activate link by adding attribute href with value. So for example:
<a>This is link </a>
You add attribute href='yourlink' by js and you get <a href='yourlink'>This is link </a> and it should works.
So in javaScript:
Aelement.setAttribute('href','yourlink');
I'm trying to recreate the nav bar at the top of the google landing page using flexbox, but I'm pretty confused as to how it works. I can't seem to get some of the content to the right of my nav bar, and the other content to the left. My #items are my ul of content for the nav bar, and .left and .right are the respective content that I want to move around, currently, everything is just squished together on the left.
Here is my HTML:
<html>
<head>
<meta charset="UTF-8" />
<title>Google Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- CODE HERE-->
<nav class="navbar">
<ul id="items">
<li class="left">About</li>
<li class="left">Store</li>
<li class="right">Gmail</li>
<li class="right">Images</li>
</ul>
</nav>
</body>
</html>
And here is my CSS:
body {
background-color: white;
padding: 0;
margin: 0;
}
#items {
list-style-type: none;
display: flex;
}
.left {
justify-self: flex-start;
}
.right {
justify-self: flex-end;
}
A better way to do this is instead of putting all of your items in one list put them in two separate lists and then style them individually like this:HTML:
<nav>
<ul>
<li>About</li>
<li>Store</li>
</ul>
<ul>
<li>Gmail</li>
<li>Images</li>
<button class="sign-in">Sign In</button>
</ul>
</nav>
CSS:
nav {
display: flex;
justify-content: space-between;
}
nav ul {
list-style-type: none;
padding: 0;
display: flex;
margin-left: 25px;
margin-right: 25px;
}
nav ul {
margin-top: 15px;
}
nav a,
i {
text-decoration: none;
display: block;
padding: 0.5em;
color: #000;
opacity: 0.75;
margin-left: 5px;
}
nav a {
font-size: 13px;
}
.sign-in {
font-weight: bold;
font-size: 13px;
border: 1px solid #4285f4;
background: -webkit-linear-gradient(top, #4387fd, #4683ea);
color: white;
cursor: pointer;
border-radius: 2px;
width: 70px;
margin-left: 10px;
}
I'm working on a school project that has several limitations: CSS only (No JS) & a rigid delineation of sections. The idea is as follows:
top left header w/ image top right navbar
header border bottom covering width of page
I have successfully pushed the navbar to its correct position at the top right of the page
Unfortunately, this has cut off the border-bottom spanning the width of the page and no amount of jerking it around has allowed me to keep both.
Code:
header {
border-bottom: 2px solid blue;
padding-top: 12px;
position: absolute;
}
body {
background-color: white;
}
nav {
float:right;
position: relative;
text-align: right;
list-style: none;
}
nav li {
display: inline;
padding: 10px;
}
#container {
background-color: white;
width: 1200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Final Project v2</title>
<link rel="stylesheet" href=style.css />
</head>
<body>
<header>
<img src="img/logo.gif" alt="Logo">
</header>
<nav role="navigation">
<ul class="nav-main">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div id="container">
</div>
</body>
</html>
There must be something exceedingly obvious I'm missing and I'm losing my mind. Any suggestions?
Just Wrap the logo and nav on the header, and change the header to use flex.
Fixed code
header {
border-bottom: 2px solid blue;
padding-top: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
body {
background-color: white;
}
nav {
list-style: none;
}
nav li {
display: inline;
padding: 10px;
}
#container {
background-color: white;
width: 1200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Final Project v2</title>
<link rel="stylesheet" href=style.css />
</head>
<body>
<header>
<img src="img/logo.gif" alt="Logo">
<nav role="navigation">
<ul class="nav-main">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="container">
</div>
</body>
</html>
Your <header> tag (with bottom border) needs to enclose both the logo and the nav.
It's more efficient to use the flexbox model than floats and to avoid using position: absolute where possible.
header {
display: flex;
justify-content: space-between;
border-bottom: 2px solid blue;
}
Here's a working fiddle that will get you on track.
I am having trouble aligning two items together in my navbar. I am trying to bring logo on left and align tabs on right.
I have created lis for links and simple h1 for logos.
The trouble I am having is that h1 is taking all of space and pushing lis down to next line, I have tried doing several things but can't really figure it out where I am going wrong.
body {
margin: auto
}
/*navbar*/
.main-nav {
display: flex;
list-style: none;
font-size: 0.7em;
float: right;
}
li {
padding: 20px;
}
a {
color: black;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<h1>My Site</h1>
<ul class="main-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
You shouldn't use floats when working with Flexbox. Flexbox takes care of aligning your items the way you want. If you want two columns on the same row, add display:flex on the parent. If you want one on the left and one on the right, use justify-content: space-between;
body {
margin: auto
}
/*navbar*/
.navbar {
display: flex;
justify-content: space-between;
}
.main-nav {
display: flex;
list-style: none;
font-size: 0.7em;
}
li {
padding: 20px;
}
a {
color: black;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<h1>My Site</h1>
<ul class="main-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
In order to understand Flexbox, there is a game that will teach you all the necessary properties in an easy way. This visual guide will also help you.
#Hanan: no need of using float just need to ad add display: flex and justify-content: space-betweenin navbar
body {
margin: auto
}
/*navbar*/
.main-nav {
display: flex;
list-style: none;
font-size: 0.7em;
/* float: right; */remove
}
.navbar {
display: flex;
justify-content: space-between;
}
li {
padding: 20px;
}
a {
color: black;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav class="navbar">
<h1>My Site</h1>
<ul class="main-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
Flexbox is the easiest way. For the h1 set flex: 1 auto. This will make it grow to fill the remaining space. All navigation links will just consume the needed space. It's also working when wrapping the links into another element like ul/li
.navbar {
display: flex;
align-items: center;
width: 100%;
}
.navbar h1 {
flex: 1 auto;
}
.navbar a {
padding: 0 0.5em;
}
<header>
<nav class="navbar">
<h1>My Site</h1>
Link 1
Link 2
Link 3
Link 4
</nav>
</header>
please try to change your code to bellow.
body {
margin: auto
}
/*navbar*/
.navbar {
display: flex;
justify-content: space-around;
}
.main-nav {
list-style: none;
font-size: 0.7em;
}
li {
padding: 20px;
float: left;
}
a {
color: black;
text-decoration: none;
}