Image border with CSS

This is probably something simple I'm missing. I want to
create a thin border using CSS that will go around images. But it
needs to be able to resize as needed to the particular image.
I can obviously create a border of a particular size, but is
there a way to create one that will resize around the image? "Auto"
for the size just gives me a box that stretches across the page.
-Jesse

img { border:1px solid black; }
This will create a thin, black border around all images
regardless of their
dimensions.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"JesseLY" <[email protected]> wrote in
message
news:fnl6sg$jki$[email protected]..
> This is probably something simple I'm missing. I want to
create a thin
> border
> using CSS that will go around images. But it needs to be
able to resize as
> needed to the particular image.
>
> I can obviously create a border of a particular size,
but is there a way
> to
> create one that will resize around the image? "Auto" for
the size just
> gives me
> a box that stretches across the page.
>
> -Jesse
>
>

Similar Messages

  • How to set image border with CSS Designer?

    I must be missing something obvious...
    I need to set an image border. I select the image. But I don't see any relevant inline style option in CSS Designer.
    It only lets me change <inline style> : td but there's no option for the image.
    What am I missing?
    Thanks,
    Leo

    Thanks John,
    Yes, obviously I select the image.
    However, it doesn't change anything.
    I don't get the "img" selector whatever choice I select it the Sources pane.
    What am I missing?

  • Can someone help me and explain how to affect hotspot/image map with css rules or any other way?

    i have problem with hotspot because its position cant be fixed to follow the proportion of the fixed background in different resoulutions.

    You can't affect hotspots at all with css. Here are a couple different options you have available though...
    You could try using multiple images that scale, linking each individual image, instead of hotspots.
    You could also look into "responsive image maps" to get quite a few examples of jquery/javascript run image maps that can be scaled.
    Depending on your image, (for example, if you are linking states on a map) you would be able to use SVG paths and link the paths with javascript.

  • Change portlet border with .css

    I want to change color and size of the portlet border with the help of .css.
    I have downloaded and use the dreamweaver Extension. .Css are link to portal site with UI template.
    I wondering which class that change the style for the border. So far have tried to use .PortletBodyColor and .PortletHeaderColor. Are there any one that have managed to change border style with .css?
    Regards,
    Jorunn

    I don't think you can just the outer border. If you look at the source code you see that the <td> tags also have the .portletbodycolor and header color classes, so while you technically can change the border, it will change the borders for all the cells and not just the outside of the table.

  • Image gallery with CSS menu

    I have a image gallery (slideshow) created with Flash and
    XML. My website uses a css/javasript dropdown menu for navigation.
    The dropdown menu is hiding behind the slideshow no matter what I
    set it's z-index to. Is there something in flash that lets me set
    its z-index? I could jsut drop the menu off of the page and give a
    return link but that is a workaround and I would much rather stay
    consistent with my site. Any help that could be given would be
    appreciated.
    Mark V.

    "mvanneman" <[email protected]> a écrit
    dans le message de news:
    f9ssu4$346$[email protected]..
    >I have a image gallery (slideshow) created with Flash and
    XML. My website
    >uses
    > a css/javasript dropdown menu for navigation. The
    dropdown menu is hiding
    > behind the slideshow no matter what I set it's z-index
    to. Is there
    > something
    > in flash that lets me set its z-index? I could jsut drop
    the menu off of
    > the
    > page and give a return link but that is a workaround and
    I would much
    > rather
    > stay consistent with my site. Any help that could be
    given would be
    > appreciated.
    try to embed your movie with wmode="transparent"
    lea

  • Align image left with css

    Hi, I have a simple question. I am using the following line
    in my css file to apply a background image to a canvas:
    Canvas {
    background-image:
    Embed("/images/Icons_Final/connected.png");
    What would I do to align that image to the left of the
    canvas. I can't seem to find any documentation on these specific
    types of properties within CSS. Also, if anyone could point me
    toward a nice concise list of all the properties available in
    FLEX's CSS, I would greatly appreciate it. Thanks!

    CSS is not a substitute for HTML, it is a styling
    companion… it stands for Cascading STYLE Sheets… It is
    a method to apply uniform styles to a page or all of your pages on
    your site. You still need to use the full functionality of HTML or
    graduate to PHP, SQL, or other methods of adding functionality to
    your site.
    As for animated image links… use animated .gif files
    and just apply a link to it. You will get all kinds of advice and
    opinions on whether animated .GIFs are appropriate, classy, ugly or
    tacky… but if animated links are what you want, they work.
    If you want animation in the sense of Flash buttons, buttons
    that blink, change colors, images, etc. when moused over or
    clicked, you can use CSS for this effect.
    Make 2 to 4 images with your graphics editor, sized to fit as
    background images behind text. Try 100x15 pixels to start. Then put
    this code in your CSS file for links:
    .left a:link {
    color: #FFF;
    .left a:visited {
    color:#CCC;
    .left a:hover {
    color: #FF6699;
    background-image: url(images/left-hover.jpg);
    .left a:active {
    color: #F00;
    background-image: url(images/left-hover.jpg);
    I used this to define a left side and right side set of
    links, but you could apply this to all your links or just a named
    set.
    This will produce links that can very closely approximate
    flash buttons but still maintain a text based link that can be read
    by the search engine browsers.
    Hope this is helpful…

  • Spry dataset problem. Image dimensions with css

    Hey guys.
    I'm new to spry, and not an experienced web designer with beginner knowledge in programming.
    I am using a spry data set to make a blog kind of interface. I'm using a master/detail layout from the Dreamweaver presets. I am using html, not xhtml and dreamweaver cs4.
    I want to change the dimensions of the images in the detail container. I would like to use the max-width command. I have tried using an id tag on the image detail column and using the width command on it with little luck.
    How can I do this. Using css is a must, because I'll be using InContext Editing so other users can upload images and posts. So they won't have to worry about the dimensions.
    Thanks alot.
    Helgi

    I forgot to mention one other problem
    The layout that I sketched up is the one I am going for. So a tip on how to get the text and the headings to flow around the image like shown in the picture would be greatly appreciated. Is it recommended to use tables inside div tags or spry for that matter?
    Thanks a million.

  • Image Rollovers with css

    I'm trying to have an image where as you roll over it the
    border colour changes. The problem is the code works in firefox and
    opera but not in Internet Explorer. In Internet Explorer the hover
    part doesn't work at all. Thanks in advance for any help.

    IE only does the :hover pseudo-class on links.
    Try making the images into links and adding the link to the
    selector -
    > #rightlink a img{
    > border: 1px solid red;
    > }
    > #rightlink a:hover img{
    > border: 1px solid blue;
    > }
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "spd998" <[email protected]> wrote in
    message
    news:fhuqo2$noj$[email protected]..
    > I'm trying to have an image where as you roll over it
    the border colour
    > changes. The problem is the code works in firefox and
    opera but not in
    > Internet
    > Explorer. In Internet Explorer the hover part doesn't
    work at all. Thanks
    > in
    > advance for any help.
    >
    > #rightlink img{
    > border: 1px solid red;
    > }
    > #rightlink:hover img{
    > border: 1px solid blue;
    > }
    >

  • Spry Photo Gallery Image Size via CSS

    Hello!
    I´ve been customizing the spry photo gallery for a couple of time, but got my little problem when viewing it on a mobile phone. When you load up the pictures with a size of 450 x 300 px for example, put up the right xml file with it´s width and height, so the gallery shows the pictures in that size. So what I want to do is that you can specify the image size with css depending on the device you´re watching the site with. There is div in the css called "mainImage" where the size is in %. When you change it to 75% for example. The pictures are correctly shown with 75% of it´s original size, but the outline (grey background) is still in 100%. When you make this grey background transparent it´s still there and moves the caption down. I guess there have to be done some changes within the SpryImageViewer.js, but I just know very little things about JavaScript. Do you have any clues how to change this to specify the image size via CSS?
    Thank you for your help!!!
    Kind regards,
    Joerg

    I see you are still using Spry 1.5. Have you considered upgrading to 
    Spry 1.6.1?
    Also your XML is broken, if you open up your xml in a normal standards 
    complaint browser such as firefox, you will see that it doesn't render
    a normal tree view as it would do with other xml files. So i suggest 
    checking those errors out.
    Its mainly because you  forgot to close your starting tag of the 
    gallerys node. (<gallery
    base = ""
    background = "#FFFFFF"
    banner = "#F0F0F0"
    text = "#000000"
    link = "#0000FF"
    alink = "#FF0000"
    vlink = "#800080"
    before your xml starts.

  • How I can change the theme using with css

    How I can change the flex theme and images  using with css ?

    Bonjour ixixix2006
    Perhaps you will find your bonheur here:
    http://nonlinear.openspark.com/tips/scripts/localisation/index.htm
    Cheers,
    James

  • Positioning images with css

    Hello everybody,
    thanx in advance for your help.
    Needless 2 say that my question would sound stupid to most of
    you, but if it sounded smart I would probably be the one to answer
    it and not to make it... It sounds logic, doesn't it?...I apologize
    for my reflection and I go straight to the point:
    PRESUPPOSAL:
    I created a pretty complex web-page design with Photoshop.
    It's not just about a logo in the 0% 0% position and some colored
    bar on the viewport border but a 800X600 image with lots of
    particulars.
    ISSUE:
    I'd like 2 put it on the html page with CSS.
    QUESTIONS:
    a)Shall I put the image as a whole?
    b)Or shall I sLice it as I'd do if I wanted to use a table to
    position it?
    If the a) is the correct option, won't the page be to heavy
    in terms of kbytes? (As far as I know a sliced image is overally
    lighter than an entire one)
    If the b) is the correct option, how can I position more than
    one picture with css in a html document? (I studied css from a
    short Molly Holzshlag's book and she only explains how to position
    1 single image)
    c)Is it ok to use CSS image-positioning to such an extreme
    extent? Should I prefer table-positioning considering my 800X600px
    goal? I mean, is there any technical problem I ignore? Is it a
    inapropriate use of CSS?
    Thank you so very much and enjoy the week!
    bye,
    Giuseppe, Rome

    Let's start by seeing your page, please.
    > I created a pretty complex web-page design with
    Photoshop. It's not just
    > about
    > a logo in the 0% 0% position and some colored bar on the
    viewport border
    > but a
    > 800X600 image with lots of particulars.
    I'm already worried. This sounds massively heavy....
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "giuseppe craparotta" <[email protected]>
    wrote in message
    news:[email protected]...
    > Hello everybody,
    > thanx in advance for your help.
    > Needless 2 say that my question would sound stupid to
    most of you, but if
    > it
    > sounded smart I would probably be the one to answer it
    and not to make
    > it... It
    > sounds logic, doesn't it?...I apologize for my
    reflection and I go
    > straight to
    > the point:
    >
    > PRESUPPOSAL:
    > I created a pretty complex web-page design with
    Photoshop. It's not just
    > about
    > a logo in the 0% 0% position and some colored bar on the
    viewport border
    > but a
    > 800X600 image with lots of particulars.
    > ISSUE:
    > I'd like 2 put it on the html page with CSS.
    > QUESTIONS:
    > a)Shall I put the image as a whole?
    > b)Or shall I sLice it as I'd do if I wanted to use a
    table to position it?
    > If the a) is the correct option, won't the page be to
    heavy in terms of
    > kbytes? (As far as I know a sliced image is overally
    lighter than an
    > entire one)
    > If the b) is the correct option, how can I position more
    than one picture
    > with
    > css in a html document? (I studied css from a short
    Molly Holzshlag's book
    > and
    > she only explains how to position 1 single image)
    > c)Is it ok to use CSS image-positioning to such an
    extreme extent? Should
    > I
    > prefer table-positioning considering my 800X600px goal?
    I mean, is there
    > any
    > technical problem I ignore? Is it a inapropriate use of
    CSS?
    >
    > Thank you so very much and enjoy the week!
    > bye,
    > Giuseppe, Rome
    >

  • Is there a way to create a CSS image gallery with caption?

    Hi everyone,
    Ive been using the disjoint rollover, but I only have one
    thing that I want to add to it—a caption right underneath an
    image.
    Besides using that Project Seven plug-in, is there a way to
    create an image gallery without using layers? Or is layers the only
    way to do it? All I want (words of doom, huh?) is a thumbnail to be
    able to switch and image and add a caption to it. Can anyone point
    me in the right direction? Or is that Project Seven plug-in deal my
    best bet? What about Set Text of Layer in DW.
    Oh yeah, Im still using DW with CSS sprinkled in..any help?
    Thanks in advance.
    -C

    > Besides using that Project Seven plug-in, is there a way
    to create an
    > image
    > gallery without using layers?
    Of course.
    > What about Set Text of Layer in DW.
    That would do it, and it's not necessary that the layer stay
    a layer after
    you have done it, either. I do this frequently - make a
    layer, apply the
    behavior, and then remove the position:absolute from the div,
    and place it
    where I want it.
    See the demo here -
    http://dreamweaverresources.com/tutorials/settextoflayer.htm
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "psypent81" <[email protected]> wrote in
    message
    news:eus555$lac$[email protected]..
    > Hi everyone,
    >
    > Ive been using the disjoint rollover, but I only have
    one thing that I
    > want to
    > add to it?a caption right underneath an image.
    > Besides using that Project Seven plug-in, is there a way
    to create an
    > image
    > gallery without using layers? Or is layers the only way
    to do it? All I
    > want
    > (words of doom, huh?) is a thumbnail to be able to
    switch and image and
    > add a
    > caption to it. Can anyone point me in the right
    direction? Or is that
    > Project
    > Seven plug-in deal my best bet? What about Set Text of
    Layer in DW.
    >
    > Oh yeah, Im still using DW with CSS sprinkled in..any
    help?
    >
    > Thanks in advance.
    >
    > -C
    >

  • Help with image border

    How do I turn image 1 with a white background into image two so that it just has a white border (I don't want the red background, just to edge out the white border.
    I appreciate any help provided!

    Something like this?
    1. Make a layer from the background (we need opacity)
    2. Delete the white: magic wand, contiguous off.
    3 Layer effect: stroke with white.
    I added a red layer underneath otherwise you can't see the white border but of course you need to delete or hide it.

  • Preloading images with CSS

    Hi there,
    How can we call a background image to a TD in a table. I have imported the images to HTMLDB instance and reffered to my class as follows:
    .toptab {background: url("#WORKSPACE_IMAGES#toptabl.gif") top left no-repeat;
    But it doesn't display the image, is it bcoz CSS doesn't compile this URL: <b>#WORKSPACE_IMAGES#toptabl.gif" </b>
    Can any tel me the workaround for this..?
    thx,
    r@vi.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

    See Use uploaded images in uploaded CSS and Re: 2.2 uploaded css files, images and substitution strings

  • IMAQ Low pass filter failed with invalid image border.

    Hi Expert,
    I try to use imaqLowPass function. I expect  the input image could be processed by low pass filter.
    But this is a run-time error showed "Invalid image border".
    Can somebody tell me what's going on?
    Solved!
    Go to Solution.

    Problem resolved. 
    I add a border to the image. 
    Needs to take care the border size and filter size.

Maybe you are looking for

  • Add number of working days

    I have to subtract a number of 'working days' of a date field in my message mapping. I wrote a user defined function. I used cal.add(Calendar.DATE, -3); on the instance cal of the class Calendar. It subtracts 3 days, but I have to subtract 3 'working

  • Trouble with MS Word after 10.4.3?

    After upgrading to 10.4.3, I find that MS Word won't work...it opens and immediately, upon chosing a style sheet, closes down....I can't open documents that I've saved in that format. None of the other programs in Office have this problem so it's app

  • XMLSequence EXTRACT HEAD and DETAIL in ORACLE 9.2

    Hi, sorry about my english i am from argentine. I have this XML: <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <arrayOfServicio >     <Servicio>         <Nombre>Autenticacion</Nombre>         <Descripcion>ws</Descripcion>         <Activo>tr

  • Reg vendor in PO

    Hi Iam creating a po using ME59 i.e automatic conversion of requistion to PO.Though iam not assigning any vendor to requistion ,i seea vendor number in my PO. I thought the vendor numberis based on material number. I checked in EINA AGAINST THAT MATE

  • Disabling the comments in the xl sheet when it is read from a JSP page

    Hi everyone, I am currently working on a jsp page which will load the data from the xcel sheet and update the information into the db.The code works fine unless the excel sheet doesnt have any comments mentioned in any of its colums.When we have comm