Sign in to follow this  
Followers 0

CSS/HTML Help

7 posts in this topic

post the css and html please. I believe that you need to add a background. I'll know more once I see the code.

0

Share this post


Link to post
Share on other sites

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="default.css" media="screen"/>

<title>Twilight</title>

<script src="/mint/?js" 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="libraries/cpaint2.inc.compressed.js"></script>

<!-- END CPAINT:JSRS -->



<!-- START AJAX SCRIPTS -->

<script src="libraries/script.loader.php?load=init" type="text/javascript"></script>

<script src="libraries/ajax.functions.js" type="text/javascript"></script>

<!-- END AJAX SCRIPTS -->





<!-- START GALLERY CSS -->

<link rel="stylesheet" href="libraries/script.loader.php?load=gallery" type="text/css" media="screen" />

<!-- END GALLERY CSS -->





<!-- START SCRIPTS/STYLESHEETS FOR IE PC -->

<!--[if IE]>

<link href="styles/gallery_ie.css" 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="/mint/?js" 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="java script:;" 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="java script:;" onclick="closeImageWin();">« back to thumbnails</a>

</span>



<div id="nav_container">

<div id="prev">

<a id="a_prev" href="java script:;" onclick="prevImage()"><img src="./themes/dark/prev.gif" /></a>

</div>

<div id="next">

<a id="a_next" href="java script:;" onclick="nextImage()"><img src="./themes/dark/next.gif" /></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="java script:;" onclick="startSlideshow()">pause slideshow</a></span></div>

<div id="image_title"></div>



</div>



<div id="img">

<img id="mainimg" class="imagen" src="images/spacer.gif" />

</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

0

Share this post


Link to post
Share on other sites

oh man, the code is there on the website, why posting it ? :P

anyway, you probably need to add something like the clearfix class to you holder container - so the background will stretch all the way down

0

Share this post


Link to post
Share on other sites

i posted it because Eyesonly asked for it.

Anyway- the clearfix thing didn't work, any other ideas?

0

Share this post


Link to post
Share on other sites

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

0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0