Position problem / question
New user here - be gentle.
I am a programmer, not very experienced in HTML and even less with Java.
None of the jQuery Gallery scripts I have found do what the client wants, so I am writing a program to build a single-page gallery from a database.
Again, this is probably a very basic problem, but here's the question. Why do the following two sets of HTML code appear different on the browser:
<a href="SnowScene.jpg"><img src="SnowScene_thumb.png"></a>
<a href="Steph.jpg"><img src="Steph_thumb.png"></a>
<a href="Sunrise on Beach.jpg"><img src="Sunrise on Beach_thumb.png"></a>
And the same code on a single line:
<a href="SnowScene.jpg"><img src="SnowScene_thumb.png"></a><a href="Steph.jpg"><img src="Steph_thumb.png"></a><a href="Sunrise on Beach.jpg"><img src="Sunrise on Beach_thumb.png"></a>
Here is the code for the 600px wide black bar under each row:
In the first case there appears to be a 5-pixel pad between the second and third image, and all three thumbnails (all 200px wide) take slightly over 600px. The second, where all of the image links are on a single line, there is no padding and the three images take exactly 600px on the page.
There is no CSS in use - just the code as you see it in a very basic HTML structure. I can rewrite the program to put the three thumbnail links on one line, but it really messes up my "position:relative" calculations for thumbnails less than 200px wide.
I could use "position:absolute", but there could be hundreds of thumbnails on this single page.
the white-space between the inline elements (source code) is causing the spacing.
ShrineDesigns has it right -- inline-level elements are like text, whitespace between them is collapsed to a single space, so there is effectively a space between them.
That said, you're worrying about appearance WITHOUT CSS? Uhm. No. See, HTML is for saying what things ARE -- you have a LIST of thumbnails, so semantically it belongs -- in a list (UL). You want to make that list look a certain way, that's CSS job.
... and avoid using the STYLE attribute (and never use the STYLE tag) -- it's sloppy coding and defeats the point of even having CSS.
The easiest way to deal with them would be to float them, but the bottom alignment you are trying to do won't actually work. A negative word-spacing can work in all browsers except the webkit based (chrome/safari). Display:table on the parent can almost work in the majority of modern browsers, but comes with it's own set of problems.
Likewise you don't have the text WITH the items the text is for -- that's just gibberish from a document structure layout. HTML is about document structure and semantic relationships, as there is more to building a website than what happens to be on the screen in front of you in the browser. Screen readers, braille readers, search engines, print, mobile -- your 'for screen' design could mean jack *** or even make it harder for those to make sense of it... so I'd get that text you have below the images into the same container AS each-image. The anchor might be a good target for that.
But... well, I'm going to be frank with you. A perfect 600px width? So what's your plan when it's narrower than that? What's your plan when someone with a 2048pixel wide display complains about the "crappy little stripe" layout? That's not a 'viable for web deployment' concept.
It starts to sound like your client doesn't know enough about the web to be making choices about how things should be on a website, and that you're trying to implement something that to be frank, has no business on a a website in the first place if you care about actually having visitors and the site being useful TO those visitors.
I'm sorry if that sounds harsh, but I figured somebody ought to tell you before you dig yourself too deep to get out.
Deathshadow - you're preaching to the choir. But this is what the client requirements are. I would prefer a style sheet, but the client specifications are pretty strict. It's also for a very controlled situation and client-controlled environments. I've already warned him of the slow load and problems.
You are correct that the client doesn't know much about how the web works and he is planning to distribute a data DVD to his clients that starts with an index.html. The website won't be on the web.
Thanks for the reply.
Sounds to me like a job for a TABLE? I know that's old hat and out of favor, but if you are forced to code in the dark ages, use dark age techniques. Also I'd consider generating the pages using PHP, then capture the HTML output for distribution. That might save you a lot of work if there are a lot of pages to code, particularly if there is no naming convention for the images! You can import an image list and generate the markup from there.
Sounds like the type of clients I started walking away from as not being worth the hassle eight years ago.
Originally Posted by SteveMann
These forums so need a like button.
Originally Posted by jedaisoul
Code in the Dark Ages - sounds like a plan <LOL>.
I tried a table, but the captions were a challenge - how do you make a table with variable row height to hold the caption under the image? The use of CSS is also a problem because while my sample code is brief, the actual finished pages are quite large. (The images are mechanical drawings and some photographs, and the users will be service engineers in the field, which is why the DVD-based plan.) The client wants to select the number of columns and the column width when he runs my program to generate the page from his image folder. When I make the thumbnails I constrain the images in the larger dimension. Some of the images are in "portrait" orientation, so the width is variable - which is why I use the inline "position:relative" CSS parameter. If there was a way to make the CSS dynamic to accommodate variable positions, then I am all ears. I tried using "absolute", but I couldn't figure out how to let the vertical position float while keeping the horizontal absolute, and the captions threw me a sideways. The client wants the thumbs in a grid, like a table, with captions. Currently I am using the image filename for the caption, but later will be getting the caption from a database. To complicate things more, the whole thing will be in an iFrame.
Thanks for the support.
Make it a separate row of TD below the images, OR, set the TD to valign="bottom" (or vertical-align:bottom in the CSS) -- though that will make the images flush bottom as well. (though from your pics, that's what it looks like you're trying to accomplish).
Originally Posted by SteveMann
You know, since this is going on a DVD (of all things) that might explain why the code needs to be archaic and no CSS -- some DVD players can show HTML 3.2 pages, but don't do CSS -- so it's like making an HTML e-mail; where you have to basically forget the past fifteen years of progress even exists to build one "properly".
I'll go back to my table experiments and try your tip.
Originally Posted by deathshadow
The DVD will be on a laptop and there will be an autoexecute to open the index.html page in the browser.
For this client this is a huge step forward since the service engineers currently carry a microfiche reader. Talk about Dark Ages....
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)