1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Containing an inline image element with another inline element.

Discussion in 'CSS' started by soulscratch, Oct 4, 2007.

  1. #1
    Example page:

    http://205.209.146.77/wtf2/

    Problem:
    What I'm trying to do is have the anchors contain the image elements on the left side, and be horizontally centered. The image elements will have a border, and the anchor elements will also have a border. Each image will be a different dimension.

    P.S. : I cannot alter the markup AT ALL.

    Setting these properties and corresponding values will make the anchor contain the image:

    position:absolute;
    display:block;
    float:left/right;

    1. display:block -- won't work, because it will take up the width of package-item, and I need my border to wrap around the image

    2. position:absolute; and position:relative; on the container seemed like it would work, but apparently not, since the image's dimensions are dynamic and even if I have something like left:50% or 25% then it still would not appear centered. In addition, I would have to do something with the image caption that follows... it would be a b!tch trying to set it up since the image height is dynamic.

    3. float:left/float:right; -- these will also make the anchor contain the image, but they would be shifted to the left or right and I have problems horizontally centering this.

    EDIT: Here is the desired look:

    http://205.209.146.77/wtf2/desired-look.jpg
     
    soulscratch, Oct 4, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    get rid of the border on the anchor, and set the image to:

    background:#000; padding:1px; border:2px solid red;

    That should do it - fake the image border by using background.
     
    deathshadow, Oct 4, 2007 IP
  3. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    "1. display:block -- won't work, because it will take up the width of package-item, and I need my border to wrap around the image"

    Set your surrounding anchor tag to block display and give it a border. When you set it to block display, by default it will take up the width of the page, so specify a specific width that is a tiny bit bigger than your picture. 2 pixels wider if the picture border is 1px. 4 pixels wider if it is 2. Because you are accounting for the border on both sides of your picture. You will also probably need to specify the height as well in the same manner. Then, set a border for your picture as well. Am i missing something here?
     
    Arnold9000, Oct 4, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    The picture's dimensions will vary (be dynamic).

    Actually, deathshadow has found a solution that works in IE6/IE7/Opera/Safari but not.................. Firefox. (And it isn't in his first post, because I failed to mention that the image has to have some type of padding so the border's cant touch each other, there will be some whitespace between.)
     
    soulscratch, Oct 4, 2007 IP
  5. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    make the wrapping anchor an inline element (remove block display spec), give it a border, Either give the anchor padding or give the inner image margins to create the space between the pics border and the anchor's border. Then, obviously give the image a border. Should work. (famous last words) ((chuckle chuckle)). Let me know

    http://www.tizag.com/cssT/pclass.php
     
    Arnold9000, Oct 4, 2007 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #6
    The wrapping anchor IS inline in my example. I commented out all the properties that make it contain the image. By default, it doesn't contain the image.

    P.S. What's the link for?
     
    soulscratch, Oct 4, 2007 IP
  7. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #7
    The link shows you that you can have a border for an inline anchor. All you need to do is to replace the text in the example page with your pic that has a border and a margin to push out the size of the anchor area. Why wouldn't that work? Both text and images are both inline elements that will push it's outer element (the anchor) outward as needed based on the size of the inner element and it's margins. This would solve your dynamic problem.
     
    Arnold9000, Oct 4, 2007 IP
  8. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #8
    Wrong.

    It wouldn't contain the image. Do you think I have not tried the SIMPLEST method? That is the FIRST thing I DID.

    <a href="#"><img src="foo.jpg"></a>

    put the border on both elements. put some padding on image.

    http://205.209.146.77/wrong.jpg

    On top of that, it has to be horizontally centered.
     
    soulscratch, Oct 4, 2007 IP
  9. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #9
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style>

    #border{
    border: 3px solid #000;
    }

    .linkcolor{
    color: #ccc;
    }

    .pic{
    border: 3px solid #CCC;
    display: block;
    }

    </style>
    </head>
    <body>

    <table id="border" cellspacing="0" cellpadding="5">
    <tr>
    <td>
    <a href="link.html" class="linkcolor"><img class="pic" src="http://bestuff.com/images/images_of_stuff/210x600/mutley-27112.jpg"/></a></td>
    </tr>
    </table>
    </body>
    </html>
     
    Arnold9000, Oct 4, 2007 IP
  10. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #10
    You already know why you shouldn't be using tables for layout so I won't point that out. I'm not using tables so this wouldn't do.
    Are you just using a table to demonstrate this below?
    http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

    Plus, it has to be horizontally centered if the image is a dynamic width and height, and the container must not be a block level element, because it would take up the width that the parent element allows, and it would take up more width than the image and you'd have a lot of whitespace. If my images were all the same dimensions, it would work out fine.. but they aren't. I need the container of the image to be "shrinkwrapped" and horizontally centered still.
     
    soulscratch, Oct 4, 2007 IP
  11. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #11
    did you try it with a different image?
     
    Arnold9000, Oct 4, 2007 IP
  12. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #12
    Yes. I've tried it with multiple images of different dimensions. I don't see how it would make a difference.
     
    soulscratch, Oct 4, 2007 IP
  13. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I worked for me. Here what I just did

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style>

    #border{
    border: 3px solid #000;
    }

    .linkcolor{
    color: #ccc;
    }

    .pic{
    border: 3px solid #CCC;
    display: block;
    }

    </style>
    </head>
    <body>

    <table id="border" cellspacing="0" cellpadding="5">
    <tr>
    <td>
    <a href="link.html" class="linkcolor"><img class="pic" src="http://www.mltcreative.com/images/figures-unusual/punchy.jpg"/></a></td>
    </tr>
    </table>
    </body>
    </html>
     
    Arnold9000, Oct 4, 2007 IP
  14. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #14
    Well, the thing is..

    -I can't change the markup (can't convert it into a table and I wouldn't want to)
    -When you either start adding new table rows and table cells for multiple images it won't appear centered.
    -Multiple table elements on top of each other with margin:0 auto; would look bloated if I *COULD* edit the source.

    You've just given me an idea though, to try to get it with display:table and table-cell.
     
    soulscratch, Oct 4, 2007 IP
  15. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #15

    you dont have to do the whole thing in tables. Just stick the table with pic into your existing divs. I'm not saying to do a table based layout. You can insert a table into your divs with no problem at all and it will still be a css layout with this tiny exception. A table is just an element like other css elements. Yes, i know tables are supposed to be for tabular data, but what works is what works, and it looks like they didn't make the standards to do what you need (to my knowledge so far). Tables are supposed to be avoided except in cases of tabular data but people don't have to be nazis about it. If you find another solution, then obviously you should use it, but if you don't, this will work perfectly and nobody's going to fire you because you used a small sprinkle of tables nested in your css design. As far as it not appearing centered, I don't know what you nean. If you can make a css element be centered, then you can make a table be centered, and, of course, you can easliy center the content within the table by styling the column.
     
    Arnold9000, Oct 4, 2007 IP
  16. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #16
    Well in this case... the packages are being spat out via backend and I have no access to the backend code. I can only work with what's there already and modify the CSS.

    Thanks for the help though.
     
    soulscratch, Oct 4, 2007 IP
  17. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #17
    the table would be the wrapper for what is being spit out

    <table>
    <tr>
    <td><%php echo or asp result %></td>
    </tr>
    <table>

    Back end data shouldn't have anything to do with the wrapper it is being fed into. But, if you find a better, 100% xhtml solution, let me know. Thanks.
     
    Arnold9000, Oct 4, 2007 IP
  18. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #18
    It isn't simple like that. I don't have access to the class that's responsible for spitting this markup out (for certain reasons), I only have access to the CSS. If I did have access I would've already added another inline element or perhaps your table already.
     
    soulscratch, Oct 4, 2007 IP
  19. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #19
    OMG OMG OMG, I got it !!!!

    The float restricts the width of a block level div. Here it is dude.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style>

    #tripleborder{
    margin:0px auto;
    padding:10px;
    background:gold;
    border:2px solid black;
    height: 100%;
    float: left;
    }

    #pic{
    border:1px solid red;
    }

    #anchor{
    color: white;
    }

    </style>
    </head>

    <html>
    <body>
    <div id="tripleborder">
    <a id="anchor" href="frib.html"><img id="pic" src="http://www.cartonionline.com/tv/boomerang/miniature/Secretsquirrel.jpg"/></a>
    </div>
    </body>
    <html>

    Tah dah !!!
     
    Arnold9000, Oct 4, 2007 IP
  20. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #20
    As I said, the markup must stay as it is on that page. It cannot be any different. I have already tried what you just did and specifically wrote in the stylesheet and on my post what I tried. Unless I'm missing something, you won't be able to horizontally center that.
     
    soulscratch, Oct 4, 2007 IP