PDA

View Full Version : Simple Flash Gallery?


Dennis.
10-03-2010, 03:21 PM
Hey guys, any ideas on a simple way to make a gallery for a website?
I just tried SimpleViewer but it doesnt work right in google chrome so im scrapping that one.

gentleone
10-03-2010, 06:50 PM
I suggest to use jQuery over Flash for this. This site has really cool gallery tutorials.
http://tympanus.net/codrops/

Dennis.
10-03-2010, 07:06 PM
Thanks man, i think i found something that i could use. Since i will be able to intergrate it into my current template page.
http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/
A lot of the other ones seem to be full page tuts. Although i will save the site for when i want that kind of gallery.
Thanks again, and i will likely need help at somepoint so keep a look out ;) :P

Dennis.
10-09-2010, 10:37 PM
I am finaly getting around to doing this gallery now and i was wondering, where does the Java code go? I assume it goes in the HTML?

DWcourse
10-10-2010, 02:58 AM
There's no definitive answer. It depends what particular script you're using but your javascript usually goes in an external file and is inked from the html (usually in the head of the document) with something like:

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

Of course may have more javascript that needs to be called directly on the page or you have have to set up parts of your page in a certain way for the javascript to act upon it.

Dennis.
10-11-2010, 09:40 PM
Thanks, what would you suggest for the Javascript in this tutorial?
http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/

Since it isnt a lot should i add it to an external file? if so how?

edbr
10-12-2010, 01:24 AM
yes link to a external file

gentleone
10-12-2010, 06:06 AM
Since it isnt a lot should i add it to an external file? if so how?

Well...it is quite some. First thing is to link to jquery hosted on Google api's:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>Then you need the actual slideshow script which you can copy, if you view source, from the demo page all the way at the bottom.
Because it ain't a jquery plugin it is quite some length. You can choose to load it on the page like in the demo, but it's recommended to paste it in an empty javascript file and save that as eg. jquery.gallery.js in a folder called 'js' and load it like so:
<script type="text/javascript" src="js/jquery.gallery.js"></script>

Dennis.
10-12-2010, 08:03 PM
Okay i think i did all of that but nothing happens when in a browser.

<!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>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>

</head>

<body>
<div class="content">
<div><img src="../Images/Banner.png" width="710" height="210" alt="Banner" /></div>
<div class="nav"><ul class="cssmenu">
<li class="home"><a href="#" class="normal" title="Home"><span class="displace">Home</span></a></li>
<li class="gallery"><a href="#" title="Gallery"><span class="displace">Gallery</span></a></li>
<li class="studio"><a href="#" title="Studio"><span class="displace">Studio</span></a></li>
<li class="links"><a href="#" title="Links"><span class="displace">Links</span></a></li>
</ul>
</div>
<img src="../images/contentbox.png" width="710" height="435" class="background" />
<div class="Maincontent">
<div id="msg_slideshow" class="msg_slideshow" z-index: 4;>

<div id="msg_wrapper" class="msg_wrapper"></div>
<div id="msg_controls" class="msg_controls">
<a href="#" id="msg_grid" class="msg_grid"></a>
<a href="#" id="msg_prev" class="msg_prev"></a>
<a href="#" id="msg_pause_play" class="msg_pause"></a>
<a href="#" id="msg_next" class="msg_next"></a>
</div>
<div id="msg_thumbs" class="msg_thumbs">
<div class="msg_thumb_wrapper">
<a href="#">
<img src="images/thumbs/1.jpg" alt="images/1.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/2.jpg" alt="images/2.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/3.jpg" alt="images/3.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/4.jpg" alt="images/4.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/5.jpg" alt="images/5.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/6.jpg" alt="images/6.jpg"/>
</a>
</div>
<div class="msg_thumb_wrapper" style="display:none;">
<a href="#">
<img src="images/thumbs/1.jpg" alt="images/7.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/2.jpg" alt="images/8.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/3.jpg" alt="images/9.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/4.jpg" alt="images/10.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/5.jpg" alt="images/11.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/6.jpg" alt="images/12.jpg"/>
</a>
</div>
<a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>
<a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
<a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
<span class="msg_loading"></span>
</div>
</div>

</div>
</div>
</div>
</div>
</body>
</html>


JS:
// JavaScript Document
var interval = 4000;
var playtime;
var current = 0;
var current_thumb = 0;
var nmb_thumb_wrappers = $('#msg_thumbs .msg_thumb_wrapper').length;
var nmb_images_wrapper = 6;

play();

slideshowMouseEvent();
function slideshowMouseEvent(){
$('#msg_slideshow').unbind('mouseenter')
.bind('mouseenter',showControls)
.andSelf()
.unbind('mouseleave')
.bind('mouseleave',hideControls);
}

$('#msg_grid').bind('click',function(e){
hideControls();
$('#msg_slideshow').unbind('mouseenter').unbind('m ouseleave');
pause();
$('#msg_thumbs').stop().animate({'top':'0px'},500) ;
e.preventDefault();
});

$('#msg_thumb_close').bind('click',function(e){
showControls();
slideshowMouseEvent();
$('#msg_thumbs').stop().animate({'top':'-230px'},500);
e.preventDefault();
});

$('#msg_pause_play').bind('click',function(e){
var $this = $(this);
if($this.hasClass('msg_play'))
play();
else
pause();
e.preventDefault();
});

$('#msg_next').bind('click',function(e){
pause();
next();
e.preventDefault();
});
$('#msg_prev').bind('click',function(e){
pause();
prev();
e.preventDefault();
});

function showControls(){
$('#msg_controls').stop().animate({'right':'15px'} ,500);
}
function hideControls(){
$('#msg_controls').stop().animate({'right':'-110px'},500);
}

function play(){
next();
$('#msg_pause_play').addClass('msg_pause').removeC lass('msg_play');
playtime = setInterval(next,interval)
}

function pause(){
$('#msg_pause_play').addClass('msg_play').removeCl ass('msg_pause');
clearTimeout(playtime);
}

function next(){
++current;
showImage('r');
}
function prev(){
--current;
showImage('l');
}

function showImage(dir){
/**
* the thumbs wrapper being shown, is always
* the one containing the current image
*/
alternateThumbs();

/**
* the thumb that will be displayed in full mode
*/
var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
.find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
.find('img');
if($thumb.length){
var source = $thumb.attr('alt');
var $currentImage = $('#msg_wrapper').find('img');
if($currentImage.length){
$currentImage.fadeOut(function(){
$(this).remove();
$('<img />').load(function(){
var $image = $(this);
resize($image);
$image.hide();
$('#msg_wrapper').empty().append($image.fadeIn());
}).attr('src',source);
});
}
else{
$('<img />').load(function(){
var $image = $(this);
resize($image);
$image.hide();
$('#msg_wrapper').empty().append($image.fadeIn());
}).attr('src',source);
}

}
else{ //this is actually not necessary since we have a circular slideshow
if(dir == 'r')
--current;
else if(dir == 'l')
++current;
alternateThumbs();
return;
}
}

function alternateThumbs(){
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
.hide();
current_thumb = Math.ceil(current/nmb_images_wrapper);
/**
* if we reach the end, start from the beggining
*/
if(current_thumb > nmb_thumb_wrappers){
current_thumb = 1;
current = 1;
}
/**
* if we are at the beggining, go to the end
*/
else if(current_thumb == 0){
current_thumb = nmb_thumb_wrappers;
current = current_thumb*nmb_images_wrapper;
}

$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
.show();
}

$('#msg_thumb_next').bind('click',function(e){
next_thumb();
e.preventDefault();
});
$('#msg_thumb_prev').bind('click',function(e){
prev_thumb();
e.preventDefault();
});
function next_thumb(){
var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
if($next_wrapper.length){
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
.fadeOut(function(){
++current_thumb;
$next_wrapper.fadeIn();
});
}
}
function prev_thumb(){
var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
if($prev_wrapper.length){
$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
.fadeOut(function(){
--current_thumb;
$prev_wrapper.fadeIn();
});
}
}

$('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
var $this = $(this);
$('#msg_thumb_close').trigger('click');
var idx = $this.index();
var p_idx = $this.parent().index();
current = parseInt(p_idx*nmb_images_wrapper + idx + 1);
showImage();
e.preventDefault();
}).bind('mouseenter',function(){
var $this = $(this);
$this.stop().animate({'opacity':1});
}).bind('mouseleave',function(){
var $this = $(this);
$this.stop().animate({'opacity':0.5});
});

function resize($image){
var theImage = new Image();
theImage.src = $image.attr("src");
var imgwidth = theImage.width;
var imgheight = theImage.height;

var containerwidth = 400;
var containerheight = 400;

if(imgwidth > containerwidth){
var newwidth = containerwidth;
var ratio = imgwidth / containerwidth;
var newheight = imgheight / ratio;
if(newheight > containerheight){
var newnewheight = containerheight;
var newratio = newheight/containerheight;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
else{
theImage.width = newwidth;
theImage.height= newheight;
}
}
else if(imgheight > containerheight){
var newheight = containerheight;
var ratio = imgheight / containerheight;
var newwidth = imgwidth / ratio;
if(newwidth > containerwidth){
var newnewwidth = containerwidth;
var newratio = newwidth/containerwidth;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
else{
theImage.width = newwidth;
theImage.height= newheight;
}
}
$image.css({
'width' :theImage.width,
'height':theImage.height
});
}

gentleone
10-12-2010, 08:41 PM
From what I can see now is that you forgot to copy two lines form the javascript.
Place this at the top of your jquery.gallery.js fike:
$(function() {
And you have to close the function with this at the bottom:
});

Dennis.
10-12-2010, 08:49 PM
Thanks a lot. I think thats what i hate most about this kind of stuff, you miss a tiny piece of code and the whole thing just stops.
All i need to do know is make the thumbnails work, because they dont seem to want show up :/
The larger images do though

gentleone
10-12-2010, 08:58 PM
Did you copy the stylesheet aswell?
http://tympanus.net/Tutorials/MinimalisticSlideshowGallery/css/style.css

Dennis.
10-12-2010, 09:10 PM
yeah i did.
It works perfectly, however the thumbnails for the images dont show. Everything else does.

Edit: I copied the CSS code you gave me and it worked. So i must of missed something :P
Thanks a lot! :D

gentleone
10-12-2010, 09:31 PM
yeah i did.
It works perfectly, however the thumbnails for the images dont show. Everything else does.

Edit: I copied the CSS code you gave me and it worked. So i must of missed something :P
Thanks a lot! :D

Great... another happy client tonight :)

Dennis.
10-15-2010, 04:30 PM
Thought i may as well post in here again :) im trying to center the gallery but im having a bit of trouble. Any help on how to do it is appreciated :)

<!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>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>

</head>

<body>
<div class="content">
<div><img src="../Images/Banner.png" width="710" height="210" alt="Banner" /></div>
<div class="nav"><ul class="cssmenu">
<li class="home"><a href="#" class="normal" title="Home"><span class="displace">Home</span></a></li>
<li class="gallery"><a href="#" title="Gallery"><span class="displace">Gallery</span></a></li>
<li class="studio"><a href="#" title="Studio"><span class="displace">Studio</span></a></li>
<li class="links"><a href="#" title="Links"><span class="displace">Links</span></a></li>
</ul>
</div>
<img src="images/templatesub.png" width="710" height="470" class="background" />
<div class="MaincontentGallery" align="center">
<div id="msg_slideshow" class="msg_slideshow" z-index: 4; align="center">

<div id="msg_wrapper" class="msg_wrapper" ></div>
<div id="msg_controls" class="msg_controls">
<a href="#" id="msg_grid" class="msg_grid"></a>
<a href="#" id="msg_prev" class="msg_prev"></a>
<a href="#" id="msg_pause_play" class="msg_pause"></a>
<a href="#" id="msg_next" class="msg_next"></a>
</div>
<div id="msg_thumbs" class="msg_thumbs">
<div class="msg_thumb_wrapper">
<a href="#">
<img src="images/thumbs/1.jpg" alt="images/1.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/2.jpg" alt="images/2.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/3.jpg" alt="images/3.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/4.jpg" alt="images/4.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/5.jpg" alt="images/5.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/6.jpg" alt="images/6.jpg"/>
</a>
</div>
<div class="msg_thumb_wrapper" style="display:none;">
<a href="#">
<img src="images/thumbs/7.jpg" alt="images/7.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/8.jpg" alt="images/8.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/9.jpg" alt="images/9.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/10.jpg" alt="images/10.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/11.jpg" alt="images/11.jpg"/>
</a>
<a href="#">
<img src="images/thumbs/12.jpg" alt="images/12.jpg"/>
</a>
</div>
<a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>
<a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
<a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
<span class="msg_loading"></span>

</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


css:
@charset "UTF-8";
/* CSS Document */

/* Content Controller */

body {
background-color: #000;
background-image: url(Images/bg.png);
background-repeat: repeat;

font-family: Arial, sans-serif;
font-size: 16px;
color: #999;
}

/* Content Wrapper */

.content {
width: 710px ;
margin-left: auto ;
margin-right: auto ;
padding: 0;

}

/* Nav positioning */

.nav {
width: 610px;
height: 24px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
margin: 0px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
background-image:url(Images/navbg.jpg)

}

/* CSS Hover Naivation Setup */

ul.cssmenu {
list-style: none;
padding: 0px;
margin: 0px;
}

.displace {
position: absolute;
left: -5000px;
}

/* floats links left */

ul.cssmenu li {
float: left;
}

/* Controls the main image postions and the navigation image */

ul.cssmenu li a {
display: block;
width: 120px;
height: 24px;
background: url('images/navbar2.jpg');
}

/* Normal State Images //

position: 0 0; the first value controls the start position
the second value controls height */

ul.cssmenu li.home a {
background-position: 0 0;
}

/* -120px is the strat of the next image */

ul.cssmenu li.gallery a {
background-position: -120px 0;
}

ul.cssmenu li.studio a {
background-position: -240px 0;
}

ul.cssmenu li.links a {
background-position: -360px 0;
}

/* Hover Links // Same as the above, but this time you will see your hover state */

ul.cssmenu li.home a:hover {
background-position: 0 -552px;
}

ul.cssmenu li.gallery a:hover {
background-position: -120px -552px;
}

ul.cssmenu li.studio a:hover {
background-position: -240px -552px;
}
ul.cssmenu li.links a:hover {
background-position: -360px -552px;
}


img.floatRight {
float: right;
margin: 0px;
z-index: 3;
}


.Maincontent {
width: 710px;
height: 435px;
margin: 0px;
margin-top: -435px;
text-align: center;
background:url("images/template.png");
background-repeat: repeat;
}

.MaincontentGallery {
width: 710px;
height: 470px;
margin: 0px;
margin-top: -470px;
text-align: center;
background-image:url(Images/templatelarger.png);
background-repeat: repeat;
text-align:center;
}


.Background {
z-index: 1;
}

.msg_slideshow{
width:400px;
height:400px;
padding:10px;
position:relative;
overflow:hidden;
background:#101010 url(../icons/loading.gif) no-repeat center center;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.msg_slideshow a{
outline:none;
}
.msg_slideshow a img{
border:none;
}
.msg_wrapper{
width:400px;
height:400px;
position:relative;
margin:0;
padding:0;
display:table-cell;
text-align:center;
vertical-align:middle;
}
.msg_wrapper img{
display: inline-block!important;
vertical-align:middle;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;
}
.msg_controls{
position:absolute;
bottom:15px;
right:-110px;
width:104px;
height:26px;
z-index: 20;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background-color:#000;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=80);
}
.msg_controls a{
float:left;
background-color:#000;
width:20px;
height:20px;
margin:3px 3px;
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=50);
background-repeat:no-repeat;
background-position: center center;
}
.msg_controls a:hover{
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=99);
}
.msg_controls a.msg_grid{
background-image:url(../icons/grid.png);
}
.msg_controls a.msg_prev{
background-image:url(../icons/prev.png);
}
.msg_controls a.msg_next{
background-image:url(../icons/next.png);
}
.msg_controls a.msg_pause{
background-image:url(../icons/pause.png);
}
.msg_controls a.msg_play{
background-image:url(../icons/play.png);
}
.msg_thumbs{
background:#000;
position:absolute;
width:250px;
height:166px;
top:-230px;
left:50%;
padding:30px;
margin:0 0 0 -155px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=90);
overflow:hidden;
}
.msg_thumb_wrapper{
position:absolute;
width:250px;
height:166px;
top:30px;
left:30px;
z-index:30;
}
.msg_thumb_wrapper a{
display:block;
width:75px;
height:75px;
float:left;
margin:4px;
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=50);
}
.msg_thumbs a.msg_thumb_next,
.msg_thumbs a.msg_thumb_prev{
width:18px;
height:20px;
background-repeat:no-repeat;
background-position: center center;
position:absolute;
top:50%;
margin-top:-10px;
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=50);
}
.msg_thumbs a.msg_thumb_next:hover,
.msg_thumbs a.msg_thumb_prev:hover{
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=99);
}
.msg_thumbs a.msg_thumb_next{
background-image:url(../icons/next_thumb.png);
right:5px;
}
.msg_thumbs a.msg_thumb_prev{
background-image:url(../icons/prev_thumb.png);
left:5px;
}
.msg_thumbs a.msg_thumb_close{
position:absolute;
bottom:0px;
width:50px;
left:50%;
margin:0 0 0 -25px;
background:#202020 url(../icons/up.png) no-repeat center center;
height:16px;
opacity:0.7;
-moz-border-radius:5px 5px 0 0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.msg_thumbs a.msg_thumb_close:hover{
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=99);
}
.msg_loading{
position:absolute;
background:transparent url(../icons/loading.gif) no-repeat center center;
top:50%;
left:50%;
width:50px;
height:50px;
margin:-25px 0 0 -25px;
z-index:25;
display:none;
}

gentleone
10-16-2010, 12:05 PM
Did you try to add margin: 0 auto; to the CSS rule for .MaincontentGallery?

Dennis.
10-17-2010, 08:10 PM
No i didnt, but i just tried it and it didnt do anything :/

DWcourse
10-17-2010, 09:21 PM
Did you try to add margin: 0 auto; to the CSS rule for .MaincontentGallery?

AND give it a width equal to the width of the gallery.

This would be a lot easier if you could post the page somewhere and give us a link.

Dennis.
10-17-2010, 09:32 PM
AND give it a width equal to the width of the gallery.

This would be a lot easier if you could post the page somewhere and give us a link.

if i give it a width the same width as the gallery wouldnt that make my content box smaller than usual?

I would, but i dont have hosting for this and i dont know of any sites that would let me do something like that.

gentleone
10-18-2010, 07:33 AM
JC is right... a link would be easier and faster for us to solve any issues. a basic hosting doesn't cost much these days.

As far I can see, you have the exact same widths for the content div, Maincontent div and MaincontentGallery. Does it not center in all the browsers or only in Internet Explorer?

Dennis.
10-19-2010, 10:00 PM
It doesnt center in any browsers. Mancontent div and MaincontentGallery are the same. But the latter is only used on the gallery page. Since i needed the extra space.

Ill talk with the guy who wants it. Ill continue with the last page and see what he says about the gallery. Hopefully he will be fine with it on the left until i can fix it. Then ill give you guys a link.