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.
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.
I have a two-columned div element that I need to have at the bottom of the page to act as a footer. The problem is I have tried using position:fixed and bottom:0 to make the element appear at the bottom. This works but only brings one of the #column divs down to the bottom, the other disappears. I would appreciate any assistance.
Code:
/* ~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019. */
html>body {
background: none;
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
/* Trebuchet MS as main font throughout website, sans-serif acting as a backup */
}
#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
position: absolute;
background: #1B315E;
}
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
/* Alignment of DropDown Navigation Menu and Slideshow */
}
.navigation {
background: #444;
overflow: hidden;
top: 0;
}
.menuDropDown {
overflow: hidden;
float: left;
}
.menuDropDown>#menuButton {
font-size: 12px;
padding: 16px 16px;
/* Will result in final height of navigation */
margin: 0;
outline: none;
border: none;
font: inherit;
background: inherit;
color: #FFF;
}
#menuButton:hover,
.navigation>.menuDropDown:hover>#menuButton {
border: none;
outline: none;
background: #666;
color: #1B315E;
}
.menuDropDown:hover>.menuContent {
display: block;
}
.menuContent {
display: none;
position: absolute;
background: none;
width: 100%;
left: 0;
max-height: 85vh;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.menuRow:after {
display: table;
clear: both;
content: "";
}
.menuColumn {
width: 25%;
height: 100px;
overflow-y: auto;
padding: 5px;
float: left;
background: #666;
}
.menuColumn>a {
float: none;
display: block;
text-align: left;
text-decoration: none;
font-size: 14px;
padding: 8px;
color: #1B315E;
}
.menuColumn>a.current {
background: #777;
}
.menuColumn>a:hover {
background: #888;
}
.logo {
float: right;
padding-right: 10px;
width: 60px;
height: 50px;
}
.main {
width: 100%;
height: calc(100vh - 43px);
float: left;
background: none;
position: absolute;
overflow: auto;
padding: 8px;
}
.mainHeader {
color: #FFF;
text-align: center;
}
.mainImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.mainBody {
color: #FFF;
padding: 8px;
}
.row:after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 33.33%;
padding: 8px;
}
#column {
float: left;
width: 50%;
padding: 8px;
background: #888;
bottom: 0;
}
.sponsers {
float: left;
width: 20%;
padding: 8px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.sponsers:hover {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
.slideshow {
/* Slideshow Container containing Images, Sliders and Captions */
position: relative;
margin: auto;
max-width: 1000px;
}
.slides {
display: none;
}
.slideshowImages {
width: 100%;
}
.slideButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #888;
color: #FFF;
border: none;
cursor: pointer;
padding: 16px 32px;
font-size: 18px;
text-align: center;
border-radius: 10px;
font-weight: bold;
}
.mnaHeader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.slideButton:hover {
background: #666;
}
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #FFF;
font-weight: bold;
font-size: 18px;
transition: 0.3s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
table {
width: 100%;
font-size: 16px;
color: #FFF;
}
.tableCaption {
font-weight: bold;
font-size: 18px;
color: #33CC33;
}
table,
th,
td {
border-collapse: collapse;
border: 2px solid #888;
}
th,
td {
padding: 8px;
text-align: left;
}
#headerTable {
width: 33.33%;
background: #888;
font-size: 18px;
color: #33CC33;
}
.linkProp {
color: #FFF;
text-decoration: underline;
}
.newsPanel {
width: 100%;
background: #888;
height: 135px;
}
.imgNewsPreview {
width: 215px;
height: 135px;
padding: 4px;
float: left;
}
.newsHeaderPreview {
color: #FFF;
margin-top: 0px;
}
.newsBodyPreview {
color: #FFF;
margin-top: -12px;
}
.caption {
color: #33CC33;
text-align: center;
position: absolute;
font-size: 20px;
width: 100%;
padding: 8px 12px;
bottom: 16px;
}
.collapsible {
background: #888;
color: #FFF;
font-weight: bold;
width: 100%;
padding: 18px;
cursor: pointer;
font-size: 16px;
outline: none;
border: none;
text-align: left;
}
.active,
.collapsible:hover {
background: #666;
}
.collapsible:after {
content: '\002B';
color: #FFF;
font-weight: bold;
float: right;
margin-left: 4px;
}
.active:after {
content: '\2212';
}
.contentCollapsible {
padding: 0px 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background: #F8F8F8;
}
.fade {
-webkit-animation-name: fade;
/* To work on Safari (Apple) */
-webkit-animation-duration: 1s;
/* To work on Safari (Apple) */
animation-name: fade;
animation-duration: 1s;
}
.buttonReturn {
position: absolute;
margin-left: 20px;
margin-top: 20px;
background: #888;
color: #FFF;
border: none;
cursor: pointer;
font-size: 36px;
text-align: center;
border-radius: 50%;
font-weight: bold;
}
.videoProp {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 400px;
}
#-webkit-keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media screen and (max-width: 600px) {
/* Stacks navigation menu acting for the site to be responsive */
.menuColumn {
width: 100%;
height: auto;
}
}
#media screen and (max-width: 800px) {
/* Stacks Image Header on Top - acting as responsive */
.column,
#column {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Responsive Sponser Images */
.sponsers {
width: 33.33%;
}
}
#media screen and (max-width: 800px) {
/* Increases video resolution as screen reduces */
.videoProp {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Reduces font-size as screen resolution lowers */
.newsBodyPreview {
font-size: 14px;
}
}
#media screen and (max-width: 300px) {
/* Reduces font-sizes within the slideshow <div> */
.previous,
.next,
.caption {
font-size: 14px;
}
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019.
-->
<html lang="en-AU">
<head>
<title>Contact Us — Macleay Netball Association</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="../style.css" type="text/css">
<!-- Internal Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- External Font Stylesheet -->
<link rel="shortcut icon" href="../Assets/Img/mnaHeader.png">
<!-- Tab Browser Icon (Favicon) -->
</head>
<body>
<div id="wrapper">
<div class="navigation">
<div class="menuDropDown">
<button id="menuButton" title="Navigation Menu"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn">
<a title="Home" href="../index.html"><i class="fas fa-home"></i> Home</a>
<a title="Association Contacts" href="contacts.html"><i class="fas fa-address-book"></i> Association Contacts</a>
</div>
<div class="menuColumn">
<a title="Weekly Draw" href="weekly-draw.html"><i class="fas fa-user-friends"></i> Weekly Draw</a>
<a title="News" href="#"><i class="far fa-newspaper"></i> News</a>
</div>
<div class="menuColumn">
<a title="Quick Links" href="links.html"><i class="fas fa-bookmark"></i> Quick Links</a>
<a title="Representative Teams" href="representative-teams.html"><i class="fas fa-certificate"></i> Representative Teams</a>
</div>
<div class="menuColumn">
<a title="Documentation" href="documentation.html"><i class="fas fa-file"></i> Documentation</a>
<a class="current" title="Contact Us" href="contact-us.html"><i class="fas fa-phone"></i> Contact Us</a>
</div>
</div>
</div>
</div>
<img src="../Assets/Img/mnaHeader.png" alt="Macleay Netball Association" title="Macleay Netball Association" class="logo">
<!-- Macleay Netball Association Main Logo -->
</div>
<!-- End of Navigation -->
<div class="main">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3417.0548484369647!2d152.83521681537312!3d-31.080401281517187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b9ddf84d6da904b%3A0xfc941d1ded8f7a25!2sPam+Guyer+Netball+Centre!5e0!3m2!1sen!2sau!4v1559129788713!5m2!1sen!2sau"
width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- Google Maps Embed -->
<br>
<div class="row">
<div id="column">1</div>
<div id="column">2</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Main -->
</div>
<!-- End of Wrapper -->
</body>
</html>
Attached are some images if I put position:fixed bottom:0 in the #column CSS Code. Only Column 2 goes down, 1 is hidden.
The best way to achieve this having responsiveness in mind and easier manipulation on different screen sizes is wrapping the two div elements in another div that you will position fixed on the bottom and then adjusting the two divs to take 50% of its parent. You've done half of this job by putting the divs into a .row wrapper.
The best solution would probably be using flex to adjust the divs in their parent wrapper like this:
Plus, you can not use the same id twice as it is in your example.
<div class="row">
<div>1</div>
<div>2</div>
</div>
<style>
.row {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
}
.row > div {
flex: 1;
}
</style>
Then on mobile devices you can just change the flex direction and the footer will become one-columned instead of two-columned. Like this:
<style>
#media only screen and (max-width: 768px) {
.row {
flex-direction: column;
}
}
</style>
Add an id to the element you want as a footer, remove the class and use the css below to style the element.
#footer {
clear: both;
}
<div id="footer">
<div id="column">1</div>
<div id="column">2</div>
</div> <!-- End of Footer -->
Both 1 and 2 are fixed to the bottom. Only the float: left has no effect here and they are at the exactly same position. The 2 is in front of 1 and latter is not visible behind 2
Do this instead.
<div class="row footer">
<div id="column">1</div>
<div id="column">2</div>
</div>
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
/* ~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019. */
html>body {
background: none;
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
/* Trebuchet MS as main font throughout website, sans-serif acting as a backup */
}
#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
position: absolute;
background: #1B315E;
}
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
/* Alignment of DropDown Navigation Menu and Slideshow */
}
.navigation {
background: #444;
overflow: hidden;
top: 0;
}
.menuDropDown {
overflow: hidden;
float: left;
}
.menuDropDown>#menuButton {
font-size: 12px;
padding: 16px 16px;
/* Will result in final height of navigation */
margin: 0;
outline: none;
border: none;
font: inherit;
background: inherit;
color: #FFF;
}
#menuButton:hover,
.navigation>.menuDropDown:hover>#menuButton {
border: none;
outline: none;
background: #666;
color: #1B315E;
}
.menuDropDown:hover>.menuContent {
display: block;
}
.menuContent {
display: none;
position: absolute;
background: none;
width: 100%;
left: 0;
max-height: 85vh;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.menuRow:after {
display: table;
clear: both;
content: "";
}
.menuColumn {
width: 25%;
height: 100px;
overflow-y: auto;
padding: 5px;
float: left;
background: #666;
}
.menuColumn>a {
float: none;
display: block;
text-align: left;
text-decoration: none;
font-size: 14px;
padding: 8px;
color: #1B315E;
}
.menuColumn>a.current {
background: #777;
}
.menuColumn>a:hover {
background: #888;
}
.logo {
float: right;
padding-right: 10px;
width: 60px;
height: 50px;
}
.main {
width: 100%;
height: calc(100vh - 43px);
float: left;
background: none;
position: absolute;
overflow: auto;
padding: 8px;
}
.mainHeader {
color: #FFF;
text-align: center;
}
.mainImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.mainBody {
color: #FFF;
padding: 8px;
}
.row:after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 33.33%;
padding: 8px;
}
#column {
float: left;
width: 50%;
padding: 8px;
background: #888;
bottom: 0;
}
.sponsers {
float: left;
width: 20%;
padding: 8px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.sponsers:hover {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
.slideshow {
/* Slideshow Container containing Images, Sliders and Captions */
position: relative;
margin: auto;
max-width: 1000px;
}
.slides {
display: none;
}
.slideshowImages {
width: 100%;
}
.slideButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #888;
color: #FFF;
border: none;
cursor: pointer;
padding: 16px 32px;
font-size: 18px;
text-align: center;
border-radius: 10px;
font-weight: bold;
}
.mnaHeader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.slideButton:hover {
background: #666;
}
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #FFF;
font-weight: bold;
font-size: 18px;
transition: 0.3s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
table {
width: 100%;
font-size: 16px;
color: #FFF;
}
.tableCaption {
font-weight: bold;
font-size: 18px;
color: #33CC33;
}
table,
th,
td {
border-collapse: collapse;
border: 2px solid #888;
}
th,
td {
padding: 8px;
text-align: left;
}
#headerTable {
width: 33.33%;
background: #888;
font-size: 18px;
color: #33CC33;
}
.linkProp {
color: #FFF;
text-decoration: underline;
}
.newsPanel {
width: 100%;
background: #888;
height: 135px;
}
.imgNewsPreview {
width: 215px;
height: 135px;
padding: 4px;
float: left;
}
.newsHeaderPreview {
color: #FFF;
margin-top: 0px;
}
.newsBodyPreview {
color: #FFF;
margin-top: -12px;
}
.caption {
color: #33CC33;
text-align: center;
position: absolute;
font-size: 20px;
width: 100%;
padding: 8px 12px;
bottom: 16px;
}
.collapsible {
background: #888;
color: #FFF;
font-weight: bold;
width: 100%;
padding: 18px;
cursor: pointer;
font-size: 16px;
outline: none;
border: none;
text-align: left;
}
.active,
.collapsible:hover {
background: #666;
}
.collapsible:after {
content: '\002B';
color: #FFF;
font-weight: bold;
float: right;
margin-left: 4px;
}
.active:after {
content: '\2212';
}
.contentCollapsible {
padding: 0px 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background: #F8F8F8;
}
.fade {
-webkit-animation-name: fade;
/* To work on Safari (Apple) */
-webkit-animation-duration: 1s;
/* To work on Safari (Apple) */
animation-name: fade;
animation-duration: 1s;
}
.buttonReturn {
position: absolute;
margin-left: 20px;
margin-top: 20px;
background: #888;
color: #FFF;
border: none;
cursor: pointer;
font-size: 36px;
text-align: center;
border-radius: 50%;
font-weight: bold;
}
.videoProp {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 400px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#-webkit-keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media screen and (max-width: 600px) {
/* Stacks navigation menu acting for the site to be responsive */
.menuColumn {
width: 100%;
height: auto;
}
}
#media screen and (max-width: 800px) {
/* Stacks Image Header on Top - acting as responsive */
.column,
#column {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Responsive Sponser Images */
.sponsers {
width: 33.33%;
}
}
#media screen and (max-width: 800px) {
/* Increases video resolution as screen reduces */
.videoProp {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Reduces font-size as screen resolution lowers */
.newsBodyPreview {
font-size: 14px;
}
}
#media screen and (max-width: 300px) {
/* Reduces font-sizes within the slideshow <div> */
.previous,
.next,
.caption {
font-size: 14px;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div id="wrapper">
<div class="navigation">
<div class="menuDropDown">
<button id="menuButton" title="Navigation Menu"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn">
<a title="Home" href="../index.html"><i class="fas fa-home"></i> Home</a>
<a title="Association Contacts" href="contacts.html"><i class="fas fa-address-book"></i> Association Contacts</a>
</div>
<div class="menuColumn">
<a title="Weekly Draw" href="weekly-draw.html"><i class="fas fa-user-friends"></i> Weekly Draw</a>
<a title="News" href="#"><i class="far fa-newspaper"></i> News</a>
</div>
<div class="menuColumn">
<a title="Quick Links" href="links.html"><i class="fas fa-bookmark"></i> Quick Links</a>
<a title="Representative Teams" href="representative-teams.html"><i class="fas fa-certificate"></i> Representative Teams</a>
</div>
<div class="menuColumn">
<a title="Documentation" href="documentation.html"><i class="fas fa-file"></i> Documentation</a>
<a class="current" title="Contact Us" href="contact-us.html"><i class="fas fa-phone"></i> Contact Us</a>
</div>
</div>
</div>
</div>
<img src="../Assets/Img/mnaHeader.png" alt="Macleay Netball Association" title="Macleay Netball Association" class="logo">
<!-- Macleay Netball Association Main Logo -->
</div>
<!-- End of Navigation -->
<div class="main">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3417.0548484369647!2d152.83521681537312!3d-31.080401281517187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b9ddf84d6da904b%3A0xfc941d1ded8f7a25!2sPam+Guyer+Netball+Centre!5e0!3m2!1sen!2sau!4v1559129788713!5m2!1sen!2sau"
width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- Google Maps Embed -->
<br>
<div class="row footer">
<div id="column">1</div>
<div id="column">2</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Main -->
</div>
<!-- End of Wrapper -->
First of all id must be unique for an element, shouldn't set same id on two elements.
When you set position fixed on an element it is positioned relative to viewport, not relative to flow of the page.
Both of your elements have bottom: 0, which is relative to browser window, that's why your first element is covered by the second one (it's not hidden). You can group them in the same parent and position the parent, so your elements are stacked as expected. Take a look at the following code:
body {
min-height: 200vh;
}
#column {
display: block;
padding 15px;
width: 100%;
position: fixed;
bottom: 0;
background: #e5e5e5;
}
#column div {
display: block;
padding: 10px;
width: 100%;
background: #9b009b;
color: #fff;
margin-bottom: 10px;
}
<div id="column">
<div>first col</div>
<div>second col</div>
</div>
I have a small problem with centering some anchor elements I have written. I only can't center them on a mobile version of the site, they seem to be a little bit placed to the left side. To change the style of the site for mobile version I used #media queries.
That's the code:
HTML
<div id="page">
<ul id="icons">
<li><object type="image/svg+xml" data="images/pl.svg"></object></li>
<li><object type="image/svg+xml" data="images/gb.svg"></object></li>
</ul>
<img src="images/ryszard_final.png" alt="Ryszard Kukliński Logo" />
<div id="buttons_div">
BIOGRAFIA
RECENZJA
<div style="clear: both;" class="btn"></div>
O PROJEKCIE
KOMIKS
</div>
</div>
CSS
/******************
GENERAL
******************/
body {
background-color: #1f1f2e;
color: white;
margin: 0;
padding: 0;
font-size: 100%;
font-family: 'Lato', sans-serif;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
color: white;
}
/******************
MENU PAGE
******************/
img {
display: block;
margin: 0 auto;
height: 20%;
width: 20%;
margin-bottom: 5%;
margin-top: 5px;
}
.btn1 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
height: 15%;
width: 40%;
border-radius: 10px;
line-height: 70px;
cursor: pointer;
border: 3px solid #a20000;
display: block;
position: relative;
overflow: hidden;
background: transparent;
transition: 0.3s;
margin-bottom: 15%;
}
.btn1:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #e60000;
opacity: .5;
top: -100%;
left: 0;
z-index: -1;
transition: 0.3s;
}
.btn1:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #e60000;
top: -100%;
left: 0;
z-index: -1;
transition: 0.3s;
transition-delay: 0.2s;
}
.btn1:hover {
color: #fff;
}
.btn1:hover:before {
top: 0;
}
.btn1:hover:after {
top: 0;
}
.btn1_float {
float: left;
}
.btn2_float {
float: right;
}
#icons {
position: absolute;
right: 0;
list-style: none;
margin: 0;
padding: 0;
float: right;
margin-top: 10px;
margin-right: 5px;
}
#icons li {
display: inline-block;
}
object {
height: 16px;
width: 32px;
}
#media (max-width: 480px) {
#buttons_div {
width: 75%;
margin: 0 auto;
}
.btn {
float: left;
width: 75%;
}
}
#media (min-width: 1000px) {
#buttons_div {
max-width: 65%;
margin: 0 auto;
}
}
When I try to center it, it just doesn't work. Look at the photo below to see what I mean:
Page
As you see it doesn't work. It just pushes all buttons to the left. Can anyone help me, please?
You could try using the "position:absolute;" instead of text-align in the css page,then write the position of the buttons using bot:x px ,top:y px and so on,i think that the buttons show a litlle bit to the left because of the media queries that you used
You can:
Place them in ul, assign li before anchor, and text-align center
or
Place an anchor within a div, set divs width to 100% and text-align center
In your media query #media (max-width: 480px), change the width of .btn to 100%.
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>
I'm trying to make the text on my navigation bar to show an underline on mouse-over but for some reason it doesn't work. I've used the CSS from the Hover-master collection and just a simple navigation list. What to do?!
Have I used the Hover-master collection wrong?
EDIT: I just inserted my whole code and in the snippet it works but when I run the html file in the browers it doesn't...
EDIT2: The files are hosted # http://fransbergstrom.kaggteknik.se/ and as you can see, the links doesn't work, and the code is an exact copy of the ones pasted below.
HTML & CSS:
#charset "utf-8";
#font-face {
font-family: Fairview;
src: url("fonts/Fairview_Regular.otf");
}
/*PRE-CLASSES:*/
#media screen and (max-width: 1440px) {
html {
-moz-transform: scale(0.75, 0.75);
zoom: 0.75;
zoom: 75%;
}
/*Zooma ut vid mac så websidan anpassar sig*/
}
div {
display: block;
}
* {
margin: 0px;
padding: 0px;
font-weight: normal;
}
body {
background-color: gray;
font-family: 'Fairview';
color: #444444;
}
/* ID's: */
/* NAVIGATION MENU */
#navlist {
margin-top: 35px;
padding: 0;
list-style: none;
}
#navlist li {
display: inline
}
#navlist li a {
font-size: 50px;
text-align: center;
border-right: 3px solid #fff;
text-decoration: none;
width: 200px;
float: left;
color: white;
}
/*FRONT PAGE*/
#container {
width: 70%;
height: 100%;
margin: 0 auto;
}
#menu {
margin-top: 0px;
height: 130px;
width: 100%;
}
#menu-nav {
height: 130px;
width: 80%;
float: left;
}
#menu-logo {
height: 130px;
width: 20%;
background: url("images/menulogo.png") no-repeat;
background-size: contain;
float: left;
}
/* NEWS */
#news {
margin-left: 250px;
margin-top: 140px;
height: 340px;
width: 70%;
float: left;
}
#news-opacity {
position: absolute;
margin-left: 0px;
height: 340px;
width: 49%;
background-color: black;
opacity: 0.5;
float: left;
z-index: -1;
}
#news-right {
height: 100%;
width: 48%;
float: left;
}
#news-right p {
margin-top: 90px;
color: #e04e21;
font-size: 100px;
text-decoration: none;
text-align: center;
}
#news-right b {
margin-top: 90px;
color: white;
font-size: 60px;
text-decoration: none;
text-align: center;
margin-left: 93px;
}
#news-middle {
margin-top: 60px;
height: 70%;
width: 4%;
background: url("images/news-divider.png") no-repeat;
background-size: contain;
float: left;
}
#news-left {
height: 100%;
width: 48%;
float: left;
}
#news-left p {
margin-top: 10px;
margin-left: 50px;
color: white;
font-size: 40px;
text-decoration: none;
text-align: left;
}
#news-left h1 {
margin-top: 70px;
margin-left: 50px;
color: #e04e21;
font-size: 50px;
text-decoration: none;
text-align: left;
}
/* HEADER */
#header {
position: relative;
height: 20px;
width: 100%;
margin: auto;
}
#header-opacity {
position: absolute;
height: 160px;
width: 100%;
margin: auto;
background-color: black;
opacity: 0.6;
z-index: -1;
}
/* CLASSES: */
.background {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background: url("images/background.jpg") no-repeat 0px;
}
/* Underline From Center */
.hvr-underline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #2098d1;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:active:before {
left: 0;
right: 0;
}
<!DOCUTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="standard.css" media="screen">
</head>
<body>
<div class="background">
<div id="header-opacity"></div>
<div id="container">
<div id="header"></div>
<div id="menu">
<div id="menu-logo"></div>
<div id="menu-nav">
<ul id="navlist">
<li>Start
</li>
<li><font color="#e04e21">Kontakt</font>
</li>
<li>Info
</li>
<li><font color="#e04e21">Turneringar</font>
</li>
<li>Biljetter
</li>
</ul>
</div>
</div>
<div id="news">
<div id="news-opacity"></div>
<div id="news-right">
<p>WELCOME</p>
<b>TO MONSTERHACK</b>
</div>
<div id="news-middle">
</div>
<div id="news-left">
<h1>Har kommer det sta nagot</h1>
<b></b>
<p>Som informerar lasaren</p>
<b></b>
<p>Om eventet med mera</p>
<b></b>
<p>Samt dirigerar den till biljetter</p>
</div>
</div>
</div>
</div>
</body>
</html>
Just remove z-index:-1; from .background{}. You dropped the whole page below "sea level", so hover event do not fires. ;)
have you tried adding the font-size attribute to .hvr-underline-from-center:hover ?
add this to the css:
.hvr-underline-from-center:hover {
font-size: 30px;
}
#navlist li a:hover {
font-size: 55px;
}
Add that line to your CSS and put your own pixels value instead of '55px' to play around the text size when hovering
http://jsbin.com/hesisohuse/1/edit
Okey I just figured it out, for some reason my .background class caused the problem. By removing position=absolute; from the class my tags became clickable again.
I don't know why this happends but at least it fixed my problem.