8 Replies Latest reply on Jan 9, 2006 2:33 PM by Alex Gor

    position:absolute not supported in CSS?

    Alex Gor Newbie

      Having problems getting absolute positioning to work in a Layout...

      From Index.jsp:


      <div id="leftnavbox">
      <p:region regionName='left' regionID='leftnavbox'/>
      </div>


      From CSS:

      #leftnavbox {
      position:absolute;
      left:0;
      top:94px;
      width:165px;
      height:312px;
      background-color:#ffffff;
      }


      Configuration seems OK - Theme deploys, CSS is found and linked up with the Layout. Background tag from CSS works. However, position:absolute from CSS does not. Please help.

        • 1. Re: position:absolute not supported in CSS?
          paul tamaro Newbie

          Which theme are you working with? What are you trying to achieve?

          • 2. Re: position:absolute not supported in CSS?
            Alex Gor Newbie

            This is for a pilot app that's just kicking off. Our web designers made a bunch of HTML for it, now I am trying to make a portal out of it. I told them to create separate fragments of HTML (for use by portlets), which they did. They also made a main HTML file that puts it all together.

            For positioning they used DIV tags that link to CSS for position:absolute info. I created a Theme with that CSS, and replaced stuff between DIV tags with <p:region tag (posted). I then used the Management portlet to make HelloWorld portal use the theme/layout. It picks up and displays the background from CSS, but positioning does not work.

            Most examples use tables for positioning, is this the preferred method?

            • 3. Re: position:absolute not supported in CSS?
              Woodler Expert

              just to understand what you're doing here....

              1) are you replacing the default theme , or just adding to it ?
              2) the positioning shown above is for the region, which can contain several portlets. Perhaps this is not aligned yet. There is the renderSet in the middle that generates the markup for the region and around each portlet window inside the region. The default renderSet (divRenderer) generates mostly div's with one or two tables for the portlet decoration (modes , states) , but you can replace that with your own (featureing absolute positioning if need be at that level) [see the doc for details on the renderSet]

              3) are you trying to use tables to structure the main blocks of the page ? There is no need for that. We switched to a div based approach for that. The 'layout' of the building blocks of the page is controlled by the theme css In a nutshell think Zen for applications

              • 4. Re: position:absolute not supported in CSS?
                Alex Gor Newbie

                 

                "mholzner" wrote:
                just to understand what you're doing here....

                1) are you replacing the default theme , or just adding to it ?
                2) the positioning shown above is for the region, which can contain several portlets. Perhaps this is not aligned yet. There is the renderSet in the middle that generates the markup for the region and around each portlet window inside the region. The default renderSet (divRenderer) generates mostly div's with one or two tables for the portlet decoration (modes , states) , but you can replace that with your own (featureing absolute positioning if need be at that level) [see the doc for details on the renderSet]

                3) are you trying to use tables to structure the main blocks of the page ? There is no need for that. We switched to a div based approach for that. The 'layout' of the building blocks of the page is controlled by the theme css In a nutshell think Zen for applications



                It appears there was a problem with linking my Layout to the Theme. It was either not picking up the CSS or somehow doing it wrong. I thought it was OK because the background worked (which definitely came from my CSS), but apperently it did not pick it up. I added the "p:theme themeName=" tag and absolute positioning for DIVs got picked up. Thanks for your help.

                I am not having a problem with images. Images that were defined in the CSS are picked up because their relation to the CSS stayed the same. However, images located in relation to my index.jsp did not get picked up. I guess this means images have to be defined through CSS if Layout/Theme are to be deployed via a separate WAR file. Is this correct?

                1) New theme via a separate WAR file. Eventually we will want to replace the default theme with our theme
                2) Looks like I'm somewhat set here. The CSS got picked up and the divRenderer more-or-less did what it was supposed to do. Sounds like I should be able to do it without having to write a renderSet.

                3) I want to use whatever approach is recommended. Sounds like a DIV-based approach is the way to go, correct? The CSS contains information about look/feel, images, etc. Layout is a "skeleton" for DIVs, basically specifying where CSS should decorate and where Portlets should provide HTML. Layout is a skeleton, and almost everything outside of Portlets is dictated by the CSS. Is this a somewhat accurate way of putting it?

                • 5. Re: position:absolute not supported in CSS?
                  Alex Gor Newbie

                  Second paragraph should be "I am NOW having a problem with images." Sorry - no edit.

                  • 6. Re: position:absolute not supported in CSS?
                    paul tamaro Newbie

                    ...yes, alexeyg your wording sounds right on target in terms of describing how things work. We have seperated look and feel from real code, where the goal was to enable the two to work independantly. Mark, Martin and I designed the new UI mechanism based on what "CSS Zen Garden" did with simple web pages, but our goal was to do it in a web app. It's a little tricky, but seems like we did the right thing so far...

                    • 7. Re: position:absolute not supported in CSS?
                      Woodler Expert

                       

                      "alexeyg" wrote:


                      I am now having a problem with images. Images that were defined in the CSS are picked up because their relation to the CSS stayed the same. However, images located in relation to my index.jsp did not get picked up. I guess this means images have to be defined through CSS if Layout/Theme are to be deployed via a separate WAR file. Is this correct?


                      Yes, if the layout wants to point to images directly, then those images need to exist in the same context (WAR), and the jsp needs to provide the corrent relative (or absolute) path. We recommend to keep images separated from the layout, and add them to the theme (CSS). This gives you a whole lot more flexibility.

                      "alexeyg" wrote:

                      1) New theme via a separate WAR file. Eventually we will want to replace the default theme with our theme
                      2) Looks like I'm somewhat set here. The CSS got picked up and the divRenderer more-or-less did what it was supposed to do. Sounds like I should be able to do it without having to write a renderSet.


                      If you have any feedback on this mechanism, please let me know! Anything that was unclear, confusing, didn't work as expected, etc.

                      "alexeyg" wrote:

                      3) I want to use whatever approach is recommended. Sounds like a DIV-based approach is the way to go, correct? The CSS contains information about look/feel, images, etc. Layout is a "skeleton" for DIVs, basically specifying where CSS should decorate and where Portlets should provide HTML. Layout is a skeleton, and almost everything outside of Portlets is dictated by the CSS. Is this a somewhat accurate way of putting it?


                      Correct! We recommend DIV tags in the markup and CSS as the theme. The layout really serves more as a content provider and region filter, the rest is done via the theme CSS

                      BTW this approach also aligns with the WSRP specification. There, in order for portlets to be easily consumable across portals, css selectors were defined to allow to separate the content from the look&feel, so each portal can decide how the remotely rendered content should look like.


                      • 8. Re: position:absolute not supported in CSS?
                        Alex Gor Newbie

                        This is great! Thank you very much for all the help. I have had problems grasping ideas reading the Reference Manual... It makes more and more sense as I understand things better, but it was rather confusing on first several reads. I'll be happy to share my experiences figuring it out. Still have ways to go, but definitely moving in the right direction. Thanks again!