Jump to content

W3-CSS framework and the correct box/container.


LeonLatex
Go to solution Solved by LeonLatex,

Recommended Posts

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 by LeonLatex
Link to comment
Share on other sites

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/

  • Great Answer 1
Link to comment
Share on other sites

  • Solution

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 by LeonLatex
? missing
Link to comment
Share on other sites

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>

 

 

  • Like 1
Link to comment
Share on other sites

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).

  • Like 1
Link to comment
Share on other sites

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 by LeonLatex
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.