When I put my cursor right on top of the link text, the link is not clickable, but if I put my cursor a little bit below the text, it becomes clickable. I'm learning right now so please explain to me why it's doing that and how to fix it.
HTML
<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="utf-8">
<title>Welcome!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
*{
margin: 0;
padding: 0;
}
header{
width: 1024px;
margin: 0 auto;
background-color: #81D4FA;
height: 50px;
}
header h1{
color: white;
position: relative;
left: 100px;
top: 5px;
}
nav{
margin-top: -20px;
margin-right: 100px;
}
nav ul{
float: right;
margin: 0;
padding: 0;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color: white;
padding: 16px 20px;
}
a:hover{
background-color: #84FFFF;
}
.main{
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.laptop{
width: 1024px;
}
.title{
background-color: #0D23FD;
height: 50px;
width: 300px;
position: relative;
top: -650px;
left: -10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.title h3{
color: white;
text-align: center;
position: relative;
top: 13px;
}
<header>
<h1>Jack Smith</h1>
<nav>
<ul>
<li>About</li>
<li>My Work</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="main">
<img class="laptop" src="images/laptop.jpg">
<div class="title">
<h3>Front-End Web developer</h3>
</div>
</div>
It's because your <h1> is a block-level element, which will lay over the menu elements. If you give it display: inline-block, it will work as supposed.
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).
See my example below.
* {
margin: 0;
padding: 0;
}
header {
width: 1024px;
margin: 0 auto;
background-color: #81D4FA;
height: 50px;
}
header h1 {
color: white;
position: relative;
left: 100px;
top: 5px;
display: inline-block;
/* Added */
}
nav {
margin-top: -20px;
margin-right: 100px;
}
nav ul {
float: right;
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 16px 20px;
}
a:hover {
background-color: #84FFFF;
}
.main {
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.laptop {
width: 1024px;
}
.title {
background-color: #0D23FD;
height: 50px;
width: 300px;
position: relative;
top: -650px;
left: -10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.title h3 {
color: white;
text-align: center;
position: relative;
top: 13px;
}
<header>
<h1>Jack Smith</h1>
<nav>
<ul>
<li>About
</li>
<li>My Work
</li>
<li>Contact Me
</li>
</ul>
</nav>
</header>
<div class="main">
<img class="laptop" src="images/laptop.jpg">
<div class="title">
<h3>Front-End Web developer</h3>
</div>
</div>
The problem is occurring because of the interaction between some of your styles. You're floating the nav ul element to the right, but you're also setting the nav ul li display to inline-block which is also doing an implicit float (try replacing it with float: left and you'll see the same behavior).
If you set the position:relative on your nav ul, it willforce the elements to float correctly within the ul container.
nav ul{
float: right;
margin: 0;
padding: 0;
position:relative; /*ADD THIS*/
}
Related
My drop down navigation in the 1st and 2nd media queries just cover the hero image instead of pushing the hero image down, also the width of the drop down is suspiciously small. I have a working example on a different website I made, but I can't figure the difference that causes it to break on this one. I hope someone knows what is causing this and/or how to fix it. Here is the code:
*{
font-family: 'Zilla Slab';
}
nav ul li a {
margin-left: 5%;
text-decoration: none;
color: rgb(219,183,86);
font-weight: bold;
}
nav ul li {
display: inline;
list-style-type: none;
width: 100%;
margin-bottom: 20%;
}
nav {
position: absolute;
top: 70px;
right: 2px;
width: 550px;
height: 10px;
}
#hamburger, label {
display: none;
}
h1{
color: rgb(219,183,86);
}
.infobox {
width: 35%;
float: left;
margin: 2%;
}
.button {
width: 180px;
height: 180px;
}
.button a{
text-decoration: none;
font-weight: bold;
font-size: 1.4em;
color: rgb(219,183,86);
}
.button a p{
position: relative;
top: -25px;
}
.button img{
width: 120px;
height: 120px;
}
#buttons{
float: left;
margin-left: 5%;
}
#header{
text-align: center;
position: absolute;
top: -10px;
left: 2px;
width: 550px;
height: 10px;
}
#logo{
float: left;
width: 240px;
height: 175px;
position: absolute;
right: 315px;
}
#logoname{
font-size: 35px;
color: rgb(219,183,86);
font-weight: bold;
position: relative;
top: 35px;
left: 130px;
}
#content{
text-align: center;
width: 100%;
margin: auto;
}
#hero{
margin: 0;
width: 100%;
margin-top: 180px;
}
#footer{
clear: both;
float: none;
font-style: italic;
text-align: center;
margin-bottom: 2%;
color: ;
}
#media screen and (max-width: 1088px) and (min-width: 705px){
#buttons{
float: none;
clear: both;
width: 100%;
margin-left: 1%;
}
.button{
text-align: center;
display: inline-block;
}
/* Menu Items */
/* Menu Items */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
padding: 1%;
box-sizing: border-box;
margin-bottom: 10px;
}
nav ul li a {
text-decoration: none;
}
/* Show Hamburger */
label {
display: block;
position: absolute;
top: -45px;
right: 20px;
color: white;
color: rgb(219,183,86);
font-style: normal;
font-size: 3.5em;
padding: 3%;
font-weight: bold;
}
/* Break down menu items into vertical */
nav ul li {
display: block;
}
nav ul li {
border-top: solid grey 1px;
}
/* Toggle show/hide menu on checkbox click */
nav ul {
display: none;
}
nav input:checked ~ ul {
display: block;
}
.infobox {
width: 46%;
}
}
#media screen and (max-width: 704px) {
.infobox {
width: 96%;
}
#buttons{
float: none;
display: block;
clear: both;
margin-left: 33%;
}
#logo{
float: left;
width: 160px;
height: 110px;
right: 390px;
}
#logoname{
font-size: 20px;
color: rgb(219,183,86);
font-weight: bold;
position: relative;
top: 20px;
left: -10px;
}
/* Menu Items */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
padding: 1%;
box-sizing: border-box;
margin-bottom: 10px;
}
nav ul li a {
text-decoration: none;
}
/* Show Hamburger */
label {
display: block;
position: absolute;
top: -80px;
right: 20px;
color: white;
color: rgb(219,183,86);
font-style: normal;
font-size: 3.5em;
padding: 3%;
font-weight: bold;
}
/* Break down menu items into vertical */
nav ul li {
display: block;
}
nav ul li {
border-top: solid grey 1px;
}
/* Toggle show/hide menu on checkbox click */
nav ul {
display: none;
}
nav input:checked ~ ul {
display: block;
}
#hero{
margin-top: 110px;
}
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab&display=swap" rel="stylesheet">
<div id="container">
<div id="header"><img id="logo" src="https://cdn.discordapp.com/attachments/644747093558165514/974882993036472370/logo.png" alt="logo" /><p id="logoname">Bizzy B's TUMBLEBUS</p></div>
<nav>
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<ul>
<li>Home</li>
<li>About</li>
<li>Parties</li>
<li>Policies</li>
<li>Inside</li>
<li>Contact</li>
</ul>
</nav>
<div id="content">
<img id="hero" src="https://cdn.discordapp.com/attachments/644747093558165514/974882992591884348/hero.png" alt="hero" />
<h1>Welcome to the TUMBLEBUS </h1>
<div class="infobox">
<p> The TUMBLEBUS is a full sized school bus that has been converted into a safe and fun child sized
gym bringing fitness and fun to your children.
The TUMBLEBUS is equipped with tumbling and climbing equipment including monkey bars, trampoline, bars,
beam, vault, zip line, rings, slide and lots more!
</p>
</div>
<div class="infobox">
<p>We are excited that you
have decided to take the time
to tumble through to learn
about TUMBLEBUS. We have a
unique and fun way to keep your
little ones happy and fit. We would
love to come to your child's daycare,
school, birthday or special event.
Please contact us to learn more about how we can buzz the fun to your little one!
</p>
</div>
<div id="buttons">
<div class="button"><img src="https://cdn.discordapp.com/attachments/644747093558165514/974882993955041290/enroll.png" alt="enroll" /><p>Enroll</p></div>
<div class="button"><img src="https://cdn.discordapp.com/attachments/644747093558165514/974882993661427742/pay.png" alt="pay" /><p>Pay</p></div>
<div class="button"><img src="https://cdn.discordapp.com/attachments/644747093558165514/974882993430732810/order.png" alt="order" /><p>Order</p></div>
</div>
<div id="footer">
<p>TUMBLEBUS<br/>
11230 Triple Crown Drive<br/>
Flint TX 75762
</p>
</div>
</div>
</div>
I guess The problem is caused by position : absolute
try to delete position : absolute or add position :relativeto your nav .
Tell me what happens
Update : the problem was caused by #header{ position : absolute ; }
Removing it solved the problem.
I'm working on a website for practice and I'm having an issue where my nav bar is hanging over the header. I've tried adjusting the margin and that isn't working. I've tried changing the display and position, which end up just breaking the layout. My main goal is to have the navigation cleanly nestled in the bottom right of the header, but I'm not sure how to fix it. Here is the code I've typed:
Place the code into code snippets.
body {
margin: 0;
padding: 0;
text-align: center;
}
ul,
li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
padding: 14px 16px;
background-color: green;
display: block;
color: white;
text-decoration: none;
}
li a:hover {
background-color: blue;
}
header {
background-color: green;
width: 100%;
height: 200px;
position: fixed;
z-index: 100;
top: 0;
border-bottom: 3px black solid;
}
.nav {
display: inline;
float: right;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 175px;
position: relative;
}
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<header>
<div class="nav">
<ul>
<li><a>Menu</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>About</a></li>
</ul>
</div>
</header>
The simplest solution is to replace your .nav class with:
.nav {
bottom: 0;
right: 0;
position: absolute;
}
I assume this is more or less what you were trying to achieve with your margins.
An absolutely positioned element will be placed relative to the nearest positioned parent element (i.e. one with relative, absolute, fixed or sticky position). By default that is the highest level block, but since your header has position: fixed it is placed relative to that. The bottom and right values indicate the amount of offset from that block's respective edges.
The height of the header is 200px, but you left margin-top: 175px for the nav. For the nav to start where the header is ending, you need at least 200px as margin-top.
Please run the code snippet to check if this is the desired change. I have changed the position from relative to absolute and added bottom: 0 and right: 0 for class .nav.
body {
margin: 0;
padding: 0;
text-align: center;
}
ul,
li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
padding: 14px 16px;
background-color: green;
display: block;
color: white;
text-decoration: none;
}
li a:hover {
background-color: blue;
}
header {
background-color: green;
width: 100%;
height: 200px;
position: fixed;
z-index: 100;
top: 0;
border-bottom: 3px black solid;
}
.nav {
display: inline;
float: right;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 175px;
bottom: 0;
right: 0;
position: absolute;
}
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<header>
<div class="nav">
<ul>
<li><a>Menu</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>About</a></li>
</ul>
</div>
</header>
There might be other ways, but using flex layout will solve your problem. 1st add display:flex in your header.
Then .nav with the following:
{
display: flex;
flex: 1;
align-self: flex-end;
justify-content: flex-end;
}
See the final result:
body {
margin: 0;
padding: 0;
text-align: center;
}
ul,
li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
padding: 14px 16px;
background-color: green;
display: block;
color: white;
text-decoration: none;
}
li a:hover {
background-color: blue;
}
header {
background-color: green;
width: 100%;
height: 200px;
position: fixed;
z-index: 100;
top: 0;
border-bottom: 3px black solid;
display: flex;
}
.nav {
display: flex;
flex: 1;
align-self: flex-end;
justify-content: flex-end;
}
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<header>
<div class="nav">
<ul>
<li><a>Menu</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>About</a></li>
</ul>
</div>
</header>
More details on how flex works, see: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
So, I've started work on a navbar and it's kinda my first time doing this since it's a school project. On PC, my navbar look pretty good, the problem is with how the navbar looks on a tablet. Normally, this wouldn't be a problem, but my school is mostly tablet-centric, so I wanna make it iPad-friendly.
HTML
<html>
<head>
<title>Project Layout - Original</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="homecontent.css" type="text/css" />
<style>
</style>
</head>
<body>
<header>
<div id="container">
<nav id="nav">
<ul>
<img src="finesselogotag.png" id="titleimage"> </img>
<li><a class="active" href="placeholder.html">Home</a></li>
<li><a class="nav" href="placeholder.html">Products</a></li>
<li><a class="nav" href="placeholder.html">Order now</a></li>
<li><a class="nav" href="placeholder.html">Games</a></li>
<li><a class="nav" href="placeholder.html">About us</a></li>
<li><a class="nav" href="placeholder.html">Presentation</a></li>
</ul>
</nav>
</div>
</header>
<div>
<p>Test text</p>
</div>
<footer>
<p class="copyright">©Copyright by DLSZ</p>
</footer>
</div>
</body>
</html>
CSS
/*to remove default margins*/
* {
margin: 0;
list-style-type: none;
background-color: #e0dbd1
}
/*to remove default margins*/
header, nav, section, article, footer {
display: block;
}
/*Css for the whole div*/
#container {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #1f242e;
height:49.5px;
float: left;
}
.logo {
height: 100px;
width: 200px;
float: left;
}
/*CSS for the whole div*/
/*Menu Bar*/
#nav {
float:left;
height: 50px;
text-align: center;
}
#nav ul {
float: left;
margin: 0px;
padding: 0px;
overflow: visible;
}
#nav li {
float: left;
display: block;
height: 19.5px;
}
#nav a {
float: left;
text-decoration: none;
color: #e0dbd1;
font-family: verdana;
}
#nav li a {
float: left;
display: block;
padding: 15px;
background-color: #1f242e;
text-align: center;
font-style: verdana;
}
#titlenav {
float: left;
background-color: #1f242e;
display: block;
font-family: SFAtarian;
padding: 15px;
font-size: 40px;
height: 19.5px;
color: #e0dbd1;
position: absolute;
top: -1.5%;
right: 0%;
}
#titleimage {
position: absolute;
top: -1.95%;
right: 0%;
float: left;
width: 150px;
height: 79.5px;
}
/*Menu Bar*/
section {
height: auto;
width: 1000px;
}
footer {
text-align:center;
height: 40px;
}
footer ul li{
display: inline-block;
}
footer ul li a {
color: 000000;
}
.content {
display: inline-block;
padding: 2px;
margin-left: 50px;
margin-bottom: 15px;
margin-top: 25px;
border: 2px solid black;
width: 900px;
}
.left {
float: left;
margin-right: 5px;
}
.right {
float: right;
margin-left: 5px;
}
/*FONTS*/
#font-face {
font-family: SFAtarian;
src: url(SFAtarian.ttf);
}
/*END OF FONT LIST*/
Here's what it looks like normally:
And here's what it looks like on an iPad:
Like I said, I'm kind of new to this kinda thing. Any advice on how to do this would be greatly appreciated, thanks!
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
use this tag in section,it will work.
use of viewport : The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Try any of these..
Bootstrap navigation:
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
W3.css navigation:
https://www.w3schools.com/w3css/w3css_navigation.asp
Check this please, here is the responsive view for your code
https://codepen.io/atulraj89/pen/QJVPJv
$('.hamberger').click(function() {
$('.hamberger-nav-bar').toggleClass('active-left');
});
/*to remove default margins*/
* {
margin: 0;
list-style-type: none;
}
/*to remove default margins*/
header, nav, section, article, footer {
display: block;
}
/*Css for the whole div*/
#container {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #1f242e;
height:49.5px;
float: left;
}
.logo {
height: 100px;
width: 200px;
float: left;
}
/*CSS for the whole div*/
/*Menu Bar*/
#nav {
position: relative;
float:left;
height: 50px;
text-align: center;
margin-top: 50px;
}
#nav ul {
float: left;
margin: 0px;
padding: 0px;
overflow: visible;
}
#nav li {
float: left;
display: block;
height: 19.5px;
}
#nav a {
float: left;
text-decoration: none;
color: #e0dbd1;
font-family: verdana;
}
#nav li a {
float: left;
display: block;
padding: 15px;
background-color: #1f242e;
text-align: center;
font-style: verdana;
}
#titlenav {
float: left;
background-color: #1f242e;
display: block;
font-family: SFAtarian;
padding: 15px;
font-size: 40px;
height: 19.5px;
color: #e0dbd1;
position: absolute;
top: -1.5%;
right: 0%;
}
#titleimage {
position: absolute;
top: -1.95%;
right: 0;
float: left;
width: 150px;
height: 79.5px;
}
/*Menu Bar*/
section {
height: auto;
width: 1000px;
}
footer {
text-align:center;
height: 40px;
}
footer ul li{
display: inline-block;
}
footer ul li a {
color: 000000;
}
.content {
display: inline-block;
padding: 2px;
margin-left: 50px;
margin-bottom: 15px;
margin-top: 25px;
border: 2px solid black;
width: 900px;
}
.left {
float: left;
margin-right: 5px;
}
.right {
float: right;
margin-left: 5px;
}
.hamberger {
display: none;
}
/*FONTS*/
#font-face {
font-family: SFAtarian;
src: url(SFAtarian.ttf);
}
/*END OF FONT LIST*/
/* HAMBERGER CSS */
.hamberger {
position: absolute;
top: 30px;
right: 15px;
z-index: 999999;
padding: 10px 35px 16px 0;
cursor: pointer
}
.hamberger span,
.hamberger span:before,
.hamberger span:after {
content: "";
position: absolute;
display: block;
width: 35px;
height: 3px;
border-radius: 1px;
border-color:#ffffff;
background: #ffffff;
cursor: pointer;
}
.hamberger span:before {
top: -10px;
}
.hamberger span:after {
bottom: -10px;
}
.hamberger span,
.hamberger span:before,
.hamberger span:after {
transition: all 300ms ease-in-out;
}
.hamberger.active span {
background-color: transparent
}
.hamberger.active span:before,
.hamberger.active span:after {
top: 0;
}
.hamberger.active span:before {
transform: rotate(45deg);
}
.hamberger.active span:after {
top: 10px;
transform: translatey(-10px) rotate(-45deg);
}
/* MEDIA QUERY */
#media (max-width: 991px){
.hamberger-nav-bar {
position: fixed;
left: -300px;
width: 300px;
transition: all 0.5s;
}
.hamberger-nav-bar.active-left {
left: 0;
position: relative;
}
.hamberger-nav-bar.active-left:after {
position: fixed;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: -1;
}
#nav {
float: none;
height: auto;
position: relative;
z-index: 99;
}
#nav ul {
width: 100%;
float: none;
}
#nav li {
float: none;
height: auto;
width: 100%;
}
#nav li a {
float: none;
}
#titleimage {
top: 0;
}
.hamberger {
float: left;
margin: 17px 0 0 10px;
position: fixed;
top: 0;
left: 20px;
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Project Layout - Original</title>
<link rel="stylesheet" href="main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="homecontent.css" type="text/css" />
</head>
<body>
<header>
<div id="container">
<div class="hamberger">
<span></span>
</div>
<nav id="nav" class="hamberger-nav-bar">
<ul>
<li><a class="active" href="placeholder.html">Home</a></li>
<li><a class="nav" href="placeholder.html">Products</a></li>
<li><a class="nav" href="placeholder.html">Order now</a></li>
<li><a class="nav" href="placeholder.html">Games</a></li>
<li><a class="nav" href="placeholder.html">About us</a></li>
<li><a class="nav" href="placeholder.html">Presentation</a></li>
</ul>
</nav>
<img src="finesselogotag.png" id="titleimage">
</div>
</header>
<div>
<p>Test text</p>
</div>
<footer>
<p class="copyright">©Copyright by DLSZ</p>
</footer>
</div>
</body>
</html>
Sea the above code.
As part of a school project I am trying to create my first webpage. I am however stuck on this issue where my navigation bar moves down the page when I place a logo in the top bar and center it. I wonder if anyone could help?
JS Fiddle: https://jsfiddle.net/3k65c20u/
Here is my code:
#header {
height: 200px;
width: 100%;
background-color: black;
}
#top-bar {
background-repeat: repeat-x;
position: absolute;
left: 0;
width: 100%;
height: 200px;
padding: 0px;
margin: 0px;
}
//Top Navigation Bar//
.navigation-bar {
background-color: black;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 250px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.navigation-bar ul {
padding: 210px;
margin: 0px;
text-align: center;
}
.navigation-bar li {
list-style-type: none;
padding: 8px;
height: 24px;
margin-top: 30px;
margin-bottom: 4px;
display: inline;
}
.navigation-bar li a {
color: gray;
background-color: black;
font-size: 13px;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
box-shadow: 0px;
border-radius: 3px;
padding-right: 1em;
padding-left: 1em;
line-height: 2em;
margin-right: 16px;
}
.navigation-bar li:first-child {
margin-left: 20px;
border: #C00;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="feistybite.css">
<div id="header">
<div id="top-bar"></div>
<div class="navigation-bar">
<img src="strikerlogo.png" class="center">
<div id="navigation-container" class="cf">
<ul>
<li>Miten se toimii
</li>
<li>Osta
</li>
<li>Tarina
</li>
<li>Meistä
</li>
<li>Uutisia
</li>
</ul>
</div>
</div>
</head>
<body>
</body>
</html>
not sure what design you want achieve, but i just changed the navigation bar position to relative, and the image to absolute, so... set left to 50% and using the CSS property transform: translateX(-50%); the image is finally centered
https://jsfiddle.net/3k65c20u/1/
Remove the padding: 210px at the .navigation-bar ul rule!
change css in ul to, removing padding:210px;
.navigation-bar ul {
margin: 0px;
text-align:center;
}
I’m creating this website and I made this nav bar. It had dummy links in the anchor tags and I had a hover property on my buttons. All of this was working properly. I had made a few changes to the code and now none of it works. I cannot figure out where I went wrong. I was editing properties and things just stopped working.
* {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Arial";
color: white;
}
html,
body {
margin: 0 auto;
background-color: black;
max-width: 940px;
min-height: 100%;
}
.wrapper {
margin: 0 auto;
width: 92%;
background-image: url("images/backgrounds/wood.jpg");
}
/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/
.header {
position: relative;
height: 100px;
background-color: #111111;
}
.header h1 {
position: relative;
margin: 0;
height: 20px;
text-align: center;
font-size: 2.3em;
top: 25%;
}
.header p {
position: relative;
top: 25%;
width: 100%;
font-size: 1em;
text-align: center;
}
/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/
nav {
height: 40px;
}
nav ul {}
nav ul li {
background-color: #111111;
text-align: center;
list-style-type: none;
width: 25%;
float: left;
/*margin: 0 1%;
border-radius: 10px;
box-shadow: 5px 5px 5px #000;*/
}
nav ul li a {
text-decoration: none;
line-height: 40px;
display: block;
}
nav ul li a:hover {
background-color: #222222;
}
/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/
.jumbotron {
position: relative;
background-image: url(images/jumbotron/studiopic.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 53%;
}
.jumbotext h1 {
display: inline-block;
position: absolute;
bottom: 0px;
text-align: right;
}
/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/
.footer {
height: 100px;
width: 100%;
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<title>CM Sound | Home</title>
<meta charset="UTF-8">
<meta name="description" content="CM Sound's studio webpage">
<meta name="author" content="Ryan Buck | May 2015">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>CM Sound</h1><br/>
<p>Create with us</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Audio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
<div class="jumbotron">
<div class="jumbotext">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Add this in nav ul li a
:
position: relative;
* {
margin: 0 auto;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Arial";
color: white;
}
html, body {
margin: 0 auto;
background-color: black;
max-width: 940px;
min-height: 100%;
}
.wrapper {
margin: 0 auto;
width: 92%;
background-image: url("images/backgrounds/wood.jpg");
}
/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/
.header {
position: relative;
height: 100px;
background-color: #111111;
}
.header h1 {
position: relative;
margin: 0;
height: 20px;
text-align: center;
font-size: 2.3em;
top: 25%;
}
.header p {
position: relative;
top: 25%;
width: 100%;
font-size: 1em;
text-align: center;
}
/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/
nav {
height: 40px;
}
nav ul {
}
nav ul li {
background-color: #111111;
text-align: center;
list-style-type: none;
width: 25%;
float: left;
/*margin: 0 1%;
border-radius: 10px;
box-shadow: 5px 5px 5px #000;*/
}
nav ul li a {
text-decoration: none;
line-height: 40px;
display: block;
position: relative;
}
nav ul li a:hover {
background-color: #222222;
}
/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/
.jumbotron {
position: relative;
background-image: url(images/jumbotron/studiopic.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-height: 53%;
}
.jumbotext h1 {
display: inline-block;
position: absolute;
bottom: 0px;
text-align: right;
}
/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/
.footer {
height: 100px;
width: 100%;
background-color: #111111;
}
<div class="wrapper">
<div class="header">
<h1>CM Sound</h1><br/>
<p>Create with us</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Audio</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</nav>
<div class="jumbotron">
<div class="jumbotext">
</div>
</div>
<div class="footer">
</div>
</div>
nav {
height: 40px;
position: relative;
}
just add the position relative to nav