Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder Zangeel's Avatar
    Join Date
    Oct 2007
    Location
    public_html/
    Posts
    638
    Thanks
    17
    Thanked 79 Times in 79 Posts

    div embed images problem

    Hello, im embedding icons using divs like

    Code:
    .Icon {
    height:16px;
    width:16px;
    background-image:url(url.jpg);
    }
    then i use

    Code:
    <div class="Icon"></div>
    to embed it instead of using <img> the problem is now, if i write something like

    Code:
    <div class="Icon"></div> Text Text
    it shoes up as if theres a linebreak so it will be like


    Text Text

    (assuming the emo is my icon)
    using strict doctype.. anyone know how to fix it so itll show like

    Text Text

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    div is a block level element by default, so it pushes all other sibling elements/text nodes to the next line. Try adding float:left; to your .Icon
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there Zangeel,

    if your heart is really set on using a background-image rather than the img element, try it like this...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #icon {
        padding-left:26px;
        background-image:url(http://www.codingforums.com/images/smilies/biggrin.gif);
        background-repeat:no-repeat;
     }
        
    </style>
    
    </head>
    <body>
    
    <div id="icon">Text Text</div>
    
    </body>
    </html>
    
    coothead

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Quote Originally Posted by Zangeel View Post
    Hello, im embedding icons using divs like

    Code:
    .Icon {
    height:16px;
    width:16px;
    background-image:url(url.jpg);
    }
    then i use

    Code:
    <div class="Icon"></div>
    to embed it instead of using <img> […]
    Why would you even consider doing this? This isn’t semantic (meaningful) at all. You can put images as background images (if they aren’t crucial for the meaning of the content) but then it would still be absolutely wrong to use a meaningless empty HTML element just to include that image.

    Always think about this:

    1) Does the image have a relation to the content/information on your site? Is it crucial to understand the information on the page? Then there is no other correct way than using an HTML image.

    2) Is the image of purely cosmetic purpose to make the document look more appealing? Would the page still work and be understandable if the image wasn’t there? Then the only correct way is to use a background image applied through CSS.

    Remember: Switch off your styles (in Firefox: “View > page style > no style”), put yourself in an average visitor’s place, and look if you still grasp what the page is about. If you do then you’ve potentially done the right things. If not then obviously it’s wrong the way you’ve done it.


  •  

    Posting Permissions

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