Game Finder tabular maps layout [Done]

[superkarn]

Well I did want the maps to wrap, and I don't know what width to specify when people have different resolutions.

I am also considering using a tabular layout to keep maps aligned, but again how do I know how many columns to specify when people have different resolutions?

UPDATE: I changed the code... does it work now in Opera??

You can give a fixed width to each of the div around a map option and maybe float it (give it a class or something). That way they will still wrap (not sure about opera though), and will also line up nicely. If a map name is too long, then the name will just wrap inside that div block.

[lackattack]

Okay, I tried this and hit a wall When the text wraps, it messes up the row.

Here's the code:

Code: Select all

<div style="float:left; width:10em; margin-bottom:5px;">
<a><img /></a>
<input type="checkbox" /><label><div>[map title]/div></label>
</div>

Any ideas?

[Coleman]

It must be possible. I see them do this on websites all the time. I'll try to find one and look at the source code.

Don't let the fact I'm looking around stop you from giving an answer or looking yourself, I might not find anything.

[superkarn]

A couple of options:

1 - Assuming that no map names will be super long (no longer than 2 or 3 lines), you can give the div a fixed height.

2 - Keep the name to the right side of the map icon (as it is now), have it v-align to the top. That should (maybe) give you about 2-3 lines worth of text.

Second options will probably run into the same height problem if the names are too long. So maybe you'd still need a fixed height either way.

[RjBeals]

Or, put the map in its own div, and the radio button in it's own div right next to it. Have a max of 5 maps & 5 map names per row. It works out okay that way on 99% of browsers.

[superkarn]

How about this? You can resize the browser, and everything should still line up nicely. (Ignore the footer/head, etc)

http://www.jessikarn.com/cc.html

Check out this css class:

Code: Select all

.xxx 
{
    float: left;
    width: 7em;
    height: 7em;
    padding: 0.5em;
}

[gimil]

USApocalypse isnt playing fairly

[superkarn]

The name's too long to fit next to the checkbox

[RjBeals]

How about this? You can resize the browser, and everything should still line up nicely. (Ignore the footer/head, etc)

http://www.jessikarn.com/cc.html

Check out this css class:

Code: Select all

.xxx 
{
    float: left;
    width: 7em;
    height: 7em;
    padding: 0.5em;
}

I think we have a winner !! Excellent work superkarn.

[RjBeals]

The name's too long to fit next to the checkbox

It works on my browser. I guess the font size could be forced through css. Hit CTRL "-" to reduce font size

[Optimus Prime]

How about this? You can resize the browser, and everything should still line up nicely. (Ignore the footer/head, etc)

http://www.jessikarn.com/cc.html

Check out this css class:

Code: Select all

.xxx 
{
    float: left;
    width: 7em;
    height: 7em;
    padding: 0.5em;
}

It still looks kind of funky with the names wrapping all the way around underneath the checkboxes. Is there anyway to get them aligned straight after they wrap around? It's just a cosmetic thing mostly.

Oh, and if USApocalypse isn't playing fairly could we make the grid one less wide and add another row, giving more space to the columns? That would give you a bit of wiggle room for future map names if the need ever came up.

[superkarn]

I added the center alignment and upped the height by 1, also added a <br /> between each checkbox and map name.

Code: Select all

.xxx 
{
    float: left;
    width: 7em;
    height: 8em;
    padding: 0.5em;
    text-align: center;
}

Here's the new result: http://www.jessikarn.com/cc2.html

[DiM]

I added the center alignment and upped the height by 1, also added a <br /> between each checkbox and map name.

Code: Select all

.xxx 
{
    float: left;
    width: 7em;
    height: 8em;
    padding: 0.5em;
    text-align: center;
}

Here's the new result: http://www.jessikarn.com/cc2.html

it looks great

[Optimus Prime]

The new look is awesome guys. Great work!!

[lackattack]

Excellent job superkarn! I put in your solution and I'm very pleased with the result.

By the way, I also learned a trick to avoid making people clear their cache each time the stylesheet changes. You just have to add a revision number to make the browser think it's a different file:

Code: Select all

<link rel="stylesheet" href="conquerclub.css?r=1" type="text/css" />

[superkarn]

Awesome! Glad I could be of help

And thanks for all your hard work, lack!

[Night Strike]

Geez, I thought new maps would come online once you updated the sorter page.

[RjBeals]

Very Nice..

[Wisse]

Very Nice..

indeed

[misterman10]

indeed, very nice

[muy_thaiguy]

Much easier now.

[Optimus Prime]

Geez, I thought new maps would come online once you updated the sorter page.

There will be like a whole new row when they do come up though. There are 6 that got quenched this week.

[Incandenza]

It's looking sharp. Nice one, superkarn.