Aqua-Soft ForumsI'm trying to get minishowcase to fit in this css template, but it doesn't quite line up exactly.
Here is the URL:
http://thetalonweekly.com/Sites/gallery.php
If you have any ideas, please post them.
Thanks!
CSS/HTML Help
post the css and html please. I believe that you need to add a background. I'll know more once I see the code.
heres the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/>
<meta name="author" content="author"/>
<link rel="stylesheet" type="text/css" href="../../unavailable.html" media="screen"/>
<title>Twilight</title>
<script src="../../unavailable.html" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="navigation">
<div class="title">
<h1>Alex Galonsky</h1>
photography
</div>
<a href="index.html">Gallery</a>
<a href="index.html">Home</a>
<div class="clearer"><span></span></div>
</div>
<div class="holder_top"></div>
<div class="holder">
<!--
minishowcase v09b87
by victor zambrano
http://minishowcase.frwrd.net/
-->
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>minishowcase | gallery</title>
<!-- START CPAINT:JSRS ( http://cpaint.sourceforge.net/ ) -->
<script type="text/javascript" src="../../unavailable.html"></script>
<!-- END CPAINT:JSRS -->
<!-- START AJAX SCRIPTS -->
<script src="../../unavailable.html" type="text/javascript"></script>
<script src="../../unavailable.html" type="text/javascript"></script>
<!-- END AJAX SCRIPTS -->
<!-- START GALLERY CSS -->
<link rel="stylesheet" href="../../unavailable.html" type="text/css" media="screen" />
<!-- END GALLERY CSS -->
<!-- START SCRIPTS/STYLESHEETS FOR IE PC -->
<!--[if IE]>
<link href="../../unavailable.html" rel="stylesheet" type="text/css" media="screen" />
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#msc_image {
/* IE5.5+/Win - this is more specific
than the IE 5.0 version */
left: expression( ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) + 'px' );
top: expression( ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) + 'px' );
right: auto;
bottom: auto;
}
</style>
<![endif]>
<![endif]-->
<![endif]-->
<!-- END SCRIPTS/STYLESHEETS FOR IE PC -->
<script src="../../unavailable.html" type="text/javascript"></script>
</head>
<a id="hash" name="null"></a>
<div id="global_container">
<div id="debug"><p>[DEBUG] <span id="debug_content">Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/418.9.1 (KHTML, like Gecko) Safari/419.3</span></p></div>
<!-- tooltip -->
<div id="tooltip"></div>
<!-- alert container -->
<div id="alert">
<span id="msg"><!-- Alert goes here --></span>
<p><a id="dismiss" href="../../unavailable.html" onclick="hideDiv('alert');">click to dismiss...</a></p>
</div>
<!-- alert container -->
<div id="msc_container">
<!-- menu div -->
<div id="msc_menu">
<h1>galleries</h1>
<!-- menu items div -->
<div id="galleries_menu"></div>
</div>
<!-- menu div -->
<!-- thumbs div -->
<div id="msc_thumbs">
<!-- top menu -->
<div id="top_menu" class="">
<!-- galleries menu -->
<div id="galleries_select"> </div>
<!-- gallery url -->
<!-- <div id="gallery_url"> </div> -->
<!-- tools menu -->
<div id="tools_menu">tools:
<span id="tools_slideshow"></span>
<span id="tools_permalink"></span>
</div>
</div>
<!-- gallery info div -->
<div id="gallery_data">
<div id="gallery_title"></div>
</div>
<!-- gallery description div -->
<div id="gallery_description">
This is my photo gallery.
Please pick a gallery to the left.</div>
<!-- thumbs wrapper -->
<div id ="thumbs_div">
<!-- gallery block nav div -->
<div id="gallery_nav">
<div id="gallery_block"></div>
</div>
<!-- thumbs loader data -->
<div id="thumbs_load"></div>
<!-- thumbs container -->
<div id="thumbs_cont"></div>
</div>
<!-- footer div -->
<div id="msc_foot">
<span id="footer_cont">Powered by <a href="http://minishowcase.frwrd.net" target="_blank">minishowcase</a> and <a href="http://cpaint.wiley14.com/" target="_blank">cpaint</a></span>
</div>
</div>
<!-- thumbs div -->
</div>
<!-- msc_container div -->
<!-- image container -->
<div id="msc_image">
<div id="image_url"></div>
<!-- image div -->
<div id="image_div">
<div id="image_container">
<div id="image_menu">
<span id="close_win">
<a href="../../unavailable.html" onclick="closeImageWin();">« back to thumbnails</a>
</span>
<div id="nav_container">
<div id="prev">
<a id="a_prev" href="../../unavailable.html" onclick="prevImage()"><img src="../../unavailable.html" /></a>
</div>
<div id="next">
<a id="a_next" href="../../unavailable.html" onclick="nextImage()"><img src="../../unavailable.html" /></a>
</div>
<div id="nav_thumbs"></div>
</div>
</div>
<div id="image_header">
<div id="timer"><span id="time">[ 15]</span> | <span><a id="toggle_show" href="../../unavailable.html" onclick="startSlideshow()">pause slideshow</a></span></div>
<div id="image_title"></div>
</div>
<div id="img">
<img id="mainimg" class="imagen" src="../../unavailable.html" />
</div>
</div>
</div>
<!-- image div -->
<!-- image bg -->
<div id="image_bg"></div>
</div>
<!-- image container -->
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
default.css:
/*#############################################################
Name: Twilight
Date: 2006-11-21
Description: A dark and mysterious single column template.
Author: Viktor Persson
URL: http://templates.arcsin.se
Feel free to use and modify but please provide credits.
#############################################################*/
/* standard elements */
* {
margin: 0;
padding: 0;
}
a {color: #663;}
a:hover {color: #993;}
body {
background: #0D0D0D url(img/bg.gif) repeat-y center top;
color: #55554A;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
margin: 0;
}
p,code,ul {
font-size: 1.2em;
padding-bottom: 1.2em;
}
h1 {
font-size: 1.4em;
margin-bottom: 4px;
}
li {
list-style: url(img/li.gif);
margin-left: 18px;
}
code {
background: url(img/bgcode.gif);
border: 1px solid #060606;
color: #666;
display: block;
font: normal 1.1em "Lucida Sans Unicode",serif;
margin-bottom: 12px;
padding: 8px 10px;
white-space: pre;
}
blockquote {
background: url(img/quote.gif) no-repeat;
color: #664;
display: block;
font: normal 1.2em "Lucida Sans Unicode",serif;
padding-left: 28px;
}
h1,h2,h3 {
color: #663;
padding-top: 6px;
}
/* misc */
.clearer {clear: both;}
/* structure */
.container {
margin: 0 auto;
width: 730px;
}
/* title */
.title {
float: left;
margin-top: 22px;
text-align: center;
width: 220px;
}
.title h1 {
color: #993;
font: normal 2em Verdana,sans-serif;
}
.title h2 {
color: #665;
font: normal 1.1em Verdana,sans-serif;
}
/* navigation */
.navigation {
background: url(img/holder.jpg) no-repeat;
height: 100px;
padding: 0 16px;
}
.navigation a {
border-left: 1px solid #111;
color: #665;
float: right;
font: bold 1.2em "Trebuchet MS",sans-serif;
margin-top: 9px;
padding: 58px 18px 8px;
text-align: center;
text-decoration: none;
}
.navigation a:hover {
background: #000 url(img/navhover.gif) repeat-x;
color: #993;
padding: 56px 18px 10px;
}
/* holders */
.holder {
background: url(img/bgholder.jpg) repeat-y;
padding: 0 32px;
}
.mini{
padding: 0;
}
.holder_top,.footer {
clear: both;
background: url(img/holder.jpg) no-repeat;
height: 40px;
}
/* footer */
.footer {
background-position: left bottom;
color: #665;
font-size: 1.1em;
text-align: center;
}
there is some CSS in the html that is created by minishowcase
i posted it because Eyesonly asked for it.
Anyway- the clearfix thing didn't work, any other ideas?
uhm, strange. it works perfectly for me if I try it on Firefox :slant: let's see...
step one: add this to you css file
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */step two:
change
into
.
On my browser, I see the background fill the whole container, and it connects to the footer
thanks a lot!