CSS - Image Gallery - Change The Layout?

Hi there,

This image gallery is working fine is Safari and Firefox, but has a problem in IE, but I just can figure it out!

Here is the page:
http://www.greatsouthmetals.com/image-gallery.html

Please help!

Thanks!

Hello,

I have been having quite a bit of trouble using the Galleria js/jQuery plugin for my image gallery because of a lack of IE support. I have tried posting on their support pages numerous times with no response.

The site can be found at http:jonathansakkos[dot]com/index-test.html.

The main problem is that in IE (I have tested 7 & 8) the main image shifts to the right so that it is partly off screen. I have tried fiddling with the CSS file that comes with galleria, but cannot seem to fix this bug. That CSS file can be found he

Code:

.galleria-container{position:relative;overflow:hidden;background:#000;} 
.galleria-container img{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;} 
.galleria-stage{ position:absolute; top:10px; bottom:70px; left:10px; right:10px; overflow:hidden; margin: 0 auto 0 auto; } 
.galleria-thumbnails-container{height:60px;bottom:0;position:absolute;left:10px;right:10px;z-index:2;} 
.galleria-carousel 
.galleria-thumbnails-list{margin-left:10px;margin-right:10px;} .galleria-thumbnails 
.galleria-image{ height:60px; width:60px; background:#000; margin:0 5px 5px 0; border:1px solid #000; ; float:left; cursor:pointer; } 
.galleria-counter{position:absolute;bottom:10px;left:10px;text-align:right;color:#fff;font:normal 11px/1 arial,sans-serif;z-index:2;} 
.galleria-loader{background:#000;width:20px;height:20px;position:absolute;top:10px;right:10px;z-index:2;display:none;background:url(classic-loader.gif) no-repeat 2px 2px;} 
.galleria-info{width:50%;top:15px;left:15px;z-index:2;position:absolute;} 
.galleria-info-text{background-color:#000;background-color:rgba(0,0,0,.9);padding: 12px;display:none;} 
.galleria-info-title{font:bold 12px/1.1 arial,sans-serif;margin:0;color:#fff;} 
.galleria-info-description{font:italic 12px/1.4 georgia,serif;margin:0;color:#bbb;} 
.galleria-info-title+.galleria-info-description{margin-top:7px;} .galleria-info-close{width:9px;height:9px;position:absolute;top:5px;right:5px;background-position:-753px -11px;opacity:.5;cursor:pointer;display:none;} 
.galleria-info-link{background-position:-669px -5px;opacity:.8;position:absolute;width:20px;height:20px;cursor:pointer;background-color:#000;} 
.galleria-info-link:hover, .galleria-info-close:hover{opacity:.5;} .galleria-image-nav{position:absolute;top:50%;margin-top:-15px;width:100%;height:31px;left:0;} 
.galleria-image-nav-left, .galleria-image-nav-right{opacity:.7;cursor:pointer;width:16px;height:31px;position:absolute;left:10px;z-index:2;} 
.galleria-image-nav-right{left:auto;right:10px;background-position:-300px 0;z-index:2;} 
.galleria-image-nav-left:hover, 
.galleria-image-nav-right:hover{opacity:.5;} .galleria-thumb-nav-left, 
.galleria-thumb-nav-right{cursor:pointer;display:none;background-position:-495px 5px;position:absolute;left:0;top:0;height:40px;width:23px;z-index:3;opacity:.8;} 
.galleria-thumb-nav-right{background-position:-578px 5px;border-right:none;right:0;left:auto;} 
.galleria-thumbnails-container .disabled, 
.galleria-thumbnails-container .disabled:hover{opacity:.2;cursor:default;} 
.galleria-thumb-nav-left:hover, .galleria-thumb-nav-right:hover{opacity:1;background-color:#111;} .galleria-carousel 
.galleria-thumb-nav-left, 
.galleria-carousel .galleria-thumb-nav-right{display:block;} .galleria-thumb-nav-left, 
.galleria-thumb-nav-right, .galleria-info-link, .galleria-info-close, 
.galleria-image-nav-left, 
.galleria-image-nav-right{background-image:url(classic-map.png);background-repeat:no-repeat;}

I realize that this code is tough to read and if there is a better way to post it please let me know and I will do that.

Any help would be greatly appreciated!

Thanks,

Jonathan

Hi all

This is my first post so first of all Hello and i hope that i can help people and be helped.

I am trying to create a Horizontal Image gallery which will scroll I have looked on the web but can't find any concrete answer to what i'm tryign to create. I did find a sort of answer but only displays text i include below, if you haveany ideas of ohow i do display images with a horizontal scroll please help

Thank You
Chaz


P.s. I dunno if i have displayed the code correctly or if i'm meant to paste it in differently.
Code:

[code]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "(URL address blocked: See forum rules)">
<html>
<head>
<title>horizontally scrolling box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    background-color:#303;
 }
#wrapper {    
    width:800px;
    height:300px;
    margin:100px auto 0;
    background-image:url(images/eyes.gif);
 }
#container {
    width:700px;
    height:300px;
    overflow:auto;
 }
#content {
    width:800px;
    height:300px;
    color:#303
 }
#content p {
    margin:0;
    padding:10px;
 }
</style>

</head>
<body>

<div id="wrapper">

<div id="container">

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div>

</div>

</div>

</body>
</html>

Hello.

I am using a Gallery which I bought from ThemeForest. I am having trouble aligning the image to center.

Check the second image, It's aligned to left by default.

I tried through many css ways which isn't helping at all.

Demo:
digloud[dot]com/user_data/techkid/phoenix_gallery/

Any help is highly appreciated.

i am trying to use this very simple image gallery from cssplay stu nichols site
"A permanent image click gallery with 'previous' / 'next' buttons"
so i change the css to suit my images and create my own prev|next buttons but when i check it in a browser - i'm working with dreamweaver cs5 [trial] it dosn't show me the buttons
i'm very new to css - and am bashing my head over this issue

would appreciate any help - not sure if i need to put in my altered source code so i will
Code:
CSS

#gallery {
	width:500px;
	height:500px;
	margin:0 auto;
	position:relative;
	font-family:verdana, arial, sans-serif;
}
#gallery a.previous {display:block; height:40px; width:32px; background:url(click/previous.gif); position:absolute; left:0; top:560px;}
#gallery a.next {display:block; height:40px; width:32px; background:url(click/next.gif); position:absolute; right:0; top:560px;}
#gallery a b {display:none;}
#gallery #fullsize {
	position:absolute;
	left:0;
	top:0;
	height:550px;
	width:500px;
	overflow:hidden;
	text-align:center;
}
#gallery #fullsize div {width:500px; height:600px; padding-top:10px; position:relative;}
#gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:0;}
#gallery #fullsize div h3 {padding:10px 0 0 0; margin:0; font-size:8px;}
#gallery #fullsize div p {padding:5px 0; margin:0; font-size:10px; line-height:14px;}

Code:
XHTML

<div id="gallery">
	<div id="fullsize">
		<div id="pic1">
			<img src="images/greyday/gd1.jpg" alt="grey day1" />
			<a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a>
		  <h3>1 | 10</h3>			
	  </div>
		<div id="pic2">
			<img src="images/greyday/gd2.jpg" alt="grey day2" />
		  <a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"><b>Next</b></a>
		  <h3>2 | 10</h3>
	  </div>
		<div id="pic3">
			<img src="images/greyday/gd3.jpg" alt="grey day3" />
		  <a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a>
		  <h3>3 | 10</h3>
	  </div>
		<div id="pic4">
			<img src="images/greyday/gd4.jpg" alt="grey day4" />
		  <a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5"><b>Next</b></a>
		  <h3>4 | 10</h3>
	  </div>
		<div id="pic5">
			<img src="images/greyday/gd5.jpg" alt="grey day5" />
		  <a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a>
		  <h3>5 |10</h3>
	  </div>
		<div id="pic6">
			<img src="images/greyday/gd6.jpg" alt="grey day6" />
		  <a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a>
		  <h3>6 | 10</h3>
	  </div>
		<div id="pic7">
			<img src="images/greyday/gd7.jpg" alt="grey day7" />
		  <a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a>
		  <h3>7 | 10</h3>
	  </div>
		<div id="pic8">
			<img src="images/greyday/gd8.jpg" alt="grey day8" />
		  <a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a>
		  <h3>8 | 10</h3>
	  </div>
		<div id="pic9">
			<img src="images/greyday/gd9.jpg" alt="grey day9" />
		  <a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a>
		  <h3>9 | 10</h3>
	  </div>
		<div id="pic10">
			<img src="images/greyday/gd10.jpg" alt="grey day10" />
		  <a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1"><b>Next</b></a>
		  <h3>10 | 10</h3>
	  </div>
	</div>
</div>

i really would appreciate some help with this - thank you in advance

I'm working on the navigation the navigation for an image gallery I'm working on, but have run into some problems. It works fine in Firefox and Safari, but doesn't work in IE6, IE7, and Opera, and I can't for the life of me figure out why.

The previous link and next link appears when they hover over the right and left side of the picture. I think it might be a problem with z-index, and the two link pictures getting stuck under the image in the image gallery, but I'm not sure.

Any and all help is appreciated.

This is the code for the gallery, minus the two navigation pictures and the image for the gallery.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Example</title>

 <style type="text/css" media="screen">
 
	#test {
	margin:0;
	padding:0;
	position:relative;
	top:0;
	left:0;
	width:800px;
	height:640px;
	background-color: #000;
	
	}

	#nav{
	position:absolute;
	left:0;
	top:0;
	z-index:999;
	width:100%;
	height:100%;

	}

	#Next,#Prev{
	position:absolute;
	display:block;
	width:50%;
	height:100%;
	outline:none;
	top:0;
	
	}

	#Next{right:0;}
	#Prev{left:0}

	#Next:hover{
	background:transparent url(next.gif) no-repeat 100% 30%;
	}

	#Prev:hover{
	background:transparent url(prev.gif) no-repeat 0% 30%;
	}

	#image{
	display:block;
	}


    
</style>

</head>
<body>

	<div id="test">

		<div id="nav">

        		<a href="#" id="Prev"></a>

        		<a href="#" id="Next"></a>	

      	</div>
		<img id="image" src="grass.jpg" alt="image" />
	</div>


</body>
</html>

hi there, i am new to css and creating a gallery. What i want to do is create a medium size pop up when you rollover the thumbnail and have a full size image displayed when the thumbnail is clicked.

I have to use lightbox javascript to display full size images, which works ok, but the problem has come trying to get both this and the roll over to work.

At the moment i have both elements working, although it produces two thumbnail images.

How can i use this code whilst making only one thumbnail appear?


<a href="images/cramps/full size/c1.jpg" rel="lightbox" title="Here is the image caption">
<img src="images/cramps/thumbnails/ct1.jpg" border="0" />
</a>

<a class="thumbnail" href="#thumb">
<img src="images/cramps/thumbnails/ct1.jpg" border="0" />
<span><img src="images/cramps/medium size/cm1.jpg" /><br />
</span></a>

sorry if this is vague, i will answer any questions the best i can, all help appreciated!

Hello,

I've almost got this css image gallery done for my website, but I can't seem to get the main image to be positioned where the gallery thumbnails are. The main image seems to be only position-able from the top of the page. I'm trying to get the image to line up with the top of the first thumbnail image, the thumbnails being arranged in a column to the left of the main image.

The page where you can view this is:

WWW OLDFOUNDRY DOT COM - I'm a new user, and am not allowed to post links yet. You'll see the gallery in the new product called "Bugatti Test" That link is on the left hand side of the page.

And I'll place the code in the next post,

Thank you for any ideas,

Jason

HI Guys,

I'm trying to create some CSS to contain an image gallery.

A query runs which grabs all the images for a certain item/article.

I then output the query as a loop, and it populates a div with images.

It works pretty good, but if one image is bigger than the others, it throws off the alignment.

How can I force each row of photos to be horizontally even?

You can see the output results here http://details.at/photo_test.cfm




<!--- Query --->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>

#maindiv {
padding:0 0 1em 2em;
width:550px;
float:left;
}

div.img
{
margin:3px;
height:auto;
width:auto;
float:left;
text-align:center;
}

</style>

</head>

<body>

<DIV id="maindiv">

<H2>Photos</H2>

<CFOUTPUT QUERY="photo_file_info">
<div class="img">
<a href="http://google.com" target=new>
<img src="http://details.at/imagehost/classifieds/aircraft/139/s_#photo_file#">
</a>
</div>
</CFOUTPUT>

</DIV>

</body>
</html>

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

Code:

<!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">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)

I Want To Have It To Where I Can Use A Header Image At The Top, Then 2 Images for The Right And Left, And A Bottom Image. So Its Like A Box.

But The Left And Right Need To Be Able To Repeat If The Text In The Middle Is Too Long.

Any Help Would Be Appreciated!
Thanks!
----
Heres My Code, it Works Until I Put To Many <BR> Tags And Make It To Long, It Messes Up The Left And Right Images

CSS::
Quote:
<style type="text/css"> .outerx2{ width:670px; margin-left:379px; border:0px solid #000; background:#D9D9CD url(left.png) repeat-y left top; padding-left:20px; } .innerx2{ background:#D9D9CD url(right.png) repeat-y right top; padding:1em 1em 1em 0; } /* mac hide \*/ * html .innerx2{height:10%} /* force "layout" in IE */ .outerx2 p{padding:0 10px;margin:0 0 1em 0} </style>


Index.php::
PHP Code:
<?php include'css.css'; echo'<Center><img src="top.png"></Center>'; echo'<div class="outerx2">                 <div class="innerx2">                     <p>This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content:                         This is the content : This is the content: This is the content : This is the content: </p>                     <p>This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content:                         This is the content : This is the content: This is the content : This is the content: </p>                     <p>This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content: This is the content : This is the content:                         This is the content : This is the content: This is the content : This is the content: </p>                 </div>              </div>'; echo'<Center><img src="bottom2.png"></Center>'; ?>

Hi guys
I guess most of you know about 960.gs
http://960.gs/

It is a tool I love, and I guess I won't leave for long time. I've begun doing a new layout, and now I'm facing a little problem. How can I put an image over the 960.gs layout? and to make everything crossbrowser, to validate, etc.?

Look: my work + original image



Thanks a lot in advance,

Hi,

I need to create a object like in the attached image (worldmap.gif). The image itself in not hot, just the text;s above it. When the user hovers over the text, two things should happen:

1- The corresponding image should swap with a darker version (Attached: img_continent_africa.gif etc)
2- and a dropdown menu should appear as shown in worldmap.gif.

My question is: How should I approach this from a css layout perespective. How do I position the over-state images.

thanks,

Zain