I have a couple of problems when I try to integrate the ImageGallery tag into my page:
1)the footer positioned itself with regard to the text as if the image gallery pictures do not even exist.
2)I would like to align the thumbnails so they have equal margin from each side.
so here are some thing s that should help you help me
a)page address with problem: http://www.project-hydra.com/index.php?page=shield
b)Template 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" xml:lang="en" >
<head>
<title>{title}</title>
{metadata}
{stylesheet}
</head>
</__body>
<div id="banner">
<div class="top_links clearfix" id="topnav">
<ul>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS:valid</a></li>
<li><a href="http://validator.w3.org/check?uri=referer">XHTML:valid</a></li>
<li><a href="http://piratos.byethost33.com/">designBy:Piratos</a></li>
</ul>
</div>
<img alt="pumpkin" src="{root_url}/uploads/images/templates/do/header_logo.gif" />
<div class="page_title"><span id="page_title">Project Hydra: because doing just one project at a time is for wimps.</span><br />
Hercules' got nothin' on me!</div>
</div>
<div class="leftcontent" id="nav"> <img alt="bg image" src="{root_url}/uploads/images/templates/do/left_bg_top.gif" />
{cms_module module='menumanager' template='Do'}
<div class="left_news">
This website performs best with Firefox: the Free, open source, secure and cutting edge web browser.<br /><br />Download now:
<!--Start Google AdSense Code-->
<__script__ type="text/javascript"><!--
google_ad_client = "pub-9798332542388570";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as_rimg";
google_cpa_choice = "CAEQ7fKXhAIQsfKXhAIQufGXhAIQ2e2XhAIQ4eyXhAIQ6euXhAIaCG7jKV2f5VDGKPG193Mo8bX3cyjxtfdzKPG193Mo8bX3cyjxtfdz";
//-->
</__script>
<__script__ type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</__script>
<!--End Google AdSense Code-->
</div>
</div>
<div id="centercontent">
{content}
<br />
<div class="footer" id="footer">
{global_content name='footer'}
</div>
</div>
<div id="rightcontent">
<div class="right_news">
<!--Start Google AdSense Code-->
<__script__ type="text/javascript"><!--
google_ad_client = "pub-9798332542388570";
//120x90, created 11/27/07
google_ad_slot = "1412684951";
google_ad_width = 120;
google_ad_height = 90;
//--></__script>
<__script__ type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</__script>
<br />
<!--DIVIDER-->
<br />
<__script__ type="text/javascript"><!--
google_ad_client = "pub-9798332542388570";
//160x600, created 11/27/07
google_ad_slot = "6606770888";
google_ad_width = 160;
google_ad_height = 600;
//--></__script>
<__script__ type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</__script>
<!--End Google AdSense Code-->
</div>
</div>
<__body>
</__html>
Code: Select all
/******* structure and layout *******/
body {
margin:10px 10px 0px 0;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 9pt;
color:#000000;
}
.leftcontent {
position: absolute;
left:0px;
top:126px;
width:200px;
background:#ffffff url(uploads/images/templates/do/left_bg.gif);
border:none;
text-align:left;
}
.left_news {
position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
color:#818181;
margin:0 0 0 0;
padding:10px 5px 5px 10px;
width:185px;
background:#ffffff;
}
#centercontent {
background:#ffffff;
margin-top:10px;
margin-left: 199px;
margin-right:199px;
line-height:1.4em;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 211px;
margin-right:201px;
}
#rightcontent {
position: absolute;
right:10px;
top:130px;
width:200px;
background:#ffffff;
border:1px solid #7DB26E;
}
.right_news {
position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
color:#818181;
margin:0 0 0 0;
padding:10px 5px 5px 10px;
width:185px;
background:#ffffff;
}
#banner {
background:#ffffff url(uploads/images/templates/do/header_bg.gif);
height:116px;
border:none;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
color:#000000;
}
html>body #banner {
height:116px;
}
.footer {
position:relative;
margin:10px 0 10px 0;
padding:5px 10px 5px 10px;
background:#ffffff;
/* yet another problem with IE, this time with the boder of the footer. The top portion of the border was not showing up in IE, but was fine in the other browsers. Although i know it's bad form to say "screw it", i'm saying it anyway because i really don't want to take the time to work around yet another IE bug. */
border:1px solid #ffffff;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
color:#B7D7AF;
}
.page_title {
position:absolute;
top:53px;
left:175px;
margin:0 0 0 0;
padding:0 0 0 0;
}
.top_links {
/* i positioned the top links absolutely within the banner area because of a problem i saw in IE when i did a float-right, and i didn't want to take the time to figure it out. Anyway, this isn't a problem until you add more links to the top nav or edit the text links. If/when you do, you'll have to adjust the position of the area by moving it right or left. 600px isthe default */
position:absolute;
top:10px;
left:600px;
margin:0 0 0 0;
padding:0 0 0 0;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
#rightcontent p {
font-size:8pt;
}
/******* left navigation *******/
#nav ul {
margin:10px 0 10px 5px;
padding:0 0 0 0;
background:transparent;
}
#nav li {
list-style-type: none;
background:#B7D7AF;
color: #7DB26E;
font-weight:bold;
border:1px solid #7DB26E;
text-align:left;
padding:0 0 0 10px;
margin-bottom:6px;
}
#nav li a {
color: #7DB26E;
font-weight:bold;
text-decoration: none;
display: block;
padding:2px 0 2px 5px;
}
#nav li a:hover {
background:#ffffff;
color: #7F9BC5;
}
#nav li a:hover:after {
/* this puts that little blue box after the left navigation links on hover */
background:#ffffff;
color: #7F9BC5;
content: url(uploads/images/templates/do/square.gif)
}
/******* top navigation *******/
#topnav ul{
padding:0 0 0 0;
margin:0 5px 0 0;
white-space: nowrap;
font-size:7pt;
color:#ffffff;
float:left;
width:100%;
background:transparent;
list-style:none;
}
#topnav ul li{
display:inline;
list-style:none;
}
#topnav ul li a{
margin: 0 5px 0 0;
padding: .2em 1em .2em 1em;
background:#B7D7AF;
color: #000000;
font-weight:bold;
text-decoration:none;
float: left;
border:2px solid #ffffff;
}
#topnav ul li a:hover{
background:#7DB26E;
color: #ffffff;
text-decoration:none;
border:2px solid #ffffff;
}
/******* fonts and colors *******/
a {
color:#699065;
text-decoration:underline;
}
a:hover {
color:#999999;
text-decoration:none;
}
#footer a {
color:#B7D7AF;
text-decoration:underline;
}
#footer a:hover {
color:#999999;
text-decoration:none;
}
.news_title {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9pt;
font-weight:bold;
color:#7F9BC5;
}
.news_title_grn {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
font-weight:bold;
color:#6C9261;
}
#page_title {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15pt;
color:#7F9BC5;
text-transform:uppercase;
}
span.squares {
display:block;
float:left;
width:18px;
height:18px;
margin-right:2px;
background-image:url(uploads/images/templates/do/squares.gif);
background-repeat:no-repeat;
}
span.squares span {display:none;}
blockquote {
padding:10px 10px 15px 10px;
background:#E5ECF7;
border-left:2px solid #C7D9F5;
font-style:italic;
color:#6B84A8;
letter-spacing:.1em;
}
h1 {
font-size:14px;
padding-top:10px;
}
#banner h1 {
font-size:14px;
padding:10px 10px 0px 10px;
margin:0px;
}
/******* lists *******/
#list ul {
margin:0 0 0 0;
padding:0 0 0 0;
list-style:none;
}
#list li {
margin:.5em 0 0 0;
padding:0 0 0 15px;
list-style:none;
background: url(uploads/images/templates/do/square_list.gif) no-repeat;
background-position: 0 .3em;
}
#list li.sub {
margin:.5em 0 0 .5em;
padding:0 0 0 15px;
list-style:none;
background: url(uploads/images/templates/do/square_list2.gif) no-repeat;
background-position: 0 .3em;
}
/******* images *******/
img {
border:none;
}
.center {
text-align:center;
}
/******* workarounds and hacks *******/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */Code: Select all
/* Image Gallery - Small Thumbnail Images */
.thumb {
/*margin: 1em 1em 1.6em 0; /* Space between images */
margin:0 auto;
padding: 0;
float: left;
text-decoration: none;
line-height: normal;
text-align: center;
}
.thumb img, .thumb a img, .thumb a:link img{ /* Set link formatting*/
width: 100px; /* Image width*/
height: 100px; /* Image height*/
display: inline;
padding: 12px; /* Image padding to form photo frame */
/* You can set the above to 0px = no frame - but no hover indication! Adjust other widths ot text!*/
margin: 0;
background-color: white; /*Background of photo */
border-top: 1px solid #eee; /* Borders of photo frame */
border-right: 2px solid #ccc;
border-bottom: 2px solid #ccc;
border-left: 1px solid #eee;
text-decoration: none;
}
.thumb a:visited img {
background-color: #eee; /*Background of photo on hover - sort of a light grey */
}
.thumb a:hover img {
background-color: #dae6e4; /*Background of photo on hover - sort of light blue/green */
}
.thumbPicCaption {
text-align: center;
font-size: smaller;
margin: 0 1px 0 0;
padding: 0;
width: 124px; /* Image width plus 2 x padding for image (photo frame) - to center text on image */
/* display: none; if you do not want to display this text */
}
/* Image Gallery - Big Images */
.bigPic {
margin: 10px 0 5px 0;
padding: 0;
line-height: normal;
}
.bigPicCaption { /*Big Image Name - above image above .bigpicImageFileName (Without extension) */
text-align: center;
font-weight: bold;
font-variant: small-caps;
font-weight: bold;
margin: 0 1px 0 0;
padding: 0;
width: 386px; /* Image width plus 2 x padding for image (photo frame) - to center text on image */
/* display: none; if you do not want to display this text */
}
.bigPic img{ /* Big Image settings */
width: 350px; /* Width of Big Image */
height: auto;
display: inline;
padding: 18px; /* Image padding to form photo frame. */
/* You can set the above to 0px = no frame - but no hover indication! Adjust other widths ot text!*/
margin: 0;
background-color: white; /* Background of photo */
border-top: 1px solid #eee; /* Borders of photo frame */
border-right: 2px solid #ccc;
border-bottom: 2px solid #ccc;
border-left: 1px solid #eee;
text-decoration: none;
text-align: left;
}
.bigPicNav { /* Big Image information: 'Image 1 of 4' and gallery navigation */
margin: 0;
width: 386px; /* Image width plus 2 x padding for image (photo frame) - to center text on image */
padding: 0;
color: #000;
font-size: smaller;
line-height: normal;
text-align: center;
/* display: none; if you do not want to display this text. Why? You Lose Navigation! */
}thanks!
-Leav
