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

Tagged: , ,

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    How to make a website layout? Posts
  • November 26, 2014 at 1:41 pm 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.

    November 26, 2014 at 2:02 pm 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/

    November 26, 2014 at 2:17 pm 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

    November 27, 2014 at 7:48 am 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/

    November 27, 2014 at 12:05 pm 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.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.