PDA

View Full Version : Locking heights of tables?


benjamin_wooten
05-01-2017, 09:29 PM
Hello! Any help with this question is appreciated...

I am building a page that includes a table. The far left box of that table is a vertical dropdown menu (Spry collapsible panels). When enough panels are open, the vertical size of that table cell increases to accommodate all of the text.

My issue is that to the right of that menu cell are multiple rows of thumbnail images, the cells of which I would like to keep at 100 pixels high. However, when the collapsible panels expand enough that the menu cell grows past 100px to accommodate it, then the whole row of image cells also grows, and the images start spreading out vertically from one another.

Is there a way to lock the image cells at a fixed height that would not respond to the menu cell changing dimension, and still keep all of those on the same table? Or is there a way to place two distinct tables side by side?

Thank you everybody! Code is posted below:


<body onload="MM_preloadImages('ghosts_resources/walker_yield_thumbnail.jpg','ghosts_resources/walker_time_thumbnail.jpg','ghosts_resources/walker_moderate_thumbnail.jpg','ghosts_resources/walker_havoc_thumbnail.jpg','ghosts_resources/walker_soil_thumbnail.jpg','ghosts_resources/walker_protect_thumbnail.jpg','ghosts_resources/walker_errors_thumbnail.jpg')">
<table width="940" border="0">
<tr>
<td width="400" height="40" valign="top"><h2>ericka walker</h2></td>
<td width="10">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top"><div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">projects</div>
<div class="CollapsiblePanelContent"><a href="ghosts.html">ghosts</a><br />
propaganda<br />
murals<br />
<br />
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">further information</div>
<div class="CollapsiblePanelContent">c.v.<br />
bio<br />
includes/press <br />
contact: ericka0061(at)gmail.com</div>
</div>
</div></td>
<td width="10" align="center" valign="middle">&nbsp;</td>
<td width="100" height="100" align="center" valign="middle"><a href="ghosts_resources/walker_bounty.jpg"><img src="ghosts_resources/walker_bounty_thumbnail_fade.jpg" name="Bounty" width="75" height="100" id="Bounty" onmouseover="MM_swapImage('Bounty','','ghosts_resources/walker_bounty_thumbnail.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="100" height="100" align="center" valign="middle"><a href="ghosts_resources/walker_yield.jpg"><img src="ghosts_resources/walker_yield_thumbnail_fade.jpg" name="Yield" width="75" height="100" id="Yield" onmouseover="MM_swapImage('Yield','','ghosts_resources/walker_yield_thumbnail.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="100" height="100" align="center" valign="middle"><a href="ghosts_resources/walker_time.jpg"><img src="ghosts_resources/walker_time_thumbnail_fade.jpg" alt="" name="Time" width="100" height="75" id="Time" onmouseover="MM_swapImage('Time','','ghosts_resources/walker_time_thumbnail.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="100" height="100" align="center" valign="middle"><a href="ghosts_resources/walker_moderate.jpg"><img src="ghosts_resources/walker_moderate_thumbnail_fade.jpg" alt="" name="Moderate" width="75" height="100" id="Moderate" onmouseover="MM_swapImage('Moderate','','ghosts_resources/walker_moderate_thumbnail.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="100" height="100" align="center" valign="middle"><a href="ghosts_resources/walker_havoc.jpg"><img src="ghosts_resources/walker_havoc_thumbnail_fade.jpg" name="Havoc" width="75" height="100" id="Havoc" onmouseover="MM_swapImage('Havoc','','ghosts_resources/walker_havoc_thumbnail.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
<tr>
<td width="400"><p>GHOSTSThese images are great. These images are great. These images are great. These images are great. These images are great. These images are great. These images are great. These images are great. These images are great. These images are great. These images are great.</p>
<p>These images are great. These images are great. These images are great. These images are great.<br />
</p></td>
<td width="10" align="center" valign="middle">&nbsp;</td>
<td width="100" height="100" align="center" valign="middle"><a href="ghosts_resources/walker_soil.jpg"><img src="ghosts_resources/walker_soil_thumbnail_fade.jpg" alt="" name="Soil" width="74" height="100" id="Soil" onmouseover="MM_swapImage('Soil','','ghosts_resources/walker_soil_thumbnail.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="100" height="100" align="center" valign="middle"><a href="ghosts_resources/walker_protect.jpg"><img src="ghosts_resources/walker_protect_thumbnail_fade.jpg" alt="" name="Protect" width="100" height="70" id="Protect" onmouseover="MM_swapImage('Protect','','ghosts_resources/walker_protect_thumbnail.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td width="100" height="100" align="center" valign="middle"><a href="ghosts_resources/walker_errors.jpg"><img src="ghosts_resources/walker_errors_thumbnail_fade.jpg" alt="" name="Errors" width="75" height="100" id="Errors" onmouseover="MM_swapImage('Errors','','ghosts_resources/walker_errors_thumbnail.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<script type="text/javascript">
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
</script>
</body>

edbr
05-02-2017, 01:25 AM
if you are committed to using tables i would try putting the td in a div with a max-hieght attribute , that might work

benjamin_wooten
05-02-2017, 09:56 AM
Thanks for the response. I'm only using tables because that is all I know (and I don't know them that well, for that matter!) :) Could you give me an example of the code I would use to assign the max height of the image cell heights? Would I put one in for each td, somewhere in the height/width/valign values?

Thank you!

edbr
05-03-2017, 01:49 AM
to be honest i am not sure it would work. apart from email campaigns i would need a time machine to work with tables again i have forgotten most now.
I m not completely clear on what you are trying to achieve but i would go for a two column layout using divs. and in fact responsive at that . if this is a new project i urge you to do that . happy to help but seeing tables and indeed spry panels it is just to long ago for me

edbr
05-03-2017, 01:50 AM
if you have a mock up of the layout you want that would help

edbr
05-04-2017, 03:08 AM
a few jquery accordians http://www.jqueryrain.com/example/jquery-accordion/

benjamin_wooten
05-04-2017, 12:02 PM
Hi edbr, thanks very much for all of the help. The real problem here is that I taught myself how to build a single site back in 2010, using Dreamweaver, and just picked up the things I needed at the time. I don't have a comprehensive or fundamental understanding of how div tags work etc., no training, just trial and error.

The site I made then is still up. If you go to one of the content pages

http://www.erickawalker.com/work/posters.html

you can see what I am dealing with. What I am aiming for in the redux of this site is the same as that page above, except with a fixed/permanent vertical menu on the left-hand side that can open its collapsible menu panels without affecting the grid of thumbnails on the right. (The grid of thumbnails is shrinking to 100x100px cells, also, though that is perhaps not material to this discussion.)

I knew website building would have changed a lot since I built the original site pages, and I looked at some templates this time around, but found them all really overcooked for the look I wanted, plus I have no idea how to implement them anyway. All I really know is what I learned in 2010, how to edit that structure, how to set the Floatbox animations properly, and how to update everything with FileZilla when new images are added.

Maybe I have simply allowed too much to pass me by to be able to pull it off again this time.

edbr
05-05-2017, 06:21 AM
no not really its a simple design so it would not be that hard to update.
i think though although im not usually one to say this but you might be better using a word press site. you will find free asuitable template and will come with the advantage of gallery etc which will make admin easy for you . and have the real advantage of being responsive to take advantage of handphone tablet viewing , good menu options etc.

i will have a look if i get time for uyou .
if however you want to dDIY i can easy knock up a page for you to stand as a template , after all it would be a 2 collumn design with a header and footer

edbr
05-05-2017, 07:49 AM
had a quick look and this wp is not a million miles from ypour concept ,
but responsive slide show etc if you want ,
admin for adding images and content
would be nor so hard to adapt i think

https://wordpress.org/plugins/gallery-images/

and FREE!!

benjamin_wooten
05-05-2017, 07:47 PM
Well, I installed WordPress... and am now totally lost. Where do I build a page? All they are showing me are $60 templates.

I am used to building pages, then uploading them with Filezilla. I have no idea what I've done now.

Thanks very much for your help and suggestions, but I'm afraid I am so beyond new at anything other than the Dreamweaver path I have been using for the past seven years, I am really going to need to find some sort of 101 tutorial to even figure out what is going on.

benjamin_wooten
05-05-2017, 08:28 PM
I at least discovered that you have to log into Wordpress to build the pages. When I go to preview my new test pages, however, it just takes me to the website that already exists. I can't preview the new pages or anything.

Ugh ugh ugh... :(

edbr
05-05-2017, 11:09 PM
refresh your browser cache

edbr
05-05-2017, 11:12 PM
there are many themes and plugins free for wp. and all can be tweaked with css styling

benjamin_wooten
05-05-2017, 11:13 PM
I had to make a subdomain for the WP items. I got it working, but WP doesn't seem like a good solution for me. None of the themes are what I am looking for... everything looks like a blog, and I can't customize text, fonts, etc. at all from their theme-based approach. I end up having to go into Dreamweaver and trying to adjust their code, which seems like just extra steps doing the same thing I had to do with Dreamweaver before.

Back to the drawing board for me...