I've been learning code only for a couple of weeks, so I have a very basic knowledge.
I got stuck trying to build a navbar using flexbox.
For some reason I can't get my nav buttons () to stand in a horizontal way.
I've been trying and rewritting my code, but I can't figure it out.
Here's the link to my code: https://codepen.io/kokazp/pen/xxORovj?editors=1100
Thanks in advance.
body{
font-family: 'Yanone Kaffeesatz', sans-serif;
background-color: lightGray;
}
navbar {
background: white;
box-shadow: 0px 0px 10px var(--clr-gray200);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
#header-img{
height: 70px;
width: 70px;
margin-right: auto;
margin-left: 10px;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
li, a{
background-color:white;
text-decoration: none;
padding: 8px;
color:black;
}
li a:hover{
background-color: black;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght#300&display=swap" rel="stylesheet">
<link rel=StyleSheet HREF="estilo.css">
</head>
<body>
<header id="header">
<navbar id="nav-bar">
<ul>
<li><img src="https://blog.spoongraphics.co.uk/wp-content/uploads/2017/craft-brewery-logos/1.jpg" id="header-img" alt="Company logo"></li>
<li>Contact</li>
<li>Beers</li>
<li>Video</li>
</ul>
</navbar>
</header>
</body>
</html>
let's make it clear when you use a flex-box it applies to children not to grand children, when you apply display:flex to ur navbar it will make the ul a flex child, so li tags are not flex, secondly you're making it columns so it will make it in a vertical way.
solution: you can make the ul
ul{display:flex;}
and it will make the li go to row direction by default
Related
My second question here.
I was able to make this work using CSS without flexbox.
I pasted the code for above here:
https://codepen.io/kkpm/pen/MWgdOZE
html,
body {
margin: 0px;
padding: 0px;
}
nav {
height: 60px;
background-color: maroon;
vertical-align: middle;
}
#links {
float: right;
line-height: 60px;
}
#links li {
display: inline-block;
}
#links li a {
display: table-cell;
vertical-align: middle;
height: auto;
padding: 1%;
padding-right: 20px;
padding-left: 28px;
color: white;
text-decoration: none;
}
#links li a:hover {
display: table-cell;
vertical-align: middle;
height: auto;
padding: 1%;
padding-right: 20px;
padding-left: 28px;
background-color: blue;
color: white;
text-decoration: none;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#logo {
float: left;
}
HTML below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo"><img src="flag.JPG" alt="" height="60px" /></div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome">Hi!</section>
</body>
</html>
The problem with the above code is that I eyeballed things by adjusting the px. I want to center the <li> text vertically at all times while having the blue box area around it fill up, for lack of a better term to describe it, the cell no matter what.
How do I get the same result using flexbox (or any other method) without using javascript to format the <ul>/<li> elements?
It's driving me crazy trying to do this. I searched Google thoroughly. I am having a difficult time, however, because my understanding of the flexbox is weak.
Some things I've tried:
I set padding and margin to 0px for *
I set box-sizing to border-box for HTML
I set nav to 60px
then I tried to set nav li to
display: flex;
justify-content: flex-end;
for the logo div I put it as position fixed and justify-content: flex-start
I read this site trying to format this https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The problem is I can't get the links to the center and the blue-highlighted section to highlight as it should. I'm very confused with flexbox and if someone could please guide me step by step his/her thought process as to how to get below result using flexbox, I would truly appreciate it. I will study your answer over and over again until I master how to create this fixed navigation bar.
You can use display: flex; and then apply align-items: center; to get elements vertically centred. This would be rather a cleaner approach over using floats
html,
body {
margin: 0px;
padding: 0px;
}
nav {
background-color: maroon;
display: flex;
align-items: center;
}
#logo {
display: flex;
flex-grow: 1;
padding-left: 0.5em;
}
#logo img {
max-height: 30px;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#links li {
display: inline-block;
padding: 1em;
}
#links li:hover {
background: blue;
}
#links li a {
color: white;
text-decoration: none;
}
<nav id="navbar">
<div id="logo">
<img src="data:image/png;base64,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"
alt="" />
</div>
<div id="links">
<ul>
<li>Welcome</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="welcome">Hi!</section>
I've been trying to create a pretty basic CSS navbar, comprised of a "navbar" container div, and within that a "logo" div and a "menu" div.
However, I seem to have run into some trouble with getting the "menu" div (which contains an unordered list of links) to nest within the "navbar" container div.
Perhaps I'm missing something very simple, but I've tried doing some Googling and can't seem to find a solution to this issue.
I did see a tutorial that showed how to create a similar type of navbar using only an unordered list, but given that I'm also looking to have a logo and potentially other elements in the navbar, I don't think that's what I'm looking for.
Please see below for the HTML and CSS that I've been working with. Any assistance would be greatly appreciated.
Thanks!
body{
padding: 0px;
margin: 0px;
}
.navbar{
height: 50px;
width: 100%;
background: #b4cef7;
}
.logo{
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul{
list-style-type: none;
}
.navbar ul li{
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a{
text-decoration: none;
color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Simple CSS Navbar</title>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
You have a set height on the navbar and a block level element, forcing the navbar to a new line.
There's many ways you could have the elements on the same line, such as floating or displaying inline-block.
Here's a simple demo of using inline-block:
body {
padding: 0px;
margin: 0px;
}
.navbar {
height: 50px;
width: 100%;
background: #b4cef7;
}
.navbar>* {
display: inline-block;
vertical-align: top;
}
.logo {
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.navbar ul li {
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a {
text-decoration: none;
color: black;
}
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
There isn't generally a option you should use, be it inline-block, floating, or flexbox; it really just depends on your preferences and target browsers.
I am building my own portfolio/company site and my code is below I try to make it full width but it does not go full width. I am writing the code in html5 and css3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TECH-EXPERTS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Our Work</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
nav{
background-color: black;
border-radius: 5px;
display: block;
overflow: hidden;
width: 90%;
}
nav ul {
margin: 0;
padding: 0;
float: right;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: red;
display: block;
line-height: 56px;
padding: 0 24px;
text-decoration: none;
}
nav a:hover{
color: blue;
}
First off, assuming that you want the navbar to span the entire width of the window, you need make sure that you're removing the default margin that is placed on the body element (if you are not using a css reset of some kind that already takes care of that).
Try:
body {
margin: 0;
}
Now remove the width: 90%; that's on your navbar. That should get you pointed in the right direction.
Here's a Codepen of that in action.
So I am trying to make a web tutorials page just to help out my skills and I cannot seem to figure out why there is a space between the bottom of my navigation bar and the top of my first header? If anyone could possibly tell me what I wrote that would separate these two that would be amazing!
body{
margin: 0;
padding: 0;
background: #cccccc;
}
.nav ul{
list-style: none;
background-color: #444444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li{
font-family: 'Oswald'. sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888888;
}
.nav a{
text-decoration: none;
color: #ffffff;
display: block;
}
.nav a:hover{
background-color: #005f5f;
transition: .3s background-color;
}
.nav a.active{
background-color: #ffffff;
color: #444444;
cursor: default;
}
#media screen and (min-width: 600px){
.nav li{
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
}
.header{
background-color: blue;
height: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Responsive design -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Tutorials - Making web development easier!</title>
<!-- Custom Css -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li class="home"><a class="active" href="#">HOME</a></li>
<li class="tutorials">HTML</li>
<li class="about">CSS</li>
<li class="contact">CONTACT</li>
</ul>
</div>
<div class="header">
<h1>Welcome to Web Tuts</h1>
</div>
</body>
</html>
It's because the h1 element has a default margin set by the user agent stylesheet of the browser.
<div class="header">
<h1>Welcome to Web Tuts</h1>
</div>
You have to remove this margin.
.header h1 {
margin-top: 0;
}
Obligatory CSS reset link.
body {
margin: 0;
padding: 0;
background: #cccccc;
}
.header h1 {
margin-top: 0;
}
.nav ul {
list-style: none;
background-color: #444444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald'. sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888888;
}
.nav a {
text-decoration: none;
color: #ffffff;
display: block;
}
.nav a:hover {
background-color: #005f5f;
transition: .3s background-color;
}
.nav a.active {
background-color: #ffffff;
color: #444444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
}
.header {
background-color: blue;
height: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Responsive design -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Tutorials - Making web development easier!</title>
<!-- Custom Css -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li class="home"><a class="active" href="#">HOME</a>
</li>
<li class="tutorials">HTML
</li>
<li class="about">CSS
</li>
<li class="contact">CONTACT
</li>
</ul>
</div>
<div class="header">
<h1>Welcome to Web Tuts</h1>
</div>
</body>
</html>
To fix that tiny issue is easy, to use a global reset framework is probably easy too. What I would suggest, you should study the basic default browser stylesheet rules, that will bring you CSS skills to the next level.
You can basically go and read through all the lines:
Mozilla Firefox etc
http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css
Apple Safari etc http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
They are quite similar, I suggest to read Mozilla's first. We don't have to remember all of them, just the most common ones will be enough, such as the heading, paragraph, list and blockquote etc.
css:
h1
{
margin:0;
}
there is auto margin in h1 tag which you need to make it 0
Hope the above solved the issue.
Just wanted to follow up to ask if you're comfortable using the web inspector tools.
Sometimes you can try a million things with no luck, but inspect the area and it jumps right out. Troubleshooting issues like this is so much easier to do in the inspector.
I really like the ones built into Chrome, but everyone has a preference.
This article on TeamTreehouse.com blog is a pretty good intro!
There is a little white gap in between the top of my navigation bar and the bottom of my logo graphics. How can I get these to stick together? Am I missing a selector like header or nav? Maybe I missed a declaration?
body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
border: 5px solid #0009bc;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 140px;
font-weight: bold;
color: #20dbd4;
background-color: #000000;
text-align: center;
padding: 12px;
text-decoration: underline;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #20dbd4;
color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex, nofollow, noarchive"/>
<title>Grid Design</title>
</head>
<body>
<header>
<img src="/images/grid-design.jpg" alt="Grid Design" style="width: 987px; height: 243px;"/>
</header>
<nav>
<ul>
<li>home</li>
<li>news</li>
<li>about</li>
<li>products</li>
<li>photos</li>
<li>contact</li>
</ul>
</nav>
</body>
</html>
Just declare the image as display:block and then centre as required.
The image is display:inline by default which means it is affected by whitespace...making the image into block element resolves the issue.
JSfiddle Demo
CSS
header img {
display: block;
margin: 0 auto;
}
You could set the margin of the nav to -4 so:
CSS:
nav {
margin: -4px 0 0 0;
}
But this is not the only way...actually this should be your last resort !! There are several better ways to do this.