I have this black bar at the top with my navigation menus in it. But if i add "text-align: center" instead of "float: right" then the menus/links go to the center but not in the black bar at the top. Does anyone knows how to fix this?
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
header {
background-color: black;
height: 85px;
line-height: 85px;
}
ul {
list-style: none;
}
ul li {
position: relative;
display: inline-block;
font-size: 17px;
}
header nav {
position: relative;
float: right;
}
header nav ul li a {
padding-right: 20px;
font-weight: bold;
text-decoration: none;
color: #DCDCDC;
}
header nav ul li a:hover {
color: white;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="mylogo.png">
<nav>
<ul>
<li>home</li>
<li>home1</li>
<li>home2</li>
<li>home3</li>
<li>home4</li>
<li>home5</li>
<li>home6</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
Add display: flex and justify-content:center to the .row class. Add css values for the logo. I added position: absolute and left: 0 to the logo. If you want to have your logo also aligned horizontally to the center, then remove the css that I added for .logo.
Here's a working snippet:
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
.row {
display: flex;
justify-content: center;
}
header {
background-color: black;
height: 85px;
line-height: 85px;
}
.logo {
position: absolute;
left: 0;
}
ul {
list-style: none;
}
ul li {
position: relative;
display: inline-block;
font-size: 17px;
}
header nav {
position: relative;
float: right;
}
header nav ul li a {
padding-right: 20px;
font-weight: bold;
text-decoration: none;
color: #DCDCDC;
}
header nav ul li a:hover {
color: white;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="mylogo.png">
<nav>
<ul>
<li>home</li>
<li>home1</li>
<li>home2</li>
<li>home3</li>
<li>home4</li>
<li>home5</li>
<li>home6</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
To align Element in Center use CSS flexbox, It is the Easiest way to align items
To center them horizontally use justify-content: center;
Just change the display of your div to flex and its inner content will be centered horizontally
.flexbox{
display:flex;
justify-content:center;
}
<div class="flexbox">
<!----Your data you want in Center-->
</div>
The float: right applies to the element it is attached to, but text-align: center acts on the contents of the element. So you need to move the text-align to the header:
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
header {
background-color: black;
height: 85px;
line-height: 85px;
text-align: center
}
ul {
list-style: none;
}
ul li {
position: relative;
display: inline-block;
font-size: 17px;
}
header nav {
position: relative;
}
header nav ul li a {
padding-right: 20px;
font-weight: bold;
text-decoration: none;
color: #DCDCDC;
}
header nav ul li a:hover {
color: white;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="mylogo.png">
<nav>
<ul>
<li>home</li>
<li>home1</li>
<li>home2</li>
<li>home3</li>
<li>home4</li>
<li>home5</li>
<li>home6</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
Related
I don't know how to align it with the logo. I'm trying to use padding but it won't work and even float maybe I would change the container size for it to work. Btw you won't be able to see the image and the li option due to overflow not allowing links so I have attached an image for more convenience
if possible maybe even tell some tips to be better in HTML
enter image description here
header {
height: 600px;
background-image:urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo{
height: 150px;
width: 450px;
}
img.logo{
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
color: #111111;
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
If you want to make logo and menu in a line, you should add "float: left" style to your div. So your style will be this:
.header-logo {
height: 150px;
width: 450px;
float: left;
}
Then if you want change your menu vertical align you can add "margin-top: px" to your ul like this:
nav ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
As logo div and ul are children of same parent,
you can make their parent i.e <nav> as display: flex to align it's children in a flex-row
Learn More on FlexBox
nav {
display: flex;
}
header {
height: 600px;
background-image: urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo {
height: 150px;
width: 450px;
}
img.logo {
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
/* color: #ffffff; */
color: #000; /* changing this so that you can see color */
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have changed the font color, so that you can see it working.
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 looking to have it so that when you hover over the nav bar the drop-down menu sits above/on-top of the main content, however at the moment when the menu drops down it is pushing the main image down and not sitting on top as I would expect the z-index property to do.
I have set the nav div to relative and also the main section div to relative but still with no joy!
Anyone out there able to help with this, please?
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img/main-image.png" alt="" />
</div>
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
position: relative;
z-index: 1;
}
ul {
list-style: none;
padding: 0;
float: right;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
position: relative;
}
#main-img {
width: 100%;
height: 100vh;
}
The #main-section is pushed down because the dropdown menu is positioned within the flow of the document.
When it is not hovered, it has display: none which takes it out of the DOM.
When hover, it switches to position: block which puts it back - and it occupies space, and pushes the main-content down.
You can test this by adding the desired end-result display: block by default, and see how the document would look in it's expanded state.
You need to apply position: absolute to your drop-down, in order for it to not interfere with the document flow. You could also move the z-index: 1 directly on it, if that is the content that should be on top - or you could leave it on the parent, and should work just as well. - the z-index is not the problem here.
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
}
ul {
list-style: none;
padding: 0;
float: right;
background-color: #ec671c;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
position:relative;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
}
#main-img {
width: 100%;
height: 100vh;
}
#top-bar-container >nav >ul > li > ul{
position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img" alt="" />
</div>
</body>
</html>
hi
You can do in the section ul>li{position:relative} and Also, put in a second UL {position:absolute}
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/
I've this site:
[Removed - problem solved]
As you can see, if you look at the navigation bar, buttons don't fill it, thus making it to look ugly.
I want to know if there is a way to calculate the button's width in a manner that no matter how many buttons I'll have, they'll always fill the entire page's width, thus only allowing a small stripe below them to be seen.
This is the CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #359DFF;
text-align: center;
padding:4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,a:active {
transition-property: background-color;
background-color: #33CCFF;
transition-duration: 1s;
}
.navbg {
background-color: #33CCFF;
position: absolute;
top: 70px;
width: 100%;
height: 32px;
z-index: -1;
}
Just change the li width
li {
width: 20%;
float: left;
}
The solution of this problem is in your HTML, you have to put your in your navigation bar.
for the moment you have:
<header>
<h2>Liceul Teoretic Dunarea</h2>
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Management</li>
<li>Profesori</li>
<li>Contact</li>
</ul>
</header>
<div class="navbg">
te
</div>
It should be like that:
<header>
<h2>Liceul Teoretic Dunarea</h2>
</header>
<div class="navbg">
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Management</li>
<li>Profesori</li>
<li>Contact</li>
</ul>
</div>
Change your code like the following:
<!DOCTYPE html>
<!-- WEBSITE DE DUMITROV CRISTIAN -->
<head>
<title>Liceul Teoretic Dunarea</title>
<link rel="stylesheet" type="text/css" href="css/stil.css">
</head>
<body>
<header>
<h2>Liceul Teoretic Dunarea</h2>
</header>
<div class="navbg">
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Management</li>
<li>Profesori</li>
<li>Contact</li>
</ul>
</div>
<footer>
<div class="footertxt">
<p><em>(C) Liceul Teoretic Dunarea<br>2013 [MMXIII]</em></p>
</div>
</footer>
</body>
Also add the following CSS:
.navbg ul{width:100%;margin:0 auto;}
.navbg {
display: block !important;
height: auto !important;
overflow: visible !important;
padding-bottom: 0;
}
.navbg ul > li {
display: table-cell;
width: 1%;
float: none;
position: relative;
}
.navbg ul > li > a {
background-color: #E5E5E5;
color: #777777;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 15px;
padding-top: 15px;
text-align: center;
display: block;
padding: 10px 15px;
position: relative;
}