Web Analytics Made Easy -
StatCounter div embed images problem - CodingForum

Announcement

Collapse
No announcement yet.

div embed images problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    PHP Code:
    $aString is_string((string)array()) ? true false// true :D 
    [/CENTER]

  • #2
    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
    Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

    Comment


    • #3
      Hi there Zangeel,

      if your heart is really set on using a background-image rather than the img element, try it like this...
      Code:
      [color=navy]
      <!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.codingforum.net/images/smilies/biggrin.gif);
          background-repeat:no-repeat;
       }
          
      </style>
      
      </head>
      <body>
      
      <div id="icon">Text Text</div>
      
      </body>
      </html>
      [/color]
      coothead
      ~ the original bald headed old fart ~

      Comment


      • #4
        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.
        Stop solving problems you don’t yet have!

        Comment

        Working...
        X