dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: Grey border around image with writing inside ?

  1. #1
    Join Date
    Aug 2013
    Posts
    4

    Grey border around image with writing inside ?

    Hi I need some HTML for a grey border around an image, AND I need to be able to write inside the box as well, take this as an example> http://www.furniturevillage.co.uk/Di...om/Chairs.aspx Please Help

  2. #2
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,114
    You are asking a basic CSS question.
    Here is how it's done.

    http://jsfiddle.net/zrAUR/

  3. #3
    Join Date
    Aug 2013
    Posts
    4
    I am currently using joomla and when I paste that code into the HTML Source Editor, it just displays the image with no grey borders and some text below, please help

  4. #4
    Join Date
    Aug 2013
    Posts
    4
    Could somebody please help ??

  5. #5
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,114
    You need to edit the CSS (Style Sheet). That's why.

    I do not know Joomla, so cannot tell you where to find it, but look for a file with the .css extension. Your solution will be in there. You must add either classes or ids to the style sheet and call them in the HTML.

    A good tool to have installed in your browser is "Firebug" - get it installed in your version of Firefox and get familiar with it. There are videos on Youtube that can guide you.

    My demo showed you how it works on a small scale, as you can see... the code works.

    Good luck.

  6. #6
    Join Date
    Aug 2013
    Posts
    4
    I have found the .css stylesheets, however there are many, but could you also help me by telling me what classes or IDs i need to add please ?

  7. #7
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,114
    Make your own class or id.
    Here is the CSS:
    HTML Code:
    div.picbox {
       border: 1px solid #999;
       height: 400px;
       width: 200px;
       padding:5px;
    }
    Then call it when you put in the image.
    HTML Code:
    <div class="picbox">
    <img src="yourimage.jpg" alt="Your Image" />
    This is my image.
    </div>
    You said that you wanted a text box with a thin grey line around it. This code will do that by creating a class.
    If you just wanted a thin grey line around all of your images alone, then you could do this in your stylesheet:
    HTML Code:
    img {
       border:1px solid #999;
    }
    Last edited by donatello; 08-27-2013 at 04:54 AM.

  8. #8
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,114
    Here is a good 'sandbox' to learn how to get your CSS to work:

    http://cssdeck.com/labs/qdbe7shx

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles