Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 8656

Feb 26th, 2007

image align

Expand Post »

how can i make a group of images to align up or down?
take a look:
http://www.freewebs.com/racoon200

What i wan't to do is that those images get down, so they woudn't bounce so much when you hover them.

Similar Threads

My Questions in JavaScript / DHTML / AJAX
html question in PHP

Racoon200

Reputation Points: 13

Solved Threads: 1

Junior Poster in Training

Offline

66 posts
since Nov 2006

Permalink

Feb 27th, 2007

Re: image align

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

[html]
<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>
[/html]

FC Jamison

Team Colleague

Reputation Points: 92

Solved Threads: 21

Posting Pro in Training

Offline

436 posts
since Jun 2004

Permalink

Feb 27th, 2007

Re: image align

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?

Racoon200

Reputation Points: 13

Solved Threads: 1

Junior Poster in Training

Offline

66 posts
since Nov 2006

Permalink

Mar 3rd, 2007

Re: image align

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Mar 3rd, 2007

Re: image align

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

Racoon200

Reputation Points: 13

Solved Threads: 1

Junior Poster in Training

Offline

66 posts
since Nov 2006

Permalink

Mar 4th, 2007

Re: image align

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Mar 4th, 2007

Re: image align

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

CSS Syntax (Toggle Plain Text)
td.always_center
{
   text-align:center;
   vertical-align:center;
   width: 100px;
   height: 100px;
}
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.

MattEvans

Moderator

Featured Poster

Reputation Points: 522

Solved Threads: 64

Veteran Poster

Offline

1,091 posts
since Jul 2006

Permalink

Mar 4th, 2007

Re: image align

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

Racoon200

Reputation Points: 13

Solved Threads: 1

Junior Poster in Training

Offline

66 posts
since Nov 2006

Permalink

Mar 4th, 2007

Re: image align

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:

CSS Syntax (Toggle Plain Text)
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;
}
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.

Last edited by MattEvans; Mar 4th, 2007 at 11:20 pm.

MattEvans

Moderator

Featured Poster

Reputation Points: 522

Solved Threads: 64

Veteran Poster

Offline

1,091 posts
since Jul 2006

Permalink

Mar 4th, 2007

Re: image align

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

Racoon200

Reputation Points: 13

Solved Threads: 1

Junior Poster in Training

Offline

66 posts
since Nov 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Odd rendering problem in IE

Next Thread in HTML and CSS Forum Timeline: help!

DaniWeb Message

Cancel Changes

User Name
Password