Trying to create a CSS box that is always is always the width of an image placed inside it (and no w

Discussion in 'HTML' started by Deryck, Jun 19, 2004.

  1. Deryck

    Deryck Guest

    Hi,

    I'm trying to create a box in CSS that will contain a single image and a
    copyright acknowledgement. The copyright acknowledgement will always be
    wider than the image and I want the copyright to start a new line(s) when it
    reaches the width of the image (to avoid wasted space above the copyright).

    This is what I wrote:

    ..mapbox{
    position: relative;
    float: left;
    padding-right: 10px;
    padding-bottom: 10px;
    border: 0px;
    width: 625px;
    font-size: 0.8em;
    }

    It does exactly what I want for the first image (which is 625 pixels wide).
    The second image is just 500 pixels wide so I get a gap of 125 pixels if I
    use .mapbox again.

    Since I (currently) only have 2 images I just created .mapbox2 with width
    set to 500px. That works too but it doesnt really seem the way to go.

    Is it possible to have the box set to the width of the image and no more and
    have no wasted white space?

    If you want URLs rather than the above, see

    http://www.longhope.co.uk/getting_here.php
    and
    http://www.longhope.co.uk/getting_here2.php

    Comments and advice on the colours of the headings and links would also be
    appreciated.

    The code validates.

    Thanks

    Deryck
     
    Deryck, Jun 19, 2004
    #1
    1. Advertising

  2. Deryck

    Neal Guest

    On Sat, 19 Jun 2004 21:29:01 +0100, Deryck <>
    wrote:

    > Hi,
    >
    > I'm trying to create a box in CSS that will contain a single image and a
    > copyright acknowledgement. The copyright acknowledgement will always be
    > wider than the image and I want the copyright to start a new line(s)
    > when it
    > reaches the width of the image (to avoid wasted space above the
    > copyright).
    >
    > This is what I wrote:
    > (snip)
    >
    > It does exactly what I want for the first image (which is 625 pixels
    > wide).
    > The second image is just 500 pixels wide so I get a gap of 125 pixels if
    > I
    > use .mapbox again.
    >
    > Since I (currently) only have 2 images I just created .mapbox2 with width
    > set to 500px. That works too but it doesnt really seem the way to go.


    It is. By default all boxes are as wide as possible. You need to specify
    the precise width, as you did.

    Perhaps more elegant is to set up the styles other than the width in
    ..mapbox, and the width in .img1, .img2, etc. Then the HTML:

    <div class="mapbox img1">

    should apply both classes to the element.
     
    Neal, Jun 19, 2004
    #2
    1. Advertising

  3. Deryck

    Mitja Guest

    Deryck <>
    (news:) wrote:
    > Hi,
    >
    > I'm trying to create a box in CSS that will contain a single image
    > and a copyright acknowledgement. The copyright acknowledgement will
    > always be wider than the image and I want the copyright to start a
    > new line(s) when it reaches the width of the image (to avoid wasted
    > space above the copyright).
    >
    > This is what I wrote:
    >
    > .mapbox{
    > position: relative;
    > float: left;
    > padding-right: 10px;
    > padding-bottom: 10px;
    > border: 0px;
    > width: 625px;
    > font-size: 0.8em;
    > }
    >
    > It does exactly what I want for the first image (which is 625 pixels
    > wide). The second image is just 500 pixels wide so I get a gap of 125
    > pixels if I use .mapbox again.
    >
    > Since I (currently) only have 2 images I just created .mapbox2 with
    > width set to 500px. That works too but it doesnt really seem the way
    > to go.
    >
    > Is it possible to have the box set to the width of the image and no
    > more and have no wasted white space?


    The first thing that reminded me of was table based layout. If you have a
    cell with width:100px and the content doesn't fit (e.g. it's a 200px wide
    picture), the cell will automatically stretch.
    You can also achieve this with the div of yours by applying display:table to
    it. It works for me in Opera 7.5, but Ie still support it, so I'm afraid
    it's useless to you.

    What with that, you're best off sticking to what Neal suggested. If you keep
    the <div>, of course. But if you put the principles aside for a moment and
    replace the <div> with the good ol' one-cell <table>... :)

    > If you want URLs rather than the above, see
    >
    > http://www.longhope.co.uk/getting_here.php
    > and
    > http://www.longhope.co.uk/getting_here2.php
    >
    > Comments and advice on the colours of the headings and links would
    > also be appreciated.
    >
    > The code validates.
    >
    > Thanks
    >
    > Deryck
     
    Mitja, Jun 19, 2004
    #3
  4. Deryck

    Mitja Guest

    Oh yes... One more thing

    Deryck <>
    (news:) wrote:
    > Hi,
    >
    >....
    > http://www.longhope.co.uk/getting_here.php
    > and
    > http://www.longhope.co.uk/getting_here2.php
    >
    > Comments and advice on the colours of the headings and links would
    > also be appreciated.


    I don't like the grey background of a:hover. I'd change it for something
    lighter or, better yet, dump it altogether and make it a:hover{color:#bbb}.
    Another info - some people (not me) insist on links having to be underlined.

    Another thingie: change
    <a href="...">foo |</a> <a href="...">bar</a>
    to
    <a href="...">foo</a> | <a href="...">bar</a>
    in the main menu.
     
    Mitja, Jun 19, 2004
    #4
  5. Re: Trying to create a CSS box that is always is always the widthof an image placed inside it (and no wider)

    Deryck wrote:

    > Hi,
    >
    > I'm trying to create a box in CSS that will contain a single image and a
    > copyright acknowledgement. The copyright acknowledgement will always be
    > wider than the image and I want the copyright to start a new line(s) when it
    > reaches the width of the image (to avoid wasted space above the copyright).
    >

    perhaps you could check on the site
    http://www.dynamicdrive.com/dynamicindex17/index.html
    you can find scripts that do exactly what you want and dynalically adjust

    derek
     
    derek giroulle, Jun 22, 2004
    #5
    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. Denise Smith
    Replies:
    2
    Views:
    656
    Denise Smith
    Nov 22, 2003
  2. AndrewF
    Replies:
    1
    Views:
    787
    Bruce Barker
    Oct 10, 2005
  3. Sean Jorden
    Replies:
    1
    Views:
    601
    laurie
    Aug 19, 2003
  4. Gnarlodious
    Replies:
    4
    Views:
    17,616
    elizas
    May 5, 2010
  5. Vijay

    tool tip for dropdown box, placed in data grid control

    Vijay, Aug 31, 2006, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    152
    Ken Cox [Microsoft MVP]
    Sep 4, 2006
Loading...

Share This Page