Dear users,

I have not solved the following problems I get in my project:

1) more darker and less visible of the background image with the text but when I make this more transparent (0.5), the text and that should not happen only background.

2) the following title "training", "Careers", "skills" are not aligned correctly I have which is however in a flex container. That is the case of the laptop and desktop and tablet screen

3) bad positioning in screens larger than 1165 px. I see nothing more of the stars and the other content.
Does anyone have a solution for that I can improve but then tell me what you did step by step

Best regards Stephane
Stephane

I already told you where to go to find how to make the background faded and the text visible. This is the file:
https://eikweb.com/sharing/translucent/index.html , and you can download the source code.

How do you want those headings to be lined up? They seem ok to me, but if you want to have them positioned differently, then please, how?

My screen is 1920x1080, and I can see all your contents, also the stars. Well, I need to scroll down to them...

Best users,

Inger: I have add an new container but the result is very strange.

The new questions:
In attached the images that show the layouts in desktop and mobile screens because that are are the layouts that I want.
I have not yet succeeded here. In my first try what I use flex-containers and/or flex-grids.

Problem #01
My question is do I turn the heading "Education" into a flex container or put it directly into a CSS Grid because that is not clear to me.
I try the following: I make a flex container for the heading "Education".
Then I make a flexgrid of 1 columns in mobile view and then 2 columns in desktop view.
When I switch screens I get a layout display that is no longer readable.
My question is how can I design it so that I have the right display on all screens without having to make too many adjustments.
How can I design with flex containers only because you are dealing with a table?

I tought Flexgrid in mobile screen 1 columns and Flexgrid in desktop screen 2 columns.
For the header "Opleiding" an flex container for 1 column

Problem #02
The layout of "Skills" contains 4 columns in the desktop view and 2 columns in the mobile view.
My question is do I turn the header "Skills" into a flex container or put it directly in a CSS Grid because that is not clear to me.
I try the following: I make a flex container for the “Skills” heading.
Then I make a flexgrid of 2 columns in mobile view and then 4 columns in desktop view.
When I switch screens I get a layout display that is no longer readable.
My question is how can I design it so that I have the right display on all screens without having to make too many adjustments.

How can I design with flex containers only because you are dealing with a table?
I want to use the Site Designer v3.5 for applying the latest flexbox and flexgrid technology.

Problem #03

I make a flex container with the class name “star container”. I add 5 font icon elements and make sure that the stars in one row are horizontal.
The first container I describe the name of the skill eg: "css (3): and in the other container I want to place that container with the stars on the same line next to the name of the skill as in attachment. I would like to achieve something like that, but it goes completely wrong there. What is the solution here to align it as perfectly as it is shown in the attachments (image files in zip)

It is never intended that someone makes my projects if she wants to design them himself, but at least helps you on your way to tell you in steps how you come to a solution.

Here the new version where it goes completely in the wrong direction with the alignment of the star containers and what I have to use from the "Skills" and "Training" headings for a flex container or to process these headlines in my cssgrid as a container?

Kind regards
Stephane

I'll take a look at it later. Right now someone is drilling a hole in a beton wall or something in the flat above mine, and I can't concentrate on anything. I'll go for a walk instead...

But as to CSS grid someone else will have to chime in. I don't do that.

Inger,

It's good for me for learn in flexbox layout to

Check out this file. I have made a system that you can use for the skills, and probably also for the 'opleidingen'. You have to extend it yourslf by adding more 'cells' to it.

The colours are just there to show you what is what, so they are not needed for anything other than that. Also the paddings, borders and such are there for you to find your way through it. I split the 'inner' containers 50/50. If e.g. 60/40 suilts you better, then change that.

Is there someone help my how I can design it with CSS Grid?

Dear web designers, users here from cc

Is there no one here who knows anything about CSS Grid because I get stuck.
Can someone here help me on how to solve the problem like the example in the attachment because I want that

I am a beginner with cssgrid and want to mix that with flexbox together. Flexbox I always assume 1 column and for flexgrid from more than 2 columns and complex layouts

Kind regards
Stephane

Inger,

How can I make more rows and always add that star bar in the right-hand column because I can't do it.
Kind regards
Stephane

Thanks for the great example Inger

To extend the table you need to duplicate the .inner-left and .inner-right and make sure you place them in the correct sequence, one left, then one right, one left, then one right etc. Do that while they are still differently coloured, it is easy to spot any mistakes with the colours.