Why elements break layout?

HTML & CSS
23

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.

24

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:

  1. Multiple “pages” of content. For each page, you have:
    1. A header which has a title, a page number and a menu
    2. A page title
    3. The page content itself, which has two columns
    4. 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
25

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 :slight_smile:

1 Like
26

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)

27

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

28

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 :slight_smile:

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. :slight_smile:

29

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,

30

I’m not sure I understand. Are you talking about the “Maintaining…” content? Because if I put that content into the SAME structure I had the first set of content, the page looks to display correctly.

I’ve updated my codepen with that second bit of content. What differently were you expecting?

1 Like
31

I figured out what the problem is, thank you all for your help.

1 Like
33

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.