stickman
04-16-2006, 08:15 PM
The menu bar on my website is made out of several images (one for each link) but if you open the website and make the window small the images go onto more than one line. How can I keep them on online and have a scroll bar come up instead?
(I haven't uploaded my site yet. Its still in the making)
bejayel
04-16-2006, 08:33 PM
well since i cant see anything, this questions is ipossible to answer. I am gonna have to say use a table, or div block as my answer, but i cant really say for sure since there is nothing to look at.
stickman
04-17-2006, 12:34 PM
A table! How could I not think of that? Thanks.
i'll give you an example of my problem. If you have several images they look alright if you have the window maximized. If you make the window size narrower the last pciture will go on to a new line (like with text, it will make a tall narrow coloum until it has to put a scroll bar in). If you put lots of images in a row on just a blank page and then make a smaller window (so its not full screen) and make the window narrow you'll see what I mean. Thanks any way.
J to the izzosh
04-18-2006, 05:22 AM
Yeah, images are wont to do that, as they are inline elements just like text and behave just like text in terms of positioning. If the line they are on isn't wide enough to contain them, they will automatically break to the next line as necessary. One way to prevent this from happening is to make sure that the length of their line cannot change. You could do this by putting them inside a <div> element with an explicit width. For example, let's say that you had 5 images which were each 100 pixels wide, assuming that you had them positioned flush against one another with no padding or margins, you could do it this way:
<div style="width:500px; height:25px; padding:0;">
<img src="image1.url" alt="An image" style="width:100px; height:25px" />
<img src="image2.url" alt="An image" style="width:100px; height:25px" />
<img src="image3.url" alt="An image" style="width:100px; height:25px" />
<img src="image4.url" alt="An image" style="width:100px; height:25px" />
<img src="image5.url" alt="An image" style="width:100px; height:25px" />
</div>