image align

FC Jamison 31 Posting Pro in Training Team Colleague · 2007-02-27T14:02:55+00:00

Have you tried specifying a height and width for each image?

<body>
<center>
<div id="macbar" align="middle">
<a href="http://www.google.com" target="body"><img src="img/ball.bmp" align="middle" height="50" width="50"></a><nobr>
<a href="http://www.google.com" target="body"><img src="img/sergant.bmp" align="middle" height="50" width="50"></a><nobr>
<a href="http://www.google.com" target="body"><img src="img/xbox.bmp" align="middle" height="50" width="50"></a><nobr>
</div>
</center>
<!-- --><script type="text/javascript" src="/i.js"></script></body>

Racoon200 0 Junior Poster in Training · 2007-02-28T07:24:47+00:00

Well, i halfly achieved what i wanted with css.
Take a look again if you wish.
What I want now, is to make the images on mouseover popout gradiently, not instantly.

Could that be done in javascript?

MidiMagic 579 Nearly a Senior Poster · 2007-03-03T22:10:02+00:00

Those things are annoying!

I hate pages which change just as I am about to click. I once bought something on eBay because the page shifted just as I tried to click on the bid button. It put the Buy It Now button where I clicked, and I didn't notice it had happened. I ended up paying more than I intended to bid.

Racoon200 0 Junior Poster in Training · 2007-03-04T02:38:00+00:00

thats because your to desperate for clik'n. Have you used a mac? What iam doing is like a way-more-crapy than mac's bar, but its m first time so...

MidiMagic 579 Nearly a Senior Poster · 2007-03-04T12:43:32+00:00

I want the page to STAY PUT!

No ads popping in and out. No moving text. No objects changing size. If anything moves, it had better be demonstrating a principle.

Otherwise, I leave the page.

MattEvans 473 Veteran Poster Team Colleague Featured Poster · 2007-03-05T05:19:15+00:00

Make a table; put each of the images in their own table cell, and make this CSS apply to those cells:

td.always_center
{
   text-align:center;
   vertical-align:center;
   width: 100px;
   height: 100px;
}

Where I put "100px" for width and height: change that for the largest possible size that (or a tiny bit bigger than) an image can be. Now, when the images are small, they will sit in the middle of the cell; when they are big; they will fill the cell.

If you dislike tables for any reason; there's probably a hacky solution with auto-margins; but this is one of those case where, in my opinion, table is best.

Racoon200 0 Junior Poster in Training · 2007-03-05T08:51:55+00:00

Well, i guess i will give up cause i feel lazy for doing tables. But it will be awesome.

MattEvans 473 Veteran Poster Team Colleague Featured Poster · 2007-03-05T09:20:18+00:00

It's not an incorrect use for a table; you want a row of columns of buttons - this is a tabular arrangement.

Tables are the only element that supports vertical alignment, which is why I suggest them. However; you might get something like what you want using a line of div elements, with CSS like:

div.align_center
{
    width:100px;
    height:100px;
    /* same as before; replace 100px with the maximum size of your image */
    float:left;
}
div.align_center img
{
   /* this selector will apply to any image inside a div of class align_center */
   margin: auto auto auto auto;
}

Effectively; you'll be doing the same thing (you have to put each image into a div with class align_center)
If you want them aligned to the center of that bottom frame; you'll have to put them into another div (with a defined width) and set that to have margin left, margin right as auto.

Up to you really. I don't think anyone could rightfully say you were lazy for using tables for this. I think frames are lazier than tables =P

BUT I don't mind frames. They fulfil a purpose; if you need that purpose, it's not lazy to use something pre-existing.

Racoon200 0 Junior Poster in Training · 2007-03-05T09:34:01+00:00

could you guyz help me with the physics ball script i requested? (click on my username)