I was using this code to create a ruler on my site:
CSS:
.ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}
/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}
div {
margin-top: 2em;
}
HTML:
<ul class="ruler"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
It was working OK with bootstrap2:
http://jsfiddle.net/Uvt5U/4/
Now I'm migrating to bootstrap3 and the ruler is broken:
http://jsfiddle.net/Uvt5U/
How can I get it working?
Kind Regards.
This is because in Bootstrap 3 box-sizing style is set to border-box, while in Bootstrap 2 it's not.
My Firebug points me that this rule is setting this style:
*, *:before, *:after {
-moz-box-sizing: border-box;
}
bootstrap.min.css line 9
Related
I'm learning how to code Wordpress themes currently, and I'm having trouble centering my navigation menu. It moves too far to the right. I have included an image to illustrate the problem with the code that I have presented.
Here is a link to a screenshot of the problem: http://i59.tinypic.com/8z1m2o.png
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
a:link,
a:visited {
color: #000;
text-decoration: none;
}
p {
line-height: 14px;
}
/* General Layout */
div.container{
max-width: 960px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
article.post {
border-bottom: 1px solid #bbbbbb;
}
article.post:last-of-type{
border-bottom: none;
}
/* Header */
.site-header {
border-bottom: 2px solid #999;
padding-top: 10px;
}
/* Footer */
.site-footer {
margin-top: 0px;
border-top: 2px solid #999;
margin-left: auto;
margin-right: auto;
}
/* Navigation */
.site-nav {
position: fixed;
left:50%;
}
.site-nav ul{
background-color: rgba(255,255,255,0.8);
padding: 0px;
margin: 0px;
}
.site-nav ul li{
text-align: center;
display: inline-block;
overflow:hidden;
text-decoration: none;
margin-right: 10px;
padding-right: 10px;
border-right: 1px solid #DDD;
}
.site-nav ul li:last-of-type {
border-right: none;
}
.site-nav has position: fixed, left: 50% so the left side of the element will be positioned in the middle of the screen. Remove this rule or give the element margin-left: -X where X is equal to half of .site-nav's width if you must use fixed positioning.
.site-nav {
width: 100%
position: fixed;
margin: 0;
}
.site-nav ul{
position: relative;
background-color: rgba(255,255,255,0.8);
padding: 0px;
margin: 0px auto;
}
I have a css element #main that for some reason is set to 0px x 0px (it was working earlier, I'm not sure what changed.) when #main ul is at 800px x 39px, so therefore the entire element is hidden
Is there a way to have the dimensions of #main automatically change without having to hard-code it in?
I've tried:
overflow: hidden, auto
float: left, center, right
width: 100%
display: block, inline-block, inline
but none of them work.
Here's the link to the html page:
http://goo.gl/Ml2FIo
here's the css code:
/* HEADERS*/
h1 {
margin-top: 80px;
text-align: center;
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 50px;
font-weight: 200;
color: #212121;
}
/* MAIN NAVIGATION */
#main {
/*width: 800px;
height: 100px;*/
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #fa5858;
position: fixed;
top: 0;
left: 0;
text-align: center;
overflow: auto;
display: inline-block;
}
#main ul {
/*overflow: hidden;*/
margin: 0 auto;
padding: 0;
position: fixed;
width: 800px;
}
#main ul li {
width: 100px;
display: block;
padding: 10px 20px;
text-align: center;
float: left;
list-style: none;
background-color: #FA5858;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#main ul li a {
text-decoration: none;
color: #ffffff;
}
/*
#main li a:hover{
opacity: 0.8;
}
*/
/*SIDE NAVIGATION*/
#side {
min-width: 100px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #ffffff;
position: fixed;
top: 0px;
right: 0px;
text-align: center;
overflow: hidden;
margin: 0 auto;
padding: 0;
display: inline-block;
border: 1px solid #fcacac;
padding: 0px 10px;
text-align: center;
float: left;
list-style: none;
}
#side a {
font-size: .75em;
text-decoration: none;
color: #505050;
line-height: 40px;
}
body {
background-image: url("http://commentnation.com/backgrounds/images/argyle_pattern_background_seamless_light_gray.gif");
background-attachment: fixed;
}
/* PARAGRAPH */
section {
background-color: #ffffff;
width: 600px;
margin: 0 auto;
/*margin-: 50px 150px 50px 150px;*/
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 1em;
font-weight: lighter;
line-height: 30px;
padding: 20px 50px;
border: 1px solid #fcacac;
text-align: justify;
text-justify: inter-word;
color: #393939;
}
/* FOOTER */
footer {
display: block;
background-color: #ffffff;
padding: 30px 100px;
margin-top: 150px;
position: relative;
/*width: 100%;
bottom: -10px;
left: -10px;*/
border-top: 1px solid #e6e6e6;
}
/* TITLE IMAGE */
#title-img {
/*position: relative;i*/
display: block;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
}
EDIT 1:
I just realized that the #main element is actually visible on a Windows Chrome, but not on Mac Chrome or Safari (which I've been using) while still having the 0px x 0px dimensions.
You can use flex. It's a nice and easy way to set width, margins, paddings for things.
Here's a wonderful "Complete guide to flexbox":
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could do something like this:
nav {
display: flex;
flex: 1;
/* you can set some width if you want
width: 400px;
*/
background-color: #eee;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
flex: 1;
list-style-type: none;
background-color: #ddd;
border: 1px solid #00f;
}
nav ul li {
display: flex;
flex: 1;
padding: 5px 10px;
margin-right: 10px;
background-color: #bbb;
border: 1px solid #f00;
}
nav ul li:last-child {
margin-right: 0;
}
<nav>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
</nav>
You can change width of nav to whatever you like, or not set it at all and give the nav flex: 1 for "100%".
I can't seem to get the bottom of the buttons to show, I tried increasing padding on the span, setting it to display: block, and increasing the height of the A and SPAN elements to no avail.
JS Fiddle Link: http://jsfiddle.net/7tcrz38r/
CSS:
/* Menu */
div#menu{
float: right;
margin-top: [[setting:menuMarginTop]];
}
div#menu ul{
list-style: none;
margin: 0;
padding: 0;
}
div#menu>ul>li{
float: left;
padding: 0;
}
div#menu li.has-sub>ul{
background: #FFFFFF;
border-top: 4px solid [[setting:color1]] !important;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
height: 110px;
display: none;
height: auto;
margin: -12px 0 0 16px;
padding: 0px;
position: absolute;
width: 170px;
z-index: 2000;
}
div#menu li.has-sub>ul>li{
border-bottom: 1px solid #EEEEEE;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
padding: 10px;
}
div#menu li.has-sub>ul>li>a{
color: #949494;
font-size: 12px !important;
text-decoration: none;
}
div#menu li.has-sub>ul>li>a:hover{
color: [[setting:color1]];
}
div#menu li:hover ul {
display: block;
}
div#menu>ul>li>a {
color: #868787;
display: inline-block;
font-size: 18px !important;
font-weight: lighter;
letter-spacing: 1px !important;
margin: 17px 15px !important;
outline: none;
position: relative;
text-decoration: none;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
}
/*div#menu>ul>li>a.active{
color: [[setting:color1]] !important;
background-color: #c3d9e3;
border: 2px solid #abd1eb;
border-radius: 5px;
}*/
div#menu>ul>li:last-child>a{
margin: 17px 0 17px 15px !important
}
div#menu>ul>li:last-child>a{
margin-right: 0 !important;
}
div#menu>ul>li>a:hover,
div#menu>ul>li>a:focus {
outline: none;
}
div#menu>ul>li>a{
overflow: hidden;
padding: 0 !important;
height: 1.3em !important;
}
div#menu>ul>li>a>span {
display: block;
position: relative;
border: 2px solid #eef3f5;
/*-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;*/
}
div#menu>ul>li>a>span::before {
position: absolute;
top: 100%;
content: attr(data-hover);
/*-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);*/
}
div#menu>ul>li>a:hover span,
div#menu>ul>li>a:focus span {
/* background-color: #c3d9e3;
border: 1px solid #abd1eb;
border-radius: 25%;*/
background-color: #c3d9e3;
border: 2px solid #abd1eb;
border-radius: 5px;
/*-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
color: [[setting:color1]];*/
}
/*
div#menu>ul>li>a.menuactive{
color: [[setting:color1]];
}*/
HTML:
<div id="menu">
<ul><li >
<span data-hover="Home">Home</span></li><li >
<span data-hover="Classes">Classes</span></li><li >
<span data-hover="Pricing">Pricing</span></li><li >
<span data-hover="About Us">About Us</span></li><li >
<span data-hover="Log In">Log In</span></li> </ul>
</div>
You are setting a fixed height(1.3em !important;) for A which is causing this issue.
Please check this updated working fiddle:http://jsfiddle.net/7tcrz38r/2/
you have this declaration:
div#menu>ul>li>a {
overflow: hidden;
padding: 0 !important;
height: 1.3em !important;
}
which, by the way, is repeated since it's declared some lines above
div#menu>ul>li>a {
color: #868787;
display: inline-block;
font-size: 18px !important;
font-weight: lighter;
letter-spacing: 1px !important;
margin: 17px 15px !important;
outline: none;
position: relative;
text-decoration: none;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}
Anyways, just remove that overflow:hidden property. However, you'll have the menu items showing twice because of that data-hover span you have. I don't know why are you using that, so consider if you need it or not. Of course, you can simply remove that "height: 1.3em !important;" as well, but I assume it's better to have a height than an overflow. anyways, it's a a decision you'll have to ponder
I'm working on a CSS layout for my page, I'm just having a problem. On first page view the navbar loads all out of whack, but after page refresh, everything looks fine, here's an example:
Before:
After:
I'm not sure why it would be doing this I'm kind of new to CSS, any information would be great thanks!
Here's the CSS:
html, body {
margin: 0px;
}
.navbar-fixed {
background: -webkit-linear-gradient(top, #fff 0, #eee 85%, #ddd 100%);
border-top: 1px solid black;
border-bottom: 1px solid black;
border-radius: 3px;
box-shadow: 1px 1px 4px #e5e5e5;
position: fixed;
right: 0;
left: 0;
top: 0;
width: 100%;
}
.navbar-fixed ul {
display: inline-block;
margin: 0;
padding: 0;
}
.navbar-fixed ul li {
display: inline-block;
}
.navbar-fixed .logo a {
line-height: 50px;
padding: 0;
font-size: 32px;
letter-spacing: -3px;
transition: 0.3s;
font-weight: bold;
color: orange;
text-decoration: none;
text-shadow: 2px 2px 3px black;
margin: 0 2em 0 1em;
}
.navbar-fixed .logo a:hover {
text-shadow: 1px 1px 7px black;
color: white;
background: transparent;
}
.navbar-fixed ul.nav {
float: right;
}
.navbar-fixed ul.nav li a {
padding: 1em;
display: block;
color: #00AAEE;
cursor: pointer;
border: solid 0 1px 0 1px transparent;
transition: 0.5s;
text-decoration: none;
}
.navbar-fixed ul li a:hover, ul li.active a {
background-color: darkgrey;
border-color: #ccc;
color: white;
}
.container {
margin: 0 auto;
width: 70%;
}
.newswindow {
padding: 1em;
color: #fff;
background-color: rgba(0, 0, 0, 0.75);
position: absolute;
bottom: 0;
left: 0;
}
.newswindow h2 {
font-size: 42px;
border-bottom: 1px solid white;
letter-spacing: -2px;
}
.newswindow p {
font-size: 18px;
}
Some browser specific default styles could be interfering your defined styles. (Inherited styles, default more specifically defined styles for certain elements...)
For homogenous behavior in all browsers, use a CSS reset and define all the needed styles properly, not depending on browsers' defaults.
Here is a good source:
http://meyerweb.com/eric/tools/css/reset/
The background images for directional & navigational buttons are not loading. Firebug shows the images being overridden and states "the files are not being loaded". If I disable the "text-indent", I can see the plain old line items, but am looking for the images, so it looks nice and pretty!
I've been staring at this for too long now, can anyone help me see the problem? Thank you!
html
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li><img src="images/tah_home.jpg" alt="taylor art house home page" width="600" height="320"/>
<p class="flex-caption">Taylor Art House Home Page</p></li>
<li><img src="images/tah_blog.jpg" alt="taylor art house blog page" width="600" height="320" />
<p class="flex-caption">We created a blog that fits seemlessly into Taylor Art House's look</p></li>
<li><img src="images/tah_artwork_page.jpg" alt="taylor art house art page" width="600" height="320" />
<p class="flex-caption">One of Taylor Art House's gallery pages, using a Wordpress plugin</p></li>
<li><img src="images/tah_arch_portfolio.jpg" alt="jon taylor architecture portfolio page" width="600" height="320" />
<p class="flex-caption">We created links to toggle from TAH to Jon Taylor Architecture</p></li>
</ul>
</div><!--end flexsider-->
</div><!--end flex-container-->
header script
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
controlNav: true,
manualControls: ".flex-control-nav li a",
controlsContainer: ".flex-container"
});
});
</script>
flexslider css
/*
* jQuery FlexSlider v1.8
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {
width: 100%;
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
max-width: 100%;
display: block;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides {
display: block;
}
* html .slides {
height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {
display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider {
width: 600px;
background: #fff;
border: 4px solid #999;
position: relative;
margin: 30px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px; zoom: 1;
}
.flexslider .slides {
zoom: 1;
}
.flexslider .slides > li {
position: relative;
}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {
zoom: 1;
position: relative;
margin-left:100px;
}
/* Caption style */
/* IE rgba() hack */
.flex-caption {
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
zoom: 1;
}
.flex-caption {
width: 96%;
padding: 2%;
margin: 0;
position: absolute;
left: 0;
bottom: 0;
background: rgba(0,0,0,.3);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
font-size: 14px;
line-height: 18px;
}
/* Direction Nav */
.flex-direction-nav {
height: 0;
}
.flex-direction-nav li a {
width: 52px;
height: 52px;
margin: -13px 0 0;
display: block;
background: url(theme/bg_direction_nav.png) no-repeat;
position: absolute;
top: 50%;
cursor: pointer;
text-indent: -999em;
}
.flex-direction-nav li .next {
background-position: -52px 0; right: -21px;
}
.flex-direction-nav li .prev {
left: -20px;
}
.flex-direction-nav li .disabled {
opacity: .3;
filter:alpha(opacity=30);
cursor: default;
}
/* Control Nav */
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -30px;
text-align: center;
}
.flex-control-nav li {
margin: 0 0 0 5px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-nav li:first-child {
margin: 0;
}
.flex-control-nav li a {
width: 13px;
height: 13px;
display: block;
background: url(theme/bg_control_nav.png) no-repeat;
cursor: pointer;
text-indent: -999em;
}
.flex-control-nav li a:hover {
background-position: 0 -13px;
}
.flex-control-nav li a.active {
background-position: 0 -26px;
cursor: default;
}
styles.css
/* CSS Document for Kajort Designs */
/* ----- RESETS ----- */
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style-type: none;
}
h1 {
margin-bottom: 20px;
margin-top: 20px;
font-size: 20px;
color: #999;
}
h2 {
font-size: 18px;
}
/* ----- GENERAL ----- */
body {
line-height: 19px;
font-size: 12px;
text-align: center; /* centers everything in IE */
font: 16px Arial, Helvetica, sans-serif;
color: #8A8A8A;
/* background-image:url(../images/bg_kd2.jpg);
*/}
#wrapper {
width: 960px;
margin: 30px auto; /* centers wrapper in most browsers */
text-align:left; /* resets IE center hack */
background-color:rgba(255,255,255,0.8);
padding: 20px;
}
/* ----- HEADER ----- */
/*#header {
width:250px;
height: 40px;
float: left;
font-size:24px;
}
#header a:hover {
border-bottom: 2px solid #ddd;
}*/
/* ----- NAVIGATION ----- */
#navigation {
width: 430px;
height: 40px;
float: right;
margin-top: 30px;
}
#navigation a:hover {
border-bottom: 2px solid #ddd;
}
#navigation li {
display: inline;
list-style-type: none;
padding-right: 10px;
}
#navigation-items li.main-on a {
border-bottom: 2px solid #ddd;
font-size:18px;
}
/* ----- MIDDLE ----- */
#main {
width: 104%;
background: #fff;
background: -moz-linear-gradient(top, #fff, #fff);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
padding: 10px 20px;
margin-left: -40px;
margin-top: 80px;
position: relative;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
}
#main .arrow {
width: 0; height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #999;
top: 100%;
left: 0;
position: absolute;
}
#homecontent {
margin: 25px 0 25px 200px;
}
#content {
width: 800px;
margin-left: 100px;
overflow: hidden;
}
#servicescontent {
width: 700px;
margin-left: 40px;
}
#tools {
background-color:#EDEBDE;
padding: 20px 0 10px 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#seo {
background-color:#EDEBDE;
padding: 20px 0 10px 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.service_list {
margin: 10px 0 15px 30px;
}
.service_list li {
padding-bottom: 10px;
list-style-type:circle;
}
#panels_nav_st {
color:#666;
font-size:16px;
border-top: 2px solid #669933;
padding-top: 10px;
margin-top: 10px;
}
#panels_nav_st a {
color:#666;
font-size:16px;
}
#panels_nav_st a:hover {
color:#669933;
font-size:16px;
}
#panels_nav_ain {
color:#666;
font-size:16px;
border-top: 2px solid #91A6C1;
padding-top: 10px;
margin-top: 10px;
}
#panels_nav_ain a {
color:#666;
font-size:16px;
}
#panels_nav_ain a:hover {
color:#91A6C1;
font-size:16px;
}
#panels_nav_bees {
color:#666;
font-size:16px;
border-top: 2px solid #FC0;
padding-top: 10px;
margin-top: 10px;
}
#panels_nav_bees a {
color:#666;
font-size:16px;
}
#panels_nav_bees a:hover {
color:#FC0;
font-size:16px;
}
#panels_nav_ptc {
color:#666;
font-size:16px;
border-top: 2px solid #a1c857;
padding-top: 10px;
margin-top: 10px;
}
#panels_nav_ptc a {
color:#666;
font-size:16px;
}
#panels_nav_ptc a:hover {
color:#a1c857;
font-size:16px;
}
#panels_nav_tah {
color:#666;
font-size:16px;
border-top: 2px solid #FF7C5F;
padding-top: 10px;
margin-top: 10px;
}
#panels_nav_tah a {
color:#666;
font-size:16px;
}
#panels_nav_tah a:hover {
color:#FF7C5F;
font-size:16px;
}
#visit {
margin: 20px 0 20px 0;
width: 600px;
float: left;
color: #666;
}
#visit a {
text-decoration:underline;
}
#visit_st a:hover {
text-decoration:none;
color: #669933;
}
#visit_ain a:hover {
text-decoration:none;
color: #91A6C1;
}
#visit_bees a:hover {
text-decoration:none;
color: #fc0;
}
#visit_ptc a:hover {
text-decoration:none;
color: #a1c857;
}
#visit_tah a:hover {
text-decoration:none;
color: #FF7C5F;
}
#thumbnails li {
display: inline;
margin: 0 40px 40px 0;
}
#thumbnails img {
border: 1px solid #666;
padding: 5px 5px 10px 5px;
}
/* ----- FOOTER ----- */
#footer {
clear: both;
height: 50px;
margin-bottom: 15px;
margin-top: 60px;
text-align: center;
font-size: small;
color: #776E6E;
/* padding-top: 15px;
border-top: 3px solid #999;
*/
}
#footer a {
text-decoration: none;
color: #776E6E;
}
#footer a:hover {
border-bottom: 2px solid #ddd;
}
/* ----- NOT USED, BUT SAVE IN CASE ----- */
/*
#sidebar {
float: left;
color: #666;
padding: 10px 0 50px 50px;
font-size: 16px;
}
#sidebar li {
/* padding-bottom: 20px;
margin: 0 5px 15px 15px;
}
#sidebar a:hover {
color: #ddd;
border-bottom: 2px solid #ddd;
}
#sidebar h3 {
margin-bottom: 30px;
color: #333;
}
*/
Thank you!
The flexslider css is referring to the directional & navigational images in the theme folder. See below...
.flex-direction-nav li a {
...
background: url(theme/bg_direction_nav.png) no-repeat;
...
}
.flex-control-nav li a {
...
background: url(theme/bg_control_nav.png) no-repeat;
...
}
Point the url's to the correct location of the images and it'll work.