Loading ...
Sorry, an error occurred while loading the content.

fixed-width layout with 100% background - is it possible?

Expand Messages
  • mateuszmucha
    hi. I want to create a rather common layout and don t know how to do it within yui css layout lib. I want a content to be fixed-width (for example #doc4 - 974
    Message 1 of 2 , Dec 3, 2007
    View Source
    • 0 Attachment
      hi.

      I want to create a rather common layout and don't know how to do it
      within yui css layout lib.
      I want a content to be fixed-width (for example #doc4 - 974 px), but
      header and footer would have 100% _backgrounds_ (content still fixed
      at 974). There's no content in that area outside of central 974px,
      just some pretty background.
      example (not-yui, not mine) -
      http://www.freecsstemplates.org/preview/asterisk
      or this wonderful ascii art (fixed-width font!):
      ____________
      ...header...
      ____________
      |......|
      |......|
      |.body.|
      |......|
      |.974..|
      |......|
      |......|
      ____________
      ...footer...
      ____________

      It'd would be simple in a non-yui environment - I'd just create a 100%
      wide div (for the header's background), then centered 974px div inside
      it for the content. Then 974px for body and again 974 inside 100% for
      footer.
      But with yui, to get that 974 area, I need to use <div id="doc4"> and
      I can't create two elements with the same id... .

      So the question is: is it possible?
    • Jim Davis
      Yes, it is possible. In the CSS place you background image as part of the body rules. For example: body { background: #FFFFFF url (myimage.gif) repeat-x;
      Message 2 of 2 , Dec 3, 2007
      View Source
      • 0 Attachment
        Yes, it is possible. In the CSS place you background image as part of the body rules. For example:

        body { background: #FFFFFF url (myimage.gif) repeat-x; .....}

        If your image is 50px high, for example, the image will be repeated across the top 50px of the width of the viewport and the area not covered by the image will display in white.

        For the footer, place the footer div as the last div just before the </body> tag and  after the  </div> that closes doc4. Make the width 100%. Example:

        #ft { width: 100%;
        height: 30px;
        margin: 10px 0;
        background: url(myFooterImage.gif) repeat-x;
        }

        The html would be something like:
        ....
        </div><!-- end doc4 -->
        <div id="ft"><p>Copyright Notice goes here</p></div>
        </body>
        </html>

        Jim

        On 12/3/07, mateuszmucha <muszek@...> wrote:

        hi.

        I want to create a rather common layout and don't know how to do it
        within yui css layout lib.
        I want a content to be fixed-width (for example #doc4 - 974 px), but
        header and footer would have 100% _backgrounds_ (content still fixed
        at 974). There's no content in that area outside of central 974px,
        just some pretty background.
        example (not-yui, not mine) -
        http://www.freecsstemplates.org/preview/asterisk
        or this wonderful ascii art (fixed-width font!):
        ____________
        ...header...
        ____________
        |......|
        |......|
        |.body.|
        |......|
        |.974..|
        |......|
        |......|
        ____________
        ...footer...
        ____________

        It'd would be simple in a non-yui environment - I'd just create a 100%
        wide div (for the header's background), then centered 974px div inside
        it for the content. Then 974px for body and again 974 inside 100% for
        footer.
        But with yui, to get that 974 area, I need to use <div id="doc4"> and
        I can't create two elements with the same id... .

        So the question is: is it possible?


      Your message has been successfully submitted and would be delivered to recipients shortly.