0

I think I might be having a problem, not sure if it is a problem because I have been looking at it for sooooo long, I don't even know if its centered or not.

http://jamessuske.com/thornwood/gallery.php

What I am trying to do is center the entire gallery, to me it looks like its a bit to the right. If anyone can help me figure this out, that would be great. Thanks in advanced.

CSS CODE

.contentTextGallery{
padding:20px 0 0 0;
width:866px;
font-size:16px;
float:left;
}

.gallery{
 width:912px;
 margin-top:6px;
}

.gallery ul{
 list-style-type:none;
 text-align:center;
}

.gallery li{
 display: inline-block;
}

* html .gallery li { /* IE6 */
  display: inline;
}

*:first-child + html .gallery li { /* IE7 */
  display: inline;
}

.gallery ul a {
 display:block;
 text-decoration: none;
 color:#FFF;
 padding:5px 0 0 5px;
}
2
  • What browser is giving you problems? Looks fine in chrome Oct 27, 2011 at 20:34
  • Whoops - didn't understand what you were saying. I thought you meant the large box in the middle, not the literal gallery of images within that box. @fixlr is right - you need to remove the padding on the list. You should've clarified. Oct 27, 2011 at 20:35

4 Answers 4

3

It looks like you just need to remove the left padding on the element in your .gallery:

.gallery ul { padding-left: 0px; }

Depending on what web browser you're using, there is usually a default padding on lists.

1

Update: Oh, I see what you are trying to fix now, the stuff inside the container:

All you need is

.gallery ul {
  padding: 0;
}

Original:

One thing you may want to do is pick up a tool like XScope: http://iconfactory.com/software/xscope. It's an application that has tools for designing (rulers, guides, browser size frames, etc.). The ruler could help you with this because it measures pixels on your screen. You can quickly measure how many pixels are on each side of your layout.

Also here is something similar but a little less elegant: http://www.arulerforwindows.com/

4
  • Just realized he was talking about the content within the site rather than the site itself. Updated with a simple solution to fix that bug.
    – nheinrich
    Oct 27, 2011 at 20:39
  • Hence the second sentence in my comment. I'd already taken the screenshot, so I decided to post it anyway :-P
    – Bojangles
    Oct 27, 2011 at 20:42
  • :) Voted fixlr up, he understood what was going on.
    – nheinrich
    Oct 27, 2011 at 20:44
  • I did. He has the lowest rep of everyone, and posted the right answer. +1 to you for recommending those tools, too.
    – Bojangles
    Oct 27, 2011 at 21:25
0

It's not centered. (There are now three people claiming that it's centered, but I have no idea what they are looking at...)

You are using a list for the images, and it has a padding on the left side by default.

You are using padding in the links to get a space between them, but you are only padding on the left and top sides, so that will also add extra space on the left.

Set the left padding to zero in the list:

.gallery ul{
  list-style-type:none;
  text-align:center;
  padding-left: 0;
}

Make the left and right padding in the links more even:

.gallery ul a {
  display:block;
  text-decoration: none;
  color:#FFF;
  padding:5px 2px 0 3px;
}
0
0

You are right it is not centered.

I think, but am not sure, that it may be a padding issue, you set the padding left but not equally right on a couple elements in the container.

all left padding to 0px (or use equal padding left and right like this - padding: 5px 5px; or each image can have 0 padding and equal margin: 5px 5px;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.