I am learning how to work with basic html code and page layouts. I have the following html and css code. I want the nav bar to be aligned centered on the top of the page. If I run it now, it looks close to what I want, but it is stuck to the left.
HTML:
<head>
<meta charset="utf-8" />
<title>Home</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="nav">
<ul>
<li><a>A</a></li>
<li><a>B</a>
<ul>
<li><a>BA</a></li>
<li><a>BB</a></li>
</ul>
</li>
<li><a>C</a>
<ul>
<li><a>CA</a></li>
<li><a>CB</a></li>
<li><a>CC</a></li>
<li><a>CD</a></li>
</ul>
</li>
<li><a>D<a></li>
</ul>
</div>
</body>
</html>
CSS:
body{
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
.nav ul{
padding: 0px;
list-style: none;
}
.nav ul li{
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
.nav ul li a{
text-decoration: none;
color: white;
display: block;
}
.nav ul li a:hover{
background-color: green;
}
.nav ul li ul li{
display: none;
}
.nav ul li:hover ul li{
display: block;
}
I tried changing the display and float values based on various articles, but i did not find anything that worked. Thanks for any help.
There is a really sweet solution with margin auto. In your css file, just add these two properties to .nav class
.nav {
margin: 0 auto;
width: fit-content;
}
it will make the width of your nav div to just fit content and then position it to center because of that auto margin. Cheers
instead
.nav ul li{ float: left; }
use
.nav ul li{ display: inline-block; }
and add
.nav{ text-align: center; }
Related
I am building a booking website for a cinema.
I have created a navbar, but am unable to centralize the options. I tried to use text-align: center; but it did not work.
I am using only HTML and CSS to build this site.
This is the first time posting on this platform and I am not sure if the information which I shared is sufficient.
html {
background-color: white;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
max-width: 1042px;
margin: 10px auto;
}
nav {
width: 100%;
height: 60px;
background-color: rgb(230, 23, 57);
margin: auto;
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 7px 20px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgb(230, 23, 57);
padding: 10px;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 145px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 5px;
}
nav ul li ul li a:hover {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta tags -->
<meta name="description" content="Carnival Cinema">
<meta name="keywords" content="cinema, indian movies, Carnival, Carnival Cinema">
<!-- CSS Links -->
<link rel="stylesheet" href="header.css">
<title>Carnival Cinema</title>
</head>
<body>
<header>
<h1>Welcome to Carnival Cinema!</h1>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Movies
<ul>
<li>Now Showing</li>
<li>Coming Soon</li>
</ul>
</li>
<li>Promotions</li>
<li>Corporations
<ul>
<li>Events</li>
<li>Advertisement</li>
<li>Vouchers</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<body>
</body>
<footer></footer>
</body>
</html>
Add display: flex; and justify-content: center; to the nav. I recommend to read more about Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Try
remove float from nav ul
nav ul li {
display: inline-block;
list-style: none;
position: relative;
}
Apart from this I would recommend to use rather display: flex instead of float. Is easier to handle and gives better possibilities for aligning, centering... But in this case display: inline-block is the easiest option.
And I also recommend to not give a fixed height to nav but rather do the spacing over the margin of nav li a. Like this it's always vertically centered as well.
I am currently working on a project for college and my nav bar is giving me issues, I have tried various ways to resolve the issue by doing some research.
The site is very basic as it is just a template at the moment.
My main goal for the nav bar was to centre it on the main background image and allow the "Rooms" tab to drop down.
nav {
background-color: transparent;
}
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Beachview - Home</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="" />
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Spartan&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<div class="container">
<nav>
<ul>
<li>ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<main>Main stuff goes here</main>
</body>
</html>
Not 100% sure if the above makes sense as the background image will not load.
Add a .dropdown class to your li containing the dropdown ul.
<li class="dropdown">ROOMS
<ul>...</ul>
</li>
Add these styles to align your dropdown below the "Rooms" link:
.dropdown {
/* Make it so you can position the child ul with absolute position
/ relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
Apply display: flex to your .bg-img container, and then adding margin: auto; to the child-element nav will center it vertically and horizontally.
.bg-img {
background-image: url('https://via.placeholder.com/900x200/000/333'); // Replace with your image
height: 200px; // Sample height
width: 100%; // Sample width
display: flex; // Flex allows for easy centering of child-elements
}
nav {
background-color: transparent;
margin:auto; // this is the key to the centered alignment
}
I also moved your class="container" from the wrapper div to your nav and removed that div.
Here is the full working code. (Click "Run Code Snippet, then hit "Full Page" on the right-hand side to see it working):
.bg-img {
/* Replace this img url with your image */
background-image: url('https://via.placeholder.com/900x200/000/333');
height: 200px; /* Sample height */
width: 100%; /* Sample width */
display: flex; /* Flex allows for easy centering of child-elements with margin:auto */
}
nav {
background-color: transparent;
margin:auto;
}
.dropdown {
/* Make it so you can position the child ul with absolute position
relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
/* None of the below code was modified */
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<body>
<div class="bg-img">
<!-- this is where the old <div class="container"> was -->
<nav class="container">
<ul>
<li class="dropdown">ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<main>Main stuff goes here</main>
</body>
So I am new in this HTML thing and I am experimenting with a navigation bar. With when I hover over a li/a element I get another color for the full height of the navigation bar.
This is what I get first
body{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
overflow: hidden;
}
.navbar ul{
}
.navbar ul li{
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a{
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 50px;
height: 100%;
}
.navbar ul li:hover{
background-color: #bdc3c7;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="header">
<div class="navbar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
And then I changed a few things in the code and came up with this (Here is the second experiment result) (erasing overflow:hidden; and changed it with line-height:55px;)
I got the full height hover but there's a white gap between the browser window and my navigation bar.
body{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
line-height: 55px;
}
.navbar ul{
}
.navbar ul li{
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a{
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 50px;
height: 100%;
}
.navbar ul li:hover{
background-color: #bdc3c7;
}
I know there's a bunch of similar questions like mine and I've read them before asking here, but I still don't get the result that I want.
Here you go, your navbar needs margin removed, so check the code ..
EDIT: I also modified a a little bit, so it doesn't overflow navbar and fills full height of it.
body {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
height: 55px;
background-color: #ecf0f1;
text-align: right;
line-height: 55px;
}
.navbar ul {
margin: 0; /* <--- THIS IS WHAT REMOVES BLANK SPACE ABOVE/BELOW NAVBAR */
}
.navbar ul li {
list-style-type: none;
display: inline-block;
text-align: center;
height: 100%;
}
.navbar ul li a {
text-decoration: none;
color: black;
font-family: 'Franklin Gothic';
padding: 0 50px; /* more proper use of padding */
line-height: 55px; /* line-height to allow full clickable area */
display: block; /* so the line-height can be applied */
}
.navbar ul li:hover {
background-color: #bdc3c7;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="header">
<div class="navbar">
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
</ul>
</div>
</div>
</body>
</html>
In your CSS , add
html,body {
margin: 0;
padding:0;
}
I am having trouble with my drop down menu, the second level items overlap each other and each item has a different width. I have searched this site and tried fixes to similar problems, but haven found anything that works. I am not a programer, but am trying to add this to my website. Here is my code:
#menu ul,
#menu li,
#menu span,
#menu a {
margin: 0;
padding: 0;
position: relative;
}
#menu ul {
list-style: none;
position: absolute;
top: 1.1em;
}
#menu
{
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}
#menu ul > ul > li
{
float: left;
}
#menu ul ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
width: 100px;
text-align: left;
*width: 100%; /* IE7 hack*/
}
#menu li:hover ul {
display: block;
}
#menu:after,
#menu ul:after {
content: '';
display: block;
clear: both;
}
#menu ul li
{
position: relative;
display: inline;
}
#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}
/*#menu ul li a:hover
{
text-decoration: none;
}*/
#menu ul li a.active
{
background: #171e35 url('images/menuactive.gif') repeat-x top
left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Menu</title>
<!-- zenlike1.0 by nodethirtythree design http://www.nodethirtythree.com -->
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css"
href="test.css">
</head>
<body>
<div id="menu"><!-- HINT: Set the class of any menu link below to "active" to make it appear active -->
<ul>
<li>Home</li>
<li>Department
<ul>
<li>Patrol </li>
<li>Investigations</li>
<li>Records </li>
<li><a href="#" class="active">Prosecution
</a></li>
</ul>
</li>
<li>Forms</li>
<li>Gallery</li>
<li>Media</li>
<li>Contact</li>
</ul>
</div>
<br>
</body>
</html>
Fiddle
Created a class submenu and added display:block. This allows us to assign a width and height value DOM objects and stops your menu items from overlapping. In your case I assigned the class submenu to the malfunctioning menu items to avoid any conflicts with preexisting code.
Simplified version fiddle
Since you're not a programmer I took the liberty to polish up your code and remove the lines that weren't doing anything. The simplified link above has the same functionality as your code (with solution) but with less confusing classes. It may make it easier for you to continue working on your site!
To fix alignment on your website, replace the CSS for ul#menu ul with:
ul#menu ul {
display: none;
position: absolute;
top: 28px;
margin-left: 70px;
width: 100px;
text-align: left;
}
To address the submenu appearing behind your content add z-index:10 to #menu
Give the sub nav links more line-height.
Add this rule to your styles:
#menu ul li ul li {
line-height: 2em;
}
Then, to close the gap created between the main nav and the sub nav (which will prevent you from hovering over sub nav links) add a bit of padding-bottom to your existing main nav rule:
Adjust this rule in your styles:
#menu ul li a
{
/* original */
/* padding: 0.5em 1.0em 0.9em 1.0em; */
/* new */
padding: 0.5em 1.0em 1.1em 1.0em;
color: #fff;
text-decoration: none;
}
The solution above is a straight answer to your question and solves the problem you raise.
However, I would suggest you consider a better overall solution for your navigation development. Currently, it seems a bit disjointed and patched together.
Here's a great video tutorial for building clean, elegant and robust nav menus.
https://youtu.be/k14bxM1cWoM?list=PLl1MmKpV0eieAACJx-rTMnmKYfcBOjqKN
Try this style,
<style>
#menu {
position: relative;
background: #171e35 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 10px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-right: 1px;
}
#menu a {
display: block;
padding: 0px 30px;
line-height: 45px;
text-decoration: none;
color: #FFFFFF;
}
#menu li:hover {
text-decoration: none;
background: #171e35;
}
#menu .active{
background: #171e35;
}
#menu li{
position: relative;
}
#menu ul ul{
position:absolute;
left: 0;
display: none;
width: 300px;
}
#menu li li{
float:none;
}
#menu li:hover > ul{
display:block;
}
</style>
Just add this css on your style
#menu ul ul li a {
width:100%;
float:left
}
Okay I am making a sample of navigation bar it's all fine except whenever the nested li is hovered the background doesn't fully cover the space.
My HTML code goes as :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>NavBar</title>
</head>
<body>
<div id="nav">
<ul>
<li>Home</li><li>
About</li><li>
Contact
<ul>
<li>Email</li>
<li>Phone</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
My CSS code goes as :
html, body {
margin: 100px;
padding:0px;
}
#nav {
margin: 0px;
padding: 0px;
background-color: #909090;
font-familY: Courier;
font-size: 19pt;
color: #afc0ff;
}
#nav ul ul {
display: none;
background-color: #909090;
}
#nav ul li:hover > ul{
margin: 0px;
padding:0px;
display:block;
position:absolute;
top: 100%;
left: 0px;
width: 100%;
}
#nav ul li:hover {
background: #808080;
}
#nav ul li {
margin: 0px;
padding: 10px 5px 10px;
list-style: none;
display: inline-table;
position: relative;
}
#nav ul li a {
text-decoration: none;
color: #260026;
}
My problem is:
I am not being able to make my nested li's background color cover up the whole area like you can see in Email that whole area is not hovered!
JSFiddle
Add this to your CSS:
#nav ul ul li {
display:block;
}
Check JSFiddle Demo