I've tried everything and can't seem to get the footer to stick to the bottom.
I've been moving things around, might have messed up the codes a bit.
I'm fine with how it is on longer (more content) pages. But it's giving me to much white space on pages with less content.
Help would be appreciated!
#charset "UTF-8";
* {
margin: 0;
}
/* Body */
html, body {
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
}
/* Text */
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
}
h2 {
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
}
p {
margin-top: 1;
text-align: center;
line-height: 150%;
}
/* Container */
.container {
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
}
/* Navigation */
header {
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}
nav {
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
}
nav a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
}
a:hover {
background: #312f47;
color: white;
}
nav a:first-child {
display: none;
}
.current {
color: #9390A6;
}
/* Images */
.gallery {
margin-bottom: 100px;
height: 100%;
}
.photos {
max-width: 50%;
}
.contact {
display: block;
margin: auto;
margin-top: 50px;
}
/* Google Maps */
.google-maps {
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video
{
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.video iframe
{
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
}
/* Footer */
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
</footer>
</body>
</html>
You have no text between the footer tags that is why you do not see the footer and if you add background color it will be much more clear.
For example you should add class="site-footer" to the html footer tag.
<footer class="site-footer">
The Footer.
</footer>
And the class definitions in the CSS file:
.site-footer{
height: 120px;
background: red;
}
You can also use the link for reference.
I'm using this for footer and its working perfect with me :
html,body,ul,a,li{
margin:0;
padding:0;
border:0;
outline:none;
vertical-align:top;
height:100%;
text-decoration:none;
}
.wrap{width:100%;
min-height:100%;
height: auto !important;
height:100%;margin:0 auto;
display:block;
background:lightblue;}
footer{
bottom:0px;
display:block;
width:100%;
height:auto;}
#fo-wrap{width:100%;
height:100px;
background-color:#FF2E99;}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='wrap'>
here every thing in page
</div>
<footer>
<div id='fo-wrap'>
here footer content
</div>
</footer>
</body>
</html>
Add a min-height for .content relative to the viewport.
Decremented 110px from it (padding-bottom: 50px; margin-top: 10px; footer height: 50px)
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: fixed;
bottom: 0;
width: 100%;
background-color: #ccc;
}
#charset "UTF-8";
* {
margin: 0;
}
/* Body */
html, body {
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
}
/* Text */
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
}
h2 {
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
}
p {
margin-top: 1;
text-align: center;
line-height: 150%;
}
/* Container */
.container {
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
}
/* Navigation */
header {
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}
nav {
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
}
nav a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
}
a:hover {
background: #312f47;
color: white;
}
nav a:first-child {
display: none;
}
.current {
color: #9390A6;
}
/* Images */
.gallery {
margin-bottom: 100px;
height: 100%;
}
.photos {
max-width: 50%;
}
.contact {
display: block;
margin: auto;
margin-top: 50px;
}
/* Google Maps */
.google-maps {
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video
{
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.video iframe
{
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
}
.container {
min-height: calc(100vh - 110px)
}
/* Footer */
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
width: 100%;
background-color: #ccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
My footer
</footer>
</body>
</html>
Related
In This Code,I want to set the margin-top of .Login class ,smaller,although I set The margin-top ,to zero,but it is not set near to the top of page.What Can I do?why by setting the margin-top of this division ,this div does not set ,near the top of page?is other thing ok?the other elements works properly.
body {
margin: 0px;
direction: rtl;
}
#font-face {
src: url('../fonts/IRANSansWeb.eot'), url('../fonts/IRANSansWeb.woff'), url('../fonts/IRANSansWeb.woff2'), url('../fonts/IRANSansWeb.ttf');
font-family: "IranSans";
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
}
nav ul {
width: 60%;
height: 60px;
margin: 0px auto;
border: 2px solid black;
display: inline-block;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-bottom: 0px;
display: inline-block;
}
.Logo img {
width: 100%;
height: 100%;
}
.LogIn {
width: 140px;
height: 50px;
display: inline-block;
margin-right: 130px;
margin-top: 0px;
font-family: "IranSans";
border-radius: 5px;
background-color: #00d363;
}
.LogInA {
width: 100%;
height: 100%;
border: 5px;
color: #fff;
display: inline-block;
text-decoration: none;
text-align: center;
line-height: 50px;
}
.LogInA:hover {
border-radius: 5px;
background-color: #007bff;
color: #00d363;
border: 1px solid #00d363;
}
<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul>
</ul>
<div class="LogIn">
<a class="LogInA" href="#">ارسال شغل</a>
</div>
</nav>
</header>
</body>
Try adding display: flex; to your nav
You should use:
display:flex; justify-content: center; to your Nav and also you should remove height and use: flex-direction:column; in mobile version.
Does someone know how to fix
this issue?
There's green around, I'd like to known how to remove/let the other color go over it.
Here is the CSS file, I do have 2 css files, not sure if thats a problem.
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: auto;
overflow: hidden;
background-color: #c4a1a2;
}
.content-wrapper{
width: 80%;
margin: 4% 10% 5% 10%;
}
.content-wrapper img{
width: 100%;
}
.text-wrapper{
width: 100%;
position: relative;
margin-top: -40%;
}
.text-wrapper h1{
text-align: center;
color: #ffffff;
font-size: 10vw;
font-family: 'lobster', cursive;
<!-- New CSS post -->
html {
height: 100%;
}
body {
margin: 0px;
height: 100%;
}
h1 { text-align: center; }
.hoofdtabel {
width: 100%;
height: 100%;
margin: 0px;
border-collapse: collapse;
} /* Vervangt cellspacing="0" */
.kop {
width: 100%;
height: 10%;
background-color: #5570aa;
text-align: center;
font-size: 72px;
}
.menu {
width: 12%;
height: 70%;
padding: 5px; /* Vervangt cellpadding="5" */
background-color: #9e6171;
vertical-align: top;
}
.inhoud {
width: 96%;
height: 85%;
padding: 5px;
text-align: left;
background-color: #b8c6c4;
vertical-align: top;
}
.onder {
width: 100%;
height: 5%;
padding: 5px;
background-color: black;
vertical-align: middle;
text-align: right;
color: white;
}
.button {
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: #e9ece5;
color: black;
border: 2px solid #b3c2bf;
width: 100px;
}
.button:hover {
background-color: #008CBA;
}
.frame {
height: 100%;
width: 100%;
border: none;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text Over Image</title>
<link rel="stylesheet" href="text_over_image.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div class="content-wrapper">
<img src="https://i.stack.imgur.com/YE31e.png">
<div class="text-wrapper">
<h1>Welkom!</h1>
</div>
</div>
</body>
</html>
Sorry if I'm making mistakes, I'm new here and new to programming in general.
Missing Picture: enter image description here
*Second CSS file starts after
I'm currently trying to get a logo to appear side by side with my header, I can target the logo background just fine however when I try to change the header color it doesn't allow me to. I have tried changing the float to left right and center, center is the best to me personally. Any idea as to why I can change the header color? I posted the code below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<div class="header">
<img src="logo.png" alt="logo"/>
</div>
<style type="text/css">
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 2.24em;
}
p {
color: #000000
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
text-decoration: none;
}
#header {
font-size: large;
padding: 0.3em;
background: #000000;
}
#footer {
font-size: large;
padding: 0.3em;
background: #e4e2e2;
}
#left {
background: #d3d2d2;
}
#right {
background: #d3d2d2;
}
#center {
background: #e4e2e2;
}
#container .column {
padding-top: 1em;
}
.header img {
width: 250px;
height: 80px;
float: center;
background: #ffffff;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
</style>
U can't use float for center. If u wanna side-by-side sorting, u use float. But u must use align or text-align for placement to center. Add this code:
.header{
text-align: center;
}
If you want add another logo or text and you want they don't see this you can use div and use this code:
.logo{
width: 250px;
height: 80px;
text-align: center;
background: #ffffff;
}
</style>
</head>
<body>
<div class="logo">
<img src="logo.png"/>
</div>
Here is what I had to do to get the proper results. Both #freginold and #edomingo1 helped resolve the issue. I had to move the div and img to the body from the head, then had to add a id="header" as well to my div which allowed me to make the proper change. Thanks for all the feedback appreciate it :)!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 2.24em;
}
p {
color: #000000
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
text-decoration: none;
}
#header {
font-size: large;
padding: 0em;
margin: 0em;
background: #000000;
}
#footer {
font-size: large;
padding: 0.3em;
background: #e4e2e2;
}
#left {
background: #d3d2d2;
}
#right {
background: #d3d2d2;
}
#center {
background: #e4e2e2;
}
#container .column {
padding-top: 1em;
}
.header img {
width: 250px;
height: 80px;
float: top;
background: #000000;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
</style>
</head>
<body>
<div class="header" id="header">
<img src="logo.png" alt="logo"/>
</div>
What are you trying to get the colour on its in its own braces, look at the braces around colour.
You are using a class selector in your HTML markup, but an ID selector in your CSS. Try replacing div class="header" with div id="header" to see the expected results.
You've included your div and img in the head of the document, rather than the body. See the example below. I moved your header into the body, and changed the color to yellow just to show that it can be targeted. (Obviously, the image doesn't load here.)
.header {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 2.24em;
}
p {
color: #000000
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
text-decoration: none;
}
#header {
font-size: large;
padding: 0.3em;
background: #000000;
}
#footer {
font-size: large;
padding: 0.3em;
background: #e4e2e2;
}
#left {
background: #d3d2d2;
}
#right {
background: #d3d2d2;
}
#center {
background: #e4e2e2;
}
#container .column {
padding-top: 1em;
}
.header img {
width: 250px;
height: 80px;
float: center;
background: #ffffff;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
</style>
</head>
<body>
<div class="header">
<img src="logo.png" alt="logo"/>
</div>
</body>
</html>
On a webpage I am designing, the stylesheet contains an a:hover selector, which I'm using to give some links a different color when the cursor hovers over them. Not only does the color not change when I hover over them, in the "rules" tab of Firefox's inspect element window, the a:hover selector does not appear. Here's a snippet for reference. The links in question are displayed after clicking on the small image thumbnail at the top of the page.
function main() {
$('#arrow').click(function(){
$('#dropdown').animate({
top: '200px'
}, 400);
$('#menu').animate({
top: '75px'
}, 400);
$('#slide-wrapper').animate({
marginTop: '250px'
}, 400);
$(this).attr('src','uparrow.jpg');
$(this).off();
$(this).click(function(){
$('.hidden').animate({
top: '-=250'
}, 400);
$('#slide-wrapper').animate({
marginTop: '0px'
}, 400);
$(this).attr('src','downarrow.jpg');
$(this).off();
main();
});
});
}
$(document).ready(main);
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
background-image: url("background.jpeg");
background-attachment: fixed;
}
/* Menu elements */
.hidden {
z-index: -5;
top: -50px;
position: absolute;
}
#arrow {
margin-left: auto;
margin-right: auto;
height: 50px;
width: 50px;
display: block;
cursor: pointer;
}
#arrow-box {
background-color: white; /* FOR NOW */
}
#banner {
background-color: #9CAD9D; /* For now, until I get some pictures in */
width: 100%;
height: 200px;
margin: 0px;
padding: 0px;
top: 0px;
}
#banner-border {
width: 100%;
height: 20px;
top: 180px;
position: absolute;
text-align: center;
color: #245F27;
letter-spacing: 1px;
font-size: 10pt;
}
#dropdown {
height: 300px;
width: 100%;
}
#transground {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.menu {
float: left;
color: #006607;
margin: 15px;
z-index: 1;
font-size: 16pt;
letter-spacing: 3px;
}
.menu-item {
margin-bottom: 10px;
}
/* Fonts and such */
h1 {
color: white;
padding-top: 50px;
margin: 0px;
text-align: center;
}
ul {
margin: 0px;
}
.unstyled {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a:hover {
color: white;
}
/* General structural elements */
#content {
width: 75%;
height: 500px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding: 10px;
background-color: white;
}
#slide-wrapper {
z-index: -10;
}
/* Footer stuff: Contact form will need a media query to help it fit in the screen in mobile. Or maybe remove it? */
footer {
height: 400px;
background-color: #9CAD9D; /* FOR NOW */
}
#footer-border {
background-color: #165413;
width: 100%;
height: 20px;
}
.right {
float: right;
padding: 10px;
padding-left: 0px;
padding-bottom: 0px;
width: 50%;
}
.left {
padding: 10px;
display: inline-block;
}
#media screen and (max-width: 410px) {
.left {
display: block;
}
.right {
float: none;
}
/* Still can't get the form to fit the screen -- it floats to the right. */
}
.fields {
float: left;
padding: 2px;
}
label {
padding-right: 5px;
}
#message {
height: 150px;
}
form {
margin-left: auto;
margin-right: auto;
width: 250px;
line-height: normal;
}
input, textarea {
width: 200px;
padding: 0px;
margin: 0px;
float: right;
}
.button {
width: auto;
cursor: pointer;
}
#copy {
text-align: center;
background-color: #9CAD9D; /* Same as footer */
margin: 0px;
padding-bottom: 20px;
display: block;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css"/>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<div id="banner">
<h1>Company Name Placeholder</h1>
<div id="banner-border">CLICK THE ARROW</div>
</div>
<div id="dropdown" class="hidden">
<div id="transground"></div>
<ul id="menu" class="menu hidden unstyled">
<li class="menu-item">HOME</li> <!-- HORIZONTAL OR VERTICAL? -->
<li class="menu-item">ABOUT ME</li>
<li class="menu-item">GET A WEBSITE</li>
<li class="menu-item">PORTFOLIO</li>
</ul>
</div>
<div id="arrow-box">
<img id="arrow" src="downarrow.jpg"/>
</div>
<div id="slide-wrapper">
<div id="content">
Page content will go here.
</div>
<footer>
<div id="footer-border"></div>
<div class="left">
This will be about customers contacting me, etc.
</div>
<div class="right">
<form id="contact" method="post" action"mail.php" accept-charset="UTF-8">
<ul class="fields unstyled">
<li class="fields"><label for="name">Full Name</label></li>
<li class="fields"><input name="name" type="text" maxlength=50 placeholder="Your Name" required=""></input></li>
<li class="fields"><label for="email-address">E-Mail</label></li>
<li class="fields"><input type="email" name="email-address" maxlength=50 placeholder="you#example.com" required=""></input></li>
<li class="fields"><label for="subject">Subject</label></li>
<li class="fields"><input name="subject" type="text" maxlength=50 required=""></input></li>
<li class="fields"><label for="message">Message</label></li>
<li class="fields"><textarea id="message" name="message" maxlength=1000 required=""></textarea></li>
<li class="fields"><input class="button" type="submit" value="Send" name="submit"></input></li>
</ul>
</form>
</div>
</footer>
<p id="copy">© 2015 - Evan Dempsey</p>
</div>
<!-- Scripts down here -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="menu.js"></script>
<script type="text/javscript">
//This is supposed to be to fit the copyright thing underneath the contact form when the browser is ~ iPad size.
</script>
</body>
</html>
Help would be appreciated, I'd like to know why this does not apply. Also, the cursor: pointer; rule under the a selector doesn't seem to be working.
The problem is that some of the a parents have .hidden class and elements with .hidden class have property z-index: -5 as I see.
One way to fix the problem may be to change z-index property after the jQuery animation finishes
You have a problem with Z-indexes: don't use negative z-indexes unless you clearly understand what you are doing (this article from Philip Walton is really nice). And check how position and z-index are related.
Using this CSS stylesheet should be one way of solving your problem:
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
background-image: url("background.jpeg");
background-attachment: fixed;
}
/* Menu elements */
.hidden {
top: -50px;
position: absolute;
z-index: 1;
}
#arrow {
margin-left: auto;
margin-right: auto;
height: 50px;
width: 50px;
display: block;
cursor: pointer;
}
#arrow-box {
background-color: white;
/* FOR NOW */
z-index: 10;
position: relative;
}
#banner {
background-color: #9CAD9D;
/* For now, until I get some pictures in */
width: 100%;
height: 200px;
margin: 0px;
padding: 0px;
top: 0px;
z-index: 10;
position: relative;
}
#banner-border {
width: 100%;
height: 20px;
top: 180px;
position: absolute;
text-align: center;
color: #245F27;
letter-spacing: 1px;
font-size: 10pt;
}
#dropdown {
height: 300px;
width: 100%;
}
#transground {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.menu {
float: left;
color: #006607;
margin: 15px;
z-index: 5;
font-size: 16pt;
letter-spacing: 3px;
}
.menu-item {
margin-bottom: 10px;
}
/* Fonts and such */
h1 {
color: white;
padding-top: 50px;
margin: 0px;
text-align: center;
}
ul {
margin: 0px;
}
.unstyled {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a:hover {
color: white;
}
/* General structural elements */
#content {
width: 75%;
height: 500px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding: 10px;
background-color: white;
}
#slide-wrapper {
z-index: 10;
}
/* Footer stuff: Contact form will need a media query to help it fit in the screen in mobile. Or maybe remove it? */
footer {
height: 400px;
background-color: #9CAD9D;
/* FOR NOW */
}
#footer-border {
background-color: #165413;
width: 100%;
height: 20px;
}
.right {
float: right;
padding: 10px;
padding-left: 0px;
padding-bottom: 0px;
width: 50%;
}
.left {
padding: 10px;
display: inline-block;
}
#media screen and (max-width: 410px) {
.left {
display: block;
}
.right {
float: none;
}
/* Still can't get the form to fit the screen -- it floats to the right. */
}
.fields {
float: left;
padding: 2px;
}
label {
padding-right: 5px;
}
#message {
height: 150px;
}
form {
margin-left: auto;
margin-right: auto;
width: 250px;
line-height: normal;
}
input,
textarea {
width: 200px;
padding: 0px;
margin: 0px;
float: right;
}
.button {
width: auto;
cursor: pointer;
}
#copy {
text-align: center;
background-color: #9CAD9D;
/* Same as footer */
margin: 0px;
padding-bottom: 20px;
display: block;
}
You need to add z-index:99 to your dropdown ID as the links are underneath another element.
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