So I'm building a website with a top menu but I ran into a problem. Basicly I want to have my menu centered but now its aligned to the left. Also the menu has a background color with would have to expand the whole width. I've tryed the answers describes here: How do I center the navigation menu?. But to no succes.
My CSS/HTML code is:
body {
font-family: FuturaLight;
background: white;
color: #333;
align-content: top;
margin: 0;
margin-bottom: 5em;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
ul {
font-family: Futura;
font-size: 25px;
list-style-type: none;
position: fixed;
top: 61px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid yellowgreen;
border-top: 1px solid yellowgreen;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #333;
}
.active {
background-color: white;
color: green
}
.spacer {
width: 100%;
height: 95px;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<ul>
<li><a class="active" href="scouts_permeke_site.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Contact
</li>
<li>Over
</li>
<li>Foto's
</li>
<li>Activiteiten
</li>
<li>Papierwerk
</li>
<li>Afspraken
</li>
<li>Uniform
</li>
<li>Technieken
</li>
<li>Jaarthema
</li>
<li>Rituelen
</li>
<li>Verhuur
</li>
<li>Inschrijvingen
</li>
</ul>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%" " >
<div style="font-family: Futura ">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
</BODY>
</HTML>
Many thanks in advance.
Add to your ul in your Stylesheet this:
text-align: center;
and replace from li
float: left;
with this
display: inline-block;
That could do it.
Hope this helps.
Have you considered flexbox as it will work depending on screen size and you can set it to be centre alligned.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Just note it wont work in older versions of ie
BODY {
font-family: FuturaLight;
background: white; color: #333;
align-content: top;
margin: 0;
margin-bottom: 5em;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
ul {
font-family: Futura;
font-size: 25px;
list-style-type: none;
position: fixed;
top: 61px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: flex;
justify-content:center;
flex-wrap: wrap
}
li {
float: left;
border-right:1px solid yellowgreen;
border-top:1px solid yellowgreen;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #333;
}
.active {
background-color: white;
color: green
}
.spacer
{
width: 100%;
height: 95px;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<ul>
<li><a class="active" href="scouts_permeke_site.html">Home</a></li>
<li>Nieuws</li>
<li>Contact</li>
<li>Over</li>
<li>Foto's</li>
<li>Activiteiten</li>
<li>Papierwerk</li>
<li>Afspraken</li>
<li>Uniform</li>
<li>Technieken</li>
<li>Jaarthema</li>
<li>Rituelen</li>
<li>Verhuur</li>
<li>Inschrijvingen</li>
</ul>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%"" >
<div style="font-family: Futura">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
</BODY>
</HTML>
Related
Trying to make this drop down menu appear, but I'm not sure what is wrong.
Here is my codepen: https://codepen.io/JBeezy3/pen/PooQwZr
<body>
<div class="container">
<!-- will add in later -->
<div class="header" <img>
</div>
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="Home">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
Above all, the text of your sub-menu is displayed black (which is the default color), that's why you don't see it on the black background. Add color: #fff to ul.sub-menu li to make those visible. Then you can fix the rest.
Replace this css
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
body {
font-family: verdana;
font-size: 14px;
font-weight: normal;
height: 100%;
background: url(../img) no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
.header{
padding: 15px 35px;
display: inline-block;
width: 100%;
}
a{
color: white;
text-decoration: none;
}
.menu {
float: right;
}
.menu ul li {
display: inline-block;
float: left;
line-height: 24px;
margin: 15px;
}
.menu ul li a{
text-decoration: none;
color: #ffffff;
font-size: 24px;
padding: 5px 10px;
}
.menu ul li a:hover{
color: red;
}
.name{
width: 350px;
margin-top: 300px;
margin-right: 500px;
}
.name h5{
color: red;
font-size: 24.5px;
text-align: left;
}
.name h1{
color: white;
font-size: 90px;
line-height: 75px;
}
.sub-menu{
position: absolute;
display: none;
background-color: white;
}
.menu li:hover a + .sub-menu { display: block;}
.sub-menu li{
position: relative;
display: block;
}
.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
padding-left: 0px;
}
.column-center {
display: inline-block;
width: 33.333%;
padding-top: 80px;
}
.row {
color: white;
font-size: 24px;
margin: 150px;
text-align: center;
}
.preview {
width: 90%;
}
.preview2 {
width: 75%;
}
.preview3 {
width: 70%
}
.hero{
max-width: 500px;
margin-left: 500px;
padding-bottom: 1000px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>John Blair Graphic Designer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- will add in later -->
<div class="header">
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="index.html">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
</li>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
<div class="name">
<h5>Graphic Designer</h5>
<h1> John Blair </h1>
</div>
<img class="hero" src="images/hero.jpg">
<footer>
<!-- nav menu when working-->
</footer>
Hello,
I have been making a website recently and I was making a dropdown navigation bar. The thing is, whenever I insert text and hover over my navigation bar, it does not cover the text. I have searched along Stack Overflow for a little bit now, and everything I've tried hasn't worked. I have tried "position: absolute;", "z-index: 1000;" etc. I was wondering if I made my own forum, someone could possibly help me out. Internet Explorer, Google Chrome, and Microsoft Edge all do not work. Thank you for responding.
/*Title*/
html, body {
margin: 0;
padding: 0;
font-family: Cursive, Sans-Serif;
}
#header {
width: auto;
height: 10px;
padding: 1% 1% 1% 2%;
background-color: #5e0d0d;
box-shadow: 1px 1px 2px 2px #262626;
}
#header #title {
font-family: "Open Sans", "Segoe UI";
font-size: 150%;
font-weight: lighter;
color: #fff;
text-decoration: none;
float: left;
margin-top: -.65%;
}
/*Navigation Bar*/
ul {
font-family: Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-top: -.60%
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: #911515;
z-index: 1000;
}
<!DOCTYPE html>
<html>
<head>
<title>Slasher Hub - Latest</title>
<meta name="viewport" content="width:device-width; initial-scale:1;">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
Slasher Hub
<nav>
<ul>
<li style="margin-left: 40px;"><a>Home</a></li>
<li><a>About Me</a></li>
<li><a>Slasher Dev Team</a>
<ul>
<li><a>About Us</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>Recent</a></li>
</ul>
</li>
<li><a>Gallary</a></li>
</ul>
</nav>
</header>
<h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>
</body>
</html>
To make z-index work you have to add position:absolute to the element.
ul li a:hover {
background-color: #911515;
z-index: 1000;
position: absolute; }
Overall, all you had to do was add position: relative to either your <nav> or <header> element.
/*Title*/
html,
body {
margin: 0;
padding: 0;
font-family: Cursive, Sans-Serif;
}
#header {
width: auto;
height: 10px;
padding: 1% 1% 1% 2%;
background-color: #5e0d0d;
box-shadow: 1px 1px 2px 2px #262626;
}
#header #title {
font-family: "Open Sans", "Segoe UI";
font-size: 150%;
font-weight: lighter;
color: #fff;
text-decoration: none;
float: left;
margin-top: -.65%;
}
/*Navigation Bar*/
ul {
font-family: Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-top: -.60%
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: #911515;
z-index: 1000;
}
/* Here's the change */
header {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<title>Slasher Hub - Latest</title>
<meta name="viewport" content="width:device-width; initial-scale:1;">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
Slasher Hub
<nav>
<ul>
<li style="margin-left: 40px;"><a>Home</a></li>
<li><a>About Me</a></li>
<li><a>Slasher Dev Team</a>
<ul>
<li><a>About Us</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>Recent</a></li>
</ul>
</li>
<li><a>Gallary</a></li>
</ul>
</nav>
</header>
<h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>
</body>
</html>
I also modified your <nav> menu a bit to give you some ideas of an overall setup.
/*Title*/
html,
body {
margin: 0;
padding: 0;
font-family: Cursive, Sans-Serif;
}
#header {
width: auto;
/* height: 10px; Remove the height */
display: inline-block; /* Set the display */
padding: 1% 1% 1% 2%;
background-color: #5e0d0d;
box-shadow: 1px 1px 2px 2px #262626;
}
#header #title {
font-family: "Open Sans", "Segoe UI";
font-size: 150%;
font-weight: lighter;
color: #fff;
text-decoration: none;
float: left;
margin-top: -.65%;
}
/*Navigation Bar*/
/* Make the position of the container relative to have it sit above the content */
nav {
position: relative;
}
/* Add nav to each of the navigation bar selectors to be more specific */
nav ul {
font-family: Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
}
nav li a {
text-decoration: none;
color: white;
display: block;
}
nav li:not(.top-level) a {
background-color: #5e0d0d;
}
nav li:not(.top-level) a:hover {
background-color: #911515
}
nav li.top-level > ul {
display: none;
}
nav li.top-level:hover > ul {
display: block;
}
<header id="header">
Slasher Hub
<nav>
<ul>
<li class="top-level">Home</li>
<li class="top-level">About Me</li>
<li class="top-level">Slasher Dev Team
<ul>
<li>About Us</li>
<li>Contact</li>
<li>News</li>
<li>Recent</li>
</ul>
</li>
<li class="top-level">Gallary</li>
</ul>
</nav>
</header>
<h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>
Let me know if you have any questions.
My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/
I've made a website for a school project and want to improve the design a little more. I think the logo makes the header a little bit to big. So I want to move my navbar from under the header to inside the header, to make it look smaller. That's all. I'll post the code and photos underneath.
This is how it looks now
How I want it to be
/* -----------------------
Layout
------------------------*/
.container {
max-width: 70em;
margin: 0 auto;
}
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
}
.header-heading {
margin: 0;
max-width: 300px;
margin-left: 400px;
max-height: 300px;
}
.nav-bar {
background: #e9f1f1;
padding: 0;
}
.content {
overflow: hidden;
padding: 1em 1.25em;
background-color: #fff;
}
.main,
.zijkant {
margin-bottom: 1em;
}
.footer {
color: #fff;
background: #656565;
padding: 1em 1.25em;
}
/* -----------------------
Navbar
------------------------*/
.nav {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Open Sans Condensed', sans-serif;
}
.nav li {
display: inline;
margin: 0;
}
.nav a {
display: block;
padding: .7em 1.25em;
color: #black;
text-decoration: none;
border-bottom: 1px solid gray;
}
.nav a:link {
color: black;
}
.nav a:visited {
color: black;
}
.nav a:focus {
color: black;
background-color: white;
}
.nav a:hover {
color: black;
background-color: #eededb;
}
.nav a:active {
color: white;
background-color: #f4ebe9;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<link rel="stylesheet" href="etc/css/styles.css">
</head>
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "-20%"
}
</script>
<body onload="zoom()">
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</body>
</html>
Put the image container and navbar in the same container:
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
Give the header position relative and the position the navbar using absolute positioning:
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
position: relative;
}
.nav-bar{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 50px;//adjust to center vertically
width: 300px;//adjust to your liking
}
You have to set a height to nav-bar in order to make sure it is centered vertically
I have to make a website for computer science at school and I have a problem with centering the menu bar. I want it to be centered around the menu button, but it puts the icon off-center the way I do it.
How can I center the entire menu around the central li element?
Here's the code:
body {
background-color: /*#C94421*/
#353535;
margin: 0;
/* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
text-align: center;
}
.menuBar {
height: 70px;
width: 100%;
}
.menuBar img {
text-align: center;
}
.menuBar ul li {
display: inline;
padding-right: 65px;
line-height: 70px;
}
.menuBar ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-family: 'Raleway', sans-serif;
font-size: 36px;
width: 100px;
}
.menuBar a:hover {
border-bottom: 1px solid white;
}
.jumbotron .container {
height: 550px;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-top: 4.5px double white;
border-bottom: 4.5px double white;
}
<!DOCTYPE html>
<html>
<head>
<title> Homepagina </title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
</head>
<body>
<div class="menuBar">
<ul>
<li> Over mij </li>
<li> Hobbies </li>
<li>
<img src="logoNaam.jpg">
</li>
<li> Muziek </li>
<li> Waarom informatica </li>
</ul>
</div>
<div class="jumbotron">
<div class="container">
hoi
</div>
</div>
</body>
</html>
Here are the changes in the code :
You have to add :
.menuBar ul{
padding-left: 0px;}
also relace this :
.menuBar ul li {
display: inline;
padding-right: 65px;
line-height: 70px;}
with
.menuBar ul li {
display: inline-block;
width: 150px;
padding-right: 15px;
line-height: 70px;}
Also remove width: 100px; from .menuBar ul li a
Better to reduce the font size to get it well aligned in the frame.
I got the image centered using a flexbox layout. The image is always in the exact center of the page, and the menu items flow to the left and right of the centered image.
I adjusted the font sizes and padding so that it shows up well in the demo. I also needed to change the li to div to get the menu to work semantically after the changes.
Live Demo:
body {
background-color: /*#C94421*/ #353535;
margin: 0; /* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */
text-align: center;
}
.menuBar {
height: 70px;
width: 100%;
}
.menuBar img {
text-align: center;
}
.menuBar {
display: flex;
}
.menuBar > div {
display: block;
line-height: 70px;
flex-basis: 0;
flex-grow: 1;
}
.left {
text-align: right;
}
.right {
text-align: left;
}
.menuBar > div > div {
display: inline-block;
padding: 0 15px;
}
.menuBar > div.central {
flex-basis: auto;
flex-grow: 0;
padding: 0 15px;
}
.menuBar > div a {
color: white;
text-decoration: none;
line-height: 70px;
font-family: 'Raleway', sans-serif;
font-size: 14px;
width: 100px;
}
.menuBar a:hover {
border-bottom: 1px solid white;
}
.jumbotron .container {
height: 550px;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-top: 4.5px double white;
border-bottom: 4.5px double white;
}
<div class="menuBar">
<div class="left"><div> Over mij </div>
<div> Hobbies </div></div>
<div class="central"> <img src="logoNaam.jpg"> </div>
<div class="right">
<div> Muziek </div>
<div> Waarom informatica </div>
</div>
</div>
<div class="jumbotron">
<div class="container">
hoi
</div>
</div>
JSFiddle Version: https://jsfiddle.net/2ejfdoc3/1/