«

Hi folks,

I'm trying to display data in a div, with a rounded corner image in
each corner. The layout I'm trying to achieve is:

[ Name F ] [ Tel ] [Logo N]
[Description N ] [ logo ]
[Description N ] [ logo ]
[Email | Web | More info N][logo]

F = flexible height - the name may be long enough to force 2 rows
N = no change - static height

I have run into a number of problems:
1) Images won't overflow in IE meaning that a relative description
begins at the bottom of the logo not underneath the name
2) You cannot position more than 1 image as a background image in a
div
3) My latest attempts use an absolutely positioned box containing the
description and email however if the Name (which varies in height) is
too big, it will go behind the description rather than forcing it
down.

Apologies if thats not clear - so heres the code in nice colours.

Thanks

A

HTML
<div class="enhdiv">

<span class="b1">b1</span>
<span class="b2">logo</span>
<span class="b3">b3</span>

<span class="b4">b4g<br>b4b
<span class="b5">b5</span>
</span>
<span class="b6">b6</span>

</div>

CSS
..enhdiv{
position:relative;
float:left;
clear:both;
margin-top:5px;
margin-bottom:5px;
height:auto;
width:496px;
font-family:arial,helvetica,sans-serif;
background-colorurple;
}

..b1{
display:block;
float:left;
width:70%;
background-color:blue;
height:auto;
}

..b2{ /* logo */
display:block;
float:left;
width:auto;
height:70px;
}

..b3{
width:10%;
float:right;
display:block;
background-color:yellow;
}

..b4{
position:absolute;
display:block;
clear:both;
bottom:0px;
left:0px;
background-color:green;
width:70%;
height:55px;
}

..b5{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:auto;
background-color:lightblue;
}

..b6{
width:10%;
right:0px;
background-color:yellow;
position:absolute;
bottom:0px;
}

On Tue, 24 Apr 2007 09:42:30 GMT UKuser scribed:

> Hi folks,
>
> I'm trying to display data in a div, with a rounded corner image in
> each corner. The layout I'm trying to achieve is:
>
> [ Name F ] [ Tel ] [Logo N]
> [Description N ] [ logo ]
> [Description N ] [ logo ]
> [Email | Web | More info N][logo]
>
> F = flexible height - the name may be long enough to force 2 rows
> N = no change - static height
>
> I have run into a number of problems:
> 1) Images won't overflow in IE meaning that a relative description
> begins at the bottom of the logo not underneath the name
> 2) You cannot position more than 1 image as a background image in a
> div
> 3) My latest attempts use an absolutely positioned box containing the
> description and email however if the Name (which varies in height) is
> too big, it will go behind the description rather than forcing it
> down.
>
> Apologies if thats not clear - so heres the code in nice colours.

Forget the code, provide a url.

I really couldn't understand all your complaints but I'd bet what you want
is quite possible.

--
Neredbojias
He who laughs last sounds like an idiot.