HTML and CSS

image align

Please support our HTML and CSS advertiser: $6.99 Domain Names at 1&1. Includes Free Privacy. Save Now!

•

Join Date: Nov 2006

Posts: 66

Reputation: Racoon200 is an unknown quantity at this point

Solved Threads: 1

Racoon200

Offline

Junior Poster in Training

image align

Feb 26th, 2007

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.

•

Join Date: Jun 2004

Posts: 436

Reputation: FC Jamison is on a distinguished road

Solved Threads: 20

FC Jamison FC Jamison is offline

Offline

Posting Pro in Training

Re: image align

Feb 27th, 2007

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]

•

Join Date: Nov 2006

Posts: 66

Reputation: Racoon200 is an unknown quantity at this point

Solved Threads: 1

Racoon200

Offline

Junior Poster in Training

Re: image align

Feb 27th, 2007

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?

•

Join Date: Jan 2007

Posts: 3,266

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 170

MidiMagic

Offline

Nearly a Senior Poster

Re: image align

Mar 3rd, 2007

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.

Daylight-saving time uses more gasoline

•

Join Date: Nov 2006

Posts: 66

Reputation: Racoon200 is an unknown quantity at this point

Solved Threads: 1

Racoon200

Offline

Junior Poster in Training

Re: image align

Mar 3rd, 2007

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

•

Join Date: Jan 2007

Posts: 3,266

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 170

MidiMagic

Offline

Nearly a Senior Poster

Re: image align

Mar 4th, 2007

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.

Daylight-saving time uses more gasoline

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: image align

Mar 4th, 2007

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

 Help with Code Tags 
 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.

Plato forgot the nullahedron..

•

Join Date: Nov 2006

Posts: 66

Reputation: Racoon200 is an unknown quantity at this point

Solved Threads: 1

Racoon200

Offline

Junior Poster in Training

Re: image align

Mar 4th, 2007

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

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: image align

Mar 4th, 2007

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:

 Help with Code Tags 
 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 10:20 pm.

Plato forgot the nullahedron..