In Chrome, my website is working as I would like it to. But for some reason, in Firefox, the CSS is not being linked whatsoever and I can't for the life of me figure out why.
The only thing that's different in Firefox when I go into the inspector, the browser has added a </link> to the end of the CSS link, but I can't get rid of it because I didn;t actually code it.
Does anyone have any idea what could be causing this issue?
The website is: http://www.renegademagsu.com
And here's my header section HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Renegade Magazine</title>
<link rel="stylesheet" type="type/css" href="<?php bloginfo('template_directory'); ?>/reset.css" />
<link rel="stylesheet" type="type/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
CSS
/*
Theme Name: Renegade
Theme URI: N/A
Author: Noelle Devoe
Author URI: http://www.noellesnotes.com
Version: 1.0
*/
body {
background-color: #000;
font-family:'Source Sans Pro', Arial;
font-size: 18px;
}
b, strong {
font-weight: bold;
}
.container {
width: 960px;
margin: 0 auto;
}
header {
width: 100%;
height: 135px;
}
.logo {
width: 260px;
height: 135px;
float: left;
}
nav {
width: 685px;
height: 135px;
padding-left:15px;
float: left;
}
nav ul li {
float: left;
line-height: 135px;
position: relative;
}
nav ul li a {
font-size: 24px;
color: white;
background-color: black;
font-weight: bold;
margin-right: 20px;
text-decoration: none;
text-transform: uppercase;
display: block;
}
nav ul li a:hover {
text-decoration: underline;
}
nav ul ul {
width: 200px;
height: 50px;
position: absolute;
top: 85px;
left: 0;
display: none;
z-index: 1000;
}
nav ul ul li {
float: none;
line-height: 50px;
}
nav ul ul li a {
font-weight: regular;
font-size: 20px;
}
nav ul li:hover ul {
display: block;
}
.search {
width: 260px;
height: 135px;
float: left;
}
section {
width: 640px;
float: left;
}
.post-container {
width: 100%;
position: relative;
margin-bottom: 30px;
}
.post-image img {
max-width: 100%;
z-index: 1;
}
.post-content {
position: relative;
left: 30px;
width: 580px;
z-index: 2;
}
.thumbnail-positioning {
bottom: 110px;
margin-bottom: -110px;
}
.post-content p {
line-height: 22px;
margin-bottom: 15px;
}
.post-content img {
max-width: 100%;
}
.post-meta h3 {
text-transform: uppercase;
font-size: 12px;
color: white;
margin-bottom: 3px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.post-meta a {
color: white;
text-decoration: underline;
font-weight: bold;
}
.post {
background-color: white;
color: black;
padding: 15px;
}
.post ol {
list-style-type: none;
list-style-type: decimal !ie;
/*IE 7- hack*/
margin: 0;
margin-left: 3em;
padding: 0;
counter-reset: li-counter;
}
.post ol > li {
position: relative;
margin-bottom: 20px;
padding-left: 0.5em;
min-height: 3em;
border-left: 2px solid #CCCCCC;
}
.post ol > li:before {
position: absolute;
top: 0;
left: -1em;
width: 0.8em;
font-size: 3em;
line-height: 1;
font-weight: bold;
text-align: right;
color: #464646;
content: counter(li-counter);
counter-increment: li-counter;
}
.post p:last-child {
margin-bottom: 0 !important;
}
.post h1 {
font-size: 34px;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 7px;
}
.post a {
color: black;
text-decoration: none;
}
.page {
width: 550px;
margin: 0 auto;
background-color: white;
padding: 15px;
}
.page p {
line-height: 22px;
margin-bottom: 15px;
}
.page h1 {
font-size: 34px;
text-transform: uppercase;
font-weight: bold;
border-bottom: 1px solid black;
margin-bottom: 7px;
}
.leftimage {
margin: 0 10px 2px -50px;
float: left;
}
.leftcaption {
margin: 3px 0 0 80px;
font-style: italic;
font-size: 11px;
width: 220px;
}
.leftimage img {
max-width: 300px;
}
.rightimage {
margin: 0 -50px 2px 10px;
float: right;
}
.rightcaption {
margin: 3px 80px 0 0;
font-style: italic;
font-size: 11px;
width: 220px;
}
.rightimage img {
max-width: 300px;
}
aside {
width: 290px;
float: right;
}
aside h1 {
color: white;
font-size: 28px;
border-bottom: 1px solid white;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 10px;
}
aside .widget {
margin-bottom: 20px;
}
aside ul li {
margin-bottom: 10px;
}
aside ul li a {
font-size: 19px;
color: white;
text-decoration: none;
}
aside ul li a:hover {
font-size: 19px;
color: black;
background-color: white;
text-decoration: none;
}
input[type=text]{
width: 100%;
background-color: white;
color:#505358;
font-size: 18px;
}
footer {
width: 100%;
}
footer .widget {
width: 300px;
float: left;
margin-bottom: 20px;
padding-right: 20px;
}
footer h1 {
color: white;
font-size: 28px;
border-bottom: 1px solid white;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 10px;
}
footer ul li a {
font-size: 19px;
color: white;
text-decoration: none;
}
footer ul li a:hover {
font-size: 19px;
color: black;
background-color: white;
text-decoration: none;
}
.alignleft {
float: left;
margin: 0 10px 2px -45px;
}
.alignright {
float: right;
margin: 0 -45px 2px 10px;
}
.fix {
clear: both;
}
It's a typo: "type/css" instead of "text/css". Chrome is ignoring the problem, Firefox is not.
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/reset.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
Will fix you up.
Related
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>
Hello guys im having problem with my website i just updated it from wordpress 3.4.1 and i wanted to make it responsive using CSS because i've tried a lot of Responsive plugins but it didnt work. Here's the CSS code:
/*
Theme Name: Me 'n Mommy
Author: Webspec Design
Author URI: http://www.webspecdesign.com/
*/
body { font-family: 'Droid Sans', sans-serif; font-size: 13px; background-color: #e1d8af; }
h1, h2 { font-family: "corner-store",sans-serif; font-weight: 400; }
h1 { font-size: 25px; color: #6d284a; }
h1.post-title { font-family: "futura-pt",sans-serif; color: #302a22; font-size: 18px; }
h1.no-thumb { margin-top: 20px; }
h1.post-title, h1.category-title { display: block; background-color: #8bd378; text-align: right; text-transform: lowercase; padding: 15px; line-height: 1.2em; }
h1.category-title { color: #dc0083; font-size: 65px; margin-top: 20px; margin-bottom: 0px; }
h1.product-name { font-family: "futura-pt",sans-serif; text-transform: lowercase; color: #6d284a; font-size: 44px; }
h2 { font-size: 25px; color: #302a22; text-transform: lowercase; }
h3 { font-size: 18px; font-weight: normal; font-family: "futura-pt",sans-serif; line-height: 1.618em; }
h1, h2, h4 { line-height: .8em; }
a { color: #ff0098; text-decoration: none; }
a:hover { text-decoration: underline; }
address { font-style: normal; line-height: 1em; }
.location-address { float: left; }
hr { border: 0px; background-color: transparent; height: 1px; background: url('images/hr-background.png') repeat-x; }
#sidebar hr { width: 320px; margin-left: 0px; }
.thumb-right img { float: right; }
td.constrain { max-width: 200px; }
.error { color: red; font-weight: bold; }
.interior strong { color: #dc0083; }
.handwriting { font-family: "corner-store",sans-serif; font-weight: 400; }
.geometric { font-family: "futura-pt",sans-serif; }
.container { width: 935px; margin: 0 auto; }
.footer-container { width: 500px; margin: 0 auto; }
.read-more-primary, input[type="submit"] { background-color: #dc0083; color: black; text-transform: uppercase; padding: 6px 5px; border: 0px; }
.read-more-secondary, button.remove { color: white; font-size: 10px; font-weight: bold; background-color: #8d4166; display: block; padding: 5px; border: 0px; }
.read-more-primary:hover, .read-more-secondary:hover, a:hover .read-more-primary, a:hover .read-more-secondary { text-decoration: underline; }
textarea, input[type="text"] { background-color: #f2f0e5; border: 0px; background-color: #f2f0e5; border: 0px; font-size: 12px; padding-left: 5px; }
input[type="text"] { height: 25px; }
textarea { height: 75px; }
input:focus, textarea:focus { outline-color: #dc0083; }
.wpcf7 input[type="text"], .wpcf7 textarea, .wpcf7 select { width: 248px; }
.wpcf7 p { font-weight: bold; }
.wpcf7-list-item { display: block; }
.accordion { }
.accordion .accordion-record { background-color: #8BD378; margin-bottom: 20px; }
.accordion .accordion-title { font-family: "futura-pt",sans-serif; font-size: 18px; color: #302A22; cursor: pointer; margin: 8px 15px 8px 10px; }
.accordion .accordion-title a { color: #302A22; }
.accordion-arrow { float: right; height: 20px; width: 17px; background: url('images/accordion-arrows.png') no-repeat; margin-top: 4px; margin-right: 20px; }
.accordion-arrow.closed { width: 17px; background-position: 0px 0px; }
.accordion-arrow.open { width: 22px; background-position: -20px 0px; }
.accordion-content { padding: 0px 15px 15px; }
.header-top { height: 50px; position: relative; z-index: 99999; }
.header-top ul { list-style-type: none; }
.header-top li { float: left; }
.signup label { text-transform: uppercase; }
.signup label strong { text-transform: none; }
#sign-up { width: 175px; margin-left: 10px; }
.signup-form input[type="submit"] { margin-left: -2px; }
#header .cart { text-transform: uppercase; margin-left: 60px; margin-top: 3px; }
#header .cart img { vertical-align: middle; margin-right: 5px; }
#header .cart a { color: black; }
#header .cart a .cart-number { color: #ff0098; }
.social-media { margin-top: -2px; margin-left: 20px; }
.social-media ul { padding-left: 0px; }
.social-media a { text-indent: -9999em; display: block; width: 33px; height: 35px; background: url('images/social-media-icons.png') no-repeat; }
a.tw { background-position: 0px 0px; }
a.vm { background-position: -35px 0px; }
a.fb { background-position: -70px 0px; }
li.consignor-login{ margin-left: 20px; margin-top: -5px; float: right; }
.consignor-login a { display: block; text-indent: -9999em; background: url('images/consigner-login.png') no-repeat; width: 201px; height: 39px; }#consignor-packages a { color: white; }
.consignor-input { width: 155px; }
.consignor-list{ padding-left:0; width: 201px; display:none; height:0; position:absolute;}
a.consignor-list-item-link{ background: #0e3ea0; text-indent:10px; color: #fff; line-height: 39px;}
.consignor-login:hover .consignor-list { display:block; height: auto;}
#nav { height: 112px; background: url('images/nav-bg.png') repeat-x; margin-top: -25px; position: relative; z-index: 9999; }
#nav ul { list-style-type: none; padding-left: 0px; }
#nav .parent { margin: 45px auto 0 auto; }
#nav .parent li { float: left; position: relative; border-left: 1px solid #b3f6f6; padding: 0 10px; }
#nav .parent li.first { border-left: 0px; padding-left: 0px; }
#nav .parent li.last { padding-right: 0px; margin-right: 0px; }
#nav .parent a { font-family: "futura-pt",sans-serif; font-weight: 400; font-size: 18px; color: black; }
#nav a:hover, #nav a.active { color: #ff0098; }
#nav .parent li:hover .child { left: 0px; }
#nav .child { position: absolute; left: -999em; z-index: 99999; width: 100%; min-width: 220px; background-color: #5eedec; padding: 5px 10px; }
#nav .child li { margin-bottom: 5px; border-left: 0px; float: none; }
.top-left { margin-top: -15px; width: 347px; float: left; margin-left: 20px; }
.logo h1 { margin-top: -5px; }
#points { list-style-type: none; text-transform: lowercase; font-size: 20px; font-family: "futura-pt",sans-serif; font-weight: 400; text-align: right; padding-left: 0px; margin-top: 24px; }
#points li { width: 347px; height: 51px; background: url('images/bullet-background.png') no-repeat; margin-top: 10px; }
#points a { color: #302a22; margin-top: 5px; margin-right: 30px; display: block; padding-top: 3px; }
#points .handwriting { font-size: 26px; }
.top-right { float: right; }
#top-slider { position: relative; margin-top: -31px; }
#top-slider .slides { width: 548px; height: 438px; }
.photo-caption { width: 528px; height: 50px; background: url('images/caption-background.png'); position: absolute; z-index: 999; top: 388px; text-align: right; padding-right: 20px; }
.photo-caption a, .photo-caption { color: #302a22; font-family: "futura-pt",sans-serif; font-weight: 400; font-size: 20px; display: block; text-transform: lowercase; font-size: 25px; margin-right: 20px; }
#top-slider a:hover .photo-caption .handwriting { text-decoration: underline; }
.photo-caption .handwriting { font-size: 30px; }
#middle-slider { padding: 11px; background-color: #e5debf; width: 368px; height: 205px; float: left; margin-right: 35px; }
#middle-slider iframe { width: 368px; height: 205px; }
#testimonials { width: 294px; height: 220px; background: url('images/testimonials-background.png') no-repeat; float: left; position: relative; }
#testimonials blockquote { font-size: 16px; line-height: 2em; font-weight: bold; color: #7a0b4d; width: 260px; margin: 15px auto 0; text-align: center; }
#testimonials cite { font-size: 16px; font-weight: bold; color: #7a0b4d; text-align: right; display: block; width: 260px; margin: 10px auto 0; }
.testimonials-buttons { position: absolute; width: 260px; display: block; left: 20px; bottom: 45px; }
.testimonials-buttons a { margin: 0 auto; }
.employee-testimonial { margin-top: 10px; margin-bottom: 10px; }
#advertisement { padding: 11px; background-color: #e5debf; width: 155px; height: 207px; float: right; }
.dotted-line { background: url('images/dotted-line.png') repeat-x; height: 3px; margin-top: 20px; }
.bottom-portion { background-color: #e9e2c4; }
.bottom-content { background-color: #dbd4b3; margin-top: 40px; padding: 20px 50px 70px; }
.bottom-left { width: 300px; float: left; }
.bottom-left h2 { font-size: 30px; margin-bottom: -5px; margin-top: 0px; }
.bottom-left p { line-height: 20px; }
.bottom-right { width: 500px; float: right; text-align: center; line-height: 1.618em; }
#locations .location { width: 230px; }
#locations .location-left { float: left; }
#locations .location-right { float: right; }
.location-pic a { width: 222px; height: 170px; padding: 7px; background-color: #a19769; display: block; position: relative; margin-bottom: -5px; }
.location-pic span { display: inline; position: absolute; bottom: 7px; right: 7px; }
#locations h3 { margin-bottom: 3px; }
.ribbon-container { width: 1005px; margin: 0 auto; position: relative; top: -110px; }
.ribbon { background: url('images/ribbon.png') no-repeat; width: 572px; height: 91px; float: right; text-transform: lowercase; font-size: 25px; }
.ribbon-content { margin: 32px auto 0; width: 475px; }
.ribbon a { color: white; }
.ribbon .handwriting { font-size: 43px; }
.ribbon-learn-more { text-transform: uppercase; font-family: 'Droid Sans', sans-serif; font-size: 16px; font-weight: bold; margin-left: 25px; }
.interior { background-color: #e9e2c3; padding: 0 15px 20px; width: 930px; margin: -31px auto 40px; }
#sidebar { float: right; width: 350px; padding-top: 20px; margin-right: 10px; }
#interior-content { float: right; width: 560px; }
#interior-content.no-sidebar { float: none; width: 100%; }
.callout { padding: 10px; display: block; color: white; }
#sidebar .callout { width: 300px; margin-bottom: 10px; clear:both; }
.callout-pink { background-color: #FF0098; }
.callout-brown { background-color: #A19769; }
.callout-green { background-color: #8BD378; } .callout-green, .callout-green h2, .callout-green a { color: #302A22 !important; }
.callout a { color: white; }
.footer-break { background-color: #b3b3d7; height: 18px; }
#footer { background-color: #02c4c6; text-align: center; font-size: 11px; color: white; padding: 15px 0 50px; line-height: 1.5em; position: relative; z-index: 1; }
#footer a { color: white; }
.footer-pattern { height: 260px; background: url('images/footer-pattern.png'); margin-top:-10px; position: relative; z-index: 0 }
.testimonial-masonry .testimonial-box { background-color: #EFEBD5; padding: 10px; margin-left: 10px; width: 430px; margin-bottom: 10px; float: left;
-webkit-border-radius: 15px;
border-radius: 15px; }
.testimonial-box cite { font-size: 11px; font-weight: bold; color: #7a0b4d; text-align: right; display: block; margin: 10px 10px; }
.older-posts { float: left; }
.newer-posts { float: right; }
.wp-caption { padding: 7px; background-color: #A19769; border: 0px; }
.wp-caption p.wp-caption-text { font-size: 13px; line-height: 2em; font-weight: bold; color: white; }
.package, .column { float: left; margin-left: 10px; padding: 10px; }
.package img { max-width: 100%; }
.column { width: 140px; }
.package { min-height: 570px; width: 160px; }
.package ul { padding-left: 0px; list-style-type: none; margin-left: 0px; }
.package li { padding-left: 0px; margin-left: 0px; margin-bottom: 5px; }
h2.package-title { text-align: center; font-family: "futura-pt",sans-serif; }
.package-price { display: block; text-align: center; font-family: "futura-pt",sans-serif; font-size: 20px; color: #302A22; }
.package-add { display: block; text-align: center; margin-top: 10px; }
#package-1 { margin-left: 0px; }
#package-1, #package-3 { background-color: #A19769 }
#package-2 { background-color: #8BD378; }
#store-rotator .flexslider { height: 204px; margin-bottom: 0px; }
.shopp-breadcrumbs { text-transform: lowercase; text-align: right; display: block; background-color: #c0dca3; font-size: 13px; padding: 5px 10px; color: #6d284a; }
.shopp-breadcrumbs a, .shopp-breadcrumbs strong { color: #6d284a; }
#product-images .slides { width: 430px; height: 270px; float: left; background-color: #A19769;
-webkit-box-shadow: 0px 0px 8px 1px rgba(255, 255, 255, .8);
box-shadow: 0px 0px 8px 1px rgba(255, 255, 255, .8);}
#product-images .flex-control-thumbs { float: right; width: 97px; }
#product-images .flex-control-thumbs img {
-webkit-border-radius: 15px;
border-radius: 15px; }
#product-images .flex-control-thumbs li { margin-bottom: 10px; float: none; width: 97px; height: 97px; }
#shopp .product-variations { float: left; }
#shopp .product-variations label { font-weight: bold; font-size: 16px; }
#product-purchase select { margin-bottom: 10px; margin-top: 10px; }
#product-purchase { float: right; text-align: right; }
.product-price { display: block; font-weight: bold; font-size: 30px; text-align: right; color: #6d284a; }
.atc { display: block; float: right; }
#shopp .category-view { margin: 20px 0px; text-align: center; }
#shopp .category-view img { margin-bottom: 5px;
-webkit-border-radius: 15px;
border-radius: 15px; }
#shopp .category-view li { float: left; width: 155px; margin: 0px 15px; }
#shopp .category-view a { color: black; }
.shopp-sidebar { text-align: right; text-transform: lowercase; }
.shopp-sidebar .sidebar-my { margin-top: 60px; margin-bottom: 20px; }
.shopp-sidebar .sidebar-my a { display: block; color: #02c4c6; font-size: 30px;
text-shadow: 0px 0px 8px #ffffff; }
.sidebar-icon { display: block; float: right; height: 29px; width: 30px; background: url('images/sidebar-icons.png') no-repeat; margin-left: 10px; }
.sidebar-icon.lock { background-position: 0 0; margin-top: 5px; }
.sidebar-icon.cart { background-position: 0 -28px; }
.shopp-sidebar .shopp-categories-menu, .shopp-sidebar .shopp-categories-menu .children { list-style-type: none; }
.shopp-sidebar .shopp-categories-menu li { margin-bottom: 15px; }
.shopp-sidebar .shopp-categories-menu > li { margin-bottom: 40px; }
.shopp-sidebar .shopp-categories-menu > li li:first-child { margin-top: 15px; }
.shopp-sidebar .shopp-categories-menu a { color: #6d284a; font-size: 25px; font-family: "corner-store",sans-serif; }
.shopp-sidebar .shopp-categories-menu .children a { color: #302a22; font-size: 14px; font-weight: bold; font-family: 'Droid Sans', sans-serif; }
.rentals {background:#FFF7DB;}
.rentals tr:nth-child(even) {background:#eee;}
.rentals thead {background:#fff;}
.rentals th {padding:10px;}
.rentals td { text-align: center; min-width: 75px; padding:10px;}
#rental-form img{padding:5px; border:1px solid #ddd;background:#fff;}
.float-left{float:left; width:50%;}
.float-right{float:right;width:30%;}
.rentals tr.error { background-color: #ffdbdb; }
.consignor-package { margin-bottom: 20px; color: white; }
.consignor-package.platinum { background-color: #231F20; }
.consignor-package.gold { background-color: #A99A6F; }
.consignor-package.silver { background-color: #948A88; }
.consignor-package.pink { background-color: #FF0098; }
.consignor-package-heading { padding: 1px 10px; }
.consignor-package-heading h1 { color: white; font-family: 'Droid Sans', sans-serif; line-height: 1em; text-transform: uppercase; font-size: 18px; }
.consignor-package-callout, .consignor-package-benefits { padding: 5px 10px; }
I wanted to make my site responsive thru several plugins but it didnt work so im hoping someone can help me do it thru CSS, i hope you can help me. Thanks
Edit: I added the header for more relative info on how to make site responsive.
<?php
if(strpos($_SERVER['REQUEST_URI'], 'checkout') !== false && (!isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] !== 'on')) {
if(!headers_sent()) {
header("Status: 301 Moved Permanently");
header(sprintf(
'Location: https://%s%s'.(!empty($_SERVER['QUERY_STRING'])?'?'.$_SERVER['QUERY_STRING']:''),
$_SERVER['HTTP_HOST'],
$_SERVER['REQUEST_URI']
)
);
exit();
}
}
else if(strpos($_SERVER['REQUEST_URI'], 'checkout') === false && (isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] == 'on')) {
if(!headers_sent()) {
header("Status: 301 Moved Permanently");
header(sprintf(
'Location: http://%s%s',
$_SERVER['HTTP_HOST'],
$_SERVER['REQUEST_URI']
)
);
exit();
}
} ?>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<title><?php wp_title() ?></title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/css/normalize.css">
<link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/style.css?20140717">
<link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/css/flexslider.css">
<!--[if lte IE 9]><link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/css/ie9.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/css/ie7.css"><![endif]-->
<link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//use.typekit.net/kxd7fvf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/css/hummanity/hummanity.css">
<script src="<?php bloginfo('template_directory') ?>/js/jquery.flexslider-min.js"></script>
<script src="<?php bloginfo('template_directory') ?>/js/jquery.masonry.min.js"></script>
<script src="<?php bloginfo('template_directory') ?>/js/jquery.validate.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35285936-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<?php wp_head(); ?>
</head>
<body>
<header>
<div id="header">
<div class="header-top">
<div class="container cf">
<ul>
<li class="signup">
<form name="constant-contact-signup" action="<?php echo constant_contact_current_page_url() ?>" method="post" class="signup-form">
<label for="sign-up"><strong>eOffers</strong> Sign Up:</label>
<input type="text" name="fields[email_address][value]" id="sign-up"<?php echo ($_POST['fields']['email_address']['value']) ? 'value="Thanks for signing up."':'' ?>>
<input type="hidden" name="cc_newsletter[]" value="2">
<input type="hidden" id="cc_referral_url" name="cc_referral_url" value="<?php echo urlencode(constant_contact_current_page_url()) ?>" />
<input type="hidden" id="cc_redirect_url" name="cc_redirect_url" value="<?php echo apply_filters('constant_contact_form_redirect_url', urlencode($redirect_url)) ?>" />
<input type="hidden" name="uniqueformid" value="constant_contact_api_widget-2">
<input type="submit" value="subscribe" class="read-more-primary">
</form>
</li>
<li class="cart">
<a href="<?php shopp('cart','url') ?>"><img src="<?php bloginfo('template_directory') ?>/images/cart.png">
View Cart <span class="cart-number">(<?php shopp('cart','total-items') ?>)</span></a>
</li>
<li class="social-media">
<ul>
<li>Twitter</li>
<li>Vimeo</li>
<li>Facebook</li>
</ul>
</li>
<li class="consignor-login">Consignor Login
<ul class="consignor-list">
<li class="consignor-list-item">
<a class="consignor-list-item-link" href="http://ankeny.consignoraccess.com" target="_new">Ankeny</a>
</li>
<li class="consignor-list-item">
<a class="consignor-list-item-link" href="http://wdm.consignoraccess.com" target="_new">West Des Moines</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="nav">
<?php
$is_child = $post->post_parent;
if($is_child) {
$top_ancestor = end(get_post_ancestors($post->ID));
$top_ancestor = get_post($top_ancestor);
}
?>
<div class="container cf">
<ul class="parent cf">
<li class="first">
Home
</li>
<li>
Shop Online
<ul class="child">
<li>Gift Cards</li>
<li>Hair Accessories</li>
<?php if(get_pages( 'child_of=9' )) : ?><?php wp_list_pages( array('child_of'=> 9, 'title_li'=>'') ); ?><?php endif; ?>
</ul>
</li>
<li>
Sell Your Items
<?php if(get_pages( 'child_of=11' )) : ?><ul class="child"><?php wp_list_pages( array('child_of'=> 11, 'title_li'=>'') ); ?></ul><?php endif; ?>
</li>
<li>
Baby & Toddler Equipment Rentals
<?php if(get_pages( 'child_of=14' )) : ?><ul class="child"><?php wp_list_pages( array('child_of'=> 14, 'title_li'=>'') ); ?></ul><?php endif; ?>
</li>
<li>
About
<?php if(get_pages( 'child_of=19' )) : ?><ul class="child"><?php wp_list_pages( array('child_of'=> 19, 'title_li'=>'') ); ?></ul><?php endif; ?>
</li>
<li>
Fundraising & Charities
<?php if(get_pages( 'child_of=21' )) : ?><ul class="child"><?php wp_list_pages( array('child_of'=> 21, 'title_li'=>'') ); ?></ul><?php endif; ?>
</li>
<li class="last">
Contact Us
<?php if(get_pages( 'child_of=23' )) : ?><ul class="child"><?php wp_list_pages( array('child_of'=> 23, 'title_li'=>'') ); ?></ul><?php endif; ?>
</li>
</ul>
</div>
</div>
</div>
</header>
Just installing a plugin doesn't make your site responsive. I don't know what you have installed but, check your responsive plugin documentation for more information. May be there are some additional steps to follow.
Anyway, you don't have to mess with plugins. You can get this done with css media queries. You can find more about media queries from foloowing links.
CSS media queries - Mozilla developer guide
Media queries for standard devices
For an example, Following is the media query that works for iPhone6
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Your custom css goes here*/
}
Hope this will help you.
Firstly i suggest u can use #media file in css to make it responsive, set the width according to the screen and set all the elements value again.
Second method use rem value in elements because it sets according the screen automatically, we don't have to make media file.
E.g. like u have given width 18px just change px value into rem, like 18rem
change all the value in your code it will help u to make it responsive.
ok, i am having problems with the ndex page im re building ( due to flash drive getting corrupted. :(, i want the nav bar to sit flush with the slider which is below it... at the moement the nav bat is way too the left and it doesnt look very good :/ e.g--->
i will give you both my html and my css to refer to:
HTMLof nav and slider
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="">sports news
<ul>
<li>headlines</li>
<li>when an where</li>
<li>rewind</li>
<li>manager of the week </li>
</ul>
<li class="">music
<ul>
<li>whats new</li>
<li>the classic corner</li>
<li>hall of fame</li>
</ul>
</li>
<li class="news">on air
<ul>
<li>schedule</li>
<li>presenters</li>
<li>competitions</li>
<li>guests</li>
</ul>
</li>
<li class="contact">events</li>
<li class="contact">gallery</li>
<li class="contact">Contact</li>
</ul>
</div>
<div class="cleaner"></div>
<div id="middle">
<div id="slider">
<img src="images/slideshow/01.jpg" alt="slideshow 01" title="wow" />
<img src="images/slideshow/02.jpg" alt="slideshow 02" title="wow" />
<img src="images/slideshow/03.jpg" alt="slideshow 03" title="wow" />
<img src="images/slideshow/04.jpg" alt="slideshow 04" title="wow" />
<img src="images/slideshow/05.jpg" alt="slideshow 05" title="wow" />
</div>
</div>
CSS:
body {
margin: 0px;
padding: 0px;
color: #4d4638;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background: url(images/tooplate_body.jpg);
background-color: #c2b8a1;
background-repeat: repeat-x;
background-position: top
}
a, a:link, a:visited { color: #000; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
.orange {
color: #FC0;
}
.green {
color: #CF6;
}
p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
em { color: #000; font-weight: bold; font-style: normal }
h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 20px 0; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0; }
h3 { font-size: 24px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }
a.more {
clear: both;
display: block;
width: 87px;
height: 31px;
padding-right: 15px;
line-height: 30px;
text-align: center;
color: #000;
font-weight: bold;
background: url(images/btn.png);
}
a.more:hover {
text-decoration: none;
color: #960;
}
.float_l { float: left }
.float_r { float: right }
.margin { margin: 10px; }
.image_wrapper {
display: inline-block;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 4px;
margin-bottom: 5px;
}
.image_fl {
float: left;
margin: 3px 15px 0 0;
}
.image_fr {
float: right;
margin: 3px 0 0 15px;
}
.list {
margin: 20px 0 20px 20px;
padding: 0;
list-style: none;
}
.list li {
color:#000;
margin: 0 0 5px 0;
padding: 0 0 0 25px;
background: url(images/list.png) no-repeat scroll 0 5px;
}
.list li a {
color: #000;
font-weight: normal;
}
.list li a:hover {
text-decoration: underline;
}
#header {
width: 960px;
padding: 10px 0;
margin: 0 auto;
}
#site_title {
float: left;
}
#site_title h1 {
margin: 30px 0 0 0;
padding: 0;
}
#site_title h1 a {
display: block;
width: 278px;
height: 50px;
color: #fff;
text-indent: -10000px;
background: url(images/logo.png) no-repeat;
}
/* menu */
#menu {
float: right;
width: 632px;
height: 48px;
margin-top: 40px;
background: url(images/menu.png)
}
#menu ul {
width: 600px;
margin: 0 auto;
padding: 0;
list-style: none;
}
#menu ul li {
float: left;
display: block;
padding: 0;
margin: 0;
display: inline;
text-align: center;
}
#menu ul li a {
display: block;
width: 116px;
padding: 9px 4px 9px 0;
margin: 0;
font-size: 14px;
text-align: center;
text-decoration: none;
color: #000000;
text-shadow: 1px 1px 1px #cec8ba;
font-weight: normal;
outline: none;
border: none;
background: url(images/menu_divider.png) center right no-repeat
}
#menu ul li a:hover, #menu ul li .current {
color: #fff;
text-shadow: 1px 1px 1px #3d3728;
}
#menu ul .last {
background: none;
}
#search_box {
float: right;
margin: 12px 0 0 0;
width: 170px;
height: 27px;
background: url(images/search.png) no-repeat;
}
#search_box form {
clear: both;
width: 170px;
height: 26px;
padding: 0;
margin: 0;
}
#searchfield {
float: left;
display: block;
height: 16px;
width: 130px;
padding: 5px;
font-size: 12px;
color: #ccc;
line-height: 0;
background: none;
border: none;
}
#searchbutton {
float: right;
display: block;
height: 26px;
width: 30px;
padding: 0;
margin: 0;
cursor: pointer;
background: none;
border: none;
}
/* end of menu */
/* slider */
#middle {
clear: both;
width: 940px;
height: 307px;
padding: 10px 40px;
margin: 0 auto;
background: url(images/middle_home.png) no-repeat
}
#middle_subpage {
clear: both;
width: 820px;
height: 207px;
padding: 60px 100px;
margin: 0 auto;
font-family: Georgia, "Times New Roman", Times, serif;
background: url(images/middle_subpage.png) no-repeat;
}
#middle_subpage h2 {
font-size: 48px;
color: #000;
}
#middle_subpage p {
font-size: 18px;
color: #000;
line-height: 30px;
}
#middle_subpage a {
color: #507921;
font-weight: normal;
}
#slider {
float: right;
width: 940px;
height: 300px;
overflow: hidden;
}
/* end of slider */
#main {
clear: both;
width: 960px;
padding: 30px 0;
margin: 0 auto;
}
.col_w960 { width: 960px; margin-bottom: 40px }
.col_w600 { width: 600px }
.col_w450 { width: 450px }
.col_w300 { width: 300px }
.col_allw300 { width: 300px; float: left; margin-right: 30px }
.col_last { margin: 0 }
.col_w960_last { margin: 0; background: none; }
.col_last { margin: 0; }
.wwd_box { clear: both; margin-top: 20px; margin-bottom: 40px }
.wwd_box img { float: left; width: 80px; margin-right: 30px }
.wwd_box h3 { font-size: 16px; margin-bottom: 0 }
.wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
.wwd_box p { margin-bottom: 30px; }
.lp_box { float: left; width: 300px; margin-right: 30px }
.lp_box h6 { font-weight: bold; color: #507921 }
.lp_box_last { margin: 0 }
.lp_box img { border: 1px solid #CCC; padding: 4px }
#cp_contact_form {
margin: 10px;
padding: 0;
width: 412px;
}
#cp_contact_form form {
margin: 0px;
padding: 0px;
}
#cp_contact_form form .input_field {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form label {
display: block;
width: 100px;
margin-right: 10px;
font-size: 14px;
}
#cp_contact_form form textarea {
width: 400px;
height: 160px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form .submit_btn {
margin: 5px 0px;
padding: 5px 14px;
text-decoration: none;
border: 1px solid #ccc;
background: #fff;
font-size: 14px;
}
#map {
margin: 10px;
}
#map img {
width: 300px;
height: 200px;
border: 1px solid #d9d3c5;
background: #b5ac98;
padding: 7px;
margin-bottom: 10px;
}
.news_box {
clear: both;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px dashed #333;
}
.news_box h2 {
font-size: 20px;
margin-bottom: 0;
}
.news_box p.date {
color: #000;
}
.news_box img {
float: left;
padding: 4px;
border: 1px solid #000;
margin-right: 30px;
}
.news_box a.more {
clear:none;
float: right;
}
.sb_lp_box {
clear: both;
margin-bottom: 20px;
}
.sb_lp_box img {
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box {
clear: both;
margin-bottom: 30px;
}
.post_box h2 {
font-size: 20px;
margin-bottom: 10px;
}
.post_box p.post_meta {
margin-bottom: 0;
}
.post_box p span.cat a {
color: #507921;
font-weight: 400;
}
.post_box img {
width: 550px;
height: 160px;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box a.more {
float: left;
}
.lbe_box {
clear: both;
margin-bottom: 20px;
}
.lbe_box h3 {
font-size: 16px;
margin-bottom: 0;
}
.lbe_box h3 a {
color: #507921;
font-size: 16px;
font-weight: normal;
}
.lbe_box h3 a span {
font-size: 12px;
color: #507921;
}
.lbe_box p {
margin-bottom: 0;
}
.lbe_box p.date {
font-size: 10px;
font-weight: 700;
color: #507921;
}
#gallery {
margin: 0;
padding: 0;
}
#gallery ul {
margin: 0;
padding: 0;
}
#gallery ul li {
display: block;
float: left;
width: 281px;
margin: 0 30px 30px 0;
padding: 8px;
border: 1px solid #d0c9b8;
background: #b6ac97;
}
#gallery ul .third {
margin: 0 0 30px 0;
}
#gallery ul li a img {
border: 1px solid #ccc;
margin-bottom: 5px;
}
#footer_wrapper {
clear: both;
width: 100%;
background: #a19882;
border-top: 10px solid #d0c8b4;
}
#footer {
width: 960px;
margin: 0 auto;
padding: 15px 0;
text-align: center;
color: #000;
background: url(images/footer.jpg) top center no-repeat
}
color: #5fa008;
font-weight: normal;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
.nav ul{
position:relative;
z-index:9999;
}
}
Add this to your CSS:
.nav {
margin-right: auto;
margin-left: auto;
clear: both;
}
I made a fiddle for testing:
http://jsfiddle.net/8x1fkpoe/
hi i am having provlems with my drop down menu on my index page, the drop down items are hidden below my image slider which is directly below my nav bar, i would like to be able to see the drop down menu items, any help would be greatly appreciated
thank you very much;
here is my html for the nav bar:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="">sports news
<ul>
<li>headlines</li>
<li>when an where</li>
<li>rewind</li>
<li>manager of the week </li>
</ul>
</li>
<li class="about"><a class="active" href="#">music</a></li>
<li class="news">events
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">events</li>
<li class="contact">gallery</li>
<li class="contact">Contact</li>
</ul>
</div>
<div class="cleaner"></div>
and here is my css:
/*
jmc
*/
body {
margin: 0px;
padding: 0px;
color: #4d4638;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background: url(images/tooplate_body.jpg);
background-color: #c2b8a1;
background-repeat: repeat-x;
background-position: top
}
a, a:link, a:visited { color: #000; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
.orange {
color: #FC0;
}
.green {
color: #CF6;
}
p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
em { color: #000; font-weight: bold; font-style: normal }
h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 20px 0; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0; }
h3 { font-size: 24px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }
a.more {
clear: both;
display: block;
width: 87px;
height: 31px;
padding-right: 15px;
line-height: 30px;
text-align: center;
color: #000;
font-weight: bold;
background: url(images/tooplate_btn.png);
}
a.more:hover {
text-decoration: none;
color: #960;
}
.float_l { float: left }
.float_r { float: right }
.tooplate_margin { margin: 10px; }
.image_wrapper {
display: inline-block;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 4px;
margin-bottom: 5px;
}
.image_fl {
float: left;
margin: 3px 15px 0 0;
}
.image_fr {
float: right;
margin: 3px 0 0 15px;
}
.tooplate_list {
margin: 20px 0 20px 20px;
padding: 0;
list-style: none;
}
.tooplate_list li {
color:#000;
margin: 0 0 5px 0;
padding: 0 0 0 25px;
background: url(images/tooplate_list.png) no-repeat scroll 0 5px;
}
.tooplate_list li a {
color: #000;
font-weight: normal;
}
.tooplate_list li a:hover {
text-decoration: underline;
}
#tooplate_header {
width: 960px;
padding: 10px 0;
margin: 0 auto;
}
#site_title {
float: left;
}
#site_title h1 {
margin: 30px 0 0 0;
padding: 0;
}
#site_title h1 a {
display: block;
width: 278px;
height: 50px;
color: #fff;
text-indent: -10000px;
background: url(images/tooplate_logo.png) no-repeat;
}
/* menu */
#tooplate_menu {
float: right;
width: 632px;
height: 48px;
margin-top: 40px;
background: url(images/tooplate_menu.png)
}
#tooplate_menu ul {
width: 600px;
margin: 0 auto;
padding: 0;
list-style: none;
}
#tooplate_menu ul li {
float: left;
display: block;
padding: 0;
margin: 0;
display: inline;
text-align: center;
}
#tooplate_menu ul li a {
display: block;
width: 116px;
padding: 9px 4px 9px 0;
margin: 0;
font-size: 14px;
text-align: center;
text-decoration: none;
color: #000000;
text-shadow: 1px 1px 1px #cec8ba;
font-weight: normal;
outline: none;
border: none;
background: url(images/tooplate_menu_divider.png) center right no-repeat
}
#tooplate_menu ul li a:hover, #tooplate_menu ul li .current {
color: #fff;
text-shadow: 1px 1px 1px #3d3728;
}
#tooplate_menu ul .last {
background: none;
}
#search_box {
float: right;
margin: 12px 0 0 0;
width: 170px;
height: 27px;
background: url(images/tooplate_search.png) no-repeat;
}
#search_box form {
clear: both;
width: 170px;
height: 26px;
padding: 0;
margin: 0;
}
#searchfield {
float: left;
display: block;
height: 16px;
width: 130px;
padding: 5px;
font-size: 12px;
color: #ccc;
line-height: 0;
background: none;
border: none;
}
#searchbutton {
float: right;
display: block;
height: 26px;
width: 30px;
padding: 0;
margin: 0;
cursor: pointer;
background: none;
border: none;
}
/* end of menu */
/* slider */
#tooplate_middle {
clear: both;
width: 940px;
height: 307px;
padding: 10px 40px;
margin: 0 auto;
background: url(images/tooplate_middle_home.png) no-repeat
}
#tooplate_middle_subpage {
clear: both;
width: 820px;
height: 207px;
padding: 60px 100px;
margin: 0 auto;
font-family: Georgia, "Times New Roman", Times, serif;
background: url(images/tooplate_middle_subpage.png) no-repeat;
}
#tooplate_middle_subpage h2 {
font-size: 48px;
color: #000;
}
#tooplate_middle_subpage p {
font-size: 18px;
color: #000;
line-height: 30px;
}
#tooplate_middle_subpage a {
color: #507921;
font-weight: normal;
}
#slider {
float: right;
width: 940px;
height: 300px;
overflow: hidden;
}
/* end of slider */
#tooplate_main {
clear: both;
width: 960px;
padding: 30px 0;
margin: 0 auto;
}
.col_w960 { width: 960px; margin-bottom: 40px }
.col_w600 { width: 600px }
.col_w450 { width: 450px }
.col_w300 { width: 300px }
.col_allw300 { width: 300px; float: left; margin-right: 30px }
.col_last { margin: 0 }
.col_w960_last { margin: 0; background: none; }
.col_last { margin: 0; }
.wwd_box { clear: both; margin-top: 20px; margin-bottom: 40px }
.wwd_box img { float: left; width: 80px; margin-right: 30px }
.wwd_box h3 { font-size: 16px; margin-bottom: 0 }
.wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
.wwd_box p { margin-bottom: 30px; }
.lp_box { float: left; width: 300px; margin-right: 30px }
.lp_box h6 { font-weight: bold; color: #507921 }
.lp_box_last { margin: 0 }
.lp_box img { border: 1px solid #CCC; padding: 4px }
#cp_contact_form {
margin: 10px;
padding: 0;
width: 412px;
}
#cp_contact_form form {
margin: 0px;
padding: 0px;
}
#cp_contact_form form .input_field {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form label {
display: block;
width: 100px;
margin-right: 10px;
font-size: 14px;
}
#cp_contact_form form textarea {
width: 400px;
height: 160px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form .submit_btn {
margin: 5px 0px;
padding: 5px 14px;
text-decoration: none;
border: 1px solid #ccc;
background: #fff;
font-size: 14px;
}
#map {
margin: 10px;
}
#map img {
width: 300px;
height: 200px;
border: 1px solid #d9d3c5;
background: #b5ac98;
padding: 7px;
margin-bottom: 10px;
}
.news_box {
clear: both;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px dashed #333;
}
.news_box h2 {
font-size: 20px;
margin-bottom: 0;
}
.news_box p.date {
color: #000;
}
.news_box img {
float: left;
padding: 4px;
border: 1px solid #000;
margin-right: 30px;
}
.news_box a.more {
clear:none;
float: right;
}
.sb_lp_box {
clear: both;
margin-bottom: 20px;
}
.sb_lp_box img {
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box {
clear: both;
margin-bottom: 30px;
}
.post_box h2 {
font-size: 20px;
margin-bottom: 10px;
}
.post_box p.post_meta {
margin-bottom: 0;
}
.post_box p span.cat a {
color: #507921;
font-weight: 400;
}
.post_box img {
width: 550px;
height: 160px;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box a.more {
float: left;
}
.lbe_box {
clear: both;
margin-bottom: 20px;
}
.lbe_box h3 {
font-size: 16px;
margin-bottom: 0;
}
.lbe_box h3 a {
color: #507921;
font-size: 16px;
font-weight: normal;
}
.lbe_box h3 a span {
font-size: 12px;
color: #507921;
}
.lbe_box p {
margin-bottom: 0;
}
.lbe_box p.date {
font-size: 10px;
font-weight: 700;
color: #507921;
}
#gallery {
margin: 0;
padding: 0;
}
#gallery ul {
margin: 0;
padding: 0;
}
#gallery ul li {
display: block;
float: left;
width: 281px;
margin: 0 30px 30px 0;
padding: 8px;
border: 1px solid #d0c9b8;
background: #b6ac97;
}
#gallery ul .third {
margin: 0 0 30px 0;
}
#gallery ul li a img {
border: 1px solid #ccc;
margin-bottom: 5px;
}
#tooplate_footer_wrapper {
clear: both;
width: 100%;
background: #a19882;
border-top: 10px solid #d0c8b4;
}
#tooplate_footer {
width: 960px;
margin: 0 auto;
padding: 15px 0;
text-align: center;
color: #000;
background: url(images/tooplate_footer.jpg) top center no-repeat
}
#tooplate_cr a {
color: #5fa008;
font-weight: normal;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
#nav ul {
z-index: 9999;
}
thanks again;
From what I can see from the snippet provided, my best guess would be to add:
position:relative;
to your:
#nav ul{
z-index:9999;
}
HOWEVER I cannot see div id="nav" in your html! If you have just not included it in your snippet, that's fine, but if this is also an error and you mean to assign that css to div class="nav", then try changing that whole block to:
.nav ul{
position:relative;
z-index:9999;
}
One final note to remember, assign z-index to elements that ALSO have a position set (be it relative or absolute etc) - as far as i'm aware, z-index doesn't work unless the block has a position attribute set to it also.
Hope this works for you.
I'm new to this but here goes. I have been developing this website http://www.panelmaster.co.uk and i have managed to solve the majority of design problems but one!
If you take a look at the site in IE the right column seems to drop down and is not aligned with the right and centre column. This problem only occurs in IE as upon testing i found it was fine in firefox and safari.
I have provided below the CSS for the website.
I would appreciate if you guys can help me with the problem.
Thanks in advance. :)
==========================
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #666;
background-image: url(images/templatemo_body_top.jpg);
background-color: #90857c;
background-repeat: repeat-x;
background-position: top;
text-align: left;
}
a:link, a:visited { color: #073475; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #073475; text-decoration: underline; }
h3 {
color: #1e7da9;
font-size: 16px;
font-weight: bold;
}
h2 {
color: #1e7da9;
font-size: 16px;
font-weight: bold;
}
h1 {
color: #696969;
font-size: 20px;
font-weight: bold;
}
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.float_l { float: left; }
.float_r { float: right; }
.margin_r20 { margin-right: 20px; }
#templatemo_body_wrapper {
width: 100%;
background: url(images/templatemo_body_bottom.png) repeat-x bottom center;
}
#templatemo_wrapper {
width: 970px;
padding: 0 10px;
margin: 0 auto;
background: url(images/templatemo_wrapper_top.jpg) no-repeat top center;
}
/* header */
#templatemo_header {
clear: both;
width: 890px;
height: 60px;
padding: 20px 40px
}
#templatemo_header #site_title {
float: left;
padding-top: 15px;
}
#site_title a {
font-size: 24px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
#site_title a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title a span {
display: block;
margin-top: 5px;
font-size: 14px;
color: #fff;
font-weight: bold;
letter-spacing: 2px;
}
/* end of header */
/* menu */
#templatemo_menu {
clear: both;
width: 970px;
height: 80px;
background: url(images/templatemo_menubar.png) no-repeat;
}
#search_box {
width: 990px;
height: 35px;
text-align: right;
}
#search_box form {
margin: 0;
padding: 5px 40px;
}
#search_box #input_field {
height: 20px;
width: 300px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
#search_box #submit_btn {
height: 24px;
width: 100px;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
color:#666666;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
#templatemo_menu ul {
width: 890px;
height: 35px;
margin: 0;
padding: 7px 40px;
list-style: none;
}
#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
margin-right: 40px;
font-size: 13px;
text-decoration: none;
color: #fff;
font-weight: normal;
outline: none;
}
#templatemo_menu ul li a:hover, #templatemo_menu ul .current {
color: #162127;
}
/* end of menu */
/* contetnt */
#templatemo_content_wrapper {
clear: both;
padding: 0px 0;
}
#templatemo_content {
float: left;
margin-left: 10px;
width: 550px;
}
#banner {
margin: 0 0 10px 0;
}
#templatemo_content #content_top {
width: 550px;
height: 20px;
background: url(images/templatemo_content_top.png) no-repeat;
}
#templatemo_content #content_bottom {
width: 550px;
height: 20px;
background: url(images/templatemo_content_bottom.png) no-repeat;
}
#templatemo_content #content_middle {
width: 510px;
padding: 5px 20px 0px 20px;
background: url(images/templatemo_content_middle.png) repeat-y;
}
#content_middle p {
text-align: justify;
}
.templatemo_sidebar_wrapper {
width: 200px;
}
.templatemo_sidebar {
width: 197px;
padding-right: 3px;
background: url(images/templatemo_sidebar_middle.png) repeat-y;
}
.templatemo_sidebar_top {
width: 200px;
height: 20px;
background: url(images/templatemo_sidebar_top.png) no-repeat;
}
.templatemo_sidebar_bottom {
width: 200px;
height: 20px;
background: url(images/templatemo_sidebar_bottom.png) no-repeat;
}
.templatemo_sidebar .sidebar_box {
clear: both;
padding-bottom: 20px;
}
.sidebar_box1 {
padding: 15px;
}
.sidebar_box h2 {
color: #2d84ad;
font-size: 16px;
padding-left: 25px;
font-weight: bold;
margin: 0 0 10px 10px;
background: url(images/templatemo_sidebar_h1.jpg) left center no-repeat;
}
.sidebar_box .sidebar_box_content {
padding: 15px;
background: url(images/templatemo_sidebar_box_top.png) top repeat-x;
}
.sidebar_box img {
border: 1px solid #999;
margin-bottom: 5px;
}
.sidebar_box .discount {
margin: 5px 0 0 0;
font-weight: bold;
}
.sidebar_box .discount span {
color: #C00;
}
.left_sidebar_box .discount a {
font-weight: bold;
color: #000;
}
.sidebar_box .categories_list {
margin: 0;
padding: 0;
list-style: none;
}
.categories_list li {
padding: 0;
margin: 0;
}
.categories_list li a {
display: block;
color: #201f1c;
padding: 5px 0 5px 20px;
background: url(images/list.png) center left no-repeat;
}
.categories_list li a:hover {
color: #439ac3;
text-decoration: none;
}
.news_box {
clear: both;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #999;
}
.news_box h4 {
padding: 2px 0;
margin: 0;
}
.news_box h4 a {
font-size: 12px;
font-weight: normal;
color: #1893f2;
}
#newsletter_box label {
display: block;
margin-bottom: 10px;
}
#newsletter_box .input_field {
height: 20px;
width: 155px;
padding: 0 5px;
margin-bottom: 10px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
}
#newsletter_box .submit_btn {
float: right;
height: 30px;
width: 80px;
margin: 0px;
padding: 3px 0 15px 0;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
}
.product_box {
float: left;
width: 223px;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #CCC;
text-align: center;
}
.product_box img {
margin-bottom: 10px;
}
.product_box h3 {
color: #2a2522;
font-size: 12px;
margin: 0 0 10px;
}
.product_box p {
margin-bottom: 10px;
}
.product_box p span {
color: #cf5902;
font-size: 14px;
font-weight: bold;
}
.product_box .detail {
float: right;
}
.product_box .addtocard {
float: left;
font-weight: bold;
padding-right: 20px;
background: url(images/templatemo_shopping_cart.png) bottom right no-repeat;
}
/* end of content */
/* footer */
#templatemo_footer_wrapper {
background: url(images/templatemo_footer.png) repeat-x;
}
#templatemo_footer {
width: 910px;
height: 85px;
padding: 50px 40px 30px 40px;
margin: 0 auto;
text-align: center;
color: #a9a098;
}
#templatemo_footer a {
color: #d7d1cc;
font-weight: normal;
}
#templatemo_footer a:hover {
text-decoration: none;
color: #FFFF33;
}
#templatemo_footer .footer_menu {
margin: 0 0 30px 0;
padding: 0px;
list-style: none;
}
.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #d7d1cc;
}
.footer_menu li a {
color: #d7d1cc;
}
.footer_menu .last_menu {
border: none;
}
/* end of footer */
/*twitter*/
#twitter_div {border-top: 0px;}
#twitter_div a {color: #0000ff !important;}
#twitter_update_list {margin-left: -1em !important; margin-bottom: 0px !important;}
#twitter_update_list li {list-style-type: none; padding-right: 5px; }
#twitter_update_list li a {color: #0000ff; padding-right: 5px;}
#twitter_div {border-bottom: 0px; padding-bottom: 10px; padding-top:6px; padding-right: 5px;}
#twitter_div a, #twitter_update_list li a {text-decoration: none !important;}
#twitter_div a:hover, #twitter_update_list li a:hover {text-decoration:underline !important;}
Try moving the DIV with the class "templatemo_sidebar_wrapper" inside the DIV with the class "templatemo_content_wrapper".
On another note, there is quite a bit wrong with your site. I'm not trying to frustrate you or put you down, but you really should invest a serious amount of time into learning web design. It took me about 1 minute and 45 seconds to load your site which has a footprint of almost 10MB. This is extremely unacceptable by any standard. I would highly recommend switching to www.squarespace.com or something similar. I can tell you right now that it would cost more money to have a web design company fix your site than it would to have them design one from the ground up.
In its current state, your website will likely hurt your business more than it will help. Good luck.
Edit: Move "templatemo_sidebar_wrapper float_r" inside "templatemo_content_wrapper" (I'm not sure this is going to work...you have a lot going on on this page). Your code currently looks like this:
<div id="templatemo_content_wrapper">
<div class="templatemo_sidebar_wrapper float_l"></div>
<div id="templatemo_content"></div>
<div id="content_bottom"></div>
</div>
<div class="templatemo_sidebar_wrapper float_r"></div>