Really annoying

Discussion in 'HTML' started by UKuser, Apr 24, 2007.

  1. UKuser

    UKuser Guest

    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-color:purple;
    }

    ..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;
    }
    UKuser, Apr 24, 2007
    #1
    1. Advertising

  2. UKuser

    Neredbojias Guest

    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.
    Neredbojias, Apr 24, 2007
    #2
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mr. SweatyFinger

    really annoying

    Mr. SweatyFinger, Dec 2, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    347
    =?Utf-8?B?Q2lhcmFuIE8nJycnRG9ubmVsbA==?=
    Dec 21, 2006
  2. Charles Fox
    Replies:
    56
    Views:
    1,189
    Ben Finney
    Sep 19, 2007
  3. Replies:
    2
    Views:
    341
    Martin Honnen
    Jan 29, 2008
  4. Simon Brooke
    Replies:
    6
    Views:
    1,328
    Michelle Steiner
    Sep 26, 2010
  5. TeknoCat

    really annoying error Please HELP!!!

    TeknoCat, Jan 21, 2004, in forum: Javascript
    Replies:
    5
    Views:
    94
    TeknoCat
    Jan 27, 2004
Loading...

Share This Page