...

View Full Version : background bar



rafiki
07-11-2008, 12:20 PM
http://www.jamiewest.org.uk/css/codingforums/new/
below the white text in the left floating div would like the image http://www.jamiewest.org.uk/css/codingforums/new/lef_bar.gif
to show but its not i tried a <span> but don't want to resort to <img>
code for the span


<span class="barbg"></span>

css for span

.barbg{
width:200px;
left:25px;
background-image:url(lef_bar.gif);
}

FWDrew
07-11-2008, 01:27 PM
Hi Rafiki,


<div class="barbg">Hello Image!</div>

Looks like you will probably need to reslice the image some, but the above will make it show because in your CSS you specfied:

.barbg
Instead of:

span.barbg
So either add the code at the very top or change your css to the code at the bottom and the image should appear :)

Regards,

Drew

rafiki
07-11-2008, 01:49 PM
span.barbg


That is now the code I'm attempting to use, unfortunatly it's still not showing the image, the image is just ment to be a seperator bar.
Like so..

content content content content|
____________________________|
content content content content|
content content content content|
content content content content|
____________________________| underscores are the bars.

coothead
07-11-2008, 02:04 PM
Hi there rafiki,

the span element is an inline element and as such has no dimensions.
This is the reason that the background image does not show.
Try it like this instead...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.barbg {
height:8px;
width:194px;
margin-left:25px;
background-image:url(http://www.jamiewest.org.uk/css/codingforums/new/lef_bar.gif);
background-repeat:repeat-x;
}
</style>

</head>
<body>

<div>
content content content content<br>
content content content content
</div>

<div class="barbg"></div>

<div>
content content content content<br>
content content content content<br>
content content content content
</div>

<div class="barbg"></div>

</body>
</html>





coothead

abduraooft
07-11-2008, 02:12 PM
And if you have to display more blocks of text, an unordered list would be more semantic and easy. You could set a background image for the list items, with optional no-repeat center bottom values.

rafiki
07-11-2008, 02:14 PM
That worked... Cheers results @ http://www.jamiewest.org.uk/css/codingforums/new/index.html

coothead
07-11-2008, 02:21 PM
No problem, you're very welcome. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum