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.
Related
I want to make my links hover only the available 50px (height: 50px), that are in my header but they are taking more space, what am I doing wrong?
/ Image /
Setting padding to 14px in #main-nav ul li a isn't a solution for me. It becomes the exact opposite with less content inside the link.
My HTML document:
<!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="css/main.css">
<title>Document</title>
</head>
<body>
<header id="main-header">
<nav id="main-nav">
<img src="img/logo.png" alt="" class="logo">
<ul class="main-menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="right-menu">
<li>EN</li>
</ul>
</nav>
</header>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #EEE;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#main-header {
background-color: #333;
height: 50px;
width: 100%;
}
#main-nav {
height: 50px;
width: 90%;
max-width: 1400px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
#main-nav ul {
display: flex;
list-style: none;
}
#main-nav ul li {
}
#main-nav ul li a {
color: #C2C2C2;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
padding: 15px;
}
#main-nav ul li a:hover {
background-color: #4B4B4B;
color: #FFF;
}
#main-nav ul.main-menu {
flex: 1;
margin-left: 30px;
}
.logo {
width: 70px;
}
Because you have a set fixed on the outer parent, You need to let that height propagate down to the <a> then center the text within it vertically.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #EEE;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#main-header {
background-color: #333;
height: 50px;
width: 100%;
}
#main-nav {
height: 50px;
width: 90%;
max-width: 1400px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
#main-nav ul {
display: flex;
list-style: none;
height:100%;
}
#main-nav ul li {}
#main-nav ul li a {
color: #C2C2C2;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
padding: 15px;
}
#main-nav ul li a:hover {
background-color: #4B4B4B;
color: #FFF;
}
#main-nav ul.main-menu {
flex: 1;
margin-left: 30px;
}
.logo {
width: 70px;
}
/* Solution */
/* sinde the li is a flex item it will automatically take the height of it's parent */
#main-nav ul li a {
/* no need for top and bottom padding anymore */
padding: 0 15px;
height: 100%;
/* To center the text vertically with respect to the height */
display: flex;
align-items: center;
}
<header id="main-header">
<nav id="main-nav">
<img src="https://picsum.photos/50" alt="" class="logo">
<ul class="main-menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="right-menu">
<li>EN</li>
</ul>
</nav>
</header>
I am trying to create a dropdown menu in HTML and CSS and it does not work as I'm expecting it to. I don't know what is wrong with it.
I'm attempting to make the menu show the subset of items in the parent items <ul> tags on hover and it is not working. Either the child items don't show at all (just the parent items show) or the child items are strewn all across the page in a weird fashion.
My HTML, CSS AND JavaScript code:
What I'm trying to create (NOT MY VIDEO).
function copyText(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
try {
document.execCommand("copy");
} catch(err) {
console.log(err);
}
$temp.remove();
}
function copyMessage() {
console.log("Triggered change");
$("#note").fadeIn("fast");
$("#note").fadeOut("slow");
}
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100% height: auto;
}
.container {
width: 95%;
margin: 0 auto;
}
/* Typography
========*/
.title {
font-size: 2.5rem;
color: #b21acs;
}
.title span {
font-size: 3.75rem;
font-weight: 300;
display: block;
}
.title span2 {
font-size: 2rem;
font-weight: 300;
display: block
}
.title span3 {
display: none;
}
.note {
display: none;
color: #b21acd;
}
/*button
======== */
.button {
display: inline-block;
font-size: 1.15rem;
text-decoration: none;
text-transform: uppercase;
border-width: 5px;
border-style: solid;
padding: .5em 1.75em;
border-color: #b21acd;
color: #FFF;
background-color: transparent;
}
/*Header
======== */
header {
position: absolute;
left: 0;
right: 0;
margin-top: 0em;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
background-color: transparent;
display: inline-block;
}
nav ul li ul {
border-bottom: none;
height: 86px;
line-height: 86px;
font-size: 14px;
display: inline-block;
float: left;
margin: 0 auto;
}
nav ul li ul li {
display: none;
padding: 0px;
margin: 0px;
opacity: .8;
list-style: none;
background-color: black;
float: left;
line-height: 40px;
text-align: center;
font-size: 12px;
position: absolute;
z-index: 1;
}
nav ul li ul li a{
display: block;
padding: 12px 16px;
text-decoration: none;
color: #000
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: .8rem;
padding: .5em;
color: #FFF;
}
nav a:hover,
nav a:focus {
color: #b21acd;
}
nav ul li ul:hover nav ul li ul li {
display: inline-block;
}
nav .current {
color: #b21acd;
}
/* home-hero
======= */
.home-hero {
background-image: url(../assets/home-hero_background.png);
padding: 10em 0;
font-weight: 700;
background-color: #000;
color: #FFF;
}
/* Footer
========= */
footer {
background-color: #b21acd;
color: #FFF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<title>TrigonMC | Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut-icon" href="assets/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/copyAndChange.js"></script>
</head>
<body>
<header>
<img src="assets/logo_transparent.png" alt="TrigonMC Network Logo" class="logo">
<nav>
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Forums
<ul>
<li>Reports</li>
</ul>
</li>
<li>Punishments
<ul>
<li>Warnings</li>
<li>Mutes</li>
<li>Kicks</li>
<li>Bans</li>
<li>Temp-Mutes</li>
<li>Temp-Bans</li>
<li>IP-Bans</li>
</ul>
</li>
<li>Apply
<ul>
<li>Apply For Staff</li>
<li>Apply For Builder</li>
</ul>
</li>
<li>Videos
<ul>
<li>ExZiByte's Livestream</li>
<li>GameWolf's Livestream</li>
<li>Placeholder 1</li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="home-hero">
<div class="container">
<h1 class="title">TrigonMC Network
<span>We Support</span>
<span2>Versions 1.8 - 1.12.2</span2>
<span3 id='ip'>play.trigonmc.com</span3>
</h1>
<button id='ipButton' class="button button-accent" onclick="copyText('#ip'); copyMessage();">Copy the IP of the server!</button>
<div class="note">
<p>Copied!</p>
</div>
</div>
</section>
<section class="home-servers">
<div class="home-servers-textbox">
<h1>Servers we have</h1>
<h3>Creative</h3>
<h5>Coming Soon</h5>
<h3>Prison</h3>
<h5>Coming Soon</h5>
<h3>Skyblock</h3>
<h5>Coming Soon</h5>
<h3>Survival</h3>
<h5>Coming Soon</h5>
<h3></h3>
</div>
</section>
<footer>
<p>TrigonMC Gaming Group Copyright © 2018</p>
<p>All images Copyright © of respectful owners</p>
</footer>
</body>
</html>
This is the problem with your css
nav ul li ul:hover nav ul li ul li {
display: inline-block;
}
Basically your layout is something like this:
nav -> ul -> li -> ul -> li...
What you are telling the browser is something like this:
nav -> ul -> li -> ul -> nav -> ul -> li -> ul -> li...
Which certainly do not match. Hence, the submenu remains hidden.
So, what to do. Just replace that bit of rule with this
nav ul li:hover ul li{
display: block;
}
Also, change the color of link text to something that would not blend in with the background
nav ul li ul li a{
display: block;
padding: 12px 16px;
text-decoration: none;
color: #fff
}
Try to write your stylesheets around classes. It will help you a lot in avoiding such issues in the future.
function copyText(element){
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
try{
document.execCommand("copy");
}catch(err){
console.log(err);
}
$temp.remove();
}
function copyMessage(){
console.log("Triggered change");
$("#note").fadeIn("fast");
$("#note").fadeOut("slow");
}
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100% height: auto;
}
.container {
width: 95%;
margin: 0 auto;
}
/* Typography
========*/
.title {
font-size: 2.5rem;
color: #b21acs;
}
.title span {
font-size: 3.75rem;
font-weight: 300;
display: block;
}
.title span2 {
font-size: 2rem;
font-weight: 300;
display: block
}
.title span3 {
display: none;
}
.note {
display: none;
color: #b21acd;
}
/*button
======== */
.button {
display: inline-block;
font-size: 1.15rem;
text-decoration: none;
text-transform: uppercase;
border-width: 5px;
border-style: solid;
padding: .5em 1.75em;
border-color: #b21acd;
color: #FFF;
background-color: transparent;
}
/*Header
======== */
header {
position: absolute;
left: 0;
right: 0;
margin-top: 0em;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
background-color: transparent;
display: inline-block;
}
nav ul li ul {
border-bottom: none;
height: 86px;
line-height: 86px;
font-size: 14px;
float: left;
margin: 0 auto;
}
nav ul li ul li {
display: none;
padding: 0px;
margin: 0px;
opacity: .8;
list-style: none;
background-color: black;
float: left;
line-height: 40px;
text-align: center;
font-size: 12px;
position: absolute;
z-index: 1;
}
nav ul li ul li a{
display: block;
padding: 12px 16px;
text-decoration: none;
color: #fff
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: .8rem;
padding: .5em;
color: #FFF;
}
nav a:hover,
nav a:focus {
color: #b21acd;
}
nav ul li:hover ul li{
display: block;
}
nav .current {
color: #b21acd;
}
/* home-hero
======= */
.home-hero {
background-image: url(../assets/home-hero_background.png);
padding: 10em 0;
font-weight: 700;
background-color: #000;
color: #FFF;
}
/* Footer
========= */
footer {
background-color: #b21acd;
color: #FFF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<title>TrigonMC | Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut-icon" href="assets/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/copyAndChange.js"></script>
</head>
<body>
<header>
<img src="assets/logo_transparent.png" alt="TrigonMC Network Logo" class="logo">
<nav>
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Forums
<ul>
<li>Reports</li>
</ul>
</i>
<li>Punishments
<ul>
<li>Warnings</li>
<li>Mutes</li>
<li>Kicks</li>
<li>Bans</li>
<li>Temp-Mutes</li>
<li>Temp-Bans</li>
<li>IP-Bans</li>
</ul>
</li>
<li>Apply
<ul>
<li>Apply For Staff</li>
<li>Apply For Builder</li>
</ul>
</li>
<li>Videos
<ul>
<li>ExZiByte's Livestream</li>
<li>GameWolf's Livestream</li>
<li>Placeholder 1</li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="home-hero">
<div class="container">
<h1 class="title">TrigonMC Network
<span>We Support</span>
<span2>Versions 1.8 - 1.12.2</span2>
<span3 id='ip'>play.trigonmc.com</span3>
</h1>
<button id='ipButton' class="button button-accent" onclick="copyText('#ip'); copyMessage();">Copy the IP of the server!</button>
<div class="note">
<p>Copied!</p>
</div>
</div>
</section>
<section class="home-servers">
<div class="home-servers-textbox">
<h1>Servers we have</h1>
<h3>Creative</h3>
<h5>Coming Soon</h5>
<h3>Prison</h3>
<h5>Coming Soon</h5>
<h3>Skyblock</h3>
<h5>Coming Soon</h5>
<h3>Survival</h3>
<h5>Coming Soon</h5>
<h3></h3>
</div>
</section>
<footer>
<p>TrigonMC Gaming Group Copyright © 2018</p>
<p>All images Copyright © of respectful owners</p>
</footer>
</body>
</html>
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
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>
I'd like to ask your help with my bottom navigation bar and a link on both my navigation bars.
I can't seem to make it appear in the center. Will using padding be able to fix it? I've been trying to use it, but I have to estimate the number of pixels.
My second problem is that my bottom navigation bar doesn't have the correct spacing. I already changed the font size, but it doesn't fix the problem. Right now, it appears like this: "HomeWho We AreWhat We Do...".
My third problem is that one of my links don't appear to be working. It's a link to another webpage I coded. I think I've typed it correctly, but it won't work.
Here's a fiddle:
https://jsfiddle.net/captainpokey/66szogpm/
And here's the code:
html {
100%
}
body {
background: #cecdcc;
margin: 0;
padding: 0;
color: #8c8b8a;
font-size: 18px;
font-family: "Lato", sans-serif;
}
#wrap {
background-color: #fff;
width: 1000px;
margin: 0 auto;
}
#nav {
width: 1000px;
height: 45px;
background: #dcdbda;
font-family: "Lato";
font-size: 18px;
}
#nav ul {
padding: 0;
margin: 0;
background: #dcdbda;
float: left;
margin-left: 50px;
}
#nav li {
height: 40px;
padding-top: 4px;
float: left;
position: relative;
width: 150px;
list-style: none;
}
#nav a {
display: block;
text-decoration: none;
text-align: center;
color: #949392;
}
#nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
margin: 0;
padding: 0;
}
#nav li:hover, #nav li:hover li {
background: #fff;
}
#nav li li:hover, #nav li li:hover li {
background: #bbb;
}
#nav li:hover ul {
visibility: visible;
}
#header {
width: 1000px;
height: 485px;
background-image: url(../images/headerphoto.jpg);
}
#content {
background-color: #fff;
font-family: "Lato", sans-serif;
color: #777674;
padding-top: 10px;
padding-bottom: 20px;
}
#content h4 {
padding-left: 150px;
padding-right: 150px;
font-family: "Lato", sans-serif;
font-size: 20px;
text-transform: bold;
}
#content p {
padding-left: 150px;
padding-right: 150px;
font-family: "Lato", sans-serif;
font-size: 18px;
text-transform: bold;
}
#footer {
background-image: url(../images/footerphoto.jpg);
width: 1000px;
height: 255px;
}
#navbottom {
padding-left: 130px;
width: 1000px;
color: #fff;
font-size: 12px;
font-family: "Lato";
}
#navbottom ul {
padding: 0;
margin: 0;
float: left;
margin-left: 20px;
margin-right: 20px;
}
#navbottom ul li {
float: left;
position: relative;
list-style-type: none;
}
#navbottom li:hover ul {
visibility: visible;
}
#navbottom a {
display: block;
text-decoration: none;
text-align: center;
color: #fff;
}
#copyright {
padding-left: 150px;
padding-right: 150px;
font-family: "Lato", sans-serif;
font-size: 16px;
}
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<title>Powers & Grant, Inc.</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="nav">
<ul>
<li>Home</li>
<li>Who We Are</li>
<li>What We Do</li>
<li>Our Services</li>
<li>The Powers Team</li>
<li>Contact</li>
</ul>
</div>
<div id="header"></div>
<div id="content">
<p>As the Country's pioneer in sales force outsourcing, Powers knows the intricacies of managing the critical tasks involved in increasing revenues as well as saving the company from the costly maintenance of agents with minimal increase in sales growth.<br><br>
Powers and Grant Inc. currently handles and manages sales teams for various industries principally involved in the Real Estate, Consumer, and
Pharmaceutical and Direct Selling companies.<br><br>
We assist companies in enhancing their competitiveness through application of competencies and integrate these essential factors needed to survive
today's need for continued innovation.<br><br></p>
</div>
<div id="footer">
<div id="navbottom">
<ul>
<li>Home</li>
<li>Who We Are</li>
<li>What We Do</li>
<li>Our Services</li>
<li>The Powers Team</li>
<li>Contact</li>
</ul>
</div><br>
<div id="copyright">Copyright © Powers and Grant, Inc. All Rights Reserved</div>
</div>
</div>
</body>
Please help! Thank you very much in advance.
I have made the changes here.
https://jsfiddle.net/66szogpm/1/
code to align your top nav text to center
#nav li {
line-height: 40px;
float: left;
position: relative;
width: 150px;
list-style: none;
}
code to align your bottom nav
#navbottom {
padding-left: 100px;
width: 1000px;
color: #fff;
font-size: 14px;
font-family: "Lato";
margin: 0 auto;
}
#navbottom ul {
padding: 0;
margin: 0;
margin-left: 20px;
margin-right: 20px;
}
#navbottom ul li {
display: inline-block;
position: relative;
list-style-type: none;
margin: 5px 10px;
}
You have used float: left in many places, which isn't necessary. All you had to do was change the display property to inline-block.
I haven't changed it for the top nav. But, you can try it out.