jQuery UI Widgets Forums Layouts DockPanel How to make a website layout?

This topic contains 4 replies, has 2 voices, and was last updated by  claudioprv 4 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • How to make a website layout? #63389

    claudioprv
    Participant

    Hi,

    This is my first post.

    I want to know how to make a layout for fluid portal, occupying 100% of the browser screen.

    As shown below,

    Which component have to use? panel or dock or any other component.

    Thank you.
    Cláudio.

    How to make a website layout? #63392

    Nadezhda
    Participant

    Hello Cláudio,

    Please, provide us a link to your image.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    How to make a website layout? #63395

    claudioprv
    Participant

    Forgive me for this failure, I put a link and then tried editor but did not work

    Portal Layout

    How to make a website layout? #63432

    Nadezhda
    Participant

    Hi Cláudio,

    Please, find below an example which shows how to make a fluid layout with fixed header(Align Top) and footer(Align Bottom).

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
        <style type="text/css">
            html, body {
                height: 100%;
                width: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%' }, { size: '80%' }] });
            });
        </script>
    </head>
    <body>
        <div style="position: absolute; width: 100%; height: 200px; background: cyan;">
            Align Top
        </div>
        <div style="position: absolute; box-sizing:border-box; -moz-box-sizing:border-box; padding-top: 100px; padding-bottom: 50px; width: 100%; height: 100%;"> 
            <div id="mainSplitter">
                <div style="position: absolute; width: 300px; height: 100%;">
                    Align Left 
                </div>
                <div style="position: absolute; width: 100%; height: 100%;">
                    Content
                </div>
            </div>
        </div>
        <div style="position: absolute; bottom: 0; background: lightgreen; width: 100%; height: 50px;">
            Align Bottom
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    How to make a website layout? #63459

    claudioprv
    Participant

    Hi Nadezhda,

    Thank you very much for this support, this layout will help me to build a home page and learn how to use the jQuery Widgets.
    I’ll study more about jQuery Widgets api and examples from now on.

    Best Regards,
    Cláudio.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.