how to arrange container with three pictures

K

Knut Krueger

Dear all,
is it possible to build an container with three pictures and arrange
them as following:
small screen
[[pic 1][pic 2][pic 3]]

medium sreen
[[pic 1][ pic 2 ][pic 3]]

wide sreen
[[pic 1][ pic 2 ][pic 3]]

means pic 2 is f.e 2000 pixel wide and should be centered and clipped at
the border of pic 1 and pic 3
or not centered and clipped at the border of pic 3 if it is more easy.

first I would be glad if anybody understands what I would like to get ;-)

Regards Knut
 
N

Neredbojias

Dear all,
is it possible to build an container with three pictures and arrange
them as following:
small screen
[[pic 1][pic 2][pic 3]]

medium sreen
[[pic 1][ pic 2 ][pic 3]]

wide sreen
[[pic 1][ pic 2 ][pic 3]]

means pic 2 is f.e 2000 pixel wide and should be centered and clipped
at the border of pic 1 and pic 3
or not centered and clipped at the border of pic 3 if it is more
easy.

first I would be glad if anybody understands what I would like to get

Multiple ways to do that, depending on what else is in the page. An
easy basic example is to div pic 2 then overlay that div with an
absolutely-positioned, 100%-widthed div floating pics 1 and 3 left and
right respectively.
 
D

dorayme

Knut Krueger said:
Dear all,
is it possible to build an container with three pictures and arrange
them as following:
small screen
[[pic 1][pic 2][pic 3]]

medium sreen
[[pic 1][ pic 2 ][pic 3]]

wide sreen
[[pic 1][ pic 2 ][pic 3]]

means pic 2 is f.e 2000 pixel wide and should be centered and clipped at
the border of pic 1 and pic 3
or not centered and clipped at the border of pic 3 if it is more easy.

first I would be glad if anybody understands what I would like to get ;-)

Regards Knut

Quick and easy, but no clipping, if you are only concerned with
horizontal spacing might be:

<http://dorayme.890m.com/alt/threePics.html>

With clipping, I charge more. Like the barber that people go to to have
nothing done, preferring instead to get some conversation, actual hair
services costing an extra tariff.
 
N

Neredbojias

;-)
I found a solution

pic 1 float: left;
pic 3 float: right;
pic 2 background image

anything to say against this solution?

Ach, no. Excellent solution! I should've thought of that instead of
the overlying-div thing.
 
D

dorayme

Knut Krueger said:
;-)
I found a solution

pic 1 float: left;
pic 3 float: right;
pic 2 background image

anything to say against this solution?

Yes, that might be OK depending on what suits your material and aims.
Like:

<http://dorayme.netweaver.com.au/disappearingRabbitTrick.html>

This in case you find it puzzling to actually make. I am not sure what
you know? Some people might be puzzled by that the container would have
no height with only two floats inside. So you need to force the issue of
height. There are several ways to do this. Giving an actual height,
supplying a clearing element inside the container, using overflow as is
done above.
 
G

Gus Richter

dorayme said:
Knut Krueger said:
Dear all,
is it possible to build an container with three pictures and arrange
them as following:
small screen
[[pic 1][pic 2][pic 3]]

medium sreen
[[pic 1][ pic 2 ][pic 3]]

wide sreen
[[pic 1][ pic 2 ][pic 3]]

means pic 2 is f.e 2000 pixel wide and should be centered and clipped at
the border of pic 1 and pic 3
or not centered and clipped at the border of pic 3 if it is more easy.

first I would be glad if anybody understands what I would like to get ;-)

Regards Knut

Quick and easy, but no clipping, if you are only concerned with
horizontal spacing might be:

<http://dorayme.890m.com/alt/threePics.html>


In the markup, the order should be:
<pic1 floated left> <pic3 floated right> <pic2>
as per:

<div>
<img style="float: left;" src="pics/crimson.png" alt=""><img
style="float: right;" src="pics/crimson.png" alt=""><img
src="pics/crimson.png" alt="">
</div>

Rendered then as:
<pic1> <pic2> <pic3>
 
D

dorayme



In the markup, the order should be:
<pic1 floated left> <pic3 floated right> <pic2>
as per:

<div>
<img style="float: left;" src="pics/crimson.png" alt=""><img
style="float: right;" src="pics/crimson.png" alt=""><img
src="pics/crimson.png" alt="">
</div>
[/QUOTE]

Quite right. I thought I had corrected this on the server almost
immediately but apparently not, only on my offline copy. Thanks for this
Gus. It is needed for FF.
 
D

Duende

On 17 Jun 2009 Neredbojias wrote in alt.html
Okay, smarty-pants, it's "then" not "than". Put that in your hookla and
smoke it.

All ready smoked it is why I got it wrong.
 
G

Gus Richter

dorayme said:
In the markup, the order should be:
<pic1 floated left> <pic3 floated right> <pic2>
as per:

<div>
<img style="float: left;" src="pics/crimson.png" alt=""><img
style="float: right;" src="pics/crimson.png" alt=""><img
src="pics/crimson.png" alt="">
</div>

Quite right. I thought I had corrected this on the server almost
immediately but apparently not, only on my offline copy. Thanks for this
Gus. It is needed for FF.[/QUOTE]


*Aside*
Makes you wonder if anyone's paying attention, doesn't it?
 
D

dorayme

Gus Richter said:
dorayme wrote: ....


*Aside*
Makes you wonder if anyone's paying attention, doesn't it?

I am convinced that almost no one does. But that does not affect me. You
see, I have someone who pays me per URL posted. I got him drunk one
night and made him sign a document in front of a Justice of the Peace,
guaranteeing me a certain fee for each one, the JP also getting a small
percent of my fee. A cosy little arrangement. Sometimes, when I have
more money than I know what to do with, I turn to amusing myself by not
posting a URL when I should to tease JK a bit... I like to see if he is
still around, this sort of thing flushes him out into the open where I
can see him. I don't like him hiding in the dark shadows, it worries me.
<g>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top