|
| |
Equal sized divs and making vertical horizontal without breaking layout
View related threads:
(in this forum
| in all forums)
|
Logged in as: Guest
|
|
|
womble
Posts: 6009
Joined: 3/14/2005
From: Living on the edge
Status: offline
 |
Equal sized divs and making vertical horizontal without... - 10/5/2008 19:36:00
Two problems in one here.... *sigh*
Problem 1: Boxes
At first I'd thought the problem I'd got was a simple matter of setting them up the same as if you wanted multiple columns of the same height in a layout, but now I'm not so sure.
My problem is that on a current site I've got to do a page with a load of rider profiles (the site's for a BMX bike club) all on the page, and I need all the profiles to be the same size. They don't contain that much information - name, age, model of bike, and favourite cartoon, and a photo of the rider and their bike, but they're all slightly different sizes, mainly due to the size of the photos, which aren't all the same size (and no, I can't make the photos the same size - I tried it, and it doesn't work).
The other problem is that they're all from included content - on the home page of the site the client wanted a random profile to be displayed each time the page loads, and I'm using a simple include statement that randomly picks any of a list of sequentially numbered files and includes it in the page. For ease of maintenance and so as not to duplicate content, I need to re-use the included files on the member profiles page, but because all the profiles have slightly varying amounts of text, and the photos are all different, some rectangular, some square, some tall and long, etc., etc., some profiles are bigger than others.
Also as members join or leave the club I need to be able to quickly add new ones in without having to re-write all of the page(s), and by recycling the included files I can just change the numbers on the filenames (they're all in the format 'randomprofile1.php', 'randomprofile2.php' etc., etc.) to quickly alter who's on the page. I can't figure out how though how to force all of the profiles to be the same size no matter how much content's in them. As the photos are the main factor governing how big each will be, depending on the size of the photo (all the photos are around a maximum of 250px square at most though), for a large photo the photo may force the text down below it if I constrain the width of the profiles though. I suppose I could have it in a scrolling div, but ideally I need all the text to display.
I'm trying to figure out how I can do it, and coming up blank, but I've even considered I may *gasp* have to use a table   . I seem to remember a while back someone had a similar problem with a client site where the content was in "blocks" and IIRC could be edited by the client, but the blocks needed to be constrained to keep them all equal or it would have messed up the layout. Problem is I can't remember what the solution was or who had the problem (though it sounds like the sort of problem with crazy clients either Jaybee or Tail would have  ).
Problem 2: Making vertical horizontal without stretching things
Same site, same page. At the top of the page the client wants a "featured rider". I've ruled out recycling the included files from the home page random feature for that bit, because the client wants to be able to edit it themself, so I'll just set the headings and paragraphs up and leave them to it. I use Snippetmaster as a simple CMS, which even the technologically challenged ones can manage (my 9yr old nephew uses it on his site) and you can set up which regions of the page are editable very precisely, so I can set the headings so they're not editable so they can't mess them up, but allow them to edit the paragraph text.
The problem I've got is that there's not an awful lot of information under most of the headings at present, so although on the home page having the headings stacked vertically is fine because it's a small amount of space it's displaying in, in a narrow column, on the rider profiles page where it's practically the full page width it's wasting a lot of room, and it makes more sense to have the small pieces of info side by side horizontally. It's a bit difficult to explain what I mean, so I've attached a couple of screenshots - one of one of the profiles from the home page, and one of the "featured rider" area on the profiles page. On the profiles page I've drawn some boxes on it to show where I want to position the bits of info.
While I've got the headings/text side by side now by left floating them all, which nicely gets rid of all that dead space, the problem, as you can see from the third screenshot is that if you've got a long name, or a long cartoon name for example it stretches the div, and as the photos again are different sizes, it could potentially break the layout if the divs get too wide. "Ah! max-width!" I hear you cry, but IIRC max-width isn't supported by up to IE6 (can't remember if IE7 does or not off-hand). Anyone know if there's a workaround for this at all? As really I could do with having them an equal width, or at least not having any a ridiculously narrow width, as could happen with the "Bike" heading, as some of the bikes have very short names (but then again some of them also have very long names), I suppose I'd need a min-width as well (but IIRC that isn't fully supported by all browsers either!). At this point I'm thinking possibly I may have to resort to tables again . I considered just putting two headings side by side and two deep there, but again I've a feeling that might look a bit silly as well for profiles where the actual content under the headings is on the sparse side.
Anyone got any wisdom they care to impart or suggestions?
(dodgy quality of screenshots due to having to use low quality jpeg to get under the 20kb upload limit, and the actual width of the page is around 785px - I had to resize the screenshots to get under the limit)
 Attachment (1)
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
|
|
|
|
womble
Posts: 6009
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: Equal sized divs and making vertical horizontal wit... - 10/7/2008 15:07:18
quote:
ORIGINAL: Tailslide
Don't you lump my clients in with Jaybees! My lot are positively sane in comparison!
True. My apologies.
quote:
Personally I try to avoid the second issue by using a more flexible approach like your third image. Nothing wrong with it - only issue is that you've shown the client the first approach and they like it
Nah, the problem is they have very definite ideas about how they want it to look, and I have to translate their hare-brained notions into something that actually works. You would believe how long it took me to persuade them that a jet black background on the whole screen would be just too much with how they want everything else (it's a fixed width and I finally persuaded them to go with #202020 for the actual 'page' with the surrounding background pure black, which works much better.
Last week's crazy instructions included "We don't like the font - can you use a different one?" After explaining the problem of the font having to actually be on the viewer's machine for them to see it if it's a non-standard font (three times!), they followed that up with, yep, you guessed it...! ..."Actually, the kids think it's really cool - could you do it all in Comic Sans?"
 
(fortunately I managed to persuade them out of that one)
Two more emails from them tonight when I got in from work (my other job). I've not dared look what's in them yet!
Thanks for the suggestions - I'll take a look at them and hopefully get a workable solution for the expanding divs.
Yep, on the profiles they're just sat there side by side in a containing div. I've been vaguely looking around at various examples of using PHP to dynamically resize/constrain image sizes. The profiles aren't too bad as I'll be doing the maintainance and updating those, so I can resize the images, and I guess with a bit of "artistic" cropping I could get them all roughly the same size. The problem's going to be with the featured/new rider bit at the top of the page because that's the bit they want to be able to edit themselves. Using the pro version of Snippetmaster they will be able to upload images themselves, but of course I won't have control over that until they send me the info for a new member for example to be added into the general profiles. They're wanting to be able to edit the featured/new member themselves because they'll be updating the news section of the site, and if they get a new member or if a rider does really well in some national race or something, they want to be able to highlight it straight away.
I suppose I could tell them they must make sure the photo isn't any bigger than X by Y, and I seem to remember Jaybee posted about an online resizing tool recently, which may be useful, or download them Paint.NET (my current favourite freebie) and give them a crash course in how to use the basics of it. I've got to go and give them a crash course in running a forum (though again, I'll be doing the maintenance for it), so that might be an option.
Hmmmm. I'll come up with something. Brain's actually sort of working tonight, unlike the other night, so that's an advantage!
Thanks again Tail! 
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
