CSS - Problem With Navigation For Image Gallery

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 want an image gallery like this one: http://www.webreference.com/program...ples/twelve.htm
only I want the thumbnails to appear in a single line, UNDER the image. There would be far fewer thumbnails so it would only be about 300px wide, but I want the image to appear above, and not to the left. I tried messing with the values but now I'm confused and I don't want to mess with values that don't need to be messed with

Hi guys,

I never wanna do anything simply... *sigh*

Need some help again!

I downloaded SPGM to use as a photo gallery. Love it. It's even valid XHTML 1.0 Strict!

Ok, I've implemented it here . Instead of using the native CSS file that came with the script, I copied it all into my own CSS file. Well, not ALL of it, but most. That CSS file is here . Towards the bottom, you'll see the SPGM CSS section.

Now I've already started adapting the script and layout to my site, but as you can imagine, it's not too easy, especially for an only moderately-knowledgeable CSS user like me.

First thing I want to do it...

1. I want to move the entire table (the main table containing the 4 folder icons and text) over to the left so the left side of the table lines up only a pixel or two right of the line between the green and tan on the left. I can shift the whole table by adding margin-left: -something px; to TABLE.table-wrapper, but the folder icons actually disappear as if they go behind something! HUH?

I think moving this to the left more will solve the problem in IE of the right nav links getting pushed down... Could be wrong, but it's ok in FF.

If someone could start me off with this I'd very much appreciate it.

Thanks, guys!

Chris

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.

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

Hello everyone. You see, I wanted to use the close look up for images in gallery, something like sucker fish gallery have. On hover, image changes size and pop up bigger. I've used overflow, because not every image in gallery after resizing by server to 200px width will have 150px height. There is example image to illustrate that.

And now... open it using IE, this is something to do with z-index I think. I really don't how to code it for IE. On Opera and FF it is probably looking as it should. Could anyone suggest something to solve this please ? I would be grateful.

http://members.lycos.co.uk/milosz/www/new/

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

<head>

<title>Test page</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">

ul { width: 400px; }

li { margin: 10px; position: relative; float: left; width: 100px; height: 75px; }
li a { border: 1px solid #3A3A3A; text-decoration: none; color: #EFEFEF; width: 100px; height: 75px; overflow: hidden; background: #3A3A3A; position: absolute; }
li a img { border: 0; }

li:hover a { position: absolute; width: 200px; height: 150px; left: -51px; top: -39px; border: 1px solid #3A3A3A; overflow: hidden; z-index: 2; }
li a:hover { z-index: 1; }

</style>

<!--[if lt IE 7]>
<style type="text/css">
/* Hovers everything now */
body { behavior:url("csshover.htc"); }
</style>
<![endif]-->

</head>

<body>
<br />
<br />
<br />

	<ul>	

			<li><a href="#" target="_blank"><img src="1.png" alt="1.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
			
	</ul>

</body>

</html>

Excuse me my poor English.

edit: I've changed link, and move files to safe server. They will stay there longer I think, and maybe somehow help others like me.

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>

I am having a minor problem with a photo gallery on a site that I am working on. Here is a link: http://fieldspianos.com/new/store/p...em_number=14275

In all browsers except IE6, when a thumbnail is hovered over, the image is displayed larger in the preview box. In IE6, however, this occurs properly, but once you roll over an image more than once it will not display anymore. For example, if I roll over the 1st thumbnail, the image displays, then I roll over the 2nd thumbnail, the image displays, but if I roll over the 1st thumbnail again, nothing happens. Included below is my css and html. This was made without javascript and I would like to keep it that way if at all possible.

HTML
Code:

<div id="sitebody">
    <div id="tabsheader">
	<ul id="primary">
		<li><?php print "<a href=\"information.php?item_number=" . $item_number . "\">"; ?>Information</a></li>
		<li><?php print "<a href=\"description.php?item_number=" . $item_number . "\">"; ?>Description</a></li>
		<li><span>Photo Gallery</span></li>
		<li><?php print "<a href=\"video.php?item_number=" . $item_number . "\">"; ?>Video</a></li>
        <li><?php print "<a href=\"moreinfo.php?item_number=" . $item_number . "\">"; ?>More Info...</a></li>
	</ul>
	</div>
  <div id="main">
		<div id="contents">
			<h2>Photo Gallery</h2>			
			<p class="note">Hover over the photos below to see larger images.</p>
            <br />
            <div id="photogallery">
            <div id="thumbnails">
            <ul class="hoverbox">
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" class="preview" /></a></li>
</ul>
</div>       
</div>
</div>
</div>
</div>

CSS
Code:

/*Photo Gallery*/

div#photogallery {
	position: relative;
	width: 662px;
	border: 1px solid #000;
	padding: 1px;
	padding-bottom: 2px;
	height: 404px;
}

div#thumbnails {
	width: 243px;
}

div#thumbnails ul {
	margin-left: 0px;
	padding-left: 0px;
}

.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: 2px;
	left: 247px;
	z-index: 1;
}

.hoverbox img
{
	background-color: #FFFFFF;
	border-color: #000;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 1px;
	vertical-align: top;
	width: 75px;
	height: 75px;
}

.hoverbox img:hover
{
	background-color: #000000;
	border-color: #000;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	vertical-align: top;
	width: 75px;
	height: 75px;
}

.hoverbox li
{
	display: inline;
	float: left;
	margin: 1px;
}

.hoverbox .preview
{
	border-color: #000;
	width: 409px;
	height: 399px;
}

hey.

not sure If i can complete this in CSS, I know how to do a singular image scroll over change, but I have a navigation bar i am creating, with about 9 links across is.

I want to have the image change as the mouse scrolls over each link option, so an image map navigation bar with multiple scroll over changes....

how is this possible... it must be some how... I'm currently using Dreamweaver cs4 for my site, although I do have a medium to basic knowledge of html and CSS, so I can adapt coding.

any help or pointers would be great.

I am very new to web design. I had an old friend of mine design this website for me: directdevelopmentinternational.org

I am now trying to use what he did for that website you put together my bands website: throughtheconcreterecords.com

I am trying to get the navigation bar to sit inside of the blank white box I have created in my header image. I also just want the text to be black and maybe when highlighted change to a different color. I also am trying to make it so when you click the burning book logo in the upper left corner it brings you back to the main page.

I am having a terrible time figuring out how to do this as I am not sure what all of the different techniques are referred to. Any help at all would be much appreciated!

I'm currently working on a website and trying to setup two types of navigation. I don't know what happened with it, and I am by no means a expert with CSS... I'd barely say I am a beginner.. I merely took the code I am using from a different layout and am trying to tweak it. When originally designing the layout I had messed up on the slicing and the navigation worked fine. Upon reslicing the website and replacing the navigation code into the layout, I started noticing that the backgrounds for both sections are spanning wider then they are suppose to and do not know what I am over seeing or over looking. This problem has been bloody pissing me off for hours, and with all problems I have had with coding, it is probably something really simple, that I just have overlooked.

Here is the link.

xquizitewarfare dot com/website/index.html

(it isn't allowing me to post a direct link with me being a new member. This is something I'm trying to get finished, and don't want to proceed with coding the rest of the site until i have the nav figured out.)

Like I said I am just barely a beginner at CSS.. I spent about a hour getting the Validators to like my code. Only one error and that is to do with a background, and i'm not sure how to fix it. If anybody is able to respond, I would greatly appreciate it.

Hi,

I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal.

I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible.

Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine.

If any body could help me this would be great.

This is what the index.html file looks like;
<body>
<div id="wrapper">
<div id="topwrapper"></div>
<div id="mainwrapper">
<!-- Header Start -->
<div id="header">
<div class="center">
<!-- Logo Start -->
<div id="logo">
<a href="./index.html"><img src="./images/logo.png" alt="logo" /></a>
</div>
<!-- Logo End -->

<div id="headerright">

<!-- Menu Navigation Start -->
<div id="mainmenu">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://" class="selected">Home</a>

<li><a href="./about.html">About</a>
<ul>
<li><a href="#">Our Company</a></li>
<li><a href="#">Vision and Mission</a></li>
<li><a href="#">Testomonials</a></li>
</ul>
</li>
<li><a href="#./.html">Services</a>
<li><a href="./.html">Vehicles</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a> </li> </ul>
</li>
<li><a href="./.html">Testomonials</a>
<ul>
</ul>
<li><a href="./html">Contact</a></li>
</ul>
</div>
</div>
<!-- Menu Navigation End -->
</div>
</div>
</div>

Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example.

Hey guys,

Can someone help me with the following code? I've attempted two fixes, one that alters caching with JavaScript, and another fix with apache, but the server admin is restricting access to the config file. Does anyone know a work around besides these two methods (even if it's semantically incorrect)?

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*- Menu Tabs I--------------------------- */

    #tabsI {
      float:left;
      width:100%;
      /*background:#EFF4FA;*/
      font-size:93%;
      line-height:normal;
	  border-bottom:1px solid #DD740B;
      }
    #tabsI ul {
	  margin:0;
	  padding:10px 10px 0 50px;
	  list-style:none;
	  padding-bottom: 1px; 
      }
    #tabsI li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsI a {
      float:left;
      background:url("http://exploding-boy.com/images/cssmenus/tableftI.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsI a span {
      float:left;
      display:block;
      background:url("http://exploding-boy.com/images/cssmenus/tabrightI.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsI a span {float:none;}
    /* End IE5-Mac hack */
    #tabsI a:hover span {
      color:#FFF;
      }
    #tabsI a:hover {
      background-position:0% -42px;
      }
    #tabsI a:hover span {
      background-position:100% -42px;
      }
</style>
</head>
<body>
<ul>
<div id="tabsI">
<ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
</ul>
</div>
</body>
</html>

Of course I've seen lots of CSS navigation using image rollovers, and others using dropdowns, but I haven't been able to find any that use both at the same time.

I'm trying to put it on a WordPress site ...

Any links or help would be much appreciated!

Laura S.

I have been searching on the level world wide web for a tutorial about how to get CSS down for a horizontal navigation bar that uses different images for each individual button's off and on states?

Many of the tutorials I have found use some sort of background or two state images, and then write text on top the the images.

What if the buttons are designed in a non-arial/verdana/times/san serif font? I assume it would be best to just use images for the nav bar, but then, how do I write the CSS for a nav bar that's using a specific image as it's off stage, and then switches to another image when you scroll over it?