Afternoon all,
I'm developing a website for my mother who is a very talented artist in Australia.
Unfortnately I've run into some issues with the stylesheeting. When I direct the browser directly to a page it loads the background & stylesheeting just fine, although when I use a link on the website it doesnt load the background, text centering etc... (although it seems to load some of the stylesheet).
Has anyone come accross this before?
I'm thinking it could be a few things:
- Issue with my .htaccess seo
- Issue with the php coding which loads the stylesheet location
- The internet is a mysterious place where things dont always have to make sense
Here's a link to the site:
http://goo.gl/JPqGy
Anddd here are some of the pages:
.htaccess:
Code:
RewriteEngine On
RewriteRule ^([^/]*)\.html$ /index.php?page=$1 [L]
index.php
Code:
<?php
if($_GET['page']=='shop'||$_GET['page']=='checkout') {include_once('jcart/jcart.php');}
session_start();
if(!empty($_GET['page'])) {$page = $_GET['page'];} else {$page = "home";}
// $site = "http://localhost/robynart/";
$site = "[Edit: Removed]";
?>
<html>
<body>
<head>
<?php if($page!="home") {?><title>[Edit: Removed]- <?php echo ucwords($page); ?></title><?php } else { ?><title>[Edit: Removed]</title><?php } ?>
<META NAME="keywords" CONTENT="[Edit: Removed]">
<META NAME="description" CONTENT="[Edit: Removed]">
<META NAME="author" CONTENT="[Edit: Removed]">
<META NAME="robots" CONTENT="FOLLOW,INDEX">
<link href="/style.css" rel="stylesheet" type="text/css">
<meta name="google-site-verification" content="xqsw-p-BhHKclP3uYcHkJk1w_AUaN17HByWXCmB-Al8" />
<script type="text/javascript" src="<?php echo $site; ?>js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="<?php echo $site; ?>js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#feature').innerfade({
speed: 'slow',
timeout: 6000,
type: 'sequence',
containerheight: '400px'
});
}
);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6170278-8']);
_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>
</head>
<div class="container">
<div class="top_area">
<div class="logo"></div>
<div class="menu">
<li><a href="<?php echo $site; ?>">HOME</a></li>
<li><a href="<?php echo $site; ?>classes.html">ART CLASSES</a></li>
<li><a href="<?php echo $site; ?>tutorials.html">TUTORIALS</a></li>
<li><a href="<?php echo $site; ?>shop.html">ONLINE SHOP</a></li>
<li><a href="<?php echo $site; ?>contact.html">CONTACT</a></li><br />
<li class="portfolio_link"><a href="<?php echo $site; ?>portfolio.html">JUMP STRAIGHT TO THE PORTFOLIO</a></li>
</div>
</div>
<div class="mid_area">
<?php if($page!="home") {?><div class="current">Currently Viewing: <b><?php echo $page ?></b></div><?php } ?>
<?php // HOME PAGE
if(empty($_GET['page'])) {?>
<div class="feature" id="feature">
<img src="<?php echo $site; ?>images/front/feat1.jpg" />
<img src="<?php echo $site; ?>images/front/feat2.jpg" />
</div>
<?php } ?>
<?php if(!empty($page)&&($page=="classes")) { include('classes.php'); } ?>
<?php if(!empty($page)&&($page=="tutorials")) { include('tutorials.php'); } ?>
<?php if(!empty($page)&&($page=="shop")) { include('shop.php'); } ?>
<?php if(!empty($page)&&($page=="contact")) { include('contact.php'); } ?>
<?php if(!empty($page)&&($page=="portfolio")) { include('portfolio.php'); } ?>
<?php if(!empty($page)&&($page=="checkout")) { include('checkout.php'); } ?>
</div>
<?php include('footer.php'); ?>
</div>
</body>
</html>
style.css
Code:
body { background:url(images/back.jpg) repeat; text-align: center; margin:0;}
html { margin:0;}
.container { width:850px; text-align:left; margin:auto;}
.top_area { width:850px; float:left; height:120px;}
.logo { width:266px; height:86px; background-image:url(images/logo.png); margin:20px 20px 20px 0; float:left;}
.menu { height:40px; margin-top:45px; margin-left:15px; color:#FFF; font-family:"Times New Roman", Times, serif; float: left; letter-spacing:-1px; font-size:14px; text-shadow: #5b2a0c 0px 1px 1px;}
.menu li { display: inline; list-style-type: none; margin-right:20px;}
.menu li a { color:#FFF; text-decoration:none;}
.menu li a:hover { color:#f4ceb7;}
.portfolio_link { line-height:25px; font-style:italic; color:#FFF; border-bottom:1px dotted #FFF;}
.portfolio_link:hover { border-bottom:1px dotted #f4ceb7;}
.portfolio_link a { color:#FFF; }
.portfolio_link a:hover { color:#f4ceb7;}
.mid_area { width:850px; float:left;}
.feature { background:url(images/front/back.png) no-repeat; width:850px; height:500px; float:left; margin-left:-25px;}
.feature img { margin:12px 0 0 25px;}
.quicklinks { margin:22px;}
.left { float:left;}
.right { float:right;}
.current { float:left; width:820px; height:15px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF; text-transform: capitalize; text-shadow: #5b2a0c 0px 1px 1px;}
.footer { float:right; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFF; margin-top:20px; text-align:center; width:850px; text-shadow: #000 0px 1px 1px; }
h1 { font-family: "Times New Roman", Times, serif; font-size:22px; color:#FFF; text-shadow: #5b2a0c 0px 1px 1px; }
/** Shop Settings **/
.shop_items { float:left; width:650px; margin-top:10px;}
.shop_item_container { width:150px; height:160px; margin: 0px 10px 10px 0px; background:#FFF; float:left;}
.shop_item { width:130px; height:160px; float:left; margin:10px; border:0; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.shop_item .image { width:130px; height:100px; float:left;}
.shop_item .details { width:130px; height:60px; float:left;}
.shop_item .details .left { font-weight:bold; float:left}
.shop_item .details .right { float:right}
.shop_item .details .button { float:left; font-weight:bold; width:130px; margin-top:6px;}
.shop_cart { float:left; width:200px; margin-top:10px;}
Thanks guys! Any help is appreciated.
Ben