...

View Full Version : div embed images problem



Zangeel
04-10-2009, 10:29 AM
Hello, im embedding icons using divs like



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


then i use


<div class="Icon"></div>

to embed it instead of using <img> the problem is now, if i write something like


<div class="Icon"></div> Text Text

it shoes up as if theres a linebreak so it will be like

:D
Text Text

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

:D Text Text

abduraooft
04-10-2009, 11:24 AM
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

coothead
04-10-2009, 11:34 AM
Hi there Zangeel,

if your heart is really set on using a background-image rather than the img element, try it like this...


<!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

VIPStephan
04-10-2009, 01:56 PM
Hello, im embedding icons using divs like



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


then i use


<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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum