Hi!

I'm trying to center horizontally the thumbnails at the top of the
following page:

http://project.fotografist.com/photos.php?p_idgal=1


Like the image at the center. I've tried different CSS things on
different elements but I can't get it to work as I want. Any
suggestions, please?

Here there is the CSS file:

http://project.fotografist.com/styles/styles_black.css

Some styles are inlined in the HTML code, though.


Regards

--
Abs

Abs <abs@yahoo.com> wrote:
[color=blue]
> I'm trying to center horizontally the thumbnails at the top of the
>following page:
>
>http://project.fotografist.com/photos.php?p_idgal=1
>
>Like the image at the center. I've tried different CSS things on
>different elements but I can't get it to work as I want. Any
>suggestions, please?
>
>Here there is the CSS file:
>
>http://project.fotografist.com/styles/styles_black.css[/color]

It's difficult to know where to start. Delete the entire thing, learn
more about html, css and javascript (why you shouldn't use it for
anything essential) and then start again from scratch is the best
approach here.

--
Spartanicus

Abs <abs@yahoo.com>:[color=blue]
>
> I'm trying to center horizontally the thumbnails (...)[/color]

You're trying to center virtually anything.
[color=blue]
> Like the image at the center. I've tried different CSS things on
> different elements but I can't get it to work as I want. Any
> suggestions, please?[/color]

First rule of ciwas: Validate your code.
Second rule of ciwas: Clean your code.
Third rule of ciwas: Make a minimal testcase.

In your case the second rule is the most important one. You have got too
many elements and classes and you are using 'position', 'float' and even
'width' too much, which makes it hard to get the relations between boxes.
Not to mention the broken-as-designed Javascript gallery approach.

KISS!

However, automargining doesn't work, because of your left floating of the
list items, just make them 'inline' instead:

<ul class="thumbs">
<li><img class="off" src="/images/btnull.gif" ...></li>
<li><a href="..."><img class="on" src="/galleries/..." ...></a></li>
...
</ul>

ul.thumbs {
clear: both; /*for "fotografist"*/
width: 800px;
margin: 0 auto;
list-style: none;
text-align: center;
}
.thumbs li {display: inline;}
.thumbs .off {border: none;}
.thumbs .on, .thumbs .over {border: solid 1px;}
.thumbs .on {border-color: #777777;}
.thumbs .over {border-color: #E69452;}

Something like that.
[color=blue]
> Some styles are inlined in the HTML code, though.[/color]

Yeah right, let those dumb ciwasians dig through your awful code. (To be
fair, I've seen much worse.)

You should use more selector grouping ("foo, bar {}") and shorthand
properties and pixel is not a good unit for 'font-size'.

--
"Anyone who slaps a 'this page is best viewed with Browser X' label on a
Web page appears to be yearning for the bad old days, before the Web, when
you had very little chance of reading a document written on another computer,
another word processor, or another network." Tim Berners-Lee, 1996

Christoph Paeper wrote:[color=blue]
> First rule of ciwas: Validate your code.
> Second rule of ciwas: Clean your code.
> Third rule of ciwas: Make a minimal testcase.[/color]

Thanks for your suggestions
[color=blue]
> Not to mention the broken-as-designed Javascript gallery approach.
>[/color]

What do you mean ? Do I have to use the boring classical photo per page
approach ? What is wrong with using javascript ? My gallery is inspired
in the one I saw in the projectseven.com site
[color=blue]
>
> Yeah right, let those dumb ciwasians dig through your awful code. (To
> be fair, I've seen much worse.)
>[/color]

Sorry, I was asking for too much. Anyway, it's only a work in progress
so it's expected to have mistakes and redundant code.

I only wanted to know how to do a thing with CSS that can be easily done
with only HTML tables. Sometimes I wonder why some things are so
difficult to do in CSS. :)

Abs <abs2@yahoo.com>:[color=blue]
>
> What do you mean ? Do I have to use the boring classical photo per page
> approach ? What is wrong with using javascript ? My gallery is inspired
> in the one I saw in the projectseven.com site[/color]

You can do Javascript assisted image galleries, but you did it wrong, i.e.
not usable by people with Javascript disabled (there are many and not all
of them have a choice). I'll try to outline an approach, that degrades as
gracefully and uses as less mark-up as possible:

.fullsize {visibility: visible}

// Read with care, I'm by no means a JS expert.
addEvent(
document.getElementsBySelector("ul.class>li>a"),
"click", function() {
document.getElementsByClass("photo").style.visibil ity="hidden";
document.getElementById(this.href.substring(1, this.href.length-1)
).style.visibility="visible"; // or make two classes and switch
}, true);
// See <http://webdesign.crissov.de/Scripting/> for getElementsByClass(),
// getElementsBySelector() and addEvent(). There are other ways to do it.

<ul class="thumbs">
...
<li><a href="#img12"><img href="12.thumb.jpeg" alt="..."></a></li>
...
</ul>
...
<div class="photo" id="img12">
<img src="12.jpeg" alt="..."><br>Caption
</div>
...

But note, that not everybody wants to load all full-size images.
[color=blue]
> I only wanted to know how to do a thing with CSS that can be easily done
> with only HTML tables.[/color]

Tables are not without pitfalls either. Judging fom your code you seemed
to know that block boxes are centered with auto-margins and inline boxes
with "text-align: center" for their containing box, i.e. parent. You just
put in too much else, which made it not work.

--
"Space may be the final frontier,
but it's made in a Hollywood basement."

Red Hot Chili Peppers - Californication

Christoph Paeper <christoph.paeper@nurfuerspam.de>:[color=blue]
>
> .fullsize {visibility: visible}[/color]

Working with 'display' ('block' or 'none') might be the better approach
here.

--
Save the whales, eat more dolphins!

Abs <abs2@yahoo.com> wrote in message news:<2s2kdqF1fop4pU1@uni-berlin.de>...
[color=blue][color=green]
> > Not to mention the broken-as-designed Javascript gallery approach.[/color]
>
> What do you mean ? Do I have to use the boring classical photo per page
> approach ?[/color]

You can load images from an index onto one page, without using
javascript. I do that here:
http://www.efn.org/~bsharvy/rsharvy/rsindex.html (the thumbnails are
at the bottom). Each thumbnail causes the larger image to load in the
same .php page, by passing the name of the image in the URL to the
page.