Orbeon Forms community mailing list

background-image problem

Classic

List

Threaded

4 messages Options

hcr

background-image problem

Hi,

I have a problem with using 'background-image' property in view file. For example:

<xhtml:html xmlns:xforms="http://www.w3.org/2002/xforms"
    xmlns:xhtml="http://www.w3.org/1999/xhtml"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
    xmlns:f="http://orbeon.org/oxf/xml/formatting">

    <xhtml:head>
        <xhtml:title>CSS Example</xhtml:title>
        <xhtml:style type="text/css">
            .image-css { background-image: url('_8.gif');}
        </xhtml:style>

        <xforms:model>
            <xforms:instance>
                <instance xmlns="">
                    <url/>
                </instance>
            </xforms:instance>
        </xforms:model>
    </xhtml:head>
    <xhtml:body>
        <xhtml:div id="image-css" >Binding with CSS</xhtml:div>
    </xhtml:body>

</xhtml:html>

The '_8.gif' and view.xhtml in same folder. Then the result is wrong! I find that it is right when 'background-image' using in css file and value of 'background-image' is relative value. But I want to use 'background-image' in view file.

How can I do it?

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

hcr

Re:Re: background-image problem

Thank you for Erik Bruchez.

First: It is mine mistake. I use class='image-css' in view, for example:

<xhtml:div class="image-css" >Binding with CSS</xhtml:div>

Second: view.xhtml and _8.gif is in that folder:

/apps/my-app/view.xhtml

/apps/my-app/_8.gif

In the view,

1. When the css code is like that:

.image-css { background-image: url('../my-app/_8.gif');}
It is right(url is relative).

2. When the css code is like that:

.image-css { background-image: url('/apps/my-app/_8.gif');}
It is wrong(url is absolute).

3. When the css code is like that:

.image-css { background-image: url('/ops/apps/my-app/_8.gif');}
It is right(url is absolute. The 'ops' is value of tomcat context).

I want to use absolutely url in css code. How can I do it?

在2007-05-09，"Erik Bruchez" <[hidden email]> 写道：

你好，

First, if you use id="...", you must use the proper CSS selector:

#image-css { ... }

Second, it depends in what folder your view.xhtml is and/or if you 
changed the default page flow, because the page flow by default maps:

   /my-app/view.xhtml

to:

   oxf:/apps/my-app/view.xhtml

So try also to write:

   url('../apps/my-app/_8.gif')

-Erik

hechengrong wrote:
> Hi,
>    I have a problem with using 'background-image' property in view file. 
> For example:
> <xhtml:html xmlns:xforms="http://www.w3.org/2002/xforms"
>     xmlns:xhtml="http://www.w3.org/1999/xhtml"
>     xmlns:ev="http://www.w3.org/2001/xml-events"
>     xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
>     xmlns:f="http://orbeon.org/oxf/xml/formatting">
>     <xhtml:head>
>         <xhtml:title>CSS Example</xhtml:title>
>         <xhtml:style type="text/css">
>             .image-css { background-image: url('_8.gif');}
>         </xhtml:style>
>   
>         <xforms:model>
>             <xforms:instance>
>                 <instance xmlns="">
>                     <url/>
>                 </instance>
>             </xforms:instance>
>         </xforms:model>
>     </xhtml:head>
>     <xhtml:body>
>         <xhtml:div id="image-css" >Binding with CSS</xhtml:div>
>     </xhtml:body>
> </xhtml:html>
>  
>     The '_8.gif' and view.xhtml in same folder. Then the result is 
> wrong! I find that it is right when 'background-image' using in css file 
> and value of 'background-image' is relative value. But I want to use 
> 'background-image' in view file.
>     How can I do it?

-- 
Orbeon Forms - Web Forms for the Enterprise Done the Right Way
http://www.orbeon.com/

免费试玩2006中国最佳网络游戏--梦幻西游

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

hcr

Re:Re: background-image problem

Thanks for Erik Bruchez.

在2007-05-10，"Erik Bruchez" <[hidden email]> 写道：

Orbeon Forms will not rewrite URLs in inline CSS, so I think you have to 
use solution #3 below.

-Erik

hechengrong wrote:
> Thank you for Erik Bruchez.
>     First: It is mine mistake. I use class='image-css' in view, for example:
> <xhtml:div class="image-css" >Binding with CSS</xhtml:div>
>     Second: view.xhtml and _8.gif is in that folder:
>           /apps/my-app/view.xhtml
>           /apps/my-app/_8.gif
> In the view,
>     1. When the css code is like that:
>     .image-css { background-image: url('../my-app/_8.gif');}
> It is right(url is relative).
>     2. When the css code is like that:
>     .image-css { background-image: url('/apps/my-app/_8.gif');}
> It is wrong(url is absolute).
>     3. When the css code is like that:
>     .image-css { background-image: url('/ops/apps/my-app/_8.gif');}
> It is right(url is absolute. The 'ops' is value of tomcat context).
>  
>     I want to use absolutely url in css code. How can I do it?
>    
>  
>  
>    
>  
>  
>  
> 
> 在2007-05-09，"Erik Bruchez" <[hidden email]> 写道：
> 
>     你好，
> 
>     First, if you use id="...", you must use the proper CSS selector:
> 
>     #image-css { ... }
> 
>     Second, it depends in what folder your view.xhtml is and/or if you 
>     changed the default page flow, because the page flow by default maps:
> 
>        /my-app/view.xhtml
> 
>     to:
> 
>        oxf:/apps/my-app/view.xhtml
> 
>     So try also to write:
> 
>        url('../apps/my-app/_8.gif')
> 
>     -Erik
> 
>     hechengrong wrote:
>     > Hi,
>     >    I have a problem with using 'background-image' property in view file. 
>     > For example:
>     > <xhtml:html xmlns:xforms="http://www.w3.org/2002/xforms"
>     >     xmlns:xhtml="http://www.w3.org/1999/xhtml"
>     >     xmlns:ev="http://www.w3.org/2001/xml-events"
>     >     xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
>     >     xmlns:f="http://orbeon.org/oxf/xml/formatting">
>     >     <xhtml:head>
>     >         <xhtml:title>CSS Example</xhtml:title>
>     >         <xhtml:style type="text/css">
>     >             .image-css { background-image: url('_8.gif');}
>     >         </xhtml:style>
>     >   
>     >         <xforms:model>
>     >             <xforms:instance>
>     >                 <instance xmlns="">
>     >                     <url/>
>     >                 </instance>
>     >             </xforms:instance>
>     >         </xforms:model>
>     >     </xhtml:head>
>     >     <xhtml:body>
>     >         <xhtml:div id="image-css" >Binding with CSS</xhtml:div>
>     >     </xhtml:body>
>     > </xhtml:html>
>     >  
>     >     The '_8.gif' and view.xhtml in same folder. Then the result is 
>     > wrong! I find that it is right when 'background-image' using in css file 
>     > and value of 'background-image' is relative value. But I want to use 
>     > 'background-image' in view file.
>     >     How can I do it?
> 
>     -- 
>     Orbeon Forms - Web Forms for the Enterprise Done the Right Way
>     http://www.orbeon.com/
> 
> 
> 
> 
> ------------------------------------------------------------------------
> 免费试玩2006中国最佳网络游戏--梦幻西游 
> <http://event.mail.163.com/chanel/xyq.htm?from=163>
> 


-- 
Orbeon Forms - Web Forms for the Enterprise Done the Right Way
http://www.orbeon.com/

hcr

Re:Re: background-image problem

In reply to this post by hcr

Thanks for Erik Bruchez !

在2007-05-10，"Erik Bruchez" <[hidden email]> 写道：

Orbeon Forms will not rewrite URLs in inline CSS, so I think you have to 
use solution #3 below.

-Erik

hechengrong wrote:
> Thank you for Erik Bruchez.
>     First: It is mine mistake. I use class='image-css' in view, for example:
> <xhtml:div class="image-css" >Binding with CSS</xhtml:div>
>     Second: view.xhtml and _8.gif is in that folder:
>           /apps/my-app/view.xhtml
>           /apps/my-app/_8.gif
> In the view,
>     1. When the css code is like that:
>     .image-css { background-image: url('../my-app/_8.gif');}
> It is right(url is relative).
>     2. When the css code is like that:
>     .image-css { background-image: url('/apps/my-app/_8.gif');}
> It is wrong(url is absolute).
>     3. When the css code is like that:
>     .image-css { background-image: url('/ops/apps/my-app/_8.gif');}
> It is right(url is absolute. The 'ops' is value of tomcat context).
>  
>     I want to use absolutely url in css code. How can I do it?
>    
>  
>  
>    
>  
>  
>  
> 
> 在2007-05-09，"Erik Bruchez" <[hidden email]> 写道：
> 
>     你好，
> 
>     First, if you use id="...", you must use the proper CSS selector:
> 
>     #image-css { ... }
> 
>     Second, it depends in what folder your view.xhtml is and/or if you 
>     changed the default page flow, because the page flow by default maps:
> 
>        /my-app/view.xhtml
> 
>     to:
> 
>        oxf:/apps/my-app/view.xhtml
> 
>     So try also to write:
> 
>        url('../apps/my-app/_8.gif')
> 
>     -Erik
> 
>     hechengrong wrote:
>     > Hi,
>     >    I have a problem with using 'background-image' property in view file. 
>     > For example:
>     > <xhtml:html xmlns:xforms="http://www.w3.org/2002/xforms"
>     >     xmlns:xhtml="http://www.w3.org/1999/xhtml"
>     >     xmlns:ev="http://www.w3.org/2001/xml-events"
>     >     xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
>     >     xmlns:f="http://orbeon.org/oxf/xml/formatting">
>     >     <xhtml:head>
>     >         <xhtml:title>CSS Example</xhtml:title>
>     >         <xhtml:style type="text/css">
>     >             .image-css { background-image: url('_8.gif');}
>     >         </xhtml:style>
>     >   
>     >         <xforms:model>
>     >             <xforms:instance>
>     >                 <instance xmlns="">
>     >                     <url/>
>     >                 </instance>
>     >             </xforms:instance>
>     >         </xforms:model>
>     >     </xhtml:head>
>     >     <xhtml:body>
>     >         <xhtml:div id="image-css" >Binding with CSS</xhtml:div>
>     >     </xhtml:body>
>     > </xhtml:html>
>     >  
>     >     The '_8.gif' and view.xhtml in same folder. Then the result is 
>     > wrong! I find that it is right when 'background-image' using in css file 
>     > and value of 'background-image' is relative value. But I want to use 
>     > 'background-image' in view file.
>     >     How can I do it?
> 
>     -- 
>     Orbeon Forms - Web Forms for the Enterprise Done the Right Way
>     http://www.orbeon.com/
> 
> 
> 
> 
> ------------------------------------------------------------------------
> 免费试玩2006中国最佳网络游戏--梦幻西游 
> <http://event.mail.163.com/chanel/xyq.htm?from=163>
> 


-- 
Orbeon Forms - Web Forms for the Enterprise Done the Right Way
http://www.orbeon.com/