I'm in the midst of creating a responsive portfolio at the moment and I'm running into a bit of trouble.
Before a certain breakpoint (css media query), the second and third paragraph in the 'About' section of my website are in floats. As the window gets smaller, the text starts to overlap the footer and eventually create a whitespace at the bottom and side. When it reaches the breakpoint, the floats are valued as 'none'.
How can I make it so that the height of the container is determined by how much content is in there (i.e. the normal behaviour)? I've tried a clearfix, but that doesn't seem to work.
https://codepen.io/webdevkid/pen/gmBVMj
HTML
<body>
<nav>
<div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a><div id="menu-icon"></div></div><div class="clear"></div>
<ul id="main-links">
<li><span class="word-position">About</span></li>
<li><span class="word-position">Work</span></li>
<li class="last-child"><span class="word-position">Contact</span></li>
</ul>
</nav>
<div id="main-container">
<div id="introductory-background">
<div id="introductory-overlay">
<div id="introductory-content">
<div id="introductory-container">
<h1 id="role-header">Junior Web Developer</h1>
<h3 id="role-support-text">...but that's not all I can do</h3>
<a id="read-more" class="no-select">Read More</a>
</div>
</div>
</div>
</div>
<div id="about-section">
<br />
<br />
<div id="photo-frame">
<div id="picture"></div>
</div>
<br />
<div id="about-text-container">
<p>Hi There! My name is Ed Garbutt, a Junior Web Developer based in South Buckinghamshire, with a huge passion for all things programming.</p>
<br />
<p id="about-left-side" class="side-by-side">Sadly, I'm not like most Developer out thers. I don't drink Red Bull or Monster Cans. I'm not a fan of Start Wars. I don't read Marvel Comic Books, but I am someone who likes going outside here and then.</p>
<p id="about-right-side" class="side-by-side">All jokes aside, what you <b>will</b> get is someone who prides himself on attention to details, who will always rise to a challenge ans is constantly looking to better himself, building upon his existing knowledge of programming languages and frameworks.</p>
</div>
</div>
</div>
<footer>
<p id="footer-text">
© 2016 Ed Garbutt. All rights reserved.
</p>
</footer>
</body>
CSS
body {
margin: 0;
}
nav {
width: 100%;
height: 50px;
position: fixed;
background-color: rgb(40, 40, 40);
border-bottom-style: solid;
border-bottom-color: rgb(238, 0, 0);
border-bottom-width: 7.5px;
padding-top: 14px;
z-index: 10;
}
#logo {
position: relative;
bottom: 5px;
font-size: 30px;
padding-left: 8px;
float: left;
font-family: bebas;
}
#word-1 {
color: rgb(0, 154, 205);
}
#word-2 {
color: rgb(255, 250, 250);
}
ul#main-links {
list-style: none;
margin: 0;
padding-right: 50px;
float: right;
height: 100%;
border-bottom: 7.5px solid transparent;
display: block;
font-size: 0;
}
ul#main-links li {
display: inline-block;
text-align: center;
border-bottom-style: solid;
border-bottom-width: 7.5px;
border-bottom-color: rgb(238, 0, 0);
color: white;
font-family: arcon;
font-size: 18px;
height: 100%;
width: 90px;
position: relative;
z-index: 2;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: white;
}
a:active {
text-decoration: none;
color: white;
}
a#logo-link {
text-decoration: none;
}
a#logo-link:visited {
text-decoration: none;
color: inherit;
}
a#logo-link:active {
text-decoration: none;
color: inherit;
}
ul#main-links > a > li > span.word-position {
position: relative;
top: 5px;
}
#menu-icon {
height: 48px;
width: 48px;
display: none;
cursor: pointer;
background-image: url("../images/hamburg-white-2.png");
}
#main-container {
padding-top: 71.4px;
}
#media screen and (min-width: 656px) {
ul#main-links {
display: block !important;
}
}
#media screen and (max-width: 656px) {
nav {
height: initial;
}
#logo {
width: 100%;
float: none;
padding-left: 0;
text-align: center;
bottom: 8px;
}
#menu-icon {
display: inline-block;
/* float: right;*/
position: absolute;
right: 10px;
top: -2px;
}
ul#main-links {
display: none;
float: none;
padding-right: 0;
padding-left: 0;
width: 100%;
}
ul#main-links li {
width: 100%;
display: block;
border: none;
padding: 10px 0;
}
ul#main-links li:not(.last-child) {
border-bottom-style: solid;
border-bottom-color: rgb(238, 0, 0);
border-bottom-width: 2.5px;
}
ul#main-links > a > li > span.word-position {
top: 0px;
}
#main-container {
padding-top: 62.4px;
}
}
#media screen and (max-width: 400px) {
#logo {
bottom: 7.5px;
font-size: 23px;
padding-left: 10px;
text-align: left;
}
#menu-icon {
height: 32px;
width: 32px;
background-image: url("../images/hamburg-white-1.png");
top: 0.4px;
right: 20px;
}
#main-container {
padding-top: 52.4px;
}
}
/* ----INTORDUCTION---- */
#introductory-background {
background-image: url('../images/eternity-1024x768.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
/* min-height: 527px;*/
height: 90vh;
background-size: 100% 100%;
overflow: auto;
}
#introductory-overlay {
display: table;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#introductory-content {
margin-left: auto;
margin-right: auto;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#introductory-container {
position: relative;
bottom: 60px;
}
h1#role-header {
display: block;
position: relative;
right: 5em;
opacity: 0;
font-size: 48px;
color: rgb(255, 250, 250);
}
h3#role-support-text {
display: block;
opacity: 0;
position: relative;
top: 20px;
font-size: 30px;
color: rgb(255, 250, 250);
}
#read-more {
border-radius: 38px;
background-color: rgb(255, 250, 250);
padding: 0.5em 1.5em;
font-size: 24px;
cursor: pointer;
}
#media screen and (max-width: 656px) {
#introductory-container {
bottom: 60px;
}
h1#role-header {
font-size: 37px;
}
h3#role-support-text {
top: 15px;
font-size: 24px;
}
#read-more {
font-size: 19px;
}
}
#media screen and (max-width: 400px) {
#introductory-container {
bottom: 72.5px;
}
h1#role-header {
font-size: 28px;
}
h3#role-support-text {
top: 11px;
font-size: 20px;
}
#read-more {
font-size: 16px;
}
}
/* -------------------- */
/* -------ABOUT-------- */
#about-section {
width: 100%;
height: 500px;
background-color: rgb(131, 111, 235);
}
#photo-frame {
margin: 0 auto;
background-color: royalblue;
width: 180px;
height: 180px;
border-radius: 100px;
border-style: solid;
border-color: beige;
border-width: 7.5px;
z-index: 2;
}
#photo-frame > #picture {
width: 100%;
height: 100%;
background-image: url('../images/Ed.png');
border-radius: 100px;
}
#about-section > #about-text-container {
margin: 0 auto;
width: 80%;
}
#about-section > #about-text-container > p {
margin: 0;
text-align: center;
/* padding: 0 3rem;*/
font-size: 22px;
}
#about-section > #about-text-container > p.side-by-side {
/* display: inline-block;*/
width: 45%;
text-align: justify;
}
#about-section > #about-text-container > p#about-left-side {
float: left;
}
#about-section > #about-text-container > p#about-right-side{
float: right;
}
#media screen and (max-width: 868px) {
#about-section > #about-text-container > p.side-by-side {
/* display: inline-block;*/
width: 100%;
}
#about-section > #about-text-container > p#about-left-side {
float: none;
padding-bottom: 1.5rem;
}
#about-section > #about-text-container > p#about-right-side{
float: none;
}
}
#media screen and (max-width: 656px) {
#photo-frame {
width: 150px;
height: 150px;
}
#about-section > #about-text-container {
width: 90%;
}
#about-section > #about-text-container > p {
text-align: justify;
padding: 0 1.5rem;
font-size: 20px;
}
}
#media screen and (max-width: 400px) {
#photo-frame {
width: 125px;
height: 125px;
}
#about-section > #about-text-container {
width: 100%;
}
#about-section > #about-text-container > p {
padding: 0 0.5rem;
font-size: 18px;
}
}
/* -------------------- */
/* -------FOOTER------- */
footer {
width: 100%;
background-color: black;
}
footer > p#footer-text {
margin: 0;
text-align: center;
font-family: arial;
color: rgb(169, 169, 169);
padding: 20px;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* -------------------- */
.no-select {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
Try this:
#about-section {
width: 100%;
background-color: rgb(131, 111, 235);
}
Description
You are using #about-section id remove the height property or use height:auto, you have given a fixed height. And use float:left as well in p tag ids.
here your update code
So this boils down to your p.side-by-side definition which is set at 45%.
If you want to not have columns on small screen sizes, then the approach would be to only set that 45% value with a break-point above mobile.
Your using a non-mobile first approach that makes this stuff harder (in my opinion). The easier way to go about it is to not add any width styles to those columns, and only add the 45% and the float, once the screen is above (say) 768px. In other words your media queries will generally have min values, not max.
I think a good way to start to think mobile-first is to realise that mobile layouts use kind of "less" CSS than desktops. So you keep it simple, just using semantic html, and then add in styles as the screen size increases to start making columns etc.
Related
I need help making my navigation bar mobile friendly.
I tried following a few tutorials, but none of them worked.
Here's the web site's link (for the HTML) and here's the link to the CSS code.
I've tried using the #media tag, but it doesn't seem to apply to any of the content inside of the #media tag.
Here's the Media query for the CSS code:
```#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
z-index: 999;
width: 100%;
right: 0%;
top: 0%;
position: fixed;
}
.logo {
margin: 0;
color: silver;
list-style: none;
padding-top: 15;
}
.nav {
text-transform: uppercase;
font-size: 1.2rem;
background: var(--background);
}
.nav::after {
content: "";
display: table;
clear: both;
}
.nav-main {
float: right;
list-style: none;
}
.nav-main-item {
display: inline-block;
width: 10rem;
position: relative;
}
.nav-main a {
text-align: center;
padding: 1rem;
color: white;
text-decoration: none;
display: block;
}
.nav-main-item a:hover {
background-color: silver;
}
.nav-main-item:hover > .navi-main-item {
display: inline-block;
margin: 0;
}
.navi-main-item {
display: none;
position: absolute;
width: 100%;
top: 100%;
z-index: -1;
background: var(--background);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8);
}
.Discord {
padding-left: 72%;
margin-bottom: 80px;
}
.gif-Destiny {
width: 200px;
float: right;
color: white;
text-shadow: 2px 2px black;
}
.Zachary {
color: white;
text-decoration: none;
text-shadow: 2px 2px black;
}
.introduction {
color: white;
text-shadow: 2px 2px black;
}
.footer {
background-color: #1F2E4B;
color: white;
text-align: center;
font-size: 20px;
float: center;
margin-top: 12.5%;
}
.CbZD{
color: #00FFFF;
font-size: 30px;
}
}```
Have you tried Boostrap. It will give you a Headstart.
visit https://getbootstrap.com/docs/4.0/components/navbar/
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>
z-index doesn't seem to work for me. I've googled but can't seem to find the problem.
I want the .navigation css class to have a lower z-index than the css class .mobilenav and .mobilenavclosed so that these classes are layered above the other.
How can I accomplish this? I have tried both changing the position of the elements and changing the z- index but nothing seems to work.
Thank you!
This is my html
<div class="navWrapper" ng-controller="NavController">
<section class="navigation">
<div class="nav-container">
<button ng-click="openHamburger()" class="hamburger"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button>
<nav>
<ul class="nav-list" ng-repeat="navitem in navitems">
<li>
{{navitem.title}}
</li>
</ul>
</nav>
</div>
</section>
<div ng-class="{'mobilenav': isOpen, 'mobilenavclose': isClosed}">
<button ng-click="closeHamburger()" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<div class="menuwrapper">
<button class="optionwrapper" ng-repeat="navitem in navitems">
<div class="navicon"></div>
<p>{{navitem.title}}<p>
</button>
</div>
</div>
This is my css
#keyframes active {
from {
border-bottom: 0px solid #5aaafa;
}
to {
border-bottom: 5px solid #5aaafa;
}
}
body,
html {
height: 100%;
margin: 0 auto;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: red;
}
.menuwrapper {
display: none;
}
button.btn.btn-default {
display: none;
}
.navWrapper {
height: 100vh;
width: 100vw;
}
.activeindicator {
width: 100%;
height: 10%;
background: #5aaafa;
}
.hamburger {
display: none;
}
.close {
display: none !important;
}
.navhidden {
display: none !important;
}
.navigation {
width: 100%;
height: 50px;
background: #333;
color: white;
position: relative;
z-index: 1;
}
.navigation a {
color: white;
text-decoration: none;
font-weight: 300;
}
.navigation a:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 5px solid #5aaafa;
}
.nav-container {
margin: 0 auto;
padding: 0px 0px;
height: 100%;
position: relative;
}
nav {
display: inline-block;
font-size: .9em;
text-transform: uppercase;
font-weight: 700;
height: 100%;
position: absolute;
left: 23vw;
right: 23vw;
}
nav ul {
list-style: none;
text-align: left;
margin: 0;
padding: 0px;
height: 100%;
display: inline-block;
}
nav ul li {
float: none;
height: 100%;
}
nav ul li a {
display: block;
color: #a9a9a9;
padding: 0 20px;
background: #333;
height: 100%;
padding-top: 17px;
}
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active {
text-decoration: none;
color: #ffffff;
border-bottom: 5px solid #5aaafa;
animation: active;
animation-duration: 0.2s;
animation-timing-function: linear;
}
nav ul li > a:hover {
color: #ffffff;
}
nav ul li > a:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 100%;
width: 70px;
}
#media only screen and (max-width: 1389px) {
nav {
left: 20vw;
right: 20vw;
}
}
#media only screen and (max-width: 1250px) {
nav {
left: 17vw;
right: 17vw;
}
}
#media only screen and (max-width: 1172px) {
nav {
left: 15vw;
right: 15vw;
}
}
#media only screen and (max-width: 1075px) {
nav {
left: 12vw;
right: 12vw;
}
}
//*IPAD VIEW
#media only screen and (max-width: 1000px) {
#keyframes openHamburger {
from {
width: 0vw;
}
to {
width: 40vw;
}
}
#keyframes closeHamburger {
from {
width: 40vw;
}
to {
width: 0vw;
}
}
nav ul,
nav li,
nav a {
display: none;
}
.hamburger {
display: inline;
background: none;
border: 0px;
height: 100%;
width: 8%;
padding: 0px;
}
.mobilenav.mobilenavclose {
height: 100vh;
background: #5aaafa;
width: 0vw;
margin: 0px;
animation: closeHamburger;
animation-duration: 0.7s;
position: relative;
z-index: 10;
}
.menuwrapper {
height: 32vw;
width: 33vw;
display: block;
position: inherit;
padding: 0px;
margin:0 auto;
top: 32vh;
}
.mobilenav {
height: 100vh;
background: #5aaafa;
width: 40vw;
margin: 0px;
animation: openHamburger;
animation-duration: 0.7s;
position: relative;
z-index: 10;
}
.navicon {
height: 7vw;
width: 7vw;
border: 2px solid white;
border-radius: 17vw;
margin: auto;
}
.optionwrapper {
text-align: center;
display: table-cell;
background: none;
border: none;
height: 11vw;
width: 11vw;
p {
color: white;
margin: 0px;
padding-top: 5%;
text-transform: uppercase;
font-size: 0.7em;
}
}
button.btn.btn-default {
display: inline !important;
background: none;
border: 0px;
top: 2%;
right: 5%;
position: absolute;
color: white;
font-size: 20px;
}
}
//*MOBILE VIEW
#media only screen and (max-width: 600px) {
#keyframes openHamburger {
from {
width: 0vw;
}
to {
width: 90vw;
}
}
#keyframes closeHamburger {
from {
width: 90vw;
}
to {
width: 0vw;
}
}
.mobilenav.mobilenavclose {
height: 100vh;
background: #5aaafa;
width: 0vw;
margin: 0px;
animation: closeHamburger;
animation-duration: 0.7s;
position: relative;
}
.mobilenav {
height: 100vh;
background: #5aaafa;
width: 90vw;
margin: 0px;
animation: openHamburger;
animation-duration: 0.7s;
position: relative;
}
.menuwrapper {
height: 78vw;
width: 72vw;
display: block;
position: inherit;
padding: 0px;
margin:0 auto;
top: 24vh;
}
.optionwrapper {
text-align: center;
display: table-cell;
background: none;
border: none;
height: 26vw;
width: 24vw;
p {
color: white;
margin: 0px;
padding-top: 10%;
text-transform: uppercase;
font-size: 0.8em;
}
}
.navicon {
height: 17vw;
width: 17vw;
border: 2px solid white;
border-radius: 17vw;
margin: auto;
}
}
if you want them to be layered, your bottom layer needs to be relative, but .mobilenav and .mobilenavclosed should be position: absolute; ? At least that's how the layering I do is done.
.mobilenav.mobilenavclose {
height: 100vh;
background: #5aaafa;
width: 0vw;
margin: 0px;
animation: closeHamburger;
animation-duration: 0.7s;
position: absolute;
z-index: 10;
}
as well .navigation shouldn't need a z index since it is too be the bottom?
I'm having a strange CSS problem where the main div container on my website shifts to the right when I visit certain pages. This happens even though there is no specific CSS rule to move it
I've uploaded a temp version of my site here:
http://myawesometestsite.ddns.net/
When you go to the Publications and Contact page the entire container shifts to the right by a few pixels. The position appears to be correct and unshifted on all other pages
This is the full CSS I'm using:
body {
background-color: #dcd8cf;
font-family: Raleway, Arial, sans-serif;
font-size: 1em;
}
h1 {
font-size: 1.5em;
color: #832C00;
margin-bottom: 30px;
}
h2 {
font-size: 1.2em;
color: #832C00;
margin-top: 30px;
}
h3 {
font-size: 1em;
margin-bottom: 5px;
margin-top: 20px;
}
h4 {
font-size: 1em;
font-style: italic;
margin-top: 0px;
margin-left: 10px;
margin-bottom: 5px;
}
.container {
position: relative;
left: 50%;
margin-left: -470px;
width: 940px;
border: 1px solid black;
}
/*
Header
*/
header {
position: relative;
display: inline-block;
width: 100%;
height: 180px;
background-color: #a63700;
}
header h1 {
position: absolute;
font-size: 2.5em;
color: #e6e6dc;
top: 50px;
left: 100px;
margin: 0px;
}
header h2 {
position: absolute;
font-size: 0.77em;
color: #e6e6dc;
top: 100px;
left: 100px;
margin: 0px;
opacity: 0.7;
}
header img {
border: 2px solid #e6e6dc;
border-radius: 50%;
max-width: 100%;
max-height: 100%;
}
.profileImage {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
max-width: 150px;
max-height: 150px;
}
.skillIcons {
position: absolute;
right: 25px;
top: 15px;
}
.skillIcons img {
display: inline;
width: 75px;
height: 75px;
padding: 5px;
margin: 15px;
opacity: 0.7;
}
/*
Navigation menu
*/
nav {
position: relative;
z-index: 1;
text-align: center;
letter-spacing: 2px;
background-color: #a63700;
height: 50px;
width: 100%;
}
nav a {
position: relative;
top: 20px;
color: #D1D1C9;
text-decoration: none;
padding: 0 30px;
}
nav a:hover {
border-bottom: solid 1px #e6e6dc;
padding-bottom: 3px;
}
.navSelected {
text-shadow:0px 0px 1px white;
color: white;
}
/*
Main content
*/
main {
position: relative;
background-color: white;
padding: 10px;
}
/*
Footer
*/
footer {
position: relative;
color: #e6e6dc;
background-color: #a63700;
font-size: 10pt;
padding: 10px;
}
.leftFooter ul {
padding-left: 0px;
}
.leftFooter li {
display: inline;
list-style-type: none;
}
.leftFooter li a {
color: #e6e6dc;
text-decoration: none;
}
.leftFooter li + li:before {
color: #e6e6dc;
content: "|";
padding: 10px;
}
.rightFooter {
position: absolute;
right: 10px;
top: 4px;
}
.rightFooter img {
display: inline;
max-width: 30px;
max-height: 30px;
vertical-align: middle;
margin-top: -3px;
}
.copyright {
font-size: 1em;
}
/*
Home page
*/
/*
Publications page
*/
.hangingIndent {
padding-left: 1.5em;
text-indent:-1.5em;
}
.publications h2 {
margin-top: 50px;
}
/*
Code page
*/
.codeProjects a {
color: #a63700;
text-decoration: none;
}
.codeProjects a:hover {
text-decoration: underline;
}
.codeProjects p {
margin-left: 10px;
}
/*
CV page
*/
.cvContainer {
width: 90%;
margin: 0 auto;
}
.cvEntry {
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
}
.sectionHeading {
width: 100%;
border-bottom: 1px solid #000;
}
.alignLeft {
display: block;
float: left;
text-align: left;
width: 80%;
margin-top: 10px;
}
.alignLeft p {
font-size: 1em;
}
.alignLeftSub {
margin-top: -10px;
margin-left: 20px;
}
.alignRight {
display: block;
float: right;
text-align: right;
width: 20%;
margin-top: 10px;
}
.clear {
clear: both;
}
/*
Contact page
*/
.contactInfo {
margin-left: 20px;
}
.contactInfo img {
display: inline;
max-width: 30px;
max-height: 30px;
vertical-align: middle;
}
.emailHidden {
display: none;
}
.contactInfo a {
margin-left: 5px;
color: #a63700;
text-decoration: none;
}
.contactInfo #emailAddress {
margin-left: 2px;
}
.contactInfo #emailAddress a {
margin-left: 8px;
}
/*
Media queries
*/
#media screen and (max-width : 940px) {
.container {
position: relative;
left: 0px;
margin: 0px;
width: 100%;
}
header h1 {
left: 5%;
margin: 0px;
}
header h2 {
left: 5%;
margin: 0px;
}
.skillIcons img {
max-width: 70px;
max-height: 70px;
margin-left: 5px;
margin-right: 0px;
}
}
#media screen and (max-width : 800px) {
header h1 {
display: none;
}
header h2 {
display: none;
}
.skillIcons img {
display: none;
}
nav {
height: 150px;
}
nav a {
display: block;
}
nav a:hover {
border-bottom: none;
padding-bottom: 0px;
}
}
#media screen and (max-width : 600px) {
.rightFooter {
position: relative;
display: block;
margin-left: 10px;
}
}
I don't believe there's anything in here that's causing the container to shift for just those 2 pages but maybe I'm missing something. Anyone have any idea whats causing this?
Add "overflow-y: scroll;" to your "body" selector. It should look like this in your CSS:
body {
background-color: #dcd8cf;
font-family: Raleway, Arial, sans-serif;
font-size: 1em;
overflow-y: scroll;
}
The lenght of the pages create a vertical scroll bar. Publication and contact are small then the other are more big then the screen. for fix this you need an overflow-y set to scroll;
body {
overflow-y: scroll;
}
I'm trying to create a new page in which I apply my own CSS and use some of the components developed here: http://aozora.github.io/bootmetro/index.html.
Problem is that on one component the browser is only applying the style from my file and not the style defined on the .css file I downloaded from the site. Trouble is that firebug shows that the file is being tranfered to the user but somehow its not being used even if the class defined from tag is clearly defined on the other .css file.
Heres the source of the page:
<div class="header">
<div class="right textHeader">
<div class="left logo"><p class="title">Portal para la gestión y control<br>
de la implementación del sistema de información PAI
</p>
</div>
<div class="right textInfo">
<div class="left greetTime">
<img src="/Content/Images/calendar.png"> 27/04/2013 12:15:25 p.m.
</div>
<div class="greet">
Hola, <a class="username" href="/Account/Manage" title="Manage">administrador</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" value="gsGgnTHMhT55z7aQFmarrbLlUQK4x2nuMNZP_kXbqRx2j3kWOhNSc3RptPzG8118PGgkQOpU_erRuCcZ7GvH4FhKNAlaCug0dFUGKjiFqbP5wjhFTJConDCIZzZppq090" type="hidden"> Desconectarse
</form> </div>
</div>
</div>
<div class="left imgHeader">
<img src="/Content/Images/logo-minSalud.png">
<img src="/Content/Images/logo-prosperidad.png">
</div>
</div>
<div id="categories">
Inicio
</div>
<div id="content">
<h2>Bienvenido</h2>
This is the item I want to apply the class to
Administrar banco de información**Administrar usuariosReportes gerenciales
</div>
Here's the firebug screenshot:
And here's the screenshot showing that both files are being downloaded:
Here's my css file:
body {
color: #353535;
background-color: #fff;
background: url("Images/bg.jpg") repeat-x 0 0 #EBEBEB;
font-size: 1em;
margin: 0;
padding: 0;
font-family: 'Maven Pro', sans-serif;
}
header, footer, nav, section
{
display: block;
}
.editButton {
background:url(Images/editarPequeño.ico);
background-repeat: no-repeat;
display: block;
text-indent: -9999px; /* hides the link text */
}
.deleteButton {
background:url(Images/deletePequeno.ico);
background-repeat: no-repeat;
display: block;
text-indent: -9999px; /* hides the link text */
}
.left
{
float:left
}
.right {
float: right;
}
.navBar {
background-color: #F7921E;
height: 48px;
}
/*//////////TABLA LISTADO /////////////////////////*/
table {
color: #333;
/*font-family: Helvetica, Arial, sans-serif;*/
/*width: 640px;*/
border-collapse:
collapse; border-spacing: 0;
margin-left:auto;
margin-right:auto;
}
td, th {
border: 1px solid transparent; /* No more visible border */
height: 30px;
transition: all 0.3s; /* Simple transition for hover effect */
}
th {
background: #5DBCD2; /* Darken header a bit */
font-weight: bold;
border: 1px solid #CCC;
}
td {
background: #FAFAFA;
text-align: center;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td { background: #F1F1F1; }
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; } /* Hover cell effect! */
/*///////////////////////////////*/
.title {
/*font-family: 'Montserrat', sans-serif;*/
/*width: 500px;*/
font-weight: bold;
}
.greet {
font-size: 0.78em;
}
.textInfo {
width:50%;
/*height:100%;*/
}
/*///////////////////////////////////////*/
.listView {
margin-left: 0px;
list-style: none outside none;
}
ul{
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
.metrouicss .listview:before, .metrouicss .listview:after {
display: table;
content: "";
}
/*///////////////////////////////////////*/
.okButton {
background: -moz-linear-gradient(center top , #ff6600 0px, #ff6600 100%) repeat scroll 0 0 transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
opacity: 0.75;
padding: 6px 10px;
margin-top:5px;
display:block;
margin:0px auto;
}
.okButton {
transition: opacity 0.2s ease 0s;
}
.footer {
width: 100%;
height: 100px;
background: none repeat scroll 0% 0% rgb(138, 188, 203);
margin-top:50px;
color: rgb(0, 0, 0);
font-size: 0.7em;
border-top: 1px solid rgb(98, 143, 156);
}
.logo {
width:50%
}
.textHeader {
width:63%
}
.greetTime {
font-size: 0.58em;
/*width: 15px;*/
}
.header {
height: 122px;
width: auto;
margin-top:20px;
/*margin-left:5%;*/
/*margin: 0px auto;*/
}
/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
font-weight: bold;
color:black
}
textarea {
min-height: 75px;
}
.editor-label {
margin: 1em 0 0 0;
}
.editor-field {
margin: 0.5em 0 0 0;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
/*CSS Aditions*/
BODY { font-size: 1em; margin: 0; }
DIV#header DIV.title, DIV.item H3, DIV.item H4, DIV.pager A
{
/*font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;*/
}
A#loginLink {
font-size:1.5em;
}
/*DIV#header { background-color: #5DBCD2; border-bottom: 2px solid #111; color: black; }*/
DIV#header DIV.title { font-size: 2em; padding: .6em; }
DIV#title { font-size: 2em; padding: .6em;float:right }
DIV#headerImages { float:left}
/*DIV#content { border-left: 2px solid gray; margin-left: 9em; padding: 1em; }*/
DIV#categories { float: left; width: 8em; padding: .3em; }
DIV.item { border-top: 1px dotted gray; padding-top: .7em; margin-bottom: .7em; }
DIV.item:first-child { border-top:none; padding-top: 0; }
DIV.item H3 { font-size: 1.3em; margin: 0 0 .25em 0; }
DIV.item H4 { font-size: 1.1em; margin:.4em 0 0 0; }
DIV.pager { text-align:right; border-top: 2px solid silver;
padding: .5em 0 0 0; margin-top: 1em; }
DIV.pager A { font-size: 1.1em; color: #666; text-decoration: none;
padding: 0 .4em 0 .4em; }
DIV.pager A:hover { background-color: Silver; }
DIV.pager A.selected { background-color: #353535; color: White; }
DIV#categories A
{
font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial; display: block;
text-decoration: none; padding: .6em; color: Black;
border-bottom: 1px solid silver;
}
DIV#categories A.selected { background-color: #666; color: White; }
DIV#categories A:hover { background-color: #CCC; }
DIV#categories A.selected:hover { background-color: #666; }
And heres the css file i downloaded
/* Metro Tiles
-------------------------------------------------- */
.bg-color-blue {
background-color: #0072BC !important;
}
.bg-color-blueDark {
background-color: #662D91 !important;
}
.bg-color-green {
background-color: #01a31c !important;
}
.bg-color-greenDark {
background-color: #008641 !important;
}
.bg-color-red {
background-color: #bc1c48 !important;
}
.bg-color-yellow {
background-color: #ffc40d !important;
}
.bg-color-orange {
background-color: #CD4900 !important;
}
.bg-color-pink {
background-color: #c3325f !important;
}
.bg-color-purple {
background-color: #603cba !important;
}
.bg-color-darken {
background-color: #1c1c1c !important;
}
.metro {
overflow: hidden;
}
.metro .carousel-control {
top: 20%;
}
.metro .metro-sections {
height: auto;
position: relative;
overflow: hidden;
width: 10000px;
}
.metro-sections h2 {
margin-left: 5px;
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
text-transform: lowercase;
}
.metro .metro-sections .metro-section {
position: relative;
float: left;
/*width: 810px !important;*/
width: auto;
height: auto;
margin-right: 75px;
}
/* fixed widths for tile sections
units are measured per square tile width, i.e.: tile-span-1 = 160px = 1 square tile width (including margin)
*/
.metro .metro-sections .metro-section.tile-span-1 { width: 160px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-2 { width: 320px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-3 { width: 480px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-4 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-5 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-6 { width: 800px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-7 { width: 960px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-8 { width: 1120px; margin-left: 0;}
/*default tile definition */
.metro .tile {
position: relative;
display: block;
float: left;
margin: 5px;
padding: 0;
/*padding-bottom: 1px;*/
width: 150px;
height: 150px;
color: #FFF;
cursor: pointer;
overflow: hidden;
text-decoration: none;
background-color: #2C83EF;
}
.metro .tile:hover {
outline: 3px #225a68 solid;
}
.scroll {
-webkit-transition:left 0.6s ease; /* here the animation is set on 5 seconds */
-moz-transition:left 0.6s ease;
-o-transition:left 0.6s ease;
transition:left 0.6s ease;
}
/* Metro Tiles Templates
-------------------------------------------------- */
.metro .tile.square.text {
width: 110px;
height: 110px;
padding: 20px;
}
.metro .tile.square.image {
width: 150px;
height: 150px;
padding: 0;
}
.metro .tile.square.image img {
max-width: 150px;
max-height: 150px;
}
.metro .tile.squarepeek {
width: 150px;
height: 300px;
}
.metro .tile.squarepeek .text-inner {
width: 110px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.text {
width: 270px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.image {
width: 310px;
height: 150px;
}
.metro .tile.wide.image.collection img {
max-width: 158px;
max-height: 150px;
float: left;
}
/* template for full image */
.metro .tile.wide.imagetext.wideimage {
width: 310px;
height: 150px;
padding: 0;
}
/* template with normal 80x80 image */
.metro .tile.wide.imagetext {
width: 270px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.imagetext .textover-wrapper {
position: absolute;
bottom: 0;
width: 270px;
height: 48px;
padding: 2px 20px;
background-color: inherit;
}
.metro .tile.widepeek {
width: 310px;
height: 300px;
}
/* Default Tile
-------------------------------------------------- */
.metro .tile.app .image-wrapper {
display: block;
width: 150px;
height: 80px;
margin-top: 20px;
padding: 8px 0;
text-align: center;
vertical-align: middle;
}
.metro .tile.app .image-wrapper img {
max-width: 80px;
max-height: 80px;
margin: 0 auto;
}
.metro .tile .app-label {
bottom: 5px;
font-size: 12px;
left: 20px;
position: absolute;
}
.metro .tile .app-count {
position: absolute;
right: 20px;
bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.metro .tile.wide.app {
width: 310px;
height: 150px;
}
.metro .tile.wide.app .image-wrapper {
width: 310px;
}
.image-wrapper span.icon {
font-size: 80px;
height: 80px;
line-height: 80px;
width: 80px;
}
/*
-------------------------------------------------- */
.metro .tile.square.text .text-big {
font-size: 76px;
line-height: 76px;
text-align: left;
overflow: hidden;
}
.metro .tile.square.text.tilesquareblock .text {
font-size: 14px;
font-weight: bold;
text-align: left;
overflow: hidden;
}
/* normal header in 1 line of wrapped text*/
.metro .tile .text-header {
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
font-size: 34px;
line-height: 36px;
max-height: 36px;
text-align: left;
overflow: hidden;
}
/* One string of large text wrapped over a maximum of three lines.*/
.metro .tile .text-header3 {
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
font-size: 34px;
line-height: 36px;
text-align: left;
max-height: 110px;
overflow: hidden;
}
/* 1 line of regular text (not wrapped) */
.metro .tile .text {
font-size: 15px;
line-height: 18px;
height: 18px;
font-weight: normal;
text-align: left;
overflow: hidden;
}
/* regular text wrapped over a maximum of 2 lines */
.metro .tile .text2 {
font-size: 15px;
font-weight: normal;
line-height: 20px;
max-height: 44px;
overflow: hidden;
text-align: left;
}
/* regular text wrapped over a maximum of 3 lines */
.metro .tile .text3 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 56px;
overflow: hidden;
}
/* regular text wrapped over a maximum of 4 lines */
.metro .tile .text4 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 72px;
overflow: hidden;
}
/* regular text wrapped over a maximum of 5 lines */
.metro .tile .text5 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 92px;
overflow: hidden;
}
/* Image Only Tiles
-------------------------------------------------- */
.metro .tile.square.image img {
max-width: 150px;
max-height: 150px;
}
/* Wide Text Only Tiles
-------------------------------------------------- */
.metro .tile .column {
display: block;
float: left;
width: 130px;
}
.metro .tile .column2-label {
display: block;
float: left;
width: 90px;
}
.metro .tile .column2-text {
display: block;
float: left;
width: 160px;
}
.metro .tile .column3-label {
display: block;
float: left;
width: 50px;
}
.metro .tile .column3-text {
display: block;
float: left;
width: 200px;
}
/* Wide Image Only Tiles
-------------------------------------------------- */
.metro .tile.wide.image .mini-tiles {
display: inline-block;
float: left;
width: 152px;
height: 150px;
}
.metro .tile.wide.image .mini-tiles img {
display: inline-block;
float: left;
max-width: 75px;
max-height: 75px;
border-left: 1px solid #2A2A2A;
}
/* Wide Image & Text Tiles
-------------------------------------------------- */
.metro .tile.wide.imagetext .column-text,
.metro .tile.wide.text .column-text {
display: block;
float: left;
width: 180px;
padding-left: 10px;
}
.metro .tile.wide.text .column-text-big {
display: block;
float: left;
width: 80px;
}
.metro .tile.wide.imagetext .image-wrapper {
display: block;
float: left;
width: 80px;
height: 80px;
}
.metro .tile.wide.imagetext .image-wrapper img {
max-width: 80px;
max-height: 80px;
}
/* ListView
-------------------------------------------------- */
.listview-container.grid-layout {
border: solid 2px rgba(0, 0, 0, 0.13);
height: 240px;
overflow: auto;
padding: 2px;
background-color: #FFF;
}
.mediumListIconTextItem {
display: inline-block;
position: relative;
vertical-align: top;;
width: 282px;
height: 70px;
padding: 5px;
margin-bottom: 7px;
margin-right: 24px;
border: solid 3px transparent;
overflow: hidden;
background-color: #FFF;
cursor: pointer;
}
.mediumListIconTextItem:hover {
border: solid 3px #b3b3b3;
background-color: #b3b3b3;
}
.mediumListIconTextItem img.mediumListIconTextItem-Image {
display: inline-block;
vertical-align: top;;
width: 60px;
height: 60px;
margin: 5px;
}
.mediumListIconTextItem .mediumListIconTextItem-Image[class^="icon-"],
.mediumListIconTextItem .mediumListIconTextItem-Image[class*=" icon-"] {
display: inline-block;
width: 60px;
height: 60px;
font-size: 60px;
line-height: 60px;
margin: 5px;
}
.mediumListIconTextItem .mediumListIconTextItem-Detail {
display: inline-block;
vertical-align: top;;
margin: 5px;
}
.mediumListIconTextItem.selected {
background-color: #4617b4;
}
.mediumListIconTextItem.selected:after {
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
font-family: 'IcoMoon';
content: "\e03c";
color: #FFF;
font-size: 16px;
}
.mediumListIconTextItem.selected:hover {
border: solid 3px #b3b3b3;
background-color: #4617b4;
}
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail,
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail h4,
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail h6 {
color: #FFF;
}
/* Special undocumented tiles for ads
-------------------------------------------------- */
#ad-container {
background-color: #0072BC;
height: 90px;
margin-top: 10px;
text-align: center;
width: 100%;
}
/*Button (125x125)*/
.metro .tile.ad.ad125 {
width: 125px;
height: 125px;
padding: 12px 13px 13px 12px;
}
/*Small Rectangle (180x150)*/
.metro .tile.wide.ad.ad125 {
width: 180px;
height: 150px;
padding: 0 65px;
}
All the rules from the downloaded file that affect the .tile class start like this .metro .tile which means that the .tile element must be a descendant of a .metro element (an element with class metro)
You html does not show your link being inside a .metro element so the styles do not apply ..
it seems that stylesheets are loaded, but from basic look at the Metro Tiles CSS I decided that you forgot to put metro class to any parent of your tile, for example add class to your content
<div id="content" class="metro">