Problems with Wordpress/CSS in custom theme

purpleclouds · 21 Mar 2013

Hi,

I'm having some issues with implementing a custom theme on my Wordpress blog. I've fixed it before, but in moving over to the new web server made a boo-boo and didn't back up the corrected files that I'd done online!! Can't remember for the life of me what I did.. it was a simple one line of code that I copied off the t'internet.

The link to my website is here. If you take a look at the nav bar, then click on 'Journal' you'll see where it's going wrong!

Code for the index.php..

<!doctype html>





 <html lang="en" class="no-js"> 

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Journal - Commercial and Sports Photography by Philip Oldham - Manchester, UK</title>

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

// Requried: Navigation bar drop-down
$("nav ul li").hover(function() {
$(this).addClass("active");
$(this).find("ul").show().animate({opacity: 1}, 400);
},function() {
$(this).find("ul").hide().animate({opacity: 0}, 200);
$(this).removeClass("active");
});

// Requried: Addtional styling elements
$('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
$('nav ul li:first-child').addClass('first');
$('nav ul li:last-child').addClass('last');
$('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');

});
</script>

</head>

<body>

<div class="container">

<div class="navbar">

<nav class="dark">
<ul class="clear">
<li><a href="http://www.philipoldham.co.uk/index.html">Home</a></li>
<li><a href="http://www.philipoldham.co.uk/journal/">Journal</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="http://www.philipoldham.co.uk/commercial.html">Commercial</a></li>
<li><a href="http://www.philipoldham.co.uk/sport.html">Sport</a></li>
<li><a href="http://www.philipoldham.co.uk/360.html">360º</a></li>
</ul>
</li>
<li><a href="http://www.philipoldham.co.uk/clients.html">Clients</a></li>
<li><a href="http://www.philipoldham.co.uk/about.html">About</a></li>
<li><a href="http://www.philipoldham.co.uk/contact.html">Contact</a></li>
</ul>
</nav>

</div>

<div class="content">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr>
<?php endwhile; else: ?>
<?php endif; ?>
</div>
</div>

</div>

</body>
</html>

Code for CSS..

body {
background: #fff;
}

@font-face
{
font-family: myFirstFont;
src: url('myriadpro.otf'),
url('myriadpro.eot');
}

.container {
width: 100%;
}

.navbar {
width:517px;
margin:auto;
font-family: myFirstFont;
}

.content {
width: 960px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
font-family: myFirstFont;
src: url('myriadpro.otf'),
url('myriadpro.eot');
font-size: 0.75em;
text-align: center;
}

.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
html[xmlns] .clear { display: block; overflow: hidden;}
* html .clear { height: 1%;}

nav.dark {border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; border-radius: 3px; display: block!important;}
nav.dark ul {margin: 0px; padding: 0px; border-left: 1px solid #FFFFFF;}

nav.dark li {list-style: none; float: left; border-right: 1px solid #2e3235; position: relative;}
nav.dark li.first, nav li.first a {border-top-left-radius: 2px; border-bottom-left-radius: 2px; -moz-border-top-left-radius: 2px; -moz-border-bottom-left-radius: 2px;}
nav.dark li.last, nav li.last a {border-top-right-radius: 2px; border-bottom-right-radius: 2px; -moz-border-top-right-radius: 2px; -moz-border-bottom-right-radius: 2px;}
nav.dark li.drop a {padding-right: 30px;}
nav.dark li a {display: block; padding: 9px 23px 10px; text-decoration: none; background-image: url(../img/navigation-sprite.png); background-repeat: repeat-x; font-size: 12px; color: #fff; border-top: 1px solid #5a5d60; border-left: 1px solid #525659; text-shadow: 0px -1px 0px #000;}
nav.dark li a {background-position: 0px 0px;}
nav.dark li a:hover, nav li.active a {background-position: 0px -36px;}
nav.dark li a:active {background-position: 0px -72px;}
nav.dark .dropdown {display: block; float: right; width: 7px; height: 5px; background: url(../img/drop-down.png) no-repeat; margin: -20px 15px 0px 12px;}

nav.dark li ul {opacity: 0; position: absolute; top: 45px; left: -26px; padding: 12px 15px; border-radius: 3px; -moz-border-radius: 3px; background: #222; display: none; z-index: 100;}
nav.dark li ul li {border-right: 0px; float: none!important; border-bottom: 1px solid #444; width: 125px;}
nav.dark li ul li:last-child { border-bottom: 0px;}
nav.dark li ul li a {background: none!important; border-left: 0px; border-top: 0px; padding: 10px 0px; font-size: 11px}
nav.dark li ul li a:hover {opacity: 0.5;}

nav.dark li ul li.arrow {background: url(../img/arrowtop.png) top left no-repeat; border-bottom: 0px; height: 10px; margin-top: -22px; margin-bottom: 10px;}

I'm no web designer/coder.. it's all been cobbled together from tutorials and the like so I appreciate it may be wrong/messy.. just infuriating not being able to fix something I've done once :lol:

Thanks in advance!

TopBanana · 21 Mar 2013

Looks alright to me (using Chrome). Which bit is broken?

Jez2011 · 21 Mar 2013

Seems fine except for the whole page shifting slightly to the left, is that what you're referring to...?

purpleclouds · 21 Mar 2013

I'd fixed it by the time you'd both looked :lol:

Forgot to let y'all know! Thanks anyway!

Problems with Wordpress/CSS in custom theme

purpleclouds

TopBanana

Jez2011

purpleclouds