Ok here’s a link from w3c. I hope it helps 
Yes, I know this, but it didn’t work out for me, I tried to work with the maximum width, everything breaks there right away, I still don’t understand how it all works)
I understand. I struggle with some of it myself at times. Especially when it gets to media queries. I’m still new to responsive web design.
I am also a beginner, but it always seemed to me that this should work easily, but why everything is so complicated, I don’t understand, elementary things are very complicated, where it is almost impossible to find answers,
I know the feeling. Some answers are straight forward and some not.
1 Like
I’m afraid that needs a complete revamp to become fluid and useful as you are using a variety of fixed width and height techniques that just will not work in a fluid way at all. I could fix it for you but I don’t think you will learn anything if I do that so I will give some pointers first so you can practice for yourself.
It’s not that complicated but it does need to be learned just like any language.
Anyone can remember a few foreign words but to have good grammar and good structure in another language takes some studying. CSS, html and JS are like learning 3 new languages and there are rules to be followed.
Your main problem with the html is that you have no real structure and although you may think it doesn’t matter if you use a break instead of a p element it really does matter as html is machine readable and defines the structure of the document. Indeed without css and js html on its own is fully fluid and responsive. It’s only when you add the CSS and impose restraints on it that things start to go awry.
This leads to the second main problem with your CSS code and that is you have made it too rigid with fixed heights and widths and multiple different margins. If you say something like margin-top:1420px (as you have done in your code) that is a magic number that will only ever be right once (perhaps). If the text wraps to another line or a user resizes the text through the browser control then that margin makes no sense.
First and foremost in a fluid layout you need to create fluid elements and avoid fixed widths and heights and maintain the flow of the document. To maintain the flow of the document you want one element to lead to the next element without having to position it exactly. This is what flex and grid can do so try to use layout techniques that require minimal alteration once you have defined them.
For example if you want your layout to be a maximum of 1100px wide then use max-width:1100px and use margin:auto to center it. In that way the layout can compress when the window is smaller. Don’t use width:1100px because that won;t fit on a 1000px screen or smaller.
If you want you page to be an initial viewport height then don’t use a fixed height. If you say height:100vh then that means that all your content must fit inside that viewport or it will spill out. So if the screen is only a few hundred pixels tall then your content can’t possible fit. Use a min-height instead and the content can expand as required.
Avoid magic numbers at all costs unless you can cater for them properly. For example if you have an element that has a margin-left and a margin right of say 150px then that means on a 320px mobile screen there is only 20px left for your layout! Use numbers that are more fluid (percentages perhaps) or indeed use layout methods that don’t require numbers at all. It’s not always possible but if you splatter your page with fixed unmovable numbers then you are going to need loads of media queries to change them at smaller sizes. That is bad design.
Be more logical with your structure and use class names that make more sense rather than para1, para2 etc.
Try to rationalise your styles. You have hundreds of margin tweaks that only make maintenance awkward. Be more consistent and try to find a way to style all of them more evenly without hundreds of classes. Don’t use breaks instead of paragraphs.
Don’t try to break paragraphs using breaks just so that a specific word starts on a new line. That isn’t maintainable in a fluid environment.
Use headings more logically and use structural elements to lay out the page.
I said I wouldn’t code the page for you but I’ve made a start just to give you some ideas and so you can see that it doesn’t need to be over complicated.
That’s just the first half of the page duplicated to show the structure and how it scales up and down. It is not meant to be a finished product but just something you can refer to for learning or practice with. I have not error corrected it and I still left some of your stuff in there as I was short of time. I’ve also had to guess at what you were trying to do.
2 Likes
I still don’t understand, everything starts to break down for me, as soon as I start fiddling with the maximum or minimum width, I also don’t understand how your line went beyond the container, it doesn’t work for me.
My line? I think you mean Paul’s in the example he gave you.
oh yes, I didn’t mean to write this to you.
1 Like
The problem is that you are trying to run before you can walk so you are falling over all the time
A block element is as wide as the browser window by default. It will go from edge to edge (assuming the body margins.padding have been removed). There is nothing you need to do at all if you want a line to go edge to edge except add the border to the element you want.
e.g. div {border-bottom:1px solid green;}
However if that div is a child of another element then that div will only be as wide as its parent allows. If you have added a width to the parent then the child is trapped inside that width. If you want the div to be full width then it must be a direct child of the body or the direct child of a full width parent. That ultimately means that the structure of the html is important because you can’t nest a div 10 deep and then suddenly want its border to go edge to edge. It takes planning and structure. It’s not difficult if you plan logically.
In my example the container is full width which allows direct children to stretch their borders edge to edge as in my header element. Inside my header I used an head-inner element to create the max-width layout as you don’t want a layout to stretch forever as that would be too hard to read on large screens. For the rest of the page I used an element called inner to achieve the same widths as the head-inner.
If anything needs to be full-width it has to come out of the inner and be a direct child of the container.
It’s not anything clever and is just like stacking boxes. You can’t put a bigger box inside a smaller box and css is just the same
is just like stacking boxes
I always think of it this way
I understand that you cannot stretch the line in the child more than the size of the parent, so I extended the line beyond the parent, but then when scaling the line breaks, it would be clearer if the line in the child were given values that go beyond the parent , it seems everything is so simple, but it doesn’t exist and I personally didn’t understand how to do it, working with your code doesn’t work for me like that, the queue goes in an unknown direction)))
This is the same thing, the same problem. The structure for that is wrong.
As explained, you should not have a child element larger than the parent. You must alter the HTML structure so the line has a parent big enough to contain it.
No, this would rely on “magic numbers” and fail. It can’t know how far beyond to extend. If its parent covers the whole width to extend, it can.
I would also like to know how to do it all, since it will not work right away. Personally, I have been doing this line for 3 days now and no results.
Sorry but I’ve got to ask - was this originally the paper copy that’s was written in something like Microsoft word and then exported or saved as HTML? Because the code really looks like what comes out of there, and trying to maintain that is a nightmare (personal experience).
Like Paul said, you should really take a step back and look at the bigger picture because you’re what we call “in the weeds” where you’re hyper focused on a small issue and ignoring all the other problems which little issues are a symptom of.
For example, in your page, you’ve got the following:
- Multiple “pages” of content. For each page, you have:
- A header which has a title, a page number and a menu
- A page title
- The page content itself, which has two columns
- A footer
I’ve taken the liberty of doing just page “21” of your content for you as an example of how it could be approached. I’m sure Paul would do some of this much more elegantly, but the basics are there.
Some tips for you:
- Do not use the
<br>element unless ABSOLUTELY necessary. It might look good at a certain resolution, but as soon as you scale the browser window, the results can vary badly. Use the full width of the container and let the browser decide how to break the text. - beware of “class-itis” because it can become a maintenance nightmare. If you’ve got multiple things using the same exact item, perhaps a class is not needed. An example is your font-color. You were setting it to grey on EVERYTHING, so it makes more sense to put it on the body, and only change it when you want something different.
- Watch your use of PX. It doesn’t always scale well, and takes some of the control away from the user, who may have their fonts sized much differently due to vision needs. If you set the fonts, that forces the user to zoom in or out, which can cause other usability issues with your site.
2 Likes
As others have said your knowledge is not at a level that you can actually start coding yet or indeed understand the things that we are telling you. You have to go back to basics and understand the basic box model and how it works. The fact that you spend 3 days trying to stretch a line that needs no stretching would be a clear indication that what you are doing is the wrong approach.
I gave a full example and you can clearly see it works. The task for you is to understand how it works. We can’t learn for you so rather than fighting against what we say take a step back and get the basics of html and css in place before you attempt a full layout.
No one said it was easy even though the basics are in essence simple. There has to be planning, logic and structure to your design and without these you are just fighting with magic numbers and impossible scenarios.
I suggest you take small steps first and simple examples like this.
Here is a centred div followed by a full width line. You can see that the line needs not to be contained in the div otherwise it would not stretch.
That’s the basics of what you are trying to do. It couldn’t be simpler than that
1 Like
For example, in the first block everything works fine for me, but in the next block it no longer stretches to the entire window, and I don’t understand why this happens if everything works in the first block. Then why doesn’t it work in the second one?This site I made myself from the photo)
Students are not to blame if they are taught in such a way that they do not understand anything, I studied for 2 years and the result is only 20%, because it became clear that there are no smart teachers now, so it’s easy to deal with a specific problem on such forums))
Yes I have sympathy. I’m afraid that people are still being taught old fashioned methods but html /css are always evolving and things you learned are probably not as relevant today.
Which is probably why you should listen to advice from the experts here on the forum as a lot of us have been doing this for 25 years plus and earning (or earned) a living from it. You will get best current advice without too much sugar coating
There is a lot to take in at first and if it was that easy then people would not have employed me to do it :). There is a vast difference between a hobbyist or someone who works day in and out doing this for a living.
The main thing is to grasp how things work before you say they don’t work. It is indeed a matter of learning, practice, trial and patience.
Don’t give up but don’t fight it.
Therefore, I came to the conclusion that it also makes no sense to post all the code on the forum, since it will not work out, only in small parts, only then everything will work effectively and be understood,