Dynamic image width and positioning doesn't seem to work well

[FalseProphet]

Can anyone help me out with this? If a client browses with an extremely wide monitor, there is a gap between bar.png and right.png. How can I keep right relative to the width of bar.png?

 

Here is my style thus far.

<div id="selector" style="position:absolute;top:10;left:10;">
<pre><img src="images/left.png" alt="test"/><img src="images/bar.png" alt="Test" style="position:fixed;width:90%;height:63px;"/><img src="images/right.png" alt="test" style="position:fixed;left:92%;"/></pre>
</div>

[cssfreakie]

I have a hard time imagining how this will look in the end. Got an online example. For now all i can say is that some elements you position by using left and others you don't position.

[FalseProphet]

I have a hard time imagining how this will look in the end. Got an online example. For now all i can say is that some elements you position by using left and others you don't position.

 

I set up a freewebs just to display it. In the page, the edges of the images are colored to display where one position ends and the other begins.

I am trying to make an image (bar.png) scale width with the browsers width and I am trying to keep an image (right.png) position relative to the scaled images width. The problem I seem to be having is the right.png image will move far on width screen monitors, making it appear that there is a gap between bar.png and right.png.

 

 

http://templatetester.webs.com/index.htm

[sunfighter]

What you want to do, make a fluid banner that covers the top of your page no matter what the page width is, can be done by repeating a image horizontally.  You don't show if you want anything besides a blank image in your bar.png but this is the image is repeated. The right .png should be positioned absolutely.

 

Why are you using <pre> tags? You should use height and width dimensions with images

[FalseProphet]

The image I use has a circular gradient, which is why I didn't use a horizontal repeat. I'm using <pre> because for some reason, right.png was placed on a new line.

[cssfreakie]

can you give 1 valid reason to bypass everything that has been said to use <pre> ?

[FalseProphet]

can you give 1 valid reason to bypass everything that has been said to use <pre> ?

 

I already said it was just used to keep the image aligned. It's old code that is no longer being used... sheesh.

[FalseProphet]

I seem to have fixed my original problem by making each image position relative and giving the div a width.

How can I make the code prettier? I don't like having each image next to one another, I would like to have each image on their own line within the source for aesthetic reasons(habit of programming) without the image showing gabs between each image.

Also, how can I keep the images from being broken up and placed below one another when the browser width is very small, can I just make it overflow while keeping the images on the same line?

 

<div id="selector" style="position:absolute;top:10px;left:25px;width:100%;">
<img src="images/left.png" alt="test" style="position:relative;"/><img src="images/bar.png" style="position:relative;width:90%;height:63px;" alt="Test"/><img src="images/right.png" alt="test" style="position:relative;"/>
</div>

[cssfreakie]

I already said it was just used to keep the image aligned. It's old code that is no longer being used... sheesh.

trust me i sometimes say things for a reason, don't see it as a personal attack. Using the pre tag makes no sense, blaming the age of the code doesn't justify crap.

I would like to have each image on their own line [..] without the image showing gabs between each image.

you either need to keep them on the same line (in your code)

or if you ignore that (they are in line elements) for certain reasons, you can assign the property of float to them.

 

Also, how can I keep the images from being broken up and placed below one another when the browser width is very small, can I just make it overflow while keeping the images on the same line?

Well you need to wrap them in a container that has a fixed (so not fluid) width that is sufficient. So if you have 3 images of 30px it should be 90px.

 

But again when posting code in the css/html forum quite some stuff we don't see like the dimension of images. so it's kinda hard to imagine how it will look or suggest better methods. For now i am pretty sure the use of that position relative in your code is madness, but if I would see an on-line example i could back it up easier.

 

Hope the above helps.

[FalseProphet]

Here is an example:

http://templatetester.webs.com/index.htm

 

The only issue I have with this code is whenever the browser isn't wide enough the images are placed on their own lines. I want to keep them on the same line regardless of browser width. My div container has a width of 100% as to keep the image stretched properly. This is just one big ugly hack haha!

[cssfreakie]

well to repeat myself a little normally it requires a container with a fixed width to do this. Now in you're case your using percentages. As you know percentages are fluid (relative) and not fixed so you need to figure out how to still combine the percentages and the fixed width of the 2 images so there is enough space for them to sit on the same line.

 

Have a look at the code below. I reproduced what you made (but working) without the use of positioning other than static.

Now notice, I wrapped a little container around the middle image and set a margin left and right of 50 pixels (the same width of the outer images). this allows them to sit on the same line while the middle image can stretch it's butt off. I recommend to read through this code and recreate it out of your head, because this is not seen in most designs, and the trick with the margin can be very useful for other situations.

 

good luck! *and don't forget to mark it solved when it solved it for you 

 

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <title></title>
<style type="text/css">
    body{width:100%;}
    #wrapper{
        width:90%;
        margin:0 auto;
    }
    #middle{
        margin:0 50px; /* some space for the left and right image */
    }
    #middle img{
        width:100%;
        height:50px;
    }
    #header img{
        float:left;
    }
</style>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <img id="left" src="http://templatetester.webs.com/images/left.png" alt="" />
                <div id="middle">
                    <img src="http://templatetester.webs.com/images/bar.png" alt="" />
                </div>
                <img id="right" src="http://templatetester.webs.com/images/right.png" alt="" />
            </div>
        </div>
    </body>
</html>

[cssfreakie]

in addition to the above, I made a blog post with some explanation, since i am pretty sure there are more people that could use the above. You can also see a live example there.