CSS Forum

**davidhowland14** · 09-17-2008, 11:08 AM

I'm trying to add a custom header to my installation of ZenPhoto. I opened the index.php, album.php, and image.php files and added the relevenat code to the PHP files. I then edited dark.css (the css file for the theme im using) to try and get the header to appear identically to the rest of my site. I have no knowledge of PHP, but I'e come close. However, I can't seem to get it to work. My site renders almost perfectly in IE (ironic, i know), and renders weirdly in Firefox.

IE

The nav bar shows up where it should, but the text is indendted. Also, I wouldn't mind if I could get the box containing the zenphoto content to be flush with the bottom margin of the nav bar.

Firefox

As you can see, the nav bar shows up outside of the borders I set for it, and not aligned with the zenphoto content. Im stumped. Here's the relevant code:

PHP

Code:

<?php if (!defined('WEBPATH')) die(); $themeResult = getTheme($zenCSS, $themeColor, 'light'); $firstPageImages = normalizeColumns('2', '6');?>
<!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>
	<?php zenJavascript(); ?>
	<title><?php echo strip_tags(getGalleryTitle()); ?></title>
	<link rel="stylesheet" href="<?php echo  $zenCSS ?>" type="text/css" />
	<?php printRSSHeaderLink('Gallery',gettext('Gallery RSS')); ?>
</head>

<body>
<div align="center"><a href="http://www.frigidight.com" target="_blank"><img src="http://www.frigidlight.com/images/flplogo.jpg" border="0" /></a></div>

<div id="header">
<div id="nav">
				<ul>
					<li><a class="home" href="http://www.frigidlight.com">home</a></li>
					<li><a class="gallery" target="new" href="http://www.galleries.frigidlight.com">gallery</a></li>
					<li><a class="film" href="http://www.frigidlight.com/film/">films</a></li>
					<li><a class="shop" href="http://www.frigidlight.com/shop/">shop</a></li>
					<li><a class="prints" href="http://www.frigidlight.com/prints/">prints</a></li>
					<li><a target="blank" class="blog" href="http://www.frigidlight.com/blog/">blog</a></li>
				</ul>
</div>

</div>
<div id="main">

	<div id="gallerytitle">
		<?php if (getOption('Allow_search')) {  printSearchForm(''); } ?>
		<h2><?php printHomeLink('', ' | '); echo getGalleryTitle(); ?></h2>
	</div>

		<div id="padbox">

		<div id="albums">
			<?php while (next_album()): ?>
			<div class="album">
						<div class="thumb">
					<a href="<?php echo htmlspecialchars(getAlbumLinkURL());?>" title="<?php echo gettext('View album:'); ?> <?php echo strip_tags(getAlbumTitle());?>"><?php printAlbumThumbImage(getAlbumTitle()); ?></a>
 						 </div>
						<div class="albumdesc">
					<h3><a href="<?php echo htmlspecialchars(getAlbumLinkURL());?>" title="<?php echo gettext('View album:'); ?> <?php echo strip_tags(getAlbumTitle());?>"><?php printAlbumTitle(); ?></a></h3>
 							<small><?php printAlbumDate(""); ?></small>
					<p><?php printAlbumDesc(); ?></p>
				</div>
				<p style="clear: both; "></p>
			</div>
			<?php endwhile; ?>
		</div>
		<br clear="all" />
		<?php printPageListWithNav("&laquo; ".gettext("prev"), gettext("next")." &raquo;"); ?>
	</div>

</div>
<?php if (function_exists('printLanguageSelector')) { printLanguageSelector(); } ?>

<div id="credit"><?php printRSSLink('Gallery','','RSS', ' | '); ?> <?php printCustomPageURL(gettext("Archive View"),"archive"); ?> | <?php echo gettext("Powered by"); ?> <a href="http://www.zenphoto.org" title="<?php echo gettext('A simpler web photo album'); ?>">zenphoto</a></div>

<?php printAdminToolbox(); ?>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2864247-5");
pageTracker._trackPageview();
</script>
</body>
</html>

CSS

Code:

/*

	Zen Photo Default (Dark) 1.0
	
*/

/* Basics
------------------------------ */
html {
	/* Moz */
	height: 100%;
}

/* Main Layout
------------------------------ */
body {
	background: #111;
	margin: 0 auto;
	padding: 0px 0px 50px;
	text-align: center;
	width:800px;
}
#main {
	text-align: left;
	margin: 20px auto;
	width: 738px;
	background: #222;
	padding: 20px 30px 0px;
	border-top: 1px solid #444;
	border-right: 1px solid #444;
	border-bottom: 5px solid #444;
	border-left: 1px solid #444;
}
#credit, #sort {
	margin: 0 auto;
	width: 640px;
	font-size: 85%;
	color: #294550;
	text-align: right;
	clear: both;
}
#credit a, #sort a {
	text-decoration: none;
	color: #294550;
	border-bottom: 1px dotted #294550;
}
#credit a:hover, #sort a:hover {
	color: #748da0;
	border-bottom: 1px solid #294550;
	text-decoration: none;
}
#gallerytitle {
	border-bottom: 1px solid #E6E6DF;
	padding-bottom: 14px;
	margin-bottom: 20px;
	/*min-height: 40px;
  _height: 40px;*/
}
#gallerytitle h2 { 
	font-weight: normal; 
	font-size: 12pt; 
	margin-top: 18px;
	width:510px;
}

#header { width: 800px; margin-bottom: 5px; float: left; }

#nav { width: 100%; border-top: 4px solid #222; border-bottom: 2px solid #222; float: left; }

	#nav ul { list-style: none; }

		#nav li { float: cetner; width:800px }
		
			#nav li a, #nav li a:visited { display: block; height: 3.0em; padding: 0 1.2em; line-height: 3.0em; color: #fff; text-decoration: none; font-size: 1.1em; text-transform: uppercase; letter-spacing: .3em; float: left; } 
		
			#nav li a:hover { color: #000; background: #fff; text-decoration: none; }
			
			.home #nav li a.home, .home #nav li a.home:visited, .gallery #nav li a.gallery, .gallery #nav li a.gallery:visited, .film #nav li a.film, .film #nav li a.film:visited, .shop #nav li a.shop, .shop #nav li a.shop:visited, .prints #nav li a.prints, .prints #nav li a.prints:visited, .blog #nav li a.blog, a.blog #nav li a.blog:visited { background: #222; color: #fff; cursor: default; }


.navigation { width: 480px; padding: 10px; margin-bottom: 30px; font-size: 1.1em; line-height: 1.7em; background: #f5f5f5; float: left; }


/* Link Styles
------------------------------ */
a:link, a:active, a:visited { text-decoration: underline; color: #86a1b6; }
a:hover, a:focus { text-decoration: underline; color: #94c2e5; }

/* Text Styles
------------------------------ */
body {
	font: normal 82%/200% Georgia, "Times New Roman", Times, serif;;
	color: #888;
}

h2 {
	font: 115% Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	color: #AAA;
}
h2 a:link, h2 a:visited {
	color: #86a1b6;
	text-decoration: none;
}
h2 span {
	color: #666;
}
h2 a:hover {
	color: #94c2e5;
	text-decoration: none;
}
h3 {
	font: 115% Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	color: #748da0;
	margin-top: 30px;
}
h3 a:link, h3 a:visited { text-decoration: none; }
h3 a:hover { text-decoration: underline; }


/* Miscellaneous
------------------------------ */
hr {
	clear: both;
	height: 0;
	border: 0;
	border-top: 1px solid #444;
	margin: 0 0 12px 0;
	padding: 0;
}
img {
	border: 0;
}
blockquote {
	border-left: 1px dotted #96967E;
	margin-left: 20px;
	padding-left: 20px;
	color: #363630;
}

#imagemetadata {
  text-align: right;
  position: relative;
  display: none;
}

#imagemetadata table {
  text-align: left;
  line-height: 1em;
  border: 1px solid #ccc;
  position: absolute;
  top: 2em;
  right: 0px;
  background-color: #fafafa;
}

#imagemetadata table td {
  border-bottom: 1px solid #f0f0f0;
  background-color: #f8f8f8;
  padding: 2px 5px;
}


/* Page Navigation
------------------------------ */
ul.pagelist {
	clear: both;
	padding: 0;
	margin: 20px 0 0 0;
	list-style-type: none;
}
ul.pagelist li {
	display: inline;
}
ul.pagelist li a, ul.pagelist span.disabledlink {
	padding: 4px;
}
ul.pagelist li.current a {
	font-weight: bold;
	text-decoration: none;
	cursor: default;
	color: #748da0;
}
ul.pagelist li.prev {
	margin-right: 10px;
}
ul.pagelist li.next {
	margin-left: 10px;
}
.disabledlink {
	color: #294550;
	cursor: default;
}
.pagenav {
	clear: both;
}
.disabled_nav {
	visibility: hidden;
}


/* AJAX
------------------------------ */
#albumDescEditable, #albumTagsEditable {
	margin-bottom: 12px;
}
#imageDescEditable, #albumTagsEditable {
	margin-top: 24px;
}
#imageDesc, #exif_link {
	margin-bottom: 4px;
}

#exif_link {
  float: right;
}

/* Tags
------------------------------ */
.taglist ul {
	display: inline;
	list-style-type: none;
}

.taglist li {
	background: url(../images/tag.png) no-repeat left center;
	list-style-type: none;
	padding-left: 18px;
	float:left;
	padding-right: 5px;
}

.taglist .tags_title {
	background: none;
	padding-right: 5px;
	padding-left: 0;
}

/* Image Thumbnails
------------------------------ */
.imagethumb a, .imagethumb a:hover {
	display: block;
	padding: 9px;
	margin: 0px 9px 9px 0px;
	line-height: 0px;
    border: 1px solid #444;
	background-color: #333;
}
.imagethumb a:visited {
    background-color: #333;
    border: 1px solid #444;
}
.imagethumb a:hover {
	background-color:#333;
	border: 1px solid #ccc;
}
.imagethumb {
	float: left;
}
.albumdesc2 {
	line-height: 18px;
}


/* Album Thumbnails
------------------------------ */
#albums {
	float: left;
}
.album {
	margin: 0 12px 8px 0;
    padding: 10px 8px 8px 10px;
	float: left;
	width: 305px;
	border: 1px solid #444;
	background: #333;
	line-height: 100%;
}
.album a img {  }
.album .thumb {
    float: left; 
    margin-right: 6px;
}
.album h3 {
	padding: 0;
	margin: 0;
}
.album p {
	line-height: 12px;
	font-size: 11px;
  	padding: 4px 0px 0px;
  	margin: 0px;
}
.albumdesc small {
	color: #8DB8CF;
}


/* Individual Image
------------------------------ */
.image { 
	margin: 0;
	padding: 0;
	border: 0;
}
#image {
	text-align: center;
	line-height: 0;
}
.imgnav {
	float: right;
	width: 140px;
	text-align: center;
	border: 1px solid #444;
	background: #282828;
	margin-top: -10px;
}
.imgnav .imgprevious a, .imgnav .imgnext a {
	display: block;
	width: 50%;
	height: 100%;
	float: left;
	padding: 4px 0;
	font-size: 120%;
	text-decoration: none;
	line-height: 180%;
	color: #666;
}
.imgnav .imgprevious a:hover, .imgnav .imgnext a:hover {
	background-color: #333;
	text-decoration: none;
	color: #888;
}
.imgnav .imgprevious a {
	float: left;
}
.imgnav .imgnext a {
	float: right;
}
#narrow {
	margin: 0 auto;
	width: 440px;
}


/* Comments
------------------------------ */
#comments {
	clear: both;
}
.error { 
  color: #C33; 
  font-weight: bold; 
}
.comment {
	padding: 10px;
	border: 1px solid #444;
	background: #333;
	margin-bottom: 12px;
}
.commentmeta {
	margin-bottom: 12px;
}
.commentauthor {
	font-weight: bold;
}
.commentdate {
	margin-top: 12px;
	color: #555;
	font-size: 85%;
}


/* Forms
------------------------------ */
.inputbox {
	width: 250px;
	padding: 2px;
}
textarea {
	padding: 4px;
	width: 100%;
	color: #888;
	font: 100%/200% "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.checkbox {
	cursor: pointer;
}
.pushbutton {
	cursor: pointer;
	padding: 5px 10px;
}
label {
	cursor: pointer;
}
label:hover {
	color: #999;
}
#map {margin-left: -77px;}
#rating { margin-top: 10px; }

/* Admin Toolbox
------------------------------ */
#admin, #admin_data{
	position: fixed;
  _position: absolute;
	right: 0px;
	top: 0px;
	width: 120px;
	border-bottom: 1px solid #444;
	border-left: 1px solid #444;
	background: #222;
    z-index: 2;
}
#admin_data{
	top: 0px;
	padding-top: 20px;
	z-index: 1;
	line-height: 1.6em;
}
#admin h3 {
	font-weight: normal;
	color: #aaa;
	margin:0;
	padding:0;
}
#admin h3:hover { color: #86a1b6; }

/* Search Box
------------------------------ */
#search {
	float: right;
	text-align: center;
	background: #222;
}
#search input.pushbutton {
	padding: 1px;
	font-size: 80%;
}
#search ul {
  position:absolute;
  text-align: left;
  width:20px;
  margin:0px;
  padding:2px;
  list-style:none;
}
#search ul .item {
  display:none;
}
#search ul:hover .item {
  display:block;
  padding:1px;
  margin:0px;
  background-color:#222;
  color: #fff
}
#search li {
width:150px;
}
.clear {
  clear:both;
  height:10px;
}

/* Archive View
---------------------------- */
#archive{
	width: 300px;
	margin: 0 auto;
	text-align: center;
}
ul.archive * {
	padding:0;
	margin:0;
	list-style:none;
}
ul.archive .year {
	margin-top:10px;
	text-align: center;
	margin-bottom:5px;
	font-weight:bold;
	font-size:18px;
}
ul.archive .month {
	font-size: 14px;
	list-style:none;
	border-top:2px solid #666;
	padding-top: 5px;
}

/* Tag Cloud
---------------------------- */
#tag_cloud {
	text-align: center;
	background: #111;
}

#tag_cloud ul li {
	display: inline;
	list-style-type: none;
}

#tag_cloud p {
	padding:10px 0;
	margin:20px 0;
	background: #222;
	border-top: 3px solid #666;
	border-bottom: 3px solid #666;
	font-size: 18px;
	font-weight:bold;
	text-align: center;
}
/* Error Messages
------------------------------ */
.errorbox {
	padding: 20px;
	background-color: #FDD;
	border-top: 1px solid #FAA;
	border-left: 1px solid #FAA;
	border-right: 1px solid #FAA;
	border-bottom: 5px solid #FAA;
	margin-bottom: 10px;
	font-size: 100%;
	color: #DD6666;
}
.errorbox h2 {
	color: #DD6666;
	font-size: 100%;
	font-weight: bold;
	margin: 0px;
}

If anyone can help out with this issue, I'd be extremely grateful.