There are several tutorials on the net showing you how to create a
thumbnail gallery with floating thumbails which automagically uses all
horizontal space available (e.g. http://css.maxdesign.com.au/floatuto...orial0407.htm). However all
of them use images which are all equal in size - and that's not the case
with my thumbnails. The method itself still works, however I want to
center all the images in a row vertically with the highest image (in
that row). Like that:
xxxxxxxxxx
xxxxxxxxxx x x
xxxxxxxxxx x x x x
x x x x x x
x x x x x x
xxxxxxxxxx x x x x
xxxxxxxxxx x x
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx x x
x x x x xxxxxxxxxx
x x x x x x
x x x x x x
x x x x xxxxxxxxxx
xxxxxxxxxx x x
xxxxxxxxxx
All methods I tried will align the images of a row either on the top or
on the bottom of a row, not at the middle.
Basically, I want to have the effect I would get if I put each image in
a table cell with vertical-align=middle set on the tds (+ the
automatical change of columns when the available width changes).
Any hints?
Thanks,
Florian
--
Sir, we are surrounded! - Excellent! Now we can attack in any direction
[------------ http://www.torfbold.com - POV-Ray gallery ------------] 10 10702
In comp.infosystem s. www.authoring.stylesheets Florian Brucker said: There are several tutorials on the net showing you how to create a thumbnail gallery with floating thumbails which automagically uses all horizontal space available (e.g. http://css.maxdesign.com.au/floatuto...orial0407.htm). However all of them use images which are all equal in size - and that's not the case with my thumbnails.
add margins to the images so they become all the same size. e.g:
10px margin 30px margin 15px margin
80px image 40px image 70px image
10px margin 30px margin 15px margin
etc etc
you can do it manually if you only have a few images or a bit of fun 'n
giggly server side scripting to do it automatically if you have a lot.
Basically, I want to have the effect I would get if I put each image in a table cell with vertical-align=middle set on the tds
div{width:200px ;height:200px;d isplay:table-cell;vertical-align:middle;te xt-align:center;}
not supported by IE
--
l i t t l e v o i c e s m a k e m e
brucie wrote: add margins to the images so they become all the same size. e.g:
[snip] you can do it manually if you only have a few images or a bit of fun 'n giggly server side scripting to do it automatically if you have a lot.
I'd like to keep it as simple as possible - that includes no special
styles for all elements of a group. I just don't like the extra effort
it's causing both in creating and maintaining. The server side scripting
would help, but I still prefer CSS solution like
div{width:200px ;height:200px;d isplay:table-cell;vertical-align:middle;te xt-align:center;}
That looks like a nice solution!
not supported by IE
Seems like that's the catch in all those "only a bit more
advanced"-css-techniques. Not that I would care about it :)
Thanks!
Florian
--
Better to rule in Hell than to serve in Heaven. (Milton)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]
Florian Brucker <to**@torfbold. com> wrote: All methods I tried will align the images of a row either on the top or on the bottom of a row, not at the middle.
Only bottom aligning will produce proper wrapping.
Basically, I want to have the effect I would get if I put each image in a table cell with vertical-align=middle set on the tds (+ the automatical change of columns when the available width changes).
Stop wanting that is probably the best advice.
Second best would be to wrap each image in a inline-block level
container with it's height fixed @ the same as the tallest image.
Beware that you will run into loads of problems when trying to do that.
Mozilla's non support of inline-block and/or inline table, IE's
broken/limited support of inline-block, convoluted methods needed to
vertically center the images etc. (Lauri R. has a page with vertical
centering pointers should you want to go down that route).
--
Spartanicus
In article <2s************ *@uni-berlin.de>, to**@torfbold.c om says... There are several tutorials on the net showing you how to create a thumbnail gallery with floating thumbails which automagically uses all horizontal space available (e.g. http://css.maxdesign.com.au/floatuto...orial0407.htm).
However all of them use images which are all equal in size - and that's not the case with my thumbnails.
Yes, because it is easiest when making examples, did that first myself
too...
The method itself still works, however I want to center all the images in a row vertically with the highest image (in that row). Like that:
xxxxxxxxxx xxxxxxxxxx x x xxxxxxxxxx x x x x x x x x x x x x x x x x xxxxxxxxxx x x x x xxxxxxxxxx x x xxxxxxxxxx
xxxxxxxxxx xxxxxxxxxx x x x x x x xxxxxxxxxx x x x x x x x x x x x x x x x x xxxxxxxxxx xxxxxxxxxx x x xxxxxxxxxx
No captions?
img {vertical-align:middle;}
<img><img><img> <img><img><im g>
And if you want to center horizontally, wrap them to div and use
text-align.
If you do have captions, Brucie told what to do.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
In article
<2j************ *************** *****@news.spar tanicus.utvinte rnet.ie>, me@privacy.net says... Florian Brucker <to**@torfbold. com> wrote:
All methods I tried will align the images of a row either on the top or on the bottom of a row, not at the middle.
Stop wanting that is probably the best advice.
No it is not. This is not that hard. And IMHO they look ugly if not
vertically centered.
Second best would be to wrap each image in a inline-block level container with it's height fixed @ the same as the tallest image.
No, floating box is good also, as OP is not trying to center rows
horizontally, or at least never said so and ASCII art didn't implicate
centering either... There is less problems doing this using floats. One
that comes mind is Opera 6 float bug, but it is not that easy to tricker.
Beware that you will run into loads of problems when trying to do [inline-block way]
Some, yes.
IE's broken/limited support of inline-block, convoluted methods needed to vertically center the images etc.
IE has nice bug to treat dispaly:inline as if it was inline-block
(Lauri R. has a page with vertical centering pointers should you want to go down that route).
In this case, adding margins to both sides will do it most widely
supported (works on all browsers use CSS afaik), display:table stuff
second widely supported (but does not work on IE). Both in brucies post.
Page mentioned: http://www.student.oulu.fi/~laurirai/www/css/middle/
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Lauri Raittila <la***@raittila .cjb.net> wrote: IE's broken/limited support of inline-block, convoluted methods needed to vertically center the images etc.
IE has nice bug to treat dispaly:inline as if it was inline-block
IE actually supports the inline-block property (to some extend). It was
introduced as a proprietary extension (don't know when, but IE 5.5
"supports" it).
--
Spartanicus
Spartanicus <me@privacy.net > wrote: inline-block property
inline-block value
--
Spartanicus
>>All methods I tried will align the images of a row either on the top or on the bottom of a row, not at the middle.
Only bottom aligning will produce proper wrapping.
Can you explain why that should be the case? Wrapping should occur if
the sum of widths of all elements in the current row (including margins
etc.) is greater than the available horizontal space. Please tell me
what difference *vertical* alignment makes here.
Basically, I want to have the effect I would get if I put each image in a table cell with vertical-align=middle set on the tds (+ the automatical change of columns when the available width changes).
Stop wanting that is probably the best advice.
Nope, don't think so. If I leave out the wrapping, it's even possible
with plain HTML. And there are 2 different solutions, as Brucie and
Lauri Raittila showed.
Second best would be to wrap each image in a inline-block level container with it's height fixed @ the same as the tallest image.
That would require me to know the height of the tallest image. Although
I might be able to retrieve this piece of information, I'm looking for a
general, non-case-specific method.
Beware that you will run into loads of problems when trying to do that.
[Broken browser report snipped]
What I do care about is the CSS specification, nothing else ;).
Hopefully no browser-specific hacks will ever find their way into my code.
Florian
--
I believe in God, only I spell it Nature.
(Frank Lloyd Wright)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]
> No captions? img {vertical-align:middle;}
<img><img><img> <img><img><im g>
Simple, working, wow ;)
And if you want to center horizontally, wrap them to div and use text-align.
Thanks for the help!
Florian
--
All religions are founded on the fear of the many
and the cleverness of the few. (Stendhal)
[------------ http://www.torfbold.com - POV-Ray gallery ------------] This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Mike |
last post by:
Sites using thumbnail preview for world wide web file navigation and
searching.
Below are list of sites that are either researching or providing thumbnail
preview images for online web documents. Thumbnail previews are useful for
web site navigation particularly in search engines and directories such as
Google, Altavista and Yahoo. The preview images provide a portion of the
content of the electronic file to aid in navigation.
|
by: Filippo Giarratano |
last post by:
Hi -- I'm trying to figure out how to make a photo thumbnail gallery
page using CSS and no tables that (1) has a caption below each image
and (2) is centered -- so that as browser width changes the images
consistently reconstitute themselves as centered rows with the maximum
number of images on each row.
I've made a test page at http://www.americanstate.org/test/gal01/ that
illustrates what I'm aiming for and how close I've gotten. I've...
|
by: Max Quordlepleen |
last post by:
Apologies for the crossposting, I wasn't sure which of these groups to
ask this in.
I have been lurking in these groups for a week or so, trying to glean
what I need to design a simple, clean set of pages that get the w3c
tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
to the great information in these groups.
Now, however, I'm having trouble. A few days ago, I read a thread that
dealt with this issue of...
|
by: Stevie D |
last post by:
Hi I'm a Javascript newbie
I'm doing a 'simple' (basically adding pages and changing text in frontpage
2000) update of a web site for a friend - what I have done 'should not' have
done anything to the Java script that this site contains and the bits I've
added work fine. However, having uploaded the changes, and looking at the
site in I.E. the thumbnail images that already existed in the site don't
load into a popup window that was...
|
by: Chris Dewin |
last post by:
Hi. I run a website for my band, and the other guys want an image gallery.
I'm thinking it would be nice and easy, if we could just upload a jpg into
a dir called "gallery/". When the client clicks the "gallery" link, a
cgi script could search the gallery/ dir, and create thumbnails of any
jpeg images that don't already have a thumbnail associated with them. The
script could then generate a page of clickable thumbnails.
A few questions:
| |
by: David |
last post by:
Greetings all,
I am having a problem with an asp.net application using C# which is a
thumbnail generator. Here is the code used...
http://www.eggheadcafe.com/articles/20030515.asp
It works fine for .jpg images but for some reason it doesn't work with .gif
images. The author of the article says it works fine for him but I can't get
it to work. I was wondering if anyone here can shed some light?
|
by: Xah Lee |
last post by:
The following is a program to generate thumbnail images for a website.
Useful, if you want to do that.
It is used to generate the thumbnails for my “Banners, Damsels, and
Mores” project gallery. (
http://xahlee.org/Periodic_dosage_dir/lanci/lanci.html )
Comments and versions in other lang welcome.
Xah
|
by: barb |
last post by:
So that the world at large benefits from our efforts, here is one fully
documented way to use Windows Irfanview freeware to create thumbnail web
galleries (http://www.irfanview.com).
STEP 1: Start with original thumbnails & two empty sub directories
STEP 2: Create smaller versions of the originals for one sub directory
STEP 3: Create thumbnail version of the originals the other sub directory
STEP 4: Create an index.html pointing to the...
|
by: Jane |
last post by:
Hi,
I need some help (php rookie) to build a thumbnail page using php.
I'v a mysql database containing links to the original image files.
No thumbnails created so far.
It would be nice when the thumbnail contains a link to the original file :-)
Jane
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, well explore What is ONU, What Is Router, ONU & Routers main usage, and What is the difference between ONU and Router. Lets take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |