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.
Related
I'm currently working on multiple css dropdown menu and the problem is in the position that the menus appear . AS you can see , Shop menu is in its own position but the services menu appears just in the same position as the shop menu was before. I'm new to front-end web development so anyone can help me to fix this please?
*{
margin: auto;
}
a{
text-decoration: none;
}
header{
display: flex;
direction: ltr;
background-color: gold;
padding: 15px;
}
.primaryHeaderMenu ul li ul{
position: absolute;
display: none;
padding: 15px 15px;
background-color: lightslategrey;
list-style: none;
margin: 0;
}
.primaryHeaderMenu ul li ul li{
padding-bottom: 10px;
}
.primaryHeaderMenu ul li:hover ul{
display: block;
}
.primaryItems{
display: inline;
padding-left: 30px;
}
.primaryHeaderMenu li a{
color: black;
font-weight: bold;
}
.secondaryHeaderMenu li a{
color: black;
font-weight: bold;
}
.primaryHeaderMenu{
flex-grow: 1;
}
.secondaryHeaderMenu li{
display: inline;
padding-left: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Irancell</title>
</head>
<body>
<header>
<div class="irancellLogo">
<a href="#">
<img src="/iracell_logo.png" alt="Irancell" width="60px" height="60px">
</a>
</div>
<div class="primaryHeaderMenu">
<ul>
<li class="primaryItems">Shop
<ul>
<li>ُSimcards</li>
<li>Packages</li>
<li>Devices</li>
<li>Methods</li>
</ul>
</li>
<li class="primaryItems">Services
<ul>
<li>HighSpeed Net</li>
<li>Applications</li>
<li>Conversation</li>
<li>Messaging</li>
<li>Entertainment</li>
</ul>
</li>
<li class="primaryItems">Festivals</li>
<li class="primaryItems">Support</li>
<li class="primaryItems">About Us</li>
<li class="primaryItems">Cooperation</li>
</ul>
</div>
<div class="secondaryHeaderMenu">
<ul>
<li>
<img src="/search.png" alt="Search">
</li>
<li>
Login
</li>
<li>
Register
</li>
</ul>
</div>
</header>
</body>
</html>
Add position: relative; to .primaryItems class. Then add left: 0; to your .primaryHeaderMenu ul li ul class. The issue is position: absolute; is hoisting it's self up to the first relative positioned element in the HTML DOM, then they overlap each other since they have the same parent with the same position. There are interactive examples of this on W3Cschools.
I hope the following is useful for you.
Try replacing
.primaryItems {
display: inline;
margin-left: 30px;
}
with
.primaryItems {
display: inline;
margin-left: 30px;
position: relative; // New Line
}
and
try replacing
.primaryHeaderMenu ul li ul {
position: absolute;
display: none;
padding: 15px 15px;
background-color: lightslategrey;
list-style: none;
margin: 0;
}
with
.primaryHeaderMenu ul li ul {
position: absolute;
display: none;
padding: 15px 15px;
background-color: lightslategrey;
list-style: none;
margin: 0;
left: 0; // New Line
}
Example here: https://codepen.io/yasgo/pen/BaLNvBN
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>
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; }
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 have been trying to create a navigation bar with a drop-down menu in it. after a few hours of looking have had found the problem is that as the cursor moves down the drop-down and into the next div underneath it, it disappears.
i have been trying to but cannot figure out how to fix it.
here is the jsfiddle
the page html is :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E-book</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/button.css" rel="stylesheet" type="text/css">
<link href="../css/dropdown.css" rel="stylesheet" type="text/css">
<script src="../script/script.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<span><h1>AS Level E-Book</h1></span>
</div>
<div class="nav-wrapper">
<nav class="menu-wrap">
<ul>
<li>Introduction</li>
<li>Online Services
<ul>
<li>E-Mail</li>
<li>Social Network</li>
<li>Instant Messaging</li>
</ul>
</li>
<li>Life In Info Age</li>
<li>Digital Divide</li>
<li>Conclusion</li>
</ul>
</nav>
</div>
<div class="main"><!-- TemplateBeginEditable name="next and prev" -->
<a><button class="metal radial"><=</button></a>
<a><button class="metal radial">=></button></a>
<!-- TemplateEndEditable --></div>
<div class="cont"><!-- TemplateBeginEditable name="content" -->
content
<!-- TemplateEndEditable -->
</div>
</div>
</body>
</html>
and the css is:
.nav-wrapper{
position:absolute; top: 100px; right: 0; left: 0;
background: linear-gradient(to right, #aaa , #aaa, #ddd, #ddd, #aaa,#aaa);
}
nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
nav a:hover {
background-color: #005f5f;
}
nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
nav li li {
font-size: .8em;
}
nav li {
width: 250px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
nav a {
border-bottom: none;
}
nav > ul > li {
text-align: center;
}
nav > ul > li > a {
padding-left: 0;
}
nav li ul {
position: absolute;
display: none;
width: inherit;
}
nav li:hover ul {
display: block;
}
nav li ul li {
display: block;
}
any help would be much appreciated
thanks
Add high(er) z-index to:
nav li ul {
position: absolute;
display: none;
width: inherit;
z-index:9999;
}
About z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Demo: https://jsfiddle.net/0cd16xjj/1/