Image positioning

Hello,

I’m trying to have the vertical bar images stitched vertically together at

http://www.europasprak.com/elearning/exercise/result/123/graph/

I want the green move up to touch the red and also the red move up to touch the grey.

I tried a height, a max-height… but could not find a way.

Any suggestion ?

Kind Regards,

All I see there is some kind of contact form. Confused. :-/

Hi Ralph,

Sorry… it sits behind a login page…

Let me fix that.

Kind Regards,

I was easier to just give you the relevant html markup.


<table>
		<tr>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=178' title='Alphabet Poussins - 0 rätta svar av 11 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=1' title='Alphabet Poussins - 0 rätta svar av 11 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='Alphabet Poussins - 0 rätta svar av 11 frågor' alt='' /></span></td>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=178' title='Vocabulaire de base &quot;Poussin&quot; - 0 rätta svar av 27 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=1' title='Vocabulaire de base &quot;Poussin&quot; - 0 rätta svar av 27 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='Vocabulaire de base &quot;Poussin&quot; - 0 rätta svar av 27 frågor' alt='' /></span></td>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=178' title='Chiffres (de 0 à 10) Poussins - 0 rätta svar av 27 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=1' title='Chiffres (de 0 à 10) Poussins - 0 rätta svar av 27 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='Chiffres (de 0 à 10) Poussins - 0 rätta svar av 27 frågor' alt='' /></span></td>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=178' title='C&#039;est combien s&#039;il vous plaît ? Poussin - 0 rätta svar av 18 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=1' title='C&#039;est combien s&#039;il vous plaît ? Poussin - 0 rätta svar av 18 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='C&#039;est combien s&#039;il vous plaît ? Poussin - 0 rätta svar av 18 frågor' alt='' /></span></td>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=178' title='Les pièces de la maison Poussins - 0 rätta svar av 63 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=1' title='Les pièces de la maison Poussins - 0 rätta svar av 63 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='Les pièces de la maison Poussins - 0 rätta svar av 63 frågor' alt='' /></span></td>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=172' title='Les prépositions &quot;devant, derrière...&quot;Poussins - 0 rätta svar av 27 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=7' title='Les prépositions &quot;devant, derrière...&quot;Poussins - 0 rätta svar av 27 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='Les prépositions &quot;devant, derrière...&quot;Poussins - 0 rätta svar av 27 frågor' alt='' /></span></td>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=178' title='Ponctuation Poussins - 0 rätta svar av 21 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=1' title='Ponctuation Poussins - 0 rätta svar av 21 frågor' alt='' /><br />
						<img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='Ponctuation Poussins - 0 rätta svar av 21 frågor' alt='' /></span></td>
		</tr>
</table>
</td>
</tr>
</table>



Kind Regards,

Here is how it looks:

My vertical bars are cut.

I would like them to be each in one piece.

Hi Stephane,
Please use code tags when you insert more than a couple of lines of code into a post.
It makes it much easier to read.

Example:
[noparse]

your code here

[/noparse]

Hi Pullo,

Sure, will do next time, thanks, This time I tried with the QUOTE tags but since my code was already formatted as displayed, it didn’t add much value. I shall use the HTML tag next time then. Thanks again.

Kind Regards,

Try adding some style. :slight_smile:


img {float: left;}
td {width: 10px;}

Okay, I shall try in a minute.

But before that, I must add that the display renders fine in another context, this time in the admin panel, using the exact same function.

I attached a screen capture of it.

I could not add the width to the td element. But it already is sitting in the span element around the three images.

I add the following style attribute to each image: style=‘vertical-align: bottom;float: left;’

It did its job on only one vertical bar, the second one. But the first one was left unfixed.

Also, this affected the previously working display in the admin panel, which now does not display fine, but exactly like the one above.

I attach the two screen captures again.

Kind Reggards,

Hi,

I’ still not sure what you want as you have the images in a different order to that shown in the drawing. You have gray, red then green but your drawing shows red and green at either end?

The gaps between the images will be the breaks in the html and you can’t set a width on a span as it is an inline element. If you remove the breaks and set the images and span to display:block the images will form a column with no gaps and you can set a width on the span (although it is redundant as you could have used the td instead - and of course the table is redundant anyway unless you are after some kind of vertical alignment).

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.test span { display:block }
.test img { display:block }
.test td { vertical=align:top
}
</style>
</head>

<body>
<table class="test">
		<tr>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=178' title='Alphabet Poussins - 0 rätta svar av 11 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=1' title='Alphabet Poussins - 0 rätta svar av 11 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='Alphabet Poussins - 0 rätta svar av 11 frågor' alt='' /></span></td>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=178' title='Vocabulaire de base &quot;Poussin&quot; - 0 rätta svar av 27 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=1' title='Vocabulaire de base &quot;Poussin&quot; - 0 rätta svar av 27 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='Vocabulaire de base &quot;Poussin&quot; - 0 rätta svar av 27 frågor' alt='' /></span></td>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=178' title='Chiffres (de 0 à 10) Poussins - 0 rätta svar av 27 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=1' title='Chiffres (de 0 à 10) Poussins - 0 rätta svar av 27 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='Chiffres (de 0 à 10) Poussins - 0 rätta svar av 27 frågor' alt='' /></span></td>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=178' title='C&#039;est combien s&#039;il vous plaît ? Poussin - 0 rätta svar av 18 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=1' title='C&#039;est combien s&#039;il vous plaît ? Poussin - 0 rätta svar av 18 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='C&#039;est combien s&#039;il vous plaît ? Poussin - 0 rätta svar av 18 frågor' alt='' /></span></td>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=178' title='Les pièces de la maison Poussins - 0 rätta svar av 63 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=1' title='Les pièces de la maison Poussins - 0 rätta svar av 63 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='Les pièces de la maison Poussins - 0 rätta svar av 63 frågor' alt='' /></span></td>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=172' title='Les prépositions &quot;devant, derrière...&quot;Poussins - 0 rätta svar av 27 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=7' title='Les prépositions &quot;devant, derrière...&quot;Poussins - 0 rätta svar av 27 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='Les prépositions &quot;devant, derrière...&quot;Poussins - 0 rätta svar av 27 frågor' alt='' /></span></td>
				<td><span style='width: 10px; '><img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23DADADA&width=10&height=178' title='Ponctuation Poussins - 0 rätta svar av 21 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%23CC0000&width=10&height=1' title='Ponctuation Poussins - 0 rätta svar av 21 frågor' alt='' /> <img src='http://www.europasprak.com/engine/system/utils/printBarImage.php?color=%2366CC66&width=10&height=1' title='Ponctuation Poussins - 0 rätta svar av 21 frågor' alt='' /></span></td>
		</tr>
</table>
</body>
</html>


Hi Paul,

The grey bar is on top, the comes the red bar below and finally the green bar below most.

I removed the <br> tags and added a style=‘display:block;’ in each image, only in the images and not in the span.

And it works now perfectly in both displays :slight_smile:

Paul, you rock !

Kind Regards,

Glad it helped :slight_smile: