I can't get the submenu to be displayed.
Here's my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title><?php echo $title; ?></title>
<style type="text/css">
body
{
font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
background-color: #e9e9e9;
}
body p
{
font-size: 0.8em;
line-height: 1.28;
}
#wrapper
{
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner
{
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area
{
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar
{
float: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer
{
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#navigation
{
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#nav
{
list-style: none;
}
#nav ul
{
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li
{
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav a:link, nav a:active, nav a:visited
{
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover
{
color: lightblue;
}
#subnav
{
list-style:none;
}
#subnav ul
{
margin: 0;
padding: 0;
width: auto;
display:none;
}
#subnav li
{
font-size: 24px;
float:inside;
position: relative;
width: 180px;
height: 50px;
}
#subnav a:link, nav a:active, nav a:visited
{
display: block;
color: #fff;
text-decoration: none;
}
#subnav a:hover
{
color: lightblue;
}
.imgLeft
{
float: left;
width: 240px;
height: 150px;
margin: 0px 10px 10px 0;
padding: 10px;
}
.imgRight
{
float: right;
width: 200px;
height: 250px;
margin: 0px 0 10px 10px;
padding: 10px;
}
</style>
</head>
/*Master page code */
/*the submenu 'subproducts' is not displayed when i ran my code */
<body>
<div id="wrapper">
<div id="banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Products
<ul id="subnav">
<li>SubProducts</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
</ul>
</nav>
<div id="content_area">
<?php echo $content; ?>
</div>
<div id="sidebar">
</div>
<footer>
<p>All rights reserved</p>
</footer>
</div>
</body>
</html>
I added this:
#nav li:hover ul {
display: block;
}
body {
font-family: lucida grande, tahoma, verdana, arial, sans-serif;
background-color: #e9e9e9;
}
body p {
font-size: 0.8em;
line-height: 1.28;
}
#wrapper {
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner {
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area {
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar {
float: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer {
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#nav {
list-style: none;
}
#nav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li:hover ul {
display: block;
}
#nav a:link,
nav a:active,
nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#subnav {
list-style: none;
}
#subnav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#subnav li {
font-size: 24px;
float: inside;
position: relative;
width: 180px;
height: 50px;
}
#subnav a:link,
nav a:active,
nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#subnav a:hover {
color: lightblue;
}
<div id="wrapper">
<div id="banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Products
<ul id="subnav">
<li>SubProducts</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
</ul>
</nav>
<div id="content_area">
<!--<?php echo $content; ?>-->
</div>
<div id="sidebar">
</div>
<footer>
<p>All rights reserved</p>
</footer>
</div>
Ive been making a website with a CSS3 menu. However during the validating process to check if i made no mistakes i broke my CSS3 menu. The menu itself works but theres no drop down menu when hovering "Categorieen" like it did before.
Heres the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>Website Ronald</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css"/>
<style type="text/css">
html {
background: url(images/image2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
</style>
</head>
<body style="margin:0px;padding:0px;overflow:hidden">
<ul id="menu">
<li>Home</li>
<li>Categorieën</li>
<ul>
<li>Vliegvelden</li>
<li>Landschappen</li>
<li>Auto`s</li>
</ul>
<li>Over</li>
</ul>
<div align="center">
<iframe src="home.html" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden; height:90%;width:75%;position:absolute;top:60px;left:160px;right:0px;bottom:10px" width="75%" height="90%" name="frame_a" marginheight="5" frameborder="0"></iframe>
</div>
</body>
</html>
And this is the CSS im using:
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 960px;
margin: 10px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
Since your submenu must appear while hovering "Categorieen" and since your css to make it visible look like #menu li:hover > ul
The <ul> element containing your submenu must be inside the <li> representing "Categorieen"
So instead of
<li>
Categorieën
</li>
<ul>
<li>Vliegvelden</li>
<li>Landschappen</li>
<li>Auto`s</li>
</ul>
You should have
<li>
Categorieën
<ul>
<li>Vliegvelden</li>
<li>Landschappen</li>
<li>Auto`s</li>
</ul>
</li>
Here is the jsfiddle representing your corrected menu
I have a menu structure:
<ul id="nav_menu">
<li>Electronics
<ul>
<li>Mobile phones</li>
</ul>
</li>
<li>Computers</li>
<li>Car Electronics</li>
<li>TV & Video</li>
<li>Cell Phones</li>
<li>MP3 Players</li>
<li>Cameras & Photo</li>
<li>Apparel</li>
<li>Music</li>
<li>Movies & TV</li>
<li>Video Games</li>
<li>Office Supplies</li>
</ul>
But it looks like below:
Is it possible to optimize menu if I have a lot of categories and my device screen width is narrow?
My CSS:
#nav_menu li {
display: inline;
float: left;
padding-right: 3px;
position: relative;
}
#nav_menu > li > a {
background: none repeat scroll 0 0 #404040;
border-radius: 3px 3px 0 0;
color: #FFFFFF;
display: block;
font-size: 14px;
font-weight: bold;
height: 28px;
line-height: 28px;
padding: 0 5px;
text-decoration: none;
}
#nav_menu ul {
background: none repeat scroll 0 0 #404040;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
list-style: none outside none;
margin: 0;
padding: 5px;
position: absolute;
top: 36px;
width: 140px;
z-index: 2;
}
Like this
DEMO
CSS
#nav_menu ul{
margin:0;
padding:0;
float:left;
}
#nav_menu li {
display: inline;
float: left;
padding-right: 3px;
position: relative;
border-bottom:#FFD700 3px solid;
}
#nav_menu > li > a {
background: none repeat scroll 0 0 #404040;
border-radius: 3px 3px 0 0;
color: #FFFFFF;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 20px;
padding: 0 5px;
text-decoration: none;
}
#nav_menu ul {
background: none repeat scroll 0 0 #404040;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
list-style: none outside none;
margin: 0;
padding: 5px;
position: absolute;
top: 20px;
width: 140px;
z-index: 2;
}
prueba lo siguiente:
DEMO 1
JAVASCRIPT
$(document).ready(function()
{
$("div.po").set_ELEMENT(
{
bgColor:'red',
click: function(oThis)
{
oThis.find('> div').css({'color':'red','background-color' : 'blue'});
}
});
});
So i have a simple website.
Where a have an header, then a site_content, that contains the div content and sidebar, and then a sticky footer.
here is my code:
Html:
<!DOCTYPE HTML>
<html>
<head>
<title>Turismo Murtoseiro</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style.css" title="style" />
</head>
<body>
<div class="wrapper">
<div id="header">
<div id="logo"></div>
<div id="menubar">
<ul id="menu">
<!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
<li class="selected">Home</li>
<li>Cafés</li>
<li>Restaurantes</li>
<li>Hotéis</li>
<li>Pensões</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div id="site_content">
<div id="sidebar">
<!-- insert your sidebar items here -->
trujytkyukliyluilouiluiol </div>
<div id="content">
<!-- insert the page content here -->
<h1>Pedro Fidalgo - freelancer</h1>
<div>
<p> O meu nome é Pedro Fidalgo, e estudo na área de Multimédia, na escola Padre António Morais da Fonseca, na Murtosa.</p>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div id="footer" class="footer">
Copyright © Pedro Fidalgo 2011</div>
</body>
</html>
CSS:
* {margin:0;
padding:0;
}
html, body {height: 100%;
font: normal .80em 'trebuchet ms', arial, sans-serif;
}
p
{
padding: 0 0 20px 0;
line-height: 1.7em;
color: #666;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
background: #F0EFE2;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 30px; /* .push must be the same height as .footer */
clear: both;
}
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #43423F;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}
a, a:hover
{ outline: none;
text-decoration: underline;
color: #A4AA04;}
a:hover
{ text-decoration: none;}
.left
{ float: left;
width: auto;
margin-right: 10px;}
.right
{ float: right;
width: auto;
margin-left: 10px;}
.center
{ display: block;
text-align: center;
margin: 20px auto;}
blockquote
{ margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;}
ul
{ padding: 2px 0 22px 17px;}
ul li
{ list-style-type: circle;
padding: 0 0 4px 5px;}
ol
{ padding: 8px 0 22px 20px;}
ol li
{ padding: 0 0 11px 0;}
#logo, #menubar
{
margin-left: auto;
margin-right: auto;
}
#header
{
height: 150px;
background-color: #708B1A;
}
#logo
{
width: 877px;
position: relative;
height: 100px;
background-color: #003;
background-image: url(images/logo.png);
background-repeat: no-repeat;
}
#menubar
{ width: 877px;
height: 50px;
padding: 0;
background: #29415D url(images/menu.png) repeat-x;}
ul#menu, ul#menu li
{ float: left;
margin: 0;
padding: 0;}
ul#menu li
{ list-style: none;}
ul#menu li a
{ letter-spacing: 0.1em;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
display: block;
float: left;
height: 24px;
padding: 20px 26px 6px 26px;
text-align: center;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
background: transparent;}
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
background: #1C2C3E url(images/menu_select.png) repeat-x;}
#site_content
{ width: 837px;
overflow: hidden;
color #000;
height: 100%;
margin: 0 auto 0 auto;
padding: 20px 24px 20px 37px;
background: #FFF url(images/content.png) repeat-y;}
#content
{ text-align: left;
width: 595px;
min-height: 100%;
}
#sidebar
{
float: right;
width: 200px;
padding-top: 0;
padding-right: 15px;
padding-bottom: 30px;
padding-left: 15px;
}
#footer
{ width: 878px;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
height: 30px;
text-align: center;
margin: 0 auto 0 auto;
background: #29425E url(images/footer.png) repeat-x;
color: #FFF;
}
And i cant put my site_content (with content and sidebar) at 100%.. what am i missing?
Remove all your specified width such as width: 878px;, width: 837px;, width: 877px;... and you'll make it render as 100% width.
Demo
In some of my posts (not all of them), the first image keeps floating right event though I have put in <center></center> tags. Can someone help me figure out why this is happening. Example here: http://renegadechicks.com/twelve-inspiring-centerpieces-3
Below is my CSS:
/*
Theme Name: StyleWeekly
Theme URI: http://cloverthemes.com/
Author: http://cloverthemes.com/
Author URI: http://cloverthemes.com/
Description: Style Weekly
Version: 1.2
Tags: magazine, beauty, style, fashion
*/
/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------webs------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pbackgre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, br {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
:focus { /* remember to define focus styles! */
outline: 0;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
table { /* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a img {
border:5px solid #FBDDDF;
}
img.centered, .aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;im
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
.box img { display: block; margin: auto; }
img {
display: block;
width: auto;
margin: auto;
}
small {font-size:11px;}
/* Floating
---------------------------------------------------------------- */
.alignleft {
float: left;
margin: 0 10px 10px 0;
}
.alignright {
float: right;
margin: 0 0 0 10px;
}
.aligncenter {
display: block;
margin: 0 auto 10px;
}
.left{float:left;}
.right{float:right;}
/* Clear Floats
---------------------------------------------------------------- */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/* Global
-------------------------------------------------------------- */
body {
color: #444;
font-family: "Segoe UI","Helvetica","Arial",sans-serif;
font-size: 16px;
line-height: 1.5em;
background: #000 url("images/graphicBg.jpg") no-repeat top center;
}
#inner {
background-color: #fff;
border: 3px solid #F10C6A;
padding: 20px}
#logos {
display:none;
}
#linkwithin_logo_0 {
display: none;
padding-below: 5px;
}
#post-131 .st_facebook_large, #post-131 .st_twitter_large, #post-131 .st_pinterest_large, #post-131 .st_linkedin_large, #post-131 .st_email_large, #post-131 .st_sharethis_large, #post-131 .st_fblike_large {display: none;}
.stMainServices st-facebook-counter {
padding-bottom:15px;
}
.c-1 {
float: left; padding-top: 20px;width:650px}
.c-1 .bd {
background: none}
h1,h2,h3,h4,h5,h6 {color:#cc0066; font-weight: normal;font-family:Georgia,"Times New Roman",Times,serif; padding-bottom: 10px;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 30px; padding-top: 5px;
}
h4 {
font-size: 30px;
}
h5,h6 {
font-size: 30px;
}
pre,code,kbd,samp,tt {mos
font: 16px/1.385 "Courier New", Monospace, serif;
}
/* Hyperlinks
------------------------------------------------------------ */
a,
a:visited {
}
a:hover {
text-decoration: underline;
}
a img {
border: 5px solid #FBDDDF;
}
.imagelogo {
border:none;
}
h1 a,h2 a,h3 a,h4 a, h5 a, h6 a {
text-decoration: none; color: #
}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {
text-decoration: underline; color: #0AC6F5;
}
/* Input Form & TextArea
---------------------------------------------------------------- */
input, textarea {
border-color: #ccc #efefef #efefef #ccc;
border-width: 1px;
border-style: solid;
color: #777;
padding: 6px;
}
input:focus {
background: #ffffff;
}
/* Color
-------------------------------------------------------------- */
a,
a:visited, #logo .site-title a {
color: #cc0066;border:none !important;
}
#nav, #nav li li a, #nav li li a:link, #nav li li a:visited{ text-transform:uppercase; }
.home-columns h3, .home-columns h4, a:hover {color: #0AC6F5;}
.home-columns a {text-decoration:none;}
#nav li a {color:#000000;}
#nav li a:hover {
color:#0AC6F5;
}
#nav li li a:hover, #nav li li a:active{background:rgba(0, 0, 0, 0.50);text-transform: uppercase;}
#nav li li a, #nav li li a:link, #nav li li a:visited {
}
#nav { }
#nav ul li{ }
#nav ul li a {
color: #fff}
#nav ul li ul li,#nav ul li ul li a {
border: none;
}
/* Padding
---------------------------------------------------------------- */
.pl20{padding-left:20px;}
.pl10{padding-left:10px;}
.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pr20{padding-right:20px;}
.bd{background: url("images/dot.png") repeat-x scroll left bottom transparent;}
/* Header
---------------------------------------------------------------- */
#header {
}
#header .wrap {
/*background: url("images/topbanner.png") no-repeat scroll 350px 43px transparent;*/
margin: 0 auto;
overflow: hidden;
width:1012px;
padding: 40px 0 20px 0px;
border-bottom: 1px solid #fff;
}
#logo h1, h1{
font-size: 35px;
line-height: 40px;
}
#logo {
float:left;
}
#logo .site-title a , .site-title a{
color: #009999;
font-weight: normal;
font-family: "Georgia";
display: block;
float: left;
font-size: 48px;
line-height: 50px;
margin: 0;
padding: 10px 0 0;
text-decoration: none;
width: 380px;
}
#logo .site-title a:hover {
text-decoration:none;
}
#description {
color: #FFFFFF;
font-size: 12px;
font-style: italic;
font-weight: normal;
margin: 0;
padding: 0 0 0 10px;
display: block;
height: 0;
overflow: hidden;
width: 0;
}
#header-right{
padding: 0px 0 0;
float:right;
width:270px;
}
/* Nav
---------------------------------------------------------------- */
#nav{border-bottom-style: inherit;height: 36px; text-transform: uppercase; width:1012px;
}
.menu-main-container, .menu{margin:0 auto; }
#nav li a .sf-sub-indicator{
width: 11px;
height: 32px;
top: 18px;
right: 0px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
}
#nav li a:hover .sf-sub-indicator{
}
#nav li li a .sf-sub-indicator {
top: 12px;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
}
#nav .sub-menu {
}
#nav .sub-menu .sub-menu{
background: transparent !important;
}
#nav li {
float: left;
list-style: none;
padding: 0;
}
#nav li a {
display: block;
font-family: Helvetica,sans-serif;
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin: 0;
padding: 11px 19px;
position: relative;
text-decoration: none;
}
#nav .current-menu-item a {
}
#nav li a:hover, #nav li a:active {
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font-size:12px;
line-height: 20px;
width: 132px;
margin: 0;
padding:7px 21px 7px 13px;
text-transform:uppercase;
position: relative;
}
#nav li li a:hover, #nav li li a:active {color:#fff;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 166px;
margin: 0;
padding: 0;
background:#c06;
text-transform:uppercase;
}
#nav li ul ul {
margin: -35px 0 0 166px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfHover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul {
left: auto;
}
#nav li:hover, #nav li.sfHover {
position: static;
}
#nav li a span {
color:#999;
display: block;
font-size: 10px;
line-height: 14px;
}
/* Main
---------------------------------------------------------------- */
#wrapper{margin:0 auto; width:1012px; padding:0px;}h2
#home-third-left{width:660px;}
#home-sidebar{width:300px; float:right;}
#content-sidebar{width:980px;}
#content{width:660px; float:left; min-height:600px;}
/* Homepage Elements
---------------------------------------------------------------- */
#home-top .a-left ul{margin-left:-3px;}
#home-top .a-left li{float:left; padding-left:4px;}
#home-second h3{font-size:32px;}
#home-top .entry-excerpt p{font-size:13px; font-family:Georgia,"Times New Roman",Times,serif; line-height:22px;width:205px;float:left}
#home-top {padding-bottom: 36px;}
.a-left h3 {padding:10px 0px 10px 0px;font-family: 'Cookie', cursive;}
.a-left h3 a{color:#000000; font-size:45px;}
.a-left{padding-bottom: 5px;}
.a-left{width:660px;}
.a-right p{padding:0 40px 10px 10px;}
.a-right{width:300px; }
.home-post{padding-bottom:15px;margin-bottom:20px; min-height: 135px !important;font-size: 13px;line-height: 22px;}
.home-category {
float:left;
width:635px;
}
.home-category h2{font-size:40px;padding-bottom:20px;}
.small{font-size:10px; color:#999;}
.b-1{width:638px; float:left; padding-right: 4px;padding-top: 25px;}
.b-2{width:400px; float:left;}
.firstpost{padding-bottom:10px;margin-bottom:5px;}
.firstpost .entry-excerpt {font-size: 13px;line-height: 22px}
.b-3{width:445px;float:right; /*font-size:11px; line-height:18px;*/}
.b-1 h3 {line-height:28px;}
.c-1-post {width:200px; margin-left: 20px;margin-bottom:5px}
.c-1 h3{font-size:13px !important;padding-top:5px !important;line-height:20px;padding-bottom: 0px !important;}
.c-2-1{width:260px;}
.c-2-1 h3, .c-2-2 h3, .c-3 h3, .d-1 h3{font-size:26px; padding-bottom:10px;}
.c-2-2{width:380px; }
.c-2-2-post{margin-bottom: 15px;min-height: 100px !important;padding-bottom: 15px;}
.c-2-2 p{line-height:22px;font-size:13px}
.c-3-left, .c-3-right{width:320px;}
.featured-left{float:left; width:320px;}
.block-small-item{
height: 90px;
margin-bottom: 13px;
overflow: hidden;
padding-bottom: 13px; width:320px}
.block-meta {
color: #888888;
display: block;
font-size: 11px;
margin-bottom: 4px;
}
.block-meta a {
color: #888888 !important;
}
.block-meta a:hover {
color: #333333 !important;
text-decoration: none;
}
/* Post Page Style
---------------------------------------------------------------- */
.breadcrumbs {background: none repeat scroll 0 0 #F6F6F6;color: #666666;font-size: 11px;margin: 0 0 10px;padding: 3px 15px; display:none;}
.entry-content p{color: #464646;font-family: Georgia,Sans-serif; margin: 0 0 16px; line-height:24px; font-size: 13px;}
.entry-title{margin-bottom:13px;margin-top: 3px;background: url("images/dot.png") repeat-x scroll left bottom transparent;}
.entry-title h1 { color: #000000!important; }
.entry-content h2, .entry-content h3{ font-size: 32px;}
.entry-content ol, .entry-content ul {margin: 0;padding: 0 0 20px;}
.entry-content ol {margin: 0;}
.entry-content ul li {list-style-type: square;margin: 0 0 0 10px;}
.entry-content ol li {list-style: decimal outside none;margin: 0 0 0 25px;}
.entry-content ol ol, .entry-content ul ul {padding: 0;}
.entry-content li{padding:0 0 5px 0;}
.entry-content .wp-caption-text{color: #666666;font-size: 11px;font-style: italic;line-height: 16px;margin: 0;text-align: center;}
.post-meta {
background-color: #F6f6f6;
border-radius: 5px 5px 5px 5px;
clear: both;
color: #666666;
font-size: 11px;
padding: 7px 10px 5px;
margin-bottom: 15px;
display: none;
}
.entry-content clearfix {
padding-top: 10px;
}
.post-info {
font-size: 12px;
margin-bottom: 10px;
display: inline;
float: left;
padding-bottom: 15px;
font-family: verdana;
color: black;
}
.linkwithin_posts a {
background: none !important;
border: none !important;
padding-right: 5px !important;
}
.linkwithin_hook {
background: none repeat scroll 0 0 transparent;
color: #;
font-weight: bold;
letter-spacing: -0.25px;
line-height: 45px;
margin-bottom: 10px;
}
.linkwithin_text {
color: #cc0066;
font-size: 38px;
padding-left: 10px;
}
.linkwithin_title {
color: #464646!important;
font-family: verdana, sans-serif !important;
font-size: 12px !important;
line-height: 14px !important;
text-decoration: none;
}
.linkwithin_title:hover {
color: #c06!important;
text-decoration: underline !important;
}
.post-info .post-author {
background: url("images/post-author.png") no-repeat scroll left center transparent;
padding: 5px 16px 3px 61px;
font-size: 12px;
font-style: italic;
}
.post-info .time {
font-style:italic;
}en
.post-comments {
background: url("images/post-comments.png") no-repeat scroll left center transparent;
padding: 6px 20px 6px 40px;
}
#disqus_thread {
padding-top: 50px;
}
.cat{
background: url("images/icon-categories.png") no-repeat scroll left top transparent;
padding: 3px 0 3px 22px; display: none;
}
.tags{
background: url("images/icon-tags.png") no-repeat scroll left top transparent;
margin: 0 0 0 10px;
padding: 3px 0 3px 20px; display: none;
}
blockquote {background: url(images/q.png) no-repeat;border: none;margin: 5px 15px;padding: 15px 20px 10px 40px;}
blockquote p {color: #666;font-style: italic;}
.page-template-page-fullwidth-php #content{width:980px;}
#social{width:660px; padding:10px 0 5px; display:none;}
/* Pre- Next
---------------------------------------------------------------- */
#nav-below {padding-bottom:20px;}
.nav-previous a, .nav-next a {background: none repeat scroll 0 0 #0197B2;color: #FFFFFF;float: left;width: 100px;
font-weight: bold;display: block;font-size:12px;line-height:26px;font-family:arial,verdana,sans-serif;
height: 25px;text-align: center;width: 80px;overflow: hidden;}
.nav-previous a:hover, .nav-next a:hover{background:#009999;}
#nav-below .nav-previous a, #nav-below .nav-next a {
padding: 0 10px;
width: 45%;
}
.nav-previous a {
float: right;
}
.nav-next a {
float: left;
}
.nav-next a:hover, .nav-previous a:hover {
text-decoration: none;
}
/* Related Posts
---------------------------------------------------------------- */
.related-posts{ font-size:12px; line-height:18px;}
.relateimage img {border: 1px solid #EEEEEE;
height: 150px;
width: 150px;}
.listing {float: left;
padding-left: 20px;
width: 150px; }
.related-posts-title {
color: #0091A8;
margin:20px 0 10px 22px;
padding-bottom: 15px;}
/* Sidebar
---------------------------------------------------------------- */
#sidebar{
display: inline;
float: right;
line-height: 20px;
width: 300px;
}
#sidebar h4, #latest-posts h4 {
/*background-color: #0AC6F5;*/
background: url("images/banner.jpg") no-repeat top center;
color: #fff;
font-size: 36px;
text-align:center;
line-height: 38px;
padding: 7px 0px 0px 3px;
margin: 0 0 5px;
}
#sidebar p{margin-bottom:10px;}
.widget-wrap {
margin: 0 0 10px;
}
.widget{
margin: 0 0 30px;
}
.widget-area ul li {
border-bottom: 1px dotted #CCCCCC;
list-style-type: none;
padding: 0 0 5px 5px;
word-wrap: break-word;
font-size: 13px;
}
.widget-area li li, .widget-area li li li{
border-bottom: 0 none;
list-style: square outside none;
margin: 0 0 0 20px;
padding: 5px 0 0 0;
}
#sidebar .flickr-photos li{
float: left;
background:none;
list-style-type: none;
padding:8px;
}
#sidebar .twitter h4{
background: url("images/tt.png") no-repeat scroll left center transparent;
line-height: 30px;
padding: 0 0 0 40px;
}
#sidebar_left{
float: left;
width:160px;
#sidebar_left a {
text-decoration:none !important;}
}
a:-webkit-any-link {
text-decoration:none !important;}
}
#header-right a:-webkit-any-link {
padding-right: 15px;
}
#sidebar_right{
float: right;
width:120px;
}
.twitter h4 {
background: url("images/tt.png") no-repeat scroll left center transparent;
padding: 0 0 6px 35px;}
/* archive
---------------------------------------------------------------- */
.archive .post img, .search .post img {width:150px; height:auto;}
#archive-title {padding-bottom:15px; font-size:22px; display:none;}
/* search
---------------------------------------------------------------- */
input[type="button"], input[type="submit"] { border: none;color: #FFFFFF;cursor: pointer;font-size: 13px;font-weight: normal;text-decoration: none; }
input[type="button"]:hover, input[type="submit"]:hover {background-color: #565656; }
input, select, textarea,.sticky, .taxonomy-description {border: 1px solid #DDDDDD;}
#search {width: 265px;
padding-left: 18px;
padding-top: 5px;
padding-bottom: 10px;}
#search .s {
background: #c06;
border: medium none;
color: #fff;
font-size: 12px;
padding: 5px 8px;
width: 157px;float: left;
}
#search .search-submit{background: url("images/s.png") no-repeat scroll center center transparent;
border: medium none;
cursor: pointer;
float: right;
height: 28px;
margin: 0;
right: 0;
top: 0;
width: 39px;}
#search div {
background: #c06;
height: 27px;
position: relative;
border: 2px solid #0AC6F5;
}
/* Pagination
---------------------------------------------------------------- */
.ct-paginate {padding: 10px 0 20px 0; overflow:hidden; clear:both; font-family: arial;}
.ct-paginate a {border:1px solid #eee; margin-right:5px; padding:4px 8px; text-align:center; text-decoration:none;}
.ct-paginate .ct-title {color:#555; margin-right:4px;}
.ct-paginate .ct-gap {color:#999; margin-right:4px;}
.ct-paginate a:hover, .ct-paginate a:active, .ct-paginate .ct-current {color:#fff; background: url("images/navbg.png") repeat scroll 0 0 #333333;border:1px solid #ddd; margin-right:5px;padding:4px 8px;}
/* Footer
---------------------------------------------------------------- */
.footer-info {padding:30px 0;}
.footer-info .right{width:1012px;text-align:center;}
/* =Comments
------------------------------------------------------------------ */
#comments {padding:20px 0 0 0;}
#comments h3,#respond h4{color: #0091A8;
}
#comments a{
text-decoration:none;
}
#comments a:hover{
text-decoration:underline;
}
#comments input:hover, #commentstextarea:hover{
background: #f5f5f5;
}
#commentform {
margin: 5px 10px 0px 0px;
}
#commentform textarea {
width: 90%;
padding: 5px;
font-size:13px
}
#respond:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
#commentform p {
margin: 20px 0;
}
#commentform #submit, .wpcf7-submit{
-moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
-webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
box-shadow:inset 0px 1px 0px 0px #fbafe3;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f03c96), color-stop(1, #cc0066) );
background:-moz-linear-gradient( center top, #f03c96 5%, #cc0066 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f03c96', endColorstr='#cc0066');
background-color:#f03c96;
-moz-border-radius:17px;
-webkit-border-radius:17px;
border-radius:17px;
border:1px solid #ee1eb5;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:13px;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ff0080;
}
#commentform #submit:hover, .wpcf7-submit:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0) );
background:-moz-linear-gradient( center top, #ef027d 5%, #ff5bb0 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0');
background-color:#ef027d;
}
#commentform #submit:active {
position:relative;
top:1px;
}
.commentlist {
margin: 0px;
padding: 0px;
}
.commentlist ol {
margin: 0px;
padding: 10px;
}
.commentlist li {
margin: 15px 0;
padding:15px;
list-style: none;
}
.commentlist li ul li {
margin: 10px;
}
.commentlist p {
margin: 10px 5px 10px 0px;
padding: 0px;
}
.commentlist li ul li {
font-size: 12px;
}
.commentlist li .avatar {
background-color: #FFFFFF;
border: 1px solid #EEEEEE;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
float: left;
margin: 0 10px 0 0;
padding: 3px;
}
.commentlist cite, .commentlist cite a {
font-style: normal;
font-size: 14px;
}
.commentlist p {
}
.commentmetadata {
font-weight: normal;
padding:5px 0 0 0;
}
.alt {
margin: 0px;
padding: 10px;
}
.children {
margin: 0px;
padding: 0px;
}
.nocomments {
text-align: center;
margin: 0px;
padding: 0px;
}
.commentmetadata {
font-size: 11px;
margin: 0px;
display: block;
}
.navigation {
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 40px;
}
.thread-alt {
background: #FFFFFF;
margin: 0px;
padding: 0px;
}
.thread-even {
background: #FFFFFF;
margin: 0px;
padding: 0px;
}
.depth-1 {
border: 1px solid #BBBBBB;
margin: 0px;
padding: 0px;
}
.even, .alt {
border:1px solid #eeeeee;
border-radius: 5px 5px 5px 5px;
}
em.date, .comment strong {
font-weight:normal;
color:#9E825F;
line-height:24px;
display:block;
font-style: normal;
}
/* Socialmedia
---------------------------------------------------------------- */
/* Additional
---------------------------------------------------------------- */
/* Styling posts
---------------------------------------------------------------- */
.one_half, .one_third, .two_third, .three_fourth, .one_fourth {
float: left;
line-height: 21px;
margin-bottom: 20px;
margin-right: 4%;
}
.one_half {
width: 48%;
}
.one_third {
width: 30.6%;
}
.two_third {
width: 65.3%;
}
.one_fourth {
width: 22%;
}
.three_fourth {
width: 74%;
}
.last {
clear: right;
margin-right: 0 !important;
}
.dropcap {
color: #383838;
float: left;
font-size: 40px;
margin-right: 6px;
padding-top: 7px;
position: relative;
text-transform: uppercase;
top: 5px;
}
.highlight1 {
background: none repeat scroll 0 0 #F6F67A;
}
.highlight2 {
background: none repeat scroll 0 0 #000000;
color: #CCCCCC;
}
.mosaic-block {
float:left;
position:relative;
overflow:hidden;
width:210px;
height:120px;
/*background:#111 url(images/progress.gif) no-repeat center center;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);*/
border-radius: 15px;
}
.mosaic-backdrop {
display:none;
position:absolute;
top:0;
height:100%;
width:100%;
/*background:#111;*/
}
.mosaic-overlay {
display:none;
z-index:5;
position:absolute;
width:100%;
height:100%;
background:#111;
}
.bar .mosaic-overlay {
bottom:-100px;
height:40px;
background:url(images/bg-black.png);
}
.details{ margin:3px 10px; color:#eee; font-size:11px;}
.footer-links-copyright, .footer-links-copyright a{ color:#0AC6F5; font-size:11px;padding-right:10px;}
.attachment1{ text-align:center;}
#content .gallery img, #gallery-listing img{background: none repeat scroll 0 0 #DDDDDD;border: 5px solid #FFFFFF; box-shadow: 0 1px 2px #CCCCCC;margin: 5px; padding: 1px; max-width:160px; height:auto;}
#content .cb_pin_images {
margin-left: auto !important;
margin-right: auto !important;
}
.entry-content img {max-width:100%; height:auto; border: 5px solid #FBDDDF;}
.first-thumb img {
box-shadow:5px 5px 1px #888;}
.hfeed img.thumbnail {
float: left; height: 160px;
}
.archive .hfeed article {
margin-left: 20px;
float:left;
width: 470px;}
}
I changed this HTML for the first image
<center><a href="http://renegadechicks.com/wp-content/uploads/2013/02/centerpiece15.jpg
<img class="size-full wp-image-10673 aligncenter" alt="centerpiece15" src="http://renegadechicks.com/wp-content/uploads/2013/02/centerpiece15.jpg" width="361" height="559">
</a></center>
To this in chrome:
<p style="clear: both;">
<a href="http://renegadechicks.com/wp-content/uploads/2013/02/centerpiece15.jpg">
<img class="size-full wp-image-10673 aligncenter" alt="centerpiece15" src="http://renegadechicks.com/wp-content/uploads/2013/02/centerpiece15.jpg" width="361" height="559">
</a>
</p>
and it seemed to center just fine. I for some reason had to toggle the text-decoration on the tag off then on for it to work...
Basically, I replaced the < center > tags with < p> tags and made sure to clear any floats that were set up before hand.