Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Putting a border around different sized images

Bottom of Page

1 to 12 of 12

  1.  
  1.  permalink
    What is the best way to add a border to images within a column (div id)?
    I have vertical and horizontal images of different sizes.


    I put each image in a .box class with the following CSS:

    .box{
    border: 3px;
    boder-color:#990000;
    }

    but how can I get the box to scale according to the image size? Or am I just approaching this the wrong way?
    Seems like this should be easy, but I've tried a bunch of things...
  2.  permalink
    You need to define the border-style also. Here's everything in one go:

    .box{
    border: 3px solid #990000;
    }

    There's also a typo at "boder-color", but fixing that without the border-style wouldn't have made any difference.
  3.  permalink
    Thank you, that worked! I feel like I am always posting typo's here. sorry...

    Now the problem is the box is taking on the column's width. Is there a way to set the box to conform to the dimensions of the photos? Should I just choose my photo sizes and then make a special class for each size?
  4.  permalink
    Do you mean that the boxes should be the same size regardless of the image? In that case it might be easier to put them inside an unordered list, for example, and add the borders and dimensions to the LI-items.
  5.  permalink
    Well, I would like the border to conform to the size of the image- rather than the size of the box.

    I could not figure out how to get a border around an image, so I put each image in a box. I'm not sure I really need to use the box. The image and it's box will both fit into the column, but my goal is to just put a border around each image.
  6.  permalink
    Like this?

    <img src="" alt="" class="box" />
  7.  permalink
    Thank you, that is exactly what I needed!
    • CommentAuthorwozzabikes
    • CommentTimeJul 16th 2008
     permalink
    why not just add a definition rule to the .img tag, piece of cake, why write a new style when you can edit a tag.
    • CommentAuthorpixelalb
    • CommentTimeJul 18th 2008
     permalink
    Or you could just add a float:left rule for the image block ;)
    • CommentAuthorsoft_brick
    • CommentTimeJul 19th 2008
     permalink
    Wozzabikes,
    Could you give me an example of of a definition rule? I tried adding a border properties to the image tag, but was unable to get any color except black.
    • CommentAuthorocchipij
    • CommentTimeJul 22nd 2008
     permalink
    hmmm...you know, if you want all the images to have a border around them, and they are inside a particular tag just target them, it will save you the class markup in your code. It works peachy too, with multiple images

    div img {
    border: solid #fff 1em;
    }
    • CommentAuthorsoft_brick
    • CommentTimeJul 25th 2008
     permalink
    Thanks!

1 to 12 of 12

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page