Centering an UL with images

[Abs]

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

[Spartanicus]

Abs <ab*@yahoo.co m> wrote:

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

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

[Christoph Paeper]

Abs <ab*@yahoo.com> :

I'm trying to center horizontally the thumbnails (...)
You're trying to center virtually anything.
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?
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 "fotografis t"*/
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.
Some styles are inlined in the HTML code, though.

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

[Abs]

Christoph Paeper wrote:

First rule of ciwas: Validate your code.
Second rule of ciwas: Clean your code.
Third rule of ciwas: Make a minimal testcase.
Thanks for your suggestions
Not to mention the broken-as-designed Javascript gallery approach.

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.co m site

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

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. :)

[Christoph Paeper]

Abs <ab**@yahoo.com >:

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.co m site
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.getEle mentsBySelector ("ul.class>li>a "),
"click", function() {
document.getEle mentsByClass("p hoto").style.vi sibility="hidde n";
document.getEle mentById(this.h ref.substring(1 , this.href.lengt h-1)
).style.visibil ity="visible"; // or make two classes and switch
}, true);
// See <http://webdesign.criss ov.de/Scripting/> for getElementsByCl ass(),
// getElementsBySe lector() 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>C aption
</div>
...

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

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 <ch************ **@nurfuerspam. de>:

.fullsize {visibility: visible}

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

--
Save the whales, eat more dolphins!

[Ben Sharvy]

Abs <ab**@yahoo.com > wrote in message news:<2s******* ******@uni-berlin.de>...

Not to mention the broken-as-designed Javascript gallery approach.

What do you mean ? Do I have to use the boring classical photo per page
approach ?

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.