W3-CSS framework and the correct box/container.

[LeonLatex]

I am in the process of setting up a website that will have a similar design on most other pages. So the pages are built on templates. CSS script will be external. It is important that DIV/CSS is in accordance with standards so they will be scalable. I will try to explain how the basic design page should be built up from the fundamental DIV.

Main DIV: Is the foundation that should contain the DIV for the header + the four other DIVs in the width that are filled in automatically if needed from the DB. It will have a border and shadow and a padding of 15px. In the example here, I only explain the structure of the first box, as the others will be the same. The height of this must be increased if necessary when the content boxes become, for example, 3 or 4 rows. main DIV must follow scrolling up and down and all DIVs and elements positioned inside it must follow.

The second div is:
DIV for heading. It should be at the top of the main DIV with a size of approx. 30 px. height and full width inside main. The heading should be centered. Nothing extra here other than that this should be locked in the top position inside the main DIV

The first DIV inside the main DIV should be a container for the ones below and should only contain height and width that are adapted to the boxes described below.

Content box: There should be 4 of these in width as said. Each of these will consist of 2 DIV. One above and one below. Is it recommended to put these 2 inside a DIV container/wrap? The top one should contain an image without padding, and the one below should contain a text belonging to the article linked to in this box (the one below). The boxes must have a fixed height and width of 275pxX183px
The box below the image, the one containing the text, must only contain the text of the article up to a certain number of characters and letters, and then with a link to the entire article at the end. This should have a padding for the borders of the box and 2px. so that the text is narrower than the image.
Same with the box above. It must have an image with a fixed size of 275X180px - 185px. This should have padding 0px.

Since I'm going to use the framework for W3Schools, I'm a bit stuck. There are different boxes, and since I want it to be scalable and to be displayed on all devices such as computers, tablets and phones, I want this to be correct.
There are boxes, for example. some boxes called CARDS, PANELS and BARS + many more for sure and god knows what. WHO IS RIGHT FOR ME and where in my setup as explained above. I think I got everything. Hope this was explained well enough graphically.

Edited September 4, 2022 by LeonLatex

[gizmola]

Flexbox and/or grid should handle everything you want.  I would start with using flexbox for all of the layout pieces you have already described, so certainly you want a container div for those so that you can use display: flex.  At that point it's just a matter of applying the appropriate parent/container properties or child div properties you desire.  This article might help if you need a refresher:  https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[LeonLatex]

Great Gizmola. Just what I needed. But, what is the min with on the websites among other users here on PHP Freaks?
I have understood, read and heard from others that it's between 700px and 750px. More precise around 720. What do you guys think about that?

Edited September 5, 2022 by LeonLatex
? missing

[maxxd]

This is a good resource for screen resolution (among other things).

[LeonLatex]

Thank you both 😊

[gizmola]

In my opinion, you want to build a "responsive" site, where you have certain thresholds you use for mobile devices.  Rather than start with the idea that you have a max, allow the site to grow and shrink based on the device specific (viewport) attributes like vh and vw, as well as using the flexbox properties that allow for growth and shrinkage.

So for example let's say that you have a fixed height for a header, and below that you have a flexbox that should fill available vertical height and width.  You might have a style like this:

.app {
    font-size: 15px;
    color: #fff;
    height: 100vh;
    width: 100vw;
}

.header {
    background-image: linear-gradient(to right, #18a0BE, #622db9);
    height: 55px;
    display: flex;
}

.app__container {
    height: calc(100vh - 55px);
    display: flex;    
}

.main {
    background-color: #edf1f3;
    flex: 1;
}

And your markup might be something like:

<body class="app">
   <header class="header ">
   </header>
   <div class="app__container">
       <main class="main">
           <div class="cards">
               
           </div>
       </main>
   </div> 
</body>

 

 

[maxxd]

I agree completely with gizmola's point about fluid design - the link I gave comes in handy for reference and when hard stops are necessary.

[LeonLatex]

1 hour ago, gizmola said:

Rather than start with the idea that you have a max, allow the site to grow and shrink based on the device specific (viewport) attributes like vh and vw, as well as using the flexbox properties that allow for growth and shrinkage.

So for example let's say that you have a fixed height for a header, and below that you have a flexbox that should fill available vertical height and width. 

 

 

 

I think you hit a nerve there gizmola and you too maxxd. I feel it as soon as you say it that I'm stuck in terms of considering max and min scaling, viewport and having a fluid design (as maxxd calls it) that has no limitations in terms of scaling up or down. It's what you're talking about that I'm interested in, but which I can't express or describe. It has nothing to do with poor English or language limitations. This only has to do with too little knowledge. I live too much in the past and fail to see that it has evolved. This is like banging your head against the wall. I read, ask for advice, get answers and understand it then and there. I constantly see what I'm doing wrong, and what I should have done differently. Not mine; I see and understand how it should be, recognize and understand what will be done if I do/write like this. When I sit down again, I'm just as clueless. I have too much tunnel vision in many areas. I have to get out of that tunnel. It only leads in one track.

I thank you for the answers you give and will read through what is linked to. You keep trying to push me in the right direction. I absorb all the knowledge you give me, but.... 🤔😠I get irritated and frustrated with myself. Thank you for the knowledge you spread and give me. (Barand, Gizmola, Maxxd, Kicken, Requinix, Benamen, Ginerjm and everybody else).

[LeonLatex]

In first place I posted this wrong, but when I saw I had posted it in the wrong place it was too late to delete it. That's why it is to find in two places.

Got to fill in:
After I followed Barands advice it was getting better. He told me to use W3Schools W3 CSS. Things were getting better. I must rewrite the main box completely and stop using my own CSS as little as possible.
The only problem now is the article box inside the main box who keeps the article preview text and picture. The box scales to narrow and the photo doesn't scale at all. The photo keeps in the correct place but it doesn't scale down to fit the rest that is scaling down. And the main bow doesent expand on to large picture. Just on text when the text is to long. Hope I manage it till tomorrow after i have slept a little. 06:27 here now. Good morning and good night 😴

Edited September 6, 2022 by LeonLatex