1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do i Center this Gallery??

Discussion in 'CSS' started by moodey-aimee, May 20, 2010.

  1. #1
    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.
    SEMrush
    Link to the page is -- Gallery
     
    moodey-aimee, May 20, 2010 IP
    SEMrush
  2. morework

    morework Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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; }
     
    morework, May 20, 2010 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,486
    Likes Received:
    367
    Best Answers:
    28
    Trophy Points:
    335
    #3
    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
     
    kk5st, May 20, 2010 IP
  4. moodey-aimee

    moodey-aimee Guest

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    So what have i got to remove??? :confused: what you put here in the code?
     
    moodey-aimee, May 24, 2010 IP
  5. moodey-aimee

    moodey-aimee Guest

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Awesome it works. Also would you know how to center my Navigation buttons. i cant get them to go in to the center.
     
    moodey-aimee, May 24, 2010 IP
  6. moodey-aimee

    moodey-aimee Guest

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I'm confused what bit do you want me to remove? And then which bit do i add??
     
    moodey-aimee, Jun 1, 2010 IP
  7. marry outsource project

    marry outsource project Greenhorn

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #7
    If you go to w3schools.com you will find all solutions realting CSS.
     
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,486
    Likes Received:
    367
    Best Answers:
    28
    Trophy Points:
    335
    #8
    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
     
    kk5st, Jun 1, 2010 IP
  9. moodey-aimee

    moodey-aimee Guest

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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
     
    moodey-aimee, Jun 3, 2010 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,486
    Likes Received:
    367
    Best Answers:
    28
    Trophy Points:
    335
    #10
    Now do the second part:
    gary
     
    kk5st, Jun 3, 2010 IP
  11. moodey-aimee

    moodey-aimee Guest

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    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?
     
    moodey-aimee, Jun 6, 2010 IP
  12. moodey-aimee

    moodey-aimee Guest

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    moodey-aimee, Jun 6, 2010 IP
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,486
    Likes Received:
    367
    Best Answers:
    28
    Trophy Points:
    335
    #13
    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
     
    kk5st, Jun 6, 2010 IP
  14. moodey-aimee

    moodey-aimee Guest

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    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):
     
    moodey-aimee, Jun 7, 2010 IP
  15. kk5st

    kk5st Prominent Member

    Messages:
    3,486
    Likes Received:
    367
    Best Answers:
    28
    Trophy Points:
    335
    #15
    Yep.

    gary
     
    kk5st, Jun 7, 2010 IP
  16. moodey-aimee

    moodey-aimee Guest

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Ok thats cool, Looks good, how can i Center it?
     
    moodey-aimee, Jun 8, 2010 IP
  17. kk5st

    kk5st Prominent Member

    Messages:
    3,486
    Likes Received:
    367
    Best Answers:
    28
    Trophy Points:
    335
    #17
    You still have the default indent on the ul.Do this:
    ul.highslide {
      margin: 0;
      padding: 0;
      }
    Code (markup):
    cheers,

    gary
     
    kk5st, Jun 8, 2010 IP
  18. moodey-aimee

    moodey-aimee Guest

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    on the highslide.css file? Which bit of it?
     
    moodey-aimee, Jun 9, 2010 IP
  19. kk5st

    kk5st Prominent Member

    Messages:
    3,486
    Likes Received:
    367
    Best Answers:
    28
    Trophy Points:
    335
    #19
    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
     
    kk5st, Jun 11, 2010 IP
  20. johagulo

    johagulo Peon

    Messages:
    879
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #20
    Always margin: 0 auto; in the div where the box is to be aligned
     
    johagulo, Jun 12, 2010 IP