www.webdeveloper.com
Results 1 to 9 of 9

Thread: Position problem / question

  1. #1
    Join Date
    May 2014
    Posts
    4

    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:

    Code:
    <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>
    Screenshot

    And the same code on a single line:
    Code:
    <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>
    Screenshot
    Here is the code for the 600px wide black bar under each row:
    Code:
    <div style="background-color:#000000;height:10px;width:600px;"></div><br>
    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.

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    the white-space between the inline elements (source code) is causing the spacing.

  3. #3
    Join Date
    May 2014
    Posts
    813
    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.

    Likewise "hundreds of thumbnails on a single page?" -- welcome to several minutes of page-load time annoying the hell out of users. Even just 100 separate files can be anywhere from 20 to 100 seconds of load time in handshaking alone regardless of connection and transfer speed! Ever notice how most gallery sites load 12 to 20 files at a time as separate pages? There's a REASON for that. Even when they have things like side-scrolling, rotators, or 'endless vertical scrolling' they leverage JavaScript to load later images, and if they're smart unload earlier images so they don't blow up the browser's memory management. (like FaceBook can do in certain browsers if you try to scroll down too far)

    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.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    May 2014
    Posts
    4
    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.

  5. #5
    Join Date
    Mar 2012
    Posts
    1,355
    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.

  6. #6
    Join Date
    May 2014
    Posts
    813
    Quote Originally Posted by SteveMann View Post
    Deathshadow - you're preaching to the choir. But this is what the client requirements are.
    Sounds like the type of clients I started walking away from as not being worth the hassle eight years ago.

    Quote Originally Posted by jedaisoul View Post
    but if you are forced to code in the dark ages, use dark age techniques.
    These forums so need a like button.
    Java is to JavaScript as Ham is to Hamburger.

  7. #7
    Join Date
    May 2014
    Posts
    4
    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.
    Steve

  8. #8
    Join Date
    May 2014
    Posts
    813
    Quote Originally Posted by SteveMann View Post
    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?
    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).

    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".
    Java is to JavaScript as Ham is to Hamburger.

  9. #9
    Join Date
    May 2014
    Posts
    4
    Quote Originally Posted by deathshadow View Post
    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).

    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.

    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....

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles