Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

New and need some help w/ XML CSS 1

Status
Not open for further replies.

kentonator

Technical User
Mar 13, 2006
1
US
Hey guys, Im working on a project and its a list of exercises in XML and then its formated to look nice with CSS is there anyway I can add an image of each lift after the description? I would really appreciate some help. Here is what I have so far,

/////////
XML
/////////
<?xml version="1.0"?>
<?xml-stylesheet href="rss.css" type="text/css"?>
<rss version="0.91" xmlns:xhtml=" <channel>
<title> Kents Lifts: </title>
<description>A list of exercises and the muscles that the exercise works</description>

<item>
<title>Bench Press</title>
<description>Main Muscle: Chest</description>
<item>Other muscles worked: Tricep,
<xhtml:script src="rss.js" type="text/javascript"/>
</channel>
</rss>



///////
CSS
///////
rss
{
display:block;
margin:10px;
}

channel
{
display:block;
height:300px;
width:280px;
border:1px solid #000;
overflow:auto;
background-color:#eee;
font: 12px verdana;
}

item
{
display: block;
padding:10px;
margin-bottom:10px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
background-color:#fff;
}
channel>title, channel>description
{
display: block;
margin-left:10px;
margin-top:10px;
background-color:#eee;
font-weight:bold;
}

channel>title
{
font-size:16px;
}

channel>description
{
font-size:10px;
margin-bottom:10px;
}

item>title
{
font-weight:bold;
}

item>link, channel>link, channel>language
{
display: none;
}

item>image1{
height: 35px;
background-image: url("bench.jpg");
background-repeat: no-repeat;
}
 
[1] Your excerpt/simplified xml seems not well-formed, the first item not closed; and second item is it the child of the first item? or it is an item of its own?!

[2] Looking from your css, you have already a provision for image, only that it is not quite correct.

If I take the second item not as child of the first, you can add a tag image1 after description. Now, the problem is that the rendering on moz and ie are different. To make uniform behaviour for both, I would add an id attribute to the image1 tag. Like this.
[tt]
<item>
<title>Bench Press</title>
<description>Main Muscle: Chest</description>
[blue]<image1 id="imgbox">some description</image1>[/blue]
</item>
[/tt]
Then in your css, add the selector #imgbox and also beefing up the item>image1. I used some other url for demo.
[tt]
item>image1{ /*for moz*/
/*background-image: url([highlight] [/highlight]bench.jpg[highlight] [/highlight]);*/ /*no quotes there*/
background-image:url( background-repeat: no-repeat;
display:block;
position:relative;
width:120px;
height:60px;
margin-top:10px;
margin-bottom:10px;
}

#imgbox { /*for ie*/
background-image:url( background-repeat:no-repeat;
display:block;
postion:relative;
width:120px;
height:60px;
margin-top:10px;
margin-bottom:10px;
}
[/tt]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top