Hello I'm trying to blot out the horizontal scroll bar from my site.Below I have post two pictures which display that the problem appears in two div elements.
this picture display the problematic div
but I haven't this two lines of code
.row { margin-left: -15px; margin-right: -15px; }
in my CSS file.
This refers to file with name grid-framework.less.
Could you anyone help me to solve this bug?
Thanks.
Here is the code of my CSS file.
#font-face {
font-family: OpenSans Bold;
src: url('OpenSans-Bold.ttf');
}
header .navbar-default {
background: url("/diary/pictures/home-banner-background.jpg") no-repeat center center fixed;
background-size: cover;
max-width: 100%;
height: 120px;
margin: 0 auto;
}
.navbar-left img {
max-width: 200px;
margin-left: 15px;
margin-top: 25px;
}
/* search and date picker*/
.date {
margin-top: 5px;
}
.row .col-lg-2 {
padding: 4px;
margin-top: 1px;
margin-left: 25px;
}
.col-lg-2 b {
font-size: 16px;
}
.glyphicon-calendar {
padding: 4px;
margin-top: 1px;
}
.search {
padding: 4px;
margin-top: 1px;
margin-right: -5px;
position: relative;
}
.search span {
padding: 4px;
}
/* body */
.body-page {
background: #C6C6C6;
max-width: 100%;
height: 865px;
margin: 0 auto;
}
.table-responsive {
max-width: 90%;
float: right;
padding-right: 200px;
margin-right: 50px;
/*
padding-right: 200px;*/
}
th > a {
border-radius: 2px;
}
tbody tr:last-child a {
background-color: #5cb85c;
color: #ffffff;
border-radius: 2px;
padding: 3px 4px;
text-decoration: none;
font-family: OpenSans;
}
tbody tr:nth-last-child(2) a {
text-decoration: none;
color: black;
padding-left: 2px;
font-family: OpenSans;
}
tbody tr:nth-last-child(3) a {
text-decoration: none;
color: #ffffff;
background-color: #f92b2b;
border-radius: 2px;
padding: 3px 4px;
}
#table_3 > tbody tr {
font-family: OpenSans;
}
#table_2 > tbody tr {
font-family: OpenSans;
}
.table {
font-family: OpenSans;
}
.glyphicon-remove {
margin-left: 8px;
}
#access_1 {
padding-left: 20px;
max-width: 20%;
float: left;
}
#table_2 {
height: 240px;
width: 240px;
}
#table_3 {
margin-top: 20px;
height: 240px;
width: 240px;
}
/*footer*/
footer {
background-color: #3F3C3C;
max-width: 100%;
height: 60px;
}
footer .report {
width: 300px;
float: right;
padding-top: 18px;
}
footer .report a {
text-decoration: none;
color: #ffffff;
margin-right: 5px;
}
footer a:hover {
cursor: pointer;
color: #f9a42b;
}
Related
Update:
I'm sure this will be easy fix for advanced members. I have created drop down menu with the 'nav' element. For some reason as hard as I try, I cannot get the menu to overlap the slider images below it when you expand it on mobile. I've tried lowering the Z-index on the slider and raising it on the menu. What am I doing wrong? Thanks in advance:
UPDATE: Here is a fiddle link as requested by a comment which includes the HTML. https://jsfiddle.net/wknow6cv/#&togetherjs=ADxkd31O6q
#import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
* {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden;
}
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background: #F5F5F5;
color: #67727A;
font-family: 'Alegreya', Sans-serrif;
margin: 0;
}
h3 {
font-size: 150%;
line-height: 155%;
padding: 5% 0;
font-weight: 400;
}
p{
font-size: 120%;
line-height: 150%;
padding: 3%;
text-indent: 2%;
text-align: center;
}
img{
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}
header{
background-color: #6991AC;
width: 100%;
height: 120px;
}
h1{
position:absolute;
right: 600px;
top:30px;
}
#top-left-menu {
right: 0px;
}
#logo{
margin: 20px;
float: left;
width: 380px;
height: 60px;
background: url(img/RD.png) no-repeat center;
left: 0px;
top: 0px;
}
p {
font-size: 1.4vw;
}
h3{
font-size: 1.5vw;
}
/*--- Start Navigation --*/
nav{
float: right;
padding: 25px 20px 0 0; /*--top right bottom left--*/
}
#menu-icon{
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul{
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', Sans-serrif;
font-size: 150%;
display: inline-block;
/*makes the links go left from right instead of up and down*/
float: left;
padding: 10px;
}
nav ul li a {
text-decoration: none;
color: #F5F5F5;
}
nav ul li a:hover {
color: #C3D7DF;
}
/*.current{
color: #C3D7DF;
}
/*--End Navigation--*/
.one-fourth {
width: 25%;
float: left;
text-align: center;
font-family: Arial;
color: #F0F0F0;
}
#cloud {
background-color: #C3D7DF;
}
#lock {
background-color: #6991AC;
}
#headset {
background-color: #C3D7DF;
}
#truck {
background-color: #6991AC;
}
.one-fourth i { /*--Icons at one fourth blocks--*/
color: #F0F0F0;
font-size: 410%;
padding: 13% 0 4% 0;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#sec-1 {
background-color: #FFFFFF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
.one-third {
width: 33.3333333%;
float: left;
text-align: center;
color: #FFFFFF
}
#google{
background-color: #A2B1C1;
}
#marketing {
background-color: #BEB9AD;
}
#customers {
background-color: #AADCD2;
}
/*--Start Footer--*/
footer {
background-color: #4682B4;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i { /*--icons--*/
font-size: 220%;
padding: 3% 3% 3% 2%;
color: #C3D7DF;
}
.social i:hover {
color: F5F5F5;
}
footer.second { /*--Socket--*/
border-top: 1px solid #AADCD2;
background-color: #544B59;
max-height: 55px;
text-align: center;
margin: 0;
}
footer.second p {
padding: 5px 0 9px 0;
text-align: center;
}
.carouselbox {
font-family: helvetica,sans-serif;
font-size: 14px;
width: 100px;
position: relative;
margin: 1em;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px #ccc;
overflow: hidden;
}
.content {
margin: 0;
padding: 0;
}
.content li {
font-size: 100px;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
}
.new-inner {
height: 800px;
width: 100%;
float: left;
background-color: #FFFAFA;
font-family: Arial;
}
.nip1 {
width: 40%;
}
/*---------Insert Slideshow stuff below------*/
.cycle-slideshow{
width: 100%;
display: block;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
top: 50%;
display: block;
position: absolute;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next {right: 10%}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 9999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: normal;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
/*------------MEDIA QUERIES ARE NOW STARTING-------------*/
#media screen and (max-width: 768px){
p {
font-size: 250%;
}
h3{
font-size: 260%;
}
header{
width: 100%;
}
#logo {
margin: 15px 0 20 -25px;
background: url(img/RD_mobile.png) no-repeat center;
float: left;
width: 170px;
height: 60px;
}
#menu-icon {
display: inline-block;
}
nav ul, nav:active ul {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
background: #6991AC;
right: 20px;
top: 60px;
border: 1px solid #FFF;
border-radius: 2px 0 2px 2px;
width: 50%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
}
.one-fourth {
float: left;
width: 100%;
font-size: 30%;
}
.one-fourth i {
font-size: 500%;
padding: 4% 0 1% 0;
}
article {
width: 100%;
}
aside {
width: 100%;
}
.hand-mobile {
display: none;
}
.social i {
font-size: 100%;
}
}
Maybe try to change the media queries nav to position: relative;
EDIT:
Try this instead, change the display: none to inline:
nav ul, nav:active ul {
display: inline;
z-index: 1000;
position: relative;
padding: 20px;
background: #6991AC;
right: 20px;
top: 60px;
border: 1px solid #FFF;
border-radius: 2px 0 2px 2px;
width: 50%;
}
I am trying to figure out how to center the logo image on my footer. I want it to be able to scale as the browser changes but stay inside the center. If anyone knows how I can fix this that would really help! Thank you! I really appreciate all of the help with this. I have figured it out now and I am good to go.
.msum {
position: absolute;
bottom: 5%;
width: 100%;
display: block;
width: 200px;
height: 50px;
}
/*Rest of Code*/
figure.stayssame {
width: 100%;
}
figure video {
width: 100%;
height: 80%;
}
p {
padding: 2%;
}
.video-txt {
position: absolute;
top: 30%;
z-index: 9;
color: #FFF;
width: 100%;
text-align: center;
font-size: 40px;
}
object {
position: absolute;
left: 0%;
top: -5%;
z-index: 10;
width: 15%;
}
/*ALL CODE FROM DESKTOP*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
font-family: 'Inconsolata', monospace;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
line-height: 1.4em;
}
.squish {
margin-right: 125px;
}
.text {
padding: 5px;
}
.button {
margin-bottom: 50px;
margin-left: 20%
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
background-color: #670809;
height: 70px;
letter-spacing: 1px;
line-height: 55px;
padding: 9px;
word-spacing: 5px;
}
header,
h1,
h2 {
font-family: 'Orbitron', sans-serif;
}
.space {
padding: 5px;
color: white;
}
nav {
float: left;
width: 100%;
}
nav ul li.active a {
background-color: none;
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: #00E3FF;
}
nav ul li a:visited {
text-decoration: none;
}
/*nav ul li a {
display:inline-block;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;
color: white;
text-decoration:none;
}
a:hover {
/*background-color:none;
color:black;
background-color:#00E3FF;
}
nav ul li a:visited {
color:black;
text-decoration:none;
}
*/
form {
padding-left: 20%;
}
/* header tags */
h1 {
text-align: center;
color: #013397;
font-size: 40px;
padding-top: 50px;
}
h2 {
text-align: center;
color: #00E3FF;
font-size: 30px;
margin: 5px;
padding: 20px;
}
p {
text-align: left;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
#box {
background-color: #94DBEC;
}
hr.style2 {
border-top: 3px double #00E3FF;
width: 300px
}
section {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
}
img.adjustable {
width: 100%;
max-width: 100%;
height: auto;
/* max-width: 400px;
max-height: 400px;*/
margin: 1em;
/*width: 90%;
margin:5%;*/
}
#inner {
height: 100px;
padding: 15px 0;
}
#container {
height: 100%;
}
.imgbox5 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox4 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox3 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox2 {
padding-right: 30px;
}
.imgbox {
padding-right: 30px;
padding-left: 0px;
}
#firstpara {
background-color: #5E5757;
color: white;
}
#secpara {
background-color: #5E5757;
color: white;
}
#thirdpara {
background-color: #5E5757;
color: white;
}
#fourthpara {
background-color: #5E5757;
color: white;
}
#primary {
background-color: #5E5757;
color: white;
}
#enroll {
margin: 0;
padding: 0;
}
/*section{
text-align: center;
width: 100%;
}*/
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
padding-bottom: 2%;
background-color: #670809;
font-family: 'Inconsolata', monospace;
/* text */
padding-left: 10px;
padding-top: 15px;
color: #ffffff;
font-size: 15px;
text-align: center;
}
a {
color: white;
}
a,
a:active {
color: white;
text-decoration: none;
}
.side {
left-margin: 10px;
right-margin: 10px;
}
object {
position: absolute;
top: 350px;
left: 100px;
height: 100px;
width: 200px;
z-index: 2000;
}
#headline {
text-align: center;
position: absolute;
top: 10%;
left: 35%;
color: #00E3FF;
line-height: 20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size: 12px;
}
#value {
background-color: #5E5757;
color: white;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
}
#title {
color: white;
text-align: center;
padding-top: 10px;
}
img {
width: 100%;
display: block;
}
/*.img{
border-width:thick;
border-style:solid;
border-color:white;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
bottom: 18px;
}
.column-left{
float: left;file:///Volumes/MMG/webfix/video/techpic1.jpg
width: 30%;
padding: 1%;
}
#left-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#middle-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#right-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
padding-bottom:135px;
}
.more {
position: relative;
display:inline-block;
color:black;
font-weight: bold;
top: 20px;
right: 31px;
background-color:white;
border-bottom-left-radius: 10px;
padding: 6px;
margin: 9px;
width: 30%;
}
#button3, #button2{
color: black;
position:relative;
top: 36px;
right:36px;
}
#button1{
color:black;
position:relative;
top: 155px;
right:36px;
}
*/
/*NAV BAR*/
#import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html {
font-size: 62.5%;
font-family: 'Open Sans', sans-serif;
}
body {
font-size: 1.6rem;
min-height: 100vh;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.6rem;
}
header {
position: relative;
}
main {
padding: 2rem;
}
/***************** NAVIGATION ********************/
nav ul {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background: #670809;
}
nav ul,
nav li {
flex: 1;
}
nav li:last-child {
border-bottom: none;
}
nav a {
text-decoration: none;
color: inherit;
display: block;
font-size: 1.8rem;
}
nav a:hover {
background:
/*#adacac*/
#555;
color: #fff;
}
nav li {
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
nav input,
nav label {
display: none;
width: 36px;
height: 36px;
background: #555;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 1.6rem;
border-radius: 4px;
}
nav label {
position: absolute;
top: 8px;
right: 8px;
transition: .4s;
}
nav label:hover {
cursor: pointer;
}
nav label:before {
font-family: FontAwesome;
font-size: 24px;
content: "\f0c9";
text-align: center;
}
/*************** MEDIA QUERIES *******************/
nav ul {
transform: translateY(0);
box-shadow: 0 0 5px rgba(0, 0, 0, .7);
transition: all .5s;
}
nav li {
flex: none;
width: 100%;
border-bottom: solid 1px #777;
}
nav input[type="checkbox"]:checked + ul {
transform: translateY(-100%);
width: 100%;
background: #999;
transition: all .5s;
}
nav label {
display: block;
}
nav input[type="checkbox"]:checked + ul li:nth-child(1) {
background: #777;
color: #fff;
}
#css-toggle-menu {
float: right;
margin: 10px;
}
<footer>
<a id="enroll" href="https://www.mnstate.edu/eservices/"> Enroll Now</a>
<div class="text">
© 2016</div>
<br>
<img class="msum" src="https://www.mnstate.edu/uploadedImages/Content/Marketing/logos/MSUM_Signature_Horiz_Color.jpg?n=808" alt="msum logo" />
</footer>
.msum {
position: absolute;
bottom: 5%;
width: 100%;
display: block;
width: 200px;
height: 50px;
//add this
left: 0;
right: 0;
margin: 0 auto;
}
There's no need for position: absolute here. Do these to the img.msum:
Remove position: absolute;
Add margin: auto;
Snippet
.msum {
display: block;
width: 200px;
height: 50px;
margin: auto;
}
/*Rest of Code*/
figure.stayssame {
width: 100%;
}
figure video {
width: 100%;
height: 80%;
}
p {
padding: 2%;
}
.video-txt {
position: absolute;
top: 30%;
z-index: 9;
color: #FFF;
width: 100%;
text-align: center;
font-size: 40px;
}
object {
position: absolute;
left: 0%;
top: -5%;
z-index: 10;
width: 15%;
}
/*ALL CODE FROM DESKTOP*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
font-family: 'Inconsolata', monospace;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
line-height: 1.4em;
}
.squish {
margin-right: 125px;
}
.text {
padding: 5px;
}
.button {
margin-bottom: 50px;
margin-left: 20%
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
background-color: #670809;
height: 70px;
letter-spacing: 1px;
line-height: 55px;
padding: 9px;
word-spacing: 5px;
}
header,
h1,
h2 {
font-family: 'Orbitron', sans-serif;
}
.space {
padding: 5px;
color: white;
}
nav {
float: left;
width: 100%;
}
nav ul li.active a {
background-color: none;
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: #00E3FF;
}
nav ul li a:visited {
text-decoration: none;
}
/*nav ul li a {
display:inline-block;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;
color: white;
text-decoration:none;
}
a:hover {
/*background-color:none;
color:black;
background-color:#00E3FF;
}
nav ul li a:visited {
color:black;
text-decoration:none;
}
*/
form {
padding-left: 20%;
}
/* header tags */
h1 {
text-align: center;
color: #013397;
font-size: 40px;
padding-top: 50px;
}
h2 {
text-align: center;
color: #00E3FF;
font-size: 30px;
margin: 5px;
padding: 20px;
}
p {
text-align: left;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
#box {
background-color: #94DBEC;
}
hr.style2 {
border-top: 3px double #00E3FF;
width: 300px
}
section {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
}
img.adjustable {
width: 100%;
max-width: 100%;
height: auto;
/* max-width: 400px;
max-height: 400px;*/
margin: 1em;
/*width: 90%;
margin:5%;*/
}
#inner {
height: 100px;
padding: 15px 0;
}
#container {
height: 100%;
}
.imgbox5 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox4 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox3 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox2 {
padding-right: 30px;
}
.imgbox {
padding-right: 30px;
padding-left: 0px;
}
#firstpara {
background-color: #5E5757;
color: white;
}
#secpara {
background-color: #5E5757;
color: white;
}
#thirdpara {
background-color: #5E5757;
color: white;
}
#fourthpara {
background-color: #5E5757;
color: white;
}
#primary {
background-color: #5E5757;
color: white;
}
#enroll {
margin: 0;
padding: 0;
}
/*section{
text-align: center;
width: 100%;
}*/
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
padding-bottom: 2%;
background-color: #670809;
font-family: 'Inconsolata', monospace;
/* text */
padding-left: 10px;
padding-top: 15px;
color: #ffffff;
font-size: 15px;
text-align: center;
}
a {
color: white;
}
a,
a:active {
color: white;
text-decoration: none;
}
.side {
left-margin: 10px;
right-margin: 10px;
}
object {
position: absolute;
top: 350px;
left: 100px;
height: 100px;
width: 200px;
z-index: 2000;
}
#headline {
text-align: center;
position: absolute;
top: 10%;
left: 35%;
color: #00E3FF;
line-height: 20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size: 12px;
}
#value {
background-color: #5E5757;
color: white;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
}
#title {
color: white;
text-align: center;
padding-top: 10px;
}
img {
width: 100%;
display: block;
}
/*.img{
border-width:thick;
border-style:solid;
border-color:white;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
bottom: 18px;
}
.column-left{
float: left;file:///Volumes/MMG/webfix/video/techpic1.jpg
width: 30%;
padding: 1%;
}
#left-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#middle-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#right-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
padding-bottom:135px;
}
.more {
position: relative;
display:inline-block;
color:black;
font-weight: bold;
top: 20px;
right: 31px;
background-color:white;
border-bottom-left-radius: 10px;
padding: 6px;
margin: 9px;
width: 30%;
}
#button3, #button2{
color: black;
position:relative;
top: 36px;
right:36px;
}
#button1{
color:black;
position:relative;
top: 155px;
right:36px;
}
*/
/*NAV BAR*/
#import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html {
font-size: 62.5%;
font-family: 'Open Sans', sans-serif;
}
body {
font-size: 1.6rem;
min-height: 100vh;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.6rem;
}
header {
position: relative;
}
main {
padding: 2rem;
}
/***************** NAVIGATION ********************/
nav ul {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background: #670809;
}
nav ul,
nav li {
flex: 1;
}
nav li:last-child {
border-bottom: none;
}
nav a {
text-decoration: none;
color: inherit;
display: block;
font-size: 1.8rem;
}
nav a:hover {
background:
/*#adacac*/
#555;
color: #fff;
}
nav li {
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
nav input,
nav label {
display: none;
width: 36px;
height: 36px;
background: #555;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 1.6rem;
border-radius: 4px;
}
nav label {
position: absolute;
top: 8px;
right: 8px;
transition: .4s;
}
nav label:hover {
cursor: pointer;
}
nav label:before {
font-family: FontAwesome;
font-size: 24px;
content: "\f0c9";
text-align: center;
}
/*************** MEDIA QUERIES *******************/
nav ul {
transform: translateY(0);
box-shadow: 0 0 5px rgba(0, 0, 0, .7);
transition: all .5s;
}
nav li {
flex: none;
width: 100%;
border-bottom: solid 1px #777;
}
nav input[type="checkbox"]:checked + ul {
transform: translateY(-100%);
width: 100%;
background: #999;
transition: all .5s;
}
nav label {
display: block;
}
nav input[type="checkbox"]:checked + ul li:nth-child(1) {
background: #777;
color: #fff;
}
#css-toggle-menu {
float: right;
margin: 10px;
}
<footer>
<a id="enroll" href="https://www.mnstate.edu/eservices/"> Enroll Now</a>
<div class="text">
MaKayla McLain-Graning © 2016</div>
<br>
<img class="msum" src="https://www.mnstate.edu/uploadedImages/Content/Marketing/logos/MSUM_Signature_Horiz_Color.jpg?n=808" alt="msum logo" />
</footer>
Preview
Check out the snippet below. The big thing you were missing is using the CSS left and transform properties. (You'll notice I also included the vendor-prefixed variants of the transform property to ensure it works on all major browsers). Additionally, you'll notice I replaced the absolute positioning that you had set for the .msum CSS selector with relative positioning. This is more optimal in this case and will ensure your image does not overlap with the text also present in the footer.
.msum {
position: relative;
bottom: 5%;
width: 100%;
left: 50%; /* Distribute from left-edge */
display: block;
width: 200px;
height: 50px;
/* Center horizontally */
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
/*Rest of Code*/
figure.stayssame {
width: 100%;
}
figure video {
width: 100%;
height: 80%;
}
p {
padding: 2%;
}
.video-txt {
position: absolute;
top: 30%;
z-index: 9;
color: #FFF;
width: 100%;
text-align: center;
font-size: 40px;
}
object {
position: absolute;
left: 0%;
top: -5%;
z-index: 10;
width: 15%;
}
/*ALL CODE FROM DESKTOP*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
font-family: 'Inconsolata', monospace;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
line-height: 1.4em;
}
.squish {
margin-right: 125px;
}
.text {
padding: 5px;
}
.button {
margin-bottom: 50px;
margin-left: 20%
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
background-color: #670809;
height: 70px;
letter-spacing: 1px;
line-height: 55px;
padding: 9px;
word-spacing: 5px;
}
header,
h1,
h2 {
font-family: 'Orbitron', sans-serif;
}
.space {
padding: 5px;
color: white;
}
nav {
float: left;
width: 100%;
}
nav ul li.active a {
background-color: none;
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: #00E3FF;
}
nav ul li a:visited {
text-decoration: none;
}
/*nav ul li a {
display:inline-block;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;
color: white;
text-decoration:none;
}
a:hover {
/*background-color:none;
color:black;
background-color:#00E3FF;
}
nav ul li a:visited {
color:black;
text-decoration:none;
}
*/
form {
padding-left: 20%;
}
/* header tags */
h1 {
text-align: center;
color: #013397;
font-size: 40px;
padding-top: 50px;
}
h2 {
text-align: center;
color: #00E3FF;
font-size: 30px;
margin: 5px;
padding: 20px;
}
p {
text-align: left;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
#box {
background-color: #94DBEC;
}
hr.style2 {
border-top: 3px double #00E3FF;
width: 300px
}
section {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
}
img.adjustable {
width: 100%;
max-width: 100%;
height: auto;
/* max-width: 400px;
max-height: 400px;*/
margin: 1em;
/*width: 90%;
margin:5%;*/
}
#inner {
height: 100px;
padding: 15px 0;
}
#container {
height: 100%;
}
.imgbox5 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox4 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox3 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox2 {
padding-right: 30px;
}
.imgbox {
padding-right: 30px;
padding-left: 0px;
}
#firstpara {
background-color: #5E5757;
color: white;
}
#secpara {
background-color: #5E5757;
color: white;
}
#thirdpara {
background-color: #5E5757;
color: white;
}
#fourthpara {
background-color: #5E5757;
color: white;
}
#primary {
background-color: #5E5757;
color: white;
}
#enroll {
margin: 0;
padding: 0;
}
/*section{
text-align: center;
width: 100%;
}*/
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
padding-bottom: 2%;
background-color: #670809;
font-family: 'Inconsolata', monospace;
/* text */
padding-left: 10px;
padding-top: 15px;
color: #ffffff;
font-size: 15px;
text-align: center;
}
a {
color: white;
}
a,
a:active {
color: white;
text-decoration: none;
}
.side {
left-margin: 10px;
right-margin: 10px;
}
object {
position: absolute;
top: 350px;
left: 100px;
height: 100px;
width: 200px;
z-index: 2000;
}
#headline {
text-align: center;
position: absolute;
top: 10%;
left: 35%;
color: #00E3FF;
line-height: 20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size: 12px;
}
#value {
background-color: #5E5757;
color: white;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
}
#title {
color: white;
text-align: center;
padding-top: 10px;
}
img {
width: 100%;
display: block;
}
/*.img{
border-width:thick;
border-style:solid;
border-color:white;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
bottom: 18px;
}
.column-left{
float: left;file:///Volumes/MMG/webfix/video/techpic1.jpg
width: 30%;
padding: 1%;
}
#left-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#middle-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#right-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
padding-bottom:135px;
}
.more {
position: relative;
display:inline-block;
color:black;
font-weight: bold;
top: 20px;
right: 31px;
background-color:white;
border-bottom-left-radius: 10px;
padding: 6px;
margin: 9px;
width: 30%;
}
#button3, #button2{
color: black;
position:relative;
top: 36px;
right:36px;
}
#button1{
color:black;
position:relative;
top: 155px;
right:36px;
}
*/
/*NAV BAR*/
#import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html {
font-size: 62.5%;
font-family: 'Open Sans', sans-serif;
}
body {
font-size: 1.6rem;
min-height: 100vh;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.6rem;
}
header {
position: relative;
}
main {
padding: 2rem;
}
/***************** NAVIGATION ********************/
nav ul {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background: #670809;
}
nav ul,
nav li {
flex: 1;
}
nav li:last-child {
border-bottom: none;
}
nav a {
text-decoration: none;
color: inherit;
display: block;
font-size: 1.8rem;
}
nav a:hover {
background:
/*#adacac*/
#555;
color: #fff;
}
nav li {
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
nav input,
nav label {
display: none;
width: 36px;
height: 36px;
background: #555;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 1.6rem;
border-radius: 4px;
}
nav label {
position: absolute;
top: 8px;
right: 8px;
transition: .4s;
}
nav label:hover {
cursor: pointer;
}
nav label:before {
font-family: FontAwesome;
font-size: 24px;
content: "\f0c9";
text-align: center;
}
/*************** MEDIA QUERIES *******************/
nav ul {
transform: translateY(0);
box-shadow: 0 0 5px rgba(0, 0, 0, .7);
transition: all .5s;
}
nav li {
flex: none;
width: 100%;
border-bottom: solid 1px #777;
}
nav input[type="checkbox"]:checked + ul {
transform: translateY(-100%);
width: 100%;
background: #999;
transition: all .5s;
}
nav label {
display: block;
}
nav input[type="checkbox"]:checked + ul li:nth-child(1) {
background: #777;
color: #fff;
}
#css-toggle-menu {
float: right;
margin: 10px;
}
<footer>
<a id="enroll" href="https://www.mnstate.edu/eservices/"> Enroll Now</a>
<div class="text">
MaKayla McLain-Graning © 2016</div>
<br>
<img class="msum" src="https://www.mnstate.edu/uploadedImages/Content/Marketing/logos/MSUM_Signature_Horiz_Color.jpg?n=808" alt="msum logo" />
</footer>
.msum {
position: absolute;
bottom: 5%;
width: 100%;
display: block;
width: 200px;
height: 50px;
left:50%;
margin-left:-100px;
}
/*Rest of Code*/
figure.stayssame {
width: 100%;
}
figure video {
width: 100%;
height: 80%;
}
p {
padding: 2%;
}
.video-txt {
position: absolute;
top: 30%;
z-index: 9;
color: #FFF;
width: 100%;
text-align: center;
font-size: 40px;
}
object {
position: absolute;
left: 0%;
top: -5%;
z-index: 10;
width: 15%;
}
/*ALL CODE FROM DESKTOP*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
font-family: 'Inconsolata', monospace;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
line-height: 1.4em;
}
.squish {
margin-right: 125px;
}
.text {
padding: 5px;
}
.button {
margin-bottom: 50px;
margin-left: 20%
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
background-color: #670809;
height: 70px;
letter-spacing: 1px;
line-height: 55px;
padding: 9px;
word-spacing: 5px;
}
header,
h1,
h2 {
font-family: 'Orbitron', sans-serif;
}
.space {
padding: 5px;
color: white;
}
nav {
float: left;
width: 100%;
}
nav ul li.active a {
background-color: none;
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: #00E3FF;
}
nav ul li a:visited {
text-decoration: none;
}
/*nav ul li a {
display:inline-block;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;
color: white;
text-decoration:none;
}
a:hover {
/*background-color:none;
color:black;
background-color:#00E3FF;
}
nav ul li a:visited {
color:black;
text-decoration:none;
}
*/
form {
padding-left: 20%;
}
/* header tags */
h1 {
text-align: center;
color: #013397;
font-size: 40px;
padding-top: 50px;
}
h2 {
text-align: center;
color: #00E3FF;
font-size: 30px;
margin: 5px;
padding: 20px;
}
p {
text-align: left;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
#box {
background-color: #94DBEC;
}
hr.style2 {
border-top: 3px double #00E3FF;
width: 300px
}
section {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
}
img.adjustable {
width: 100%;
max-width: 100%;
height: auto;
/* max-width: 400px;
max-height: 400px;*/
margin: 1em;
/*width: 90%;
margin:5%;*/
}
#inner {
height: 100px;
padding: 15px 0;
}
#container {
height: 100%;
}
.imgbox5 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox4 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox3 {
padding-right: 30px;
padding-left: 0px;
}
.imgbox2 {
padding-right: 30px;
}
.imgbox {
padding-right: 30px;
padding-left: 0px;
}
#firstpara {
background-color: #5E5757;
color: white;
}
#secpara {
background-color: #5E5757;
color: white;
}
#thirdpara {
background-color: #5E5757;
color: white;
}
#fourthpara {
background-color: #5E5757;
color: white;
}
#primary {
background-color: #5E5757;
color: white;
}
#enroll {
margin: 0;
padding: 0;
}
/*section{
text-align: center;
width: 100%;
}*/
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
padding-bottom: 2%;
background-color: #670809;
font-family: 'Inconsolata', monospace;
/* text */
padding-left: 10px;
padding-top: 15px;
color: #ffffff;
font-size: 15px;
text-align: center;
}
a {
color: white;
}
a,
a:active {
color: white;
text-decoration: none;
}
.side {
left-margin: 10px;
right-margin: 10px;
}
object {
position: absolute;
top: 350px;
left: 100px;
height: 100px;
width: 200px;
z-index: 2000;
}
#headline {
text-align: center;
position: absolute;
top: 10%;
left: 35%;
color: #00E3FF;
line-height: 20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size: 12px;
}
#value {
background-color: #5E5757;
color: white;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
}
#title {
color: white;
text-align: center;
padding-top: 10px;
}
img {
width: 100%;
display: block;
}
/*.img{
border-width:thick;
border-style:solid;
border-color:white;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
bottom: 18px;
}
.column-left{
float: left;file:///Volumes/MMG/webfix/video/techpic1.jpg
width: 30%;
padding: 1%;
}
#left-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#middle-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
}
#right-box{
background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
padding-bottom:135px;
}
.more {
position: relative;
display:inline-block;
color:black;
font-weight: bold;
top: 20px;
right: 31px;
background-color:white;
border-bottom-left-radius: 10px;
padding: 6px;
margin: 9px;
width: 30%;
}
#button3, #button2{
color: black;
position:relative;
top: 36px;
right:36px;
}
#button1{
color:black;
position:relative;
top: 155px;
right:36px;
}
*/
/*NAV BAR*/
#import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html {
font-size: 62.5%;
font-family: 'Open Sans', sans-serif;
}
body {
font-size: 1.6rem;
min-height: 100vh;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.6rem;
}
header {
position: relative;
}
main {
padding: 2rem;
}
/***************** NAVIGATION ********************/
nav ul {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background: #670809;
}
nav ul,
nav li {
flex: 1;
}
nav li:last-child {
border-bottom: none;
}
nav a {
text-decoration: none;
color: inherit;
display: block;
font-size: 1.8rem;
}
nav a:hover {
background:
/*#adacac*/
#555;
color: #fff;
}
nav li {
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
nav input,
nav label {
display: none;
width: 36px;
height: 36px;
background: #555;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 1.6rem;
border-radius: 4px;
}
nav label {
position: absolute;
top: 8px;
right: 8px;
transition: .4s;
}
nav label:hover {
cursor: pointer;
}
nav label:before {
font-family: FontAwesome;
font-size: 24px;
content: "\f0c9";
text-align: center;
}
/*************** MEDIA QUERIES *******************/
nav ul {
transform: translateY(0);
box-shadow: 0 0 5px rgba(0, 0, 0, .7);
transition: all .5s;
}
nav li {
flex: none;
width: 100%;
border-bottom: solid 1px #777;
}
nav input[type="checkbox"]:checked + ul {
transform: translateY(-100%);
width: 100%;
background: #999;
transition: all .5s;
}
nav label {
display: block;
}
nav input[type="checkbox"]:checked + ul li:nth-child(1) {
background: #777;
color: #fff;
}
#css-toggle-menu {
float: right;
margin: 10px;
}
<footer>
<a id="enroll" href="https://www.mnstate.edu/eservices/"> Enroll Now</a>
<div class="text">
MaKayla McLain-Graning © 2016</div>
<br>
<img class="msum" src="https://www.mnstate.edu/uploadedImages/Content/Marketing/logos/MSUM_Signature_Horiz_Color.jpg?n=808" alt="msum logo" />
</footer>
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;
}
So I am developing a little forum and I ran into a little design problem. The sidebar in each post is supposed to match the height of the content (the text written) but the sidebar only goes to the height necessary to display everything and then stops.
JSFiddle: http://jsfiddle.net/9stPU/5/
CSS:
.forumContent {
list-style-type: none;
background: #34495e;
letter-spacing: 1px;
width: 1170px;
margin: 0;
color: white;
}
.forumContent li {
padding: 0 0 0 10px; /* 5px 0 5px 10px */
margin-left: -40px;
min-height: 41px;
overflow: auto;
border-bottom: 1px solid #000;
}
.forumContent li:last-child {
border-bottom: none;
}
.forumContent li h3 {
margin: 0;
padding: 0;
font-size: 14px;
}
.forumContent li small {
font-size: 9px;
}
.forumContent a {
color: white;
text-decoration: none;
width: 100%;
height: 100%;
}
.forumContent li:hover {
background: #3E5368;
}
.forumContent a li {
float: left;
width: 366px;
}
.forumContent a li:first-child {
width: 100px;
}
.forumContent li .new b {
font-size: 12px;
}
.forumContent li .new {
float: right;
margin-right: 8px;
margin-top: -2px;
font-size: 9px;
background: #2c3e50;
padding: 4px;
border-radius: 6px;
}
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
min-height: 100%;
height: 100%;
}
.topicUser h3 {
margin-left: 2 .5px !important;
}
.topicUser small {
position: absolute;
margin-top: -15px;
margin-left: 7 .5px;
}
.topicUser p {
margin-top: 2px;
margin-left: 3px;
}
.topicContent {
width: 1060px;
float: right;
height: 100%;
}
.topicContent p {
padding: 5px;
}
You can use display:table; properties: DEMO
a single patch to test it ;
li {
display:table;
}
li > div {
display:table-cell;
float:none!important;/* float kills display; so do not use it with display; */
vertical-align:top;
}
Put:
.forumContent li {
padding: 0 0 0 10px; /* 5px 0 5px 10px */
margin-left: -40px;
min-height: 41px;
overflow: auto;
border-bottom: 1px solid #000;
position: relative;
}
and
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
min-height: 100%;
height: 100%;
position:absolute;
}
notice position properties.
Look here http://jsfiddle.net/9stPU/6/
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">