I want to change horizontal navigation bar go through a line to other edge in the same color.
Expected:
What I got:
To make it happen, I tried entirely different ways likeļ¼
adding more buttons
using horizontal line with same color
All attempts failed.
Can anyone help me to make it happen?
This is my code:
.ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #333;
}
.li {
float: left;
}
.li a {
display: block;
color: blue;
background-color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.li a:hover {
background-color: #9900cc;
}
<!doctype html>
<html lang="EN">
<head>
<link rel="stylesheet" href="src/styles/styles.css">
<title>My shopping cart</title>
</head>
<body>
<ul class="ul">
<li class="li">Home</li>
<li class="li">News</li>
<li class="li">Contact</li>
<li class="li">About</li>
</ul>
</body>
</html>
Use a <nav> to enclose the <ul>.
nav {
background: #333;
overflow: auto;
}
.ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #333;
}
.li {
float: left;
}
.li a {
display: block;
color: blue;
background-color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.li a:hover {
background-color: #9900cc;
}
<!doctype html>
<html lang="EN">
<head>
<link rel="stylesheet" href="src/styles/styles.css">
<title>My shopping cart</title>
</head>
<body>
<nav>
<ul class="ul">
<li class="li">Home</li>
<li class="li">News</li>
<li class="li">Contact</li>
<li class="li">About</li>
</ul>
</nav>
</body>
</html>
Related
I am aware that there are plenty of question identical to mine, but it seems that I have a problem with my code. I'm trying to make a website, and for now the layout I'm looking for is a logo at the very top followed by the name of the brand and then under it a navigation bar. I did the nav bar first, but when trying to put the image in, I couldn't resize it, let alone center it with text. Can somebody help me achieve what I'm trying to do, or at least explain what I'm doing wrong? Thanks
P.S. Here is my code.
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo img{
float: center;
width: 80;
height: 80;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
P.S.S. If it helps, when I inspect the image on the page, I get this thing here.
There is no float: center. Instead, you can use text-align: center; on .logo (the container of the image). And you need to use the px unit on width and height of the image.
BTW: Since you wrote about centering image and text, I added an h1 in my snippet which is also centered via text-align: center. (You could also add settings for margin-top and margin-bottom if you want to change the default distance to the elements above and below)
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li {
float: left;
}
h1 {
text-align: center;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
text-align: center;
}
.logo img {
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<h1>Header Text</h1>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
Use display: flex is much easier to use and flexible
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
display: flex;
justify-content: center;
}
.logo img{
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
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 have one problem with my border. The problem is that I have 2 different borders: one that is on the "DUCO" button (my name) and one that creates itself when you hover over the text. The problem is that that the borders aren't the same size. can anyone help? (you cant see the background but that is no big deal)
Thanks
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.hoofd-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.hoofd-nav li
{
display: inline-block;
}
.hoofd-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.hoofd-nav li.actief
{
border: 3px solid white;
}
.hoofd-nav li a:hover
{
border: 3px solid white;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="rij">
<ul class="hoofd-nav">
<li class="actief"> Duco </li>
<li> Hobbys </li>
<li> Dromen </li>
</ul>
</div>
</header>
</body>
</html>
It would be easier to set the .active class on the a tag.Then you can also set a transparent border to remove the wobble.
The problem is comming from the mixing of both a and li tags. So the example is for the a tag but might as well be the li tag.
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.hoofd-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.hoofd-nav li
{
display: inline-block;
}
.hoofd-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
border: 3px solid transparent; /* Remove wobble */
}
.hoofd-nav li a.actief
{
border: 3px solid white;
}
.hoofd-nav li a:hover
{
border: 3px solid white;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="rij">
<ul class="hoofd-nav">
<li> Duco </li>
<li> Hobbys </li>
<li> Dromen </li>
</ul>
</div>
</header>
</body>
</html>
It seems that your static border (the one on "DUCO") and the other border (the one that appears when hovering over "DUCO") are not borders of the same element!
The static one is a border for the li while the other one is applied on the a tag inside the li.
Try making both border properties applied on the same element, and it should work fine.
I am trying to use CSS so when you hover on something it changes background colors. The code I am using does not work though. I can't seem to find out why though. It should work, right?
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a :hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
Please help!
Adjust your on-hover rule slightly and consider the a element as well:
li:hover, li:hover a {
background: blue;
}
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
transition: .7s;
}
li:hover, li:hover a {
background: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
You have a VERY simple mistake.
When you have this code...
li a: hover
remove the space between a and :hover and see the magic.
Now, it should look like this.
li a:hover
#Joseph Young mentioned this, don't forget to upvote his comment.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a:hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding-top: 10px;
width: 320px;
margin: 0 auto;
overflow: hidden;
}
.menu {
background: #093;
}
.menu ul {
margin-left: 0;
list-style: none;
text-align: center;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
display: block;
padding: 10px;
color: #CC0;
text-decoration: none;
}
.menu ul li a:hover {
background: #C30;
color: #FFF;
}
<div class="wrapper">
<div class="menu">
<ul>
<li>HOME
</li>
<li>CONTACT
</li>
<li>ABOUT
</li>
</ul>
</div>
I'm new to HTML and CSS and am trying to make a menu bar. I placed a navigation bar inside a div assuming that it would kind of be in the center. Instead, it appears to sit on the bottom. Also, how could I position the navigation bar so it's not just floating to the left or the right.
Side question, how can I have it so the menu bar completely extends to the edge of the screen. Like the one at the top of this site.
Here's the code:
body {
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: white;
height: 300px;
width: auto;
height: 55px;
box-shadow: 1px 3px 2px #888888;
}
h1 {
color: #35e3c1;
display: inline;
font-size: 36px;
font-weight: 900;
margin-left: 15px;
}
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
display: inline-block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: #1fe0ba;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soycial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1>Soycial</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Is this what you want?
I have added margin:0; to the ul.
body {
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: white;
height: 300px;
width: auto;
height: 55px;
box-shadow: 1px 3px 2px #888888;
}
h1 {
color: #35e3c1;
display: inline;
font-size: 36px;
font-weight: 900;
margin-left: 15px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
display: inline-block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: #1fe0ba;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soycial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1>Soycial</h1>
<ul>
<li>Home
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</body>
</html>
Other ways this could have been done would have by messing with top and bottom margins(depending on what specific ratios you want). Using this way will get you specifically what alignment you want vertically.