How do i Center this Gallery??

How do i center this Css Highslide image gallery so its center of my page and not on the left of the main container. can someone help please, i dont know which part to put, Margin: 0 auto in..

please help.

Link to the page is -- Gallery

 

It's cheating a bit, but quick and easy, and should work well in all browsers, add this to your css:

.highslide-gallery { width: 800px; margin: 5px 0 10px 18px; }

 

The <div class="highsliide-gallery"> is redundant; remove it. <ul> is the container.

#content {
  background-color:#000000;
  color:#7905AA;
  margin:0 auto;
  width:820px;
  }

ul.highslide-gallery li {
  border:1px solid silver;
  display:inline-block;
  margin:2px;
  }

ul.highslide-gallery a {
  display:block;
  }

ul.highslide-gallery img {
  vertical-align:bottom;
  }

Code (markup):

Notice all those missing properties? You don't need them. Notice, too, I put the deleted div's class on the ul.

cheers,

gary

 

So what have i got to remove??? what you put here in the code?

 

Awesome it works. Also would you know how to center my Navigation buttons. i cant get them to go in to the center.

 

I'm confused what bit do you want me to remove? And then which bit do i add??

 

If you go to w3schools.com you will find all solutions realting CSS.

 

You have this:

      [color=red]<div class="highslide-gallery">[/color]
	<ul [color=blue]class="highslide-gallery"[/color]>
          <li>
	    <a href="highslide/images/large/DSC04928.JPG" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/DSC04928.JPG"  alt=""/>
	    </a>
          </li>

        …

          <li>
	    <a href="highslide/images/large/DSC04913.JPG" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="highslide/images/thumbs/DSC04913.JPG"  alt=""/>
	    </a>
          </li>
	</ul>
      [color=red]<div style="clear:both"></div></div>[/color]

Code (markup):

Delete the stuff in red; they're unnecessary. Insert the stuff in blue.

Now go to http://www.bedfordshire-anime.webs.com/highslide/highslide.css, and comment out everything in this section:

/*****************************************************************************/
/* Thumbnail boxes for the galleries.                                        */
/* Remove these if you are not using a gallery.                              */
/*****************************************************************************/

Code (markup):

Don't delete yet; I might have missed something, and we want to be able to retrace our steps.

Insert the css I gave you. IE6 and IE7 should be broken, but we want to get it working for modern browsers and for IE8 before we add the little bit of hackery that 6 & 7 need.

cheers,

gary

 

Ok i have Deleted that Red code and added in the blue code, now its make my Gallery a List. what do i have to do now??

http://bedfordshire-anime.webs.com/gallery.html

 

Now do the second part:

gary

 

When you say comment out everything in -

Thumbnail boxes for the galleries. */
/* Remove these if you are not using a gallery.

Do you Mean Delete the coding?

 

I deleted that coding now what do i have to do, its Still looking like this -- http://bedfordshire-anime.webs.com/gallery.html

 

I specifically said "don't delete yet". Use the comment delimiters, i.e. /* */ so they're still there, but the browsers ignore them.

But, since you did anyway, paste the css I gave you into that place.

It appears your knowledge base is short some basic principals of cascading style sheets. Go to htmldog.com, and work through their html and css tutorials. Do them in the order presented. They will fill some of the blanks in your education so far.

cheers,

gary

 

Ok, where is the css you gave me? Is it this?

#content {
  background-color:#000000;
  color:#7905AA;
  margin:0 auto;
  width:820px;
  }

ul.highslide-gallery li {
  border:1px solid silver;
  display:inline-block;
  margin:2px;
  }

ul.highslide-gallery a {
  display:block;
  }

ul.highslide-gallery img {
  vertical-align:bottom;
  }

Code (markup):

 

Yep.

gary

 

Ok thats cool, Looks good, how can i Center it?

 

You still have the default indent on the ul.Do this:

ul.highslide {
  margin: 0;
  padding: 0;
  }

Code (markup):

cheers,

gary

 

on the highslide.css file? Which bit of it?

 

Yes. Add it just before this:

ul.highslide-gallery li {
border:1px solid silver;
display:inline-block;
margin:2px;
}
highslide.css (line 100)

Code (markup):

cheers,

gary

 

Always margin: 0 auto; in the div where the box is to be aligned