How to properly mark up a web page (Solved)?

A

Andrey Shirshov2018-02-12 23:12:07

css

Andrey Shirshov, 2018-02-12 23:12:07

I want to make the following markup for my personal site: the entire page is divided into 3 columns. To the left 3/16 of the window width is the tree structure of the site, to the right 3/16 of the window width is the table of contents. In the center, the remaining 10/16 of the window width is occupied by the content of the page. The left and right columns must be fixed height and occupy 100% of the window height. The column in the middle can be arbitrarily long in height, but at least 100% of the window height.
When scrolling long content, the left and right columns should not scroll. They must stay put. If the content in them is too long, the left and right columns will have their own scrolling.
Example of a similar site: https://squidfunk.github.io/mkdocs-material/
I'm not a coder, I only know basic things about HTML and CSS. I myself use Semantic UI https://semantic-ui.com
to create a site. I decided to use the grid element to create a site structure: https://semantic-ui.com/collections/grid.html
I write:

<body>
    <div id="page" class="ui grid">
        <div id="site-tree" class="three wide column"></div>
        <div id="page-content" class="ten wide column"></div>
        <div id="toc" class="three wide column"></div>
    </div>
</body>

The documentation says that the grid element is built on flex, but I can’t even find a normal answer to my question on the Internet. I looked through devtools to see how the example site was made, but there are no flexes ...
Thanks in advance!
----
Figured it out myself. It turns out that flex-childit cannot be position: fixed, because, fixedas it were, this block “pulls out” from the general flow of page elements. I should have added a new one divto flex-child, and made the nested one divfixed. However, as I later figured out myself, it is not needed
for my markup . flexI made a simple prototype for myself without flex, on which I checked and worked everything out:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                box-sizing: border-box;
            }
            html, body {
                margin: 0;
                padding: 0;
            }
            body > div {
                text-align: center;
            }
            #site-content {
                margin-left: 200px;
                margin-right: 200px;
                background-color: coral;
                height: 200vh;
                padding-left: 300px;
                padding-right: 300px;
            }
            #site-map {
                position: fixed;
                background-color: cadetblue;
                left: 0;
                top: 0;
                width: 200px;
                bottom: 0;
            }
            #toc {
                position: fixed;
                background-color: darkolivegreen;
                right: 0;
                top: 0;
                width: 200px;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div id="site-map">1</div>
        <div id="site-content">2</div>
        <div id="toc">3</div>
    </body>
</html>

Thanks to everyone who responded!

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

Z

Zombie42679, 2018-02-13
@Zombie42679

To be honest, I do not quite understand what the question is. Do you want to make a website without knowing the layout?
You can use bootstrap, change the documentation to 16-column mode and do as you wrote, the 4th bootstrap is also on flex.