Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Dec 2003
    Posts
    2
    Member #
    4357
    First, let me say hello to everyone on the forum as this is my first post.

    I am trying to make a image/caption display mechanism whereby the image sits a few pixels above the caption. Both are enclosed by a border and the caption has a colored background. An example of the HTML is:

    <div class="image" style="width: 367px">
    <img src="/images/win2kconnect/lanproperties.gif" alt="Image 2 - A picture of the Local Area Network properties dialog box on a Windows 2000 PC showing the TCP/IP properties highlighted">
    <p class="image-caption">Image 2 - The 'Internet Protocol (TCP/IP)' connection is highlighted.</p></div>

    The problem is that without the style="width: 367px" in the DIV tag, the box expands to 100% width whereas I would like it to automatically resize to the width of the image plus a 5px margin on each side. Any suggestions? Thanks.

    The CSS code:
    div.image{
    /* This div element encapsulates each image/caption pair */
    border: 1px solid black;
    text-align: center;
    margin: 5px;
    position: relative;
    left: 25px;

    }

    div.image img{
    /* This is the image in each image/caption pair */
    padding: 5px;
    }
    p.image-caption{
    /* This p sits inside of the div.image*/
    text-align: left;
    border-top: 1px black solid;
    background: #4180F6;
    font-size: .8em;
    padding: 2px;
    color: yellow;
    margin: 0;
    }

  2.  

  3. #2
    Junior Member eien-kisu's Avatar
    Join Date
    Jan 2004
    Location
    singapore
    Posts
    14
    Member #
    4396
    maybe put the image into a div?
    i nvr tried anything, jus a suggestion.

  4. #3
    Senior Member Riat_Sila's Avatar
    Join Date
    Oct 2003
    Location
    Berkshire, UK
    Posts
    417
    Member #
    3485
    width:auto;? That's just a guess btw.

  5. #4
    Junior Member
    Join Date
    Dec 2003
    Posts
    2
    Member #
    4357
    I believe that auto width has very spotty support among UAs. I'm looking for a more stable solution.

  6. #5
    Junior Member eien-kisu's Avatar
    Join Date
    Jan 2004
    Location
    singapore
    Posts
    14
    Member #
    4396
    what are UAs? :cross-eyed:

  7. #6
    Senior Member
    Join Date
    Aug 2003
    Posts
    444
    Member #
    2801
    UAs are user agents, which basically includes browsers.

    I think by definition, DIVs expand to 100%... Paragraphs don't IIRC, so instead of enclosing the whole thing in a div, try a p.

    You may run into a problem with the paragraphs separating too much -- margins wise... You then mess around with the CSS of those paragraphs.
    eKstreme
    eKstreme.com - Free website tools!
    fontfox - free fonts Hand-picked quality fonts.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:08 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com