I can't seem to figure out how to remove this space to left of the image, as well as the small space in between the images on the right. I've tried various things, but nothing has worked. Here is the HTML for the nav:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Dog's Life</title>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<img src="images/navimg.png" class="navbarimg">
<img src="images/banner.jpg" style="width:100%">
</header>
<nav>
<ul>
<li><img src="images/home-nav.png" alt="Home"></li>
<li><img src="images/about-nav.png" alt="About"></li>
<li><img src="images/services-nav.png" alt="Services"></li>
<li><img src="images/gallery-nav.png" alt="Gallery"></li>
<li><img src="images/contact-nav.png" alt="Contact"></li>
</ul>
</nav>
And the CSS:
body { background-color: #abc67e;
color: #666666;
font-family:Tahoma;
height: 100%;
}
header { background-color: #ffe4b5;
color: #FFFFFF;
font-family: Tahoma;
margin-bottom: 0;
z-index: 2;
}
h1 { line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
}
nav { font-weight: bold;
background-color: #deb887;
z-index: 1;
}
h2 { font-family: Tahoma;
}
dt { color: #000033;
font-weight: bold;
}
footer { font-size: 0.70em;
text-align: center;
font-style: italic;
padding: 10px;
}
h3 { color: #000033;
}
main { padding-left: 20px;
padding-right: 20px;
}
#wrapper { margin-left: auto;
margin-right: auto;
width: 55%;
background-color: #fdf5e6;
min-width: auto;
box-shadow: 5px 5px 5px #523411;
height: 100%;
border: 4px;
border-style: outset;
}
nav ul { list-style-type: none;
margin-top: 0;
z-index: 99;}
nav li { display: inline; }
footer ul { list-style-type: none; }
footer li { display: inline; }
footer a { text-decoration: none; padding-right: 10px; }
aside { float: right;
border-left: 1px;
border-left-style: dotted;
padding-left: 50px;}
aside img { width: 100%;
height: 100%;}
section { float: right;
width: 320px;}
.galleryul { list-style-type: none; }
.galleryli { display: inline-block;
width: 225px;
padding-bottom: 10px;
margin: 10px;
background-color: #EAEAEA;
text-align: center;
font-style: italic;
font-family: Tahoma; }
label { float: left;
display: block;
width: 8em;
padding-right: 25px;
}
input { display: block;
margin-bottom: 1em;
}
textarea { display: block;
margin-bottom: 1em;
}
#mySubmit { margin-left: 11.5em;
}
.navbarimg { position: absolute;
padding-left: 650px;
padding-top: 110px;
z-index: -1;}
Thanks
<ul> element has by default padding-left, so you need to remove it with:
nav ul {
padding-left: 0;
}
Then the space between each image is because you have each <li> on a separate line and <li> has display: inline set, therefore browser adds a space between them. You can force it to make no spaces with float: left:
nav li {
float: left;
}
Now the <ul> wrapper needs to know that it should cover the entire content including floating elements so you can set it overflow: auto.
nav ul {
overflow: auto;
}
See updated jsfiddle: https://jsfiddle.net/f1s11mxp/
Add to your nav ul a padding-left of 0:
nav ul {
// other styles
padding-left: 0;
// other styles
}
And the trick I often have to resort to to get rid of space between inline or inline-block elements is to 'comment out' as it were the white space in the HTML markup like so:
<nav>
<ul>
<li><img src="images/home-nav.png" alt="Home"></li><!--
--><li><img src="images/about-nav.png" alt="About"></li><!--
--><li><img src="images/services-nav.png" alt="Services"></li><!--
--><li><img src="images/gallery-nav.png" alt="Gallery"></li><!--
--><li><img src="images/contact-nav.png" alt="Contact"></li>
</ul>
</nav>
Related
Here is my code below. I'm having trouble displaying the logo at the top left hand corner of the screen.
My main problem is that the image is not showing up anywhere on the screen, although I inputted the correct file name into the image section.
If anyone would be able to help me, I'd really appreciate it! Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
width: 100%;
}
li {
float: right;
}
#logo {
float: left;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
width: 33px;
height: 67px;
border-radius: 5px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<ul>
<li><img src="imageO.jpg" id="logo" class="logo"/> </li>
<li>About</li>
<li>Features</li>
<li>Download</li>
</ul>
</div>
</body>
</html>
Is your logo really 7x5 px? I just move the first li item to the left side and if imageO.jpg is in the same path of your Html, this works fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
width: 100%;
}
li {
float: right;
}
#logo {
float: left;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
width: 70px;
height: 50px;
border-radius: 5px;
border: 1px black;
}
li:first-child {
float: left;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<ul>
<li><img src="imageO.jpg" alt="not found" id="logo" class="logo"/> </li>
<li>About</li>
<li>Features</li>
<li>Download</li>
</ul>
</div>
</body>
</html>
Here, I've done this in another way:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
width: 100%;
display:flex;
justify-content:flex-end;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
width: 50px;
height: 50px;
border-radius: 5px;
position:fixed;
left:20px;;
}
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<ul>
<li><img src="https://www.ikea.com/at/de/images/products/klappa-soft-toy-ball-multicolour__0606619_PE682422_S5.JPG?f=s" id="logo" class="logo"/> </li>
<li>About</li>
<li>Features</li>
<li>Download</li>
</ul>
</div>
Hi hope this pen would help with the position of the logo, also notice you have a closing div tag that does not open, as the previous answer i took out the logo from the Ul because since you are floating all the ul content it takes the logo too.
https://codepen.io/MoneWebGuru/pen/WNQwVGX`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
left:0px;
width: 100%;
}
li {
float: right;
list-style-type: none;
}
#logo {
float: left;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
border-radius: 5px;
height: 50px;
padding-top:10px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<div style="width:100%">
<img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg" id="logo" class="logo"/> <ul>
<li>About</li>
<li>Features </li>
<li>Download</li>
</ul>
</div>
</body>
</html>
`
I'm trying to create a navbar whith white bars on top of the options, but the position: absolute is not responding as I expect, even if I place it after a position: relative, the white bars are wider than the width of the options:As you can see here
This is the code I'm following from the tutorial, I would appreciate your help.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Another way to achieve the same:
Instead of using the pseudo element, you can use the property border-top along with padding-top to achieve the same, if what you need is the border width to be equal with the length of the option.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
border-top:5px solid #fff;
padding-top:10px;
}
nav a:hover {
color: black;
}
/*
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}*/
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Here is another way, in-case you need the width of all borders be same. You must give a fixed width to the pseudo element, instead of 100%.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
/*width: 100%;*/
width: 100px;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Your line item element is wider than your link element which means that your white bar will copy the relatively positioned line item's width. If you look in inspector you can see this clearly.
The width
Use the border-top property instead on your links.
nav a{
color: white;
text-decoration: none;
border-top: solid 3px #fff;
padding-top: 35px
}
nav a:hover {
color: black;
}
nav a::before {
}
On nav a:before :
If you want to create it the same width as your text - substract the padding:
width: calc(100% - 80px);
or you want to place it the same size as your li item use:
left: 0;
You have to account for the 40px * 2 = 80 px of padding you have added to the li element.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: calc(100% - 80px);
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
/*delete padding */
margin-left: 70px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
/*add this */
padding: 40px 0;
display: inline-block;
border-top: 5px solid transparent;
}
nav a:hover {
color: black;
/*and this*/
border-top: 5px solid white;
}
/*
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100px;
}
*/
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
The nav a::before pseudo-element is a child of a::before. Pseudo-elements like ::before or ::hover are always children of the elements whose selectors preface them. You need to put the position:relative property on the rule for nav a. Currently, you have the position:relative property on the li element, which is wider than the a element.
You'll also need to add some other property to raise the line. I've added padding-top to solve that problem.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
position: relative;
padding-top: 20px;
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
So, my goal is to create a simple navigation bar with centered links/elements. I kinda succeeded... Kinda because when i set the floating option it changes spaces between elements and twitches the text out of position (run the snippet to see the efect).
Wanna have some space between the words, but to stay fixed when floated over or activated/selected.
I tried to make it work with styling only ul and li tags but it didnt work, so i tried placing the li tags into separate divisions. Still no success.
Looked through every possible solution i could think of - adding margins, padding, setting them to auto, looked through similar questions here and around web and i got nothing.
Obviously i'm missing something and i would appreciate your help very much so i can continue working on my website.
Here is the code:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
margin: 0;
position: fixed;
height: 85px;
width: 100%;
text-align: center;
background-color: #002345;
}
.about {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.portfol {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.cont {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.active {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #fff;
color: #002345;
}
a:hover {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #777;
color: #002345;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PortfolioPage</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<div class="about"> <li>ABOUT ME</li> </div>
<div class="portfol"> <li>PORTFOLIO</li> </div>
<div class="cont"> <li>CONTACT</li> </div>
</ul>
</div>
</header>
</body>
it happens because you have added padding on the :hover state but it is not present in the normale state rule...
a {
padding-left: 15px;
padding-right: 15px;
}
a:hover {
display: block;
/*padding-left: 15px;
padding-right: 15px;*/
background-color: #777;
color: #002345;
}
It is because in your hover class you are adding padding to the a tag, add them by default like the example
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
margin: 0;
position: fixed;
height: 85px;
width: 100%;
text-align: center;
background-color: #002345;
}
.about {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.portfol {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.cont {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.active {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #fff;
color: #002345;
}
a{
padding-left: 15px;
padding-right: 15px;
}
a:hover {
display: block;
background-color: #777;
color: #002345;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PortfolioPage</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<div class="about"> <li>ABOUT ME</li> </div>
<div class="portfol"> <li>PORTFOLIO</li> </div>
<div class="cont"> <li>CONTACT</li> </div>
</ul>
</div>
</header>
</body>
just remove
padding-left: 15px;
padding-right: 15px;
from
a: hover
As part of a school project I am trying to create my first webpage. I am however stuck on this issue where my navigation bar moves down the page when I place a logo in the top bar and center it. I wonder if anyone could help?
JS Fiddle: https://jsfiddle.net/3k65c20u/
Here is my code:
#header {
height: 200px;
width: 100%;
background-color: black;
}
#top-bar {
background-repeat: repeat-x;
position: absolute;
left: 0;
width: 100%;
height: 200px;
padding: 0px;
margin: 0px;
}
//Top Navigation Bar//
.navigation-bar {
background-color: black;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 250px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.navigation-bar ul {
padding: 210px;
margin: 0px;
text-align: center;
}
.navigation-bar li {
list-style-type: none;
padding: 8px;
height: 24px;
margin-top: 30px;
margin-bottom: 4px;
display: inline;
}
.navigation-bar li a {
color: gray;
background-color: black;
font-size: 13px;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
box-shadow: 0px;
border-radius: 3px;
padding-right: 1em;
padding-left: 1em;
line-height: 2em;
margin-right: 16px;
}
.navigation-bar li:first-child {
margin-left: 20px;
border: #C00;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="feistybite.css">
<div id="header">
<div id="top-bar"></div>
<div class="navigation-bar">
<img src="strikerlogo.png" class="center">
<div id="navigation-container" class="cf">
<ul>
<li>Miten se toimii
</li>
<li>Osta
</li>
<li>Tarina
</li>
<li>Meistä
</li>
<li>Uutisia
</li>
</ul>
</div>
</div>
</head>
<body>
</body>
</html>
not sure what design you want achieve, but i just changed the navigation bar position to relative, and the image to absolute, so... set left to 50% and using the CSS property transform: translateX(-50%); the image is finally centered
https://jsfiddle.net/3k65c20u/1/
Remove the padding: 210px at the .navigation-bar ul rule!
change css in ul to, removing padding:210px;
.navigation-bar ul {
margin: 0px;
text-align:center;
}
I am recreating the Google homepage for an assignment on TheOdinProject. I am almost finished, but the problem I am having is that I can't seem to get the hyperlink to be visible within the footer container. I tried changing the text color, and I checked the properties within the list item selector and I should be able to see the hyperlink "About Google" but I can't. What am I doing wrong?
body {
font-family: Arial;
}
#logo {
display: block;
width: 350px;
margin : 0 auto;
margin-top: 100px;
position: relative;
text-align: center;
}
input {
margin-top: -50;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
position: relative;
line-height: 2;
display: block;
width: 500px;
}
#logo img {
max-width: 100%;
}
.search_button {
margin-left: 800px;
margin-top: 5px;
display: inline;
float: left;
}
.feeling_lucky_button {
margin-right: 800px;
margin-top: 5px;
float: right;
display: inline;
}
#navbar {
background-color: #2d2d2d;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#navbar ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
list-style-type: none;
}
#navbar ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#navbar ul li a:hover {
color: white;
text-decoration: none;
}
#footer {
width: 100%;
height: 30px;
position: fixed;
border-top: 1px solid rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
}
#footer li {
margin-bottom: 5px;
padding-left: 8px;
}
#footer ul li a {
font-weight: bold;
color: red;
text-decoration: none;
}
#footer ul li a:hover {
color: red;
font-weight: bold;
text-decoration: none;
}
#footer ul li a:link {
color: red;
}
#footer ul li a:visited{
color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Google Homepage Project</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="navbar">
<ul>
<li>Home</li>
</div>
<div id="logo">
<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
</div>
<div id="searchbar">
<form action="#" method="POST">
<input type="text" name="searchbar">
</div>
<button class="search_button">Google Search</button>
<button class="feeling_lucky_button">I'm feeling lucky</button>
<div id="footer">
<ul>
<li><a href="http://www.google.com>About Google</a></li>
</ul>
</div>
</body>
</html>
Try this in footer. You missed double quote.
<li>About Google</li>
Fiddle:https://jsfiddle.net/ywu325mw/1/
In your footer:
<a href="http://www.google.com>About Google</a>
should be:
About Google
You forgot to close " the href attr