I'm setteling down in my new country Canada now, and got back to webdesigning.. now I have a little problem with my own site.. It's a very typical problem.. I've heard it before, but I can't seem to solve my problem..
Here's the deal:
http://www.poppen.ca and click on portfolio. Notice the bottom not having a full background?
Now I was thinking of making an overall wrapper and put the current page-background in that wrapper as a background, and make a repeating background instead of the current page-background.
When I tried that the repeating background was fine, but the "wrapper-background" only pulled down to the menu.
Is my idea a good one and if yes, how would I do it?
My code:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Poppen.ca - RockSolid Webdesign</title>
<meta name="Description" content="Poppen.ca - RockSolid Webdesign" />
<meta name="Keywords" content="Mark Poppen poppen.ca webdesign saskatchewan saskatoon website websites" />
<meta name="Author" content="Poppen.ca / Fresh-style.nl" />
<link href="<?php echo TEMPLATEDIR; ?>customer/css/customer.css" rel="stylesheet" style="text/css" />
</head>
<body>
<div id="menu">
<!--CMS Menu-->
<?php if ( !empty( $menulist ) ) { ?>
<ul>
<?php foreach( $menulist as $menu ) { ?>
<li><a href="/<?php echo $menu['pageid']; ?>/<?php echo Functions::make_seo_string( $menu['title'] ); ?>"><?php echo $menu['title']; ?></a></li>
<?php } ?>
</ul>
<?php } else { ?>
Geen menu beschikbaar
<?php } ?>
<!--End CMS Menu-->
</div>
<div id="container">
<div id="content">
<!--CMS Content-->
<?php if ( !empty( $page ) ) { ?>
<?php if ( $page['published'] ) { ?>
<h1><?php echo $page['title']; ?></h1>
<?php echo $page['content']; ?>
<?php } else { ?>
<p><?php echo $lang['error_customer_pagenotpublished']; ?></p>
<?php } ?>
<?php } else { ?>
<p><?php echo $lang['error_customer_pagenotfound']; ?></p>
<?php } ?>
<!--End CMS Menu-->
</div>
<div id="portfolio">
<a href="http://www.commun-art.nl/hartenheer/">Our latest site</a><br />
<img src="../templates/customer/i/portfolio.jpg" alt="Our latest website" />
</div>
</div>
</body>
</html>
CSS:
- Code: Select all
@charset "utf-8";
* {
padding: 0;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
body {
background-color: #856046;
background-image: url(../i/back.png);
background-repeat: no-repeat;
background-position: center top;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
color: #000000;
text-decoration: underline;
}
#menu {
height: 35px;
width: 773px;
padding-top: 126px;
padding-left: 15px;
}
#menu li {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bolder;
color: #000000;
list-style-type: none;
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
padding-right: 5px;
padding-left: 5px;
}
#menu li a {
color: #000000;
text-decoration: none;
}
#menu li a:hover {
color: #000000;
text-decoration: none;
background-image: url(../i/backbutton.png);
}
#container {
height: auto;
width: 786px;
clear: both;
}
#container #content {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
background-color: #6fbde0;
float: left;
width: 380px;
padding-top: 20px;
padding-left: 16px;
margin-left: 2px;
line-height: 20px;
padding-right: 30px;
}
#container #portfolio {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 4px;
float: left;
height: auto;
width: 166px;
margin-top: 126px;
}
How would I tackle this?
Jan 17th, 2008, 19:01
