Image Positioning in HTML

Posted Fevereiro 13, 2009
Filed under: nerd, nonsense |

Dear lazyweb. I have a problem ;D I`m trying to position images on a page using position: relative, and moving the left and right pizels of each one. all images are pngs with a little transparent border ( to give the impression that they are not squares standing up. it works well if the visible area is > 1000 pixels, 

Ludus1

 

pretty neat, uh? my friend Alexandre did it. Anyways, when the user resizes it or it`s screen is 1024×768 or small, this thing here happens. 

Ludus Wrong

 

can anybody tell me how to fix that?

I`m doing:

<div> <img 1> <img 2> … </div>

the div is 100% of the width.

Ps.: Xande, if you`re reading this, yeah, I still didn`t manage to make this work.

12 comentários até agora

  1. ChALkeR on Fevereiro 13, 2009

    Use css “min-width” for the div. For ie6 – use a js expression for width, as it does not understand min-width.

  2. sebt3 on Fevereiro 13, 2009

    Allo :) ,

    You’re asking the browser to behave this way :
    with the syntax ” … ” you say the browser that you want a line of obejct (images).
    and saying that the div width is 100% also mean that you don’t want a scrollbar. So the browser use it’s line wrap algorithm.

    you should have the width of your div equal to :
    sum(width of image + left&right padding + left&right margin)

    So your container (the div) is large enough to handle it’s content without using line wrap. Be beware, this way you should have an scroll bar if the page width is smaller than your div…

    hope that help

  3. Massimiliano Torromeo on Fevereiro 13, 2009

    Try giving style=”white-space:nowrap” to the div

  4. tumaix on Fevereiro 13, 2009

    @everybody
    Thanks, manage to make it work. *happy*
    =D

  5. Jens on Fevereiro 13, 2009

    you should not use min- and max- definitions, since the **** IE does not interprete them… >.<

  6. ChALkeR on Fevereiro 13, 2009

    @Jens

    For ie you can use a js expression in css, it will solve the problem.

  7. Jens on Fevereiro 13, 2009

    yeah, but there’s a not-so-small group of users, that hasn’t javascript enabled..

    and in many case, where you may want to use min-/max-stuff, you can do easily a workaround… thats, what i noticed over the past years ;)

  8. tszcheetah on Fevereiro 13, 2009

    You can use an IE specific stylesheet (conditional comments) and set the ‘width’ CSS property in that, together with any other IE-specific hacks. Width on IE behaves like min-width, if I remember correctly. Of course don’t forget the min-width for real browsers. No javascript, still valid HTML.

    See http://msdn.microsoft.com/en-us/library/ms537512.aspx

    Example (hoping this works):

  9. tszcheetah on Fevereiro 13, 2009

    Ok, example got lost in the comment… Another try…

    <!–[if lte IE 7]>
    <link rel=”stylesheet” type=”text/css” href=”ie-hacks.css”>
    <![endif]–>

  10. tszcheetah on Fevereiro 13, 2009

    Sorry for the spam, can’t edit… WordPress changed the example above once again: change the single dash into a double for the example to work (so – becomes – -, without a space in between…)

  11. Rudd-O on Fevereiro 14, 2009

    Fixed width on the container, or perhaps whitespace: nobr.

  12. woolulnelia on Dezembro 12, 2009

    Various of folks blog about this issue but you wrote down really true words!


Leave a reply