I'm trying to get this site up and running. I'm not an html/css techie by any stretch. I can get it to do most things but this one has got me 'frazzled.
The text related to these images is shorter than the image and the next image is offset to the right. Obviously, what I want if for the images to flow down the page with the associated text to the right or the images.
Any suggestions very much appreciated. Any other comments gratefully accepted.
//al
<a href="images/630910vad.jpg">
<img alt="photo of this letter" src="images/630910vad_1.jpg" class="left-top" ></a>
<h3>Thu. Sept. 10, 1863</h3>
<p class="indent">Went over to the 106 regt today. Saw lots of boys that I was acquainted with. Saw Horis Pickett had a good visit with him.</p>
Adding clear: both; leaves the text intact where it is (aligned on the left, of course) and throws the images to the bottom of the page.
I've been over this, as the expression goes, seven ways from Sunday and can't make it behave!
[QUOTE=COBOLdinosaur;1273038]The problem is that the text is too short and the next image floats to the previous image.[quote]
Yep, that's the problem, g-g-g-randpa didn't write as much some days.
Quote:
It is probably not possible to have the text consistently the same height as image. so each set of images an text should be a separate unit.
It's rare that they're the same height - or even close - some days he got verbose, other days he didn't say much of anything.
Quote:
I'm not sure why you are floating them. if you just use a natural flow, the blocks should just line up one under the other.
They don't ... that's been my problem with this all along. At best, I get what you see there now. At worst they're completely disassociated. The natural flow (no clear / no float) puts the image with the associated text *under* the image.
I've been working with this site for a couple of years now; nothing that I've tried will come anywhere close to what I'm trying to achieve.
I'm real willing to let the various browsers operate as they will - but if you've looked at the page, that's just not acceptable. And simply, *I* can't come up with a workable solution.
Cannot recall the particulars, but Dan Cederholm's "Bulletproof Web Design" had a wonderful bit using Definition Lists <dl><dd>-</dd><dt>-</dt></dl> to hang text and images together.
waxsoc, I've looked at caption since I do have several pictures that I'll add to the letters - but they'll be out of the flow of the messages and caption comes in real handy.
I found a couple of articles on using dd/dt and if I could use it for the diraies but I use the same css for both the diary entries and the letters - trying to keep life simple. If I were willing to let the letters flow down the right hand - it might be workable, but some of them get longish and it's better for them to wrap the image.
I could also put the individual pages up as separate entries - then there's no problem; again there are cases where I'm putting up 3 and four pages per letter and diary entry - that would make my "table of contents" to the left a lot worse than it already is.
(( Have to think on this ... if the toc points to the first entry for a date, then use next / previous to go to the next page ... not what I want, but it does solve the problem ))
I also have code in hand that does solve some of the problems but it has some other quirks - like the second diary entry slides below the image ... argh.
I may sound like I'm playing "yes, but" with you all but I've been trying to get this site lined out right in my spare time for a couple of years; I'm now retired and have the time to dedicate to it and would like to have it look right. I've gotten several comments from school kids (through college level) who have been on site and reading so I have the incentive to get it done, but I want to get it done right ( which involves having it look reasonably like I want it to look
Slight change to my problem.
I now have the diaries and letters laying out as they should - but the div drops them down to the end of my nav to the left.
I have three divs:
Navigation: float left
Google adds: float right
and content - no float / no clear.
Can anyone suggest any way to get this div to appear at the top of the page, in line with the other two divs, as it should?
Waxdoc, I'm going to have to figure out how you did what you did, but it looks good!
I'd like to widen that center div a bit, but think I can figure that out.
... and what's wrong with red - maybe it's a little bright, but you sure won't miss it!
Thank you, <sir ??>
//al
I have a few questions but I'll go with one for now:
You use percentages where I would have used px - in margins, for example - just wondering why.
And please don't say because yours works and mine didn't!
I've spent the evening updating php includes and can now duplicate yours - not too bad, just need to add the extra div to the other source php and I think I'll be home free.
Thank the gods for diff programs!!
Sometimes we have to go back to things we would rather not use. Have you tried treating it as tabular data and putting it in a 2-column table?
I hate to suggest a table for layout, but if that gets it close then it is possible we could manage it with faux tables using alternate display methods on div tags. I have an article about such methods on my site.
COBOLDinosaur, no need, the changes that WaxDoc provided do exactly what I want (thank you sir!)
I'm just intrigued a bit by the way he does some of the things he does.
Using a (naughty! No,NO!) <table> layout is not a sin (if it works). A fixed 3-column layout (without any floats) might be your answer. When figuring widths, remember the CSS box model and calculate right- and left-side padding, margin and border (that's x2 ) plus the content width (add some breathing space too). Then create your overall containing <div> (which I called WRAP) with a width great enough to encompass the inner 3-columns. You can then calculate your middle and right <div> margins to clear the columns to the left.
Waxdoc, since you're floating around on line at the moment ... I've made a few changes which mostly work as I want. The left and right are fixed width ... I'm trying to leave the remaining "body" open so it floats depending on the width of browser window.
It behaves oddly when someone (me) tries to resize the window too narrow ... the google add (which garners me nothing but ... ) will drop to the bottom. Even though the center portion is based on a percentage, the gap between the body and the add changes as you resize it ... how come, I don't see it.
If you have the time, would you mind revisiting ( http://aljones.us ) and seeing if you can help me ... (( and don't say, some *old* folks are beyond help, I already know that!! ))
Thanks //al
Before you post, read our: 
