My navigation bar's code is as follows:
index.html
<header id="header" class="flex">
<h2 id="site-name">RandomSite</h2>
<!-- NAVIGATION -->
<nav id="header-nav">
<h3 class="hidden">RandomSite's hidden navigation</h3>
<ul class="nav-list">
<li>Home</li>
<li>News</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
styles.css
/* NAVIGATION */
header {
border: 2px dashed black;
display: flex;
padding: 10px;
}
header h2 {
font-size: 18px;
font-weight: 700;
margin: 16px 0px;
}
.nav-list {
list-style-type: none;
display: flex;
float: right;
}
li {
list-style: none;
display: inline;
padding: 0px 5px 0px 0px;
}
This is what my navbar looks like. I want the unordered list contents to be aligned to the right. How do I do that?
Navigation bar screenshot
You need to add justify-content: space-between to the class .header.Also, to remove the default underline of the <a> tag you must use text-decoration:none, and for hidden the element with class .hidden use display:none.
/* NAVIGATION */
header {
border: 2px dashed black;
display: flex;
justify-content:space-between;
padding: 10px;
}
header h2 {
font-size: 18px;
font-weight: 700;
margin: 16px 0px;
}
.nav-list {
list-style-type: none;
display: flex;
float: right;
}
.hidden{
display:none;
/* visibility:hidden; */
}
li {
list-style: none;
display: inline;
padding: 0px 5px 0px 0px;
}
#site-name a {
text-decoration:none;
color: black;
}
.nav-list a {
text-decoration:none;
color: black;
}
*{font-family:sans-serif}
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header id="header" class="flex">
<h2 id="site-name">RandomSite</h2>
<!-- NAVIGATION -->
<nav id="header-nav">
<h3 class="hidden">RandomSite's hidden navigation</h3>
<ul class="nav-list">
<li>Home</li>
<li>News</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
I removed all the unnecessary code that you had before. I added a bit of padding to your a tags so that it will look nicer. To make your nav items move to the right, just add space-between and it will fix your problem.
* {
font-family: sans-serif;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
border: 2px dashed black;
padding: 10px;
}
header h2 {
font-size: 18px;
margin: 16px 0px;
}
header a {
text-decoration: none;
}
li > a {
color: #484b4f;
padding: 0.5rem;
}
header > h2 > a {
color: black;
}
.nav-list {
list-style-type: none;
}
li {
display: inline;
}
<header>
<h2 className="header-site-name">
RandomSite
</h2>
<nav>
<ul class="nav-list">
<li>Home</li>
<li>News</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
Related
I am trying to create a horizontal navigation menu in my vue3 application. I have 2 problems.
My menu is reversed and not in the correct order. 2) My menu does not align with the logo. Below is an image of what it looks like
<template>
<header>
<nav class="navbar">
<img src="src\assets\logo.svg" height="50px" width="50px" />
<ul>
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact us</li>
</ul>
</nav>
<style scoped>
.navbar {
background-color: white;
border-radius: 30px;
}
.navbar li {
float: right;
list-style: none;
margin: 13px 20px;
font-size: 24px;
}
.navbar ul {
overflow: auto;
}
.navbar li a {
padding: 3px 3px;
text-decoration: none;
color: black;
}
</style>
You could use flexbox model instead of float like this:
.navbar {
background-color: white;
border-radius: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar li {
list-style: none;
margin: 13px 20px;
font-size: 24px;
}
.navbar ul {
display: flex;
}
.navbar li a {
padding: 3px 3px;
text-decoration: none;
color: black;
}
<nav class="navbar">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/512px-Vue.js_Logo_2.svg.png" height="50px" width="50px" />
<ul>
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact us</li>
</ul>
</nav>
I have this problem when i want to put some text in my body or place something like a div or a section there , the text goes above the navbar which is in header.I tried to put a margin top to the body but it only made a bigger gap between the top.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.logo {
float: left;
height: auto;
width: auto;
}
body{
background-color: #444064;
margin-top:10ex;
}
nav {
float: right;
margin-bottom: 50px;
}
nav ul {
margin: 0,auto;
padding: 0,auto;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 2ex;
padding: 5ex;
}
nav a {
color: #ffffff;
font-weight: 600;
font-size: 4ex;
text-decoration: none;
}
nav a:hover {
color: #a34963;
}
section{
text-align: center;
margin-top: 5ex;
}
h1{
font-size: xx-large;
}
<html>
<div id="wrapper">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</head>
<header>
<div id="menu">
<img src="Logo.png" alt="logo" class="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
<body>
Hello world
</body>
</div>
</html>
Please help me
You have many issues with your code as you have an invalid HTML structure. however the issue you have is: nav { float: right; } that causes you navbar to float and as such the content can flow around the nav element and be displayed above. If you remove the line it not happen anymore.
However, I strongly recommend to get back to some decent tutorials and start at the basics. Like I said your HTML structure is an invalid mess. Some css declarations are incorrect/unnecessary as well (e.g. webkit prefix for box-sizing). Also don't use float as styling technique. Use a modern solution like flexbox or css-grid.
Last but not least, this is how the html structure should look like.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logo {
float: left;
height: auto;
width: auto;
}
body {
background-color: #444064;
margin-top: 10ex;
}
nav {
margin-bottom: 50px;
}
nav ul {
margin: 0 auto;
padding: 0 auto;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 2ex;
padding: 5ex;
}
nav a {
color: #ffffff;
font-weight: 600;
font-size: 4ex;
text-decoration: none;
}
nav a:hover {
color: #a34963;
}
section {
text-align: center;
margin-top: 5ex;
}
h1 {
font-size: xx-large;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</head>
<body>
<header>
<div id="menu">
<img src="Logo.png" alt="logo" class="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
<div id="wrapper">
Hello world
</div>
</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 am trying to center my ul, but I can't seem to get it to center. I have tried using display: table margin: 0 auto That puts the ul in the middle, but not exactly in the center. I have also tried using display: block with margin: 0 auto but that doesn't center it either
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
You can add this rule to the <ul>:
display: inline-block;
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
I assume that the issue isn't so much that you want the ul element centered, but rather you want the menu items (the li items) inside the ul to be centered.
The entire issue is solved by simply changing the style on your li from float:left to display:inline-block. See below.
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
display:inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Droplet Games - Official Site</title>
<link rel="stylesheet" href="css/styles-index.css">
</head>
<body>
<header>
<h1>DROPLET GAMES</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Games</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</html>
Updated answer: use flexbox
For the best control over spacing of elements in a column or a row, I'd recommend using flexbox now that it has widespread browser support.
To use flexbox here, set display: flex; on the ul, making it the flex container. By default, this will make the ul act as a row with the li acting as flex items within that row. CSS Tricks has a great guide about using flexbox.
I've left my original answer which uses display: inline-block; below.
Original answer
Sounds like display: inline-block; is exactly what you need.
As the name alludes, an element with display: inline-block; acts as if it's an inline element as far as its parent is concerned, and internally it acts like a block element.
Its use here requires a container with width: 100%; and text-align: center;. I've used the <nav> element below. The <ul> can then be given display: inline-block; to achieve the effect you want.
You can also use display: inline-block; in combination with display: inline; for the <li> and their child <a> elements as follows, in order to avoid the float: left; use.
li {
display: inline;
}
li a {
display: inline-block;
...
}
* {
margin: 0;
padding: 0;
font-family: Helvetica;
}
header {
background-color: black;
color: white;
padding: 25px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
}
li {
display: inline;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
nav {
width: 100%;
margin: 0 auto;
text-align: center;
}
<header>
<h1>DROPLET GAMES</h1>
<nav>
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Games
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
</header>
I've got the problem that on my small test website I can't get the navigation bar centered.
I want to have all the buttons on it centered while the navigation bar goes from the right to the left side of the website. I've got no fixed width and don't want to have one. The solution should also work with smartphones and tablets and just to mention: I don't really care about IE support.
I already searched a bit through the web but got nothing I've tried working.
Here is the code I've already got:
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Download</li>
<li>Contact</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
And here is the CSS code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
background-color: #333333;
}
li { float: left; }
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover { background-color: #111111 }
I'm using HTML5 with CSS3.
EDIT: It seems to be that I wasn't clear enough with the buttons. The buttons should not be as large as the navigation bar itself. All buttons should be centered on the navigation bar, so in the middle there are the buttons and on the left and right side there is just the black navigation bar without buttons if there is enough space left, ofcourse.
Using flexbox will do exactly that...
adding flex-flow: row wrap; will allow the menu to wrap on smaller screens if the navigation is larger than the viewport.
You will need to prefix those styles to run on all browsers FYI.
.navigation nav {
display: flex;
justify-content: center;
background-color: #333333;
}
ul {
display: flex;
flex-flow: row wrap;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover {
background-color: #111111
}
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Download
</li>
<li>Contact
</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
Solution just with two lines of css:
1. ul{ text-align: center;}
2. li{display: inline-block;}
That's all :)
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
background-color: #333333;
text-align: center;
}
li { display: inline-block; }
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover { background-color: #111111 }
</style>
</head>
<body>
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Download</li>
<li>Contact</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
</body>
</html>
The simpliest solution I think will be if will just divide 100% by number of li items in menu, so in this case we have 3 li elements so about 33% of width:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
background-color: #333333;
}
li {
float: left;
width: 33%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover { background-color: #111111 }
<html>
<head>
</head>
<body>
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Download</li>
<li>Contact</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
</body>
</html>