My layout not fitting in my webpage

HTML & CSS
1

Hi, Everyone, Today i am working on the fallowing requirements at my current webpage:

  • The body should have padding and margin
  • The header should have a background color, background image (using a local image), and padding
  • The navigation links (and only the links in the navigation) should be styled with a new display, margin, border-radius, text-decoration, and padding
  • The link to the current page should be styled differently from the other links (using class = "active’)
  • The sections should be next to each other, not one on top of the other.
  • The images should be part of the page now. In addition, they should have a border, be centered horizontally, and have vertical (top/bottom) space between them and the other images.
    I almost done most of the requirement above but my problem as you can see that my layout not fitting my webpage. would anyone help me with explanation please


Thank you

2

Actually, I had the same thing with my website. Even now my logo is does not fit the whole layot when you look at it through very wide screens.
In your case, I would definitely hire a good developer for 5$ on Fiverr, who could fix this issue in a matter of a few minutes.

3

Hi, i am self taught and this is part of my practice. But thank you for your passing any way.

4

The problem is in how you have structured the layout.
You have the aside, a block element which will default to full-screen width (auto), then you size the pictures within it.
But that does not make the aside any smaller than the default full width.
As a consequence, the following element that you want to the side has no space to the side. As another block element it will naturally sit below, also being a default full width. You then force the full width element up next to the other full width element with a negative margin.
So you now have two full width elements next to one another, overlapping a bit. Something has to give, two screen width blocks won’t fit on one screen side by side, even with an overlap.

The solution is to think more carefully about structuring the layout and looking ahead.
There are many methods to put content side by side, float, display table, grid, flex.
In this case I think display table may fit he bill.

2 Likes
5

Hi, salma_817.

I think all of us are self-taught so you are in friendly company. smile

May I ask a couple or three opening background questions of you?

(1) When did you take a beginning HTML/CSS course and who was the author?

(2) What developer’s tools are you familiar with? Which browser are you using to write your code?

(3) Do you have bookmarks stored in your browser with useful developer’s links, such as:

https://validator.w3.org/nu/
https://jigsaw.w3.org/css-validator/

https://tympanus.net/codrops/css_reference/
https://www.w3schools.com/tags/
https://www.w3schools.com/cssref/default.asp

(there are many more modern resources available)

Moving along to your question:

The short answer is the inappropriate negative margin applied to the section element:

section {
    margin: -65%;
}

I would like to recommend that you take a formal or structured HTML/CSS course that teaches the basics in a building block manner rather than haphazardly. You need to understand how to structure a page.

1 Like
6

Hi Salma

You have set margin to 1% and padding to 0;

You haven’t declared a background image for the header.

I don’t see a class active in your stylesheet

Not sure what sections you’re reffering to?

7

Hi ronpat, I started my html at the middle of October or after by couple days with coursera, (introduction to html) and now am still learning Css3 (introduction to css3) with coursera as well, still am learning the basic/foundation of css3

8

The HTML code wrote by the instructor of the Course as am not allowed to do any changes on it and you can check that in the details section

9

Hi there salma_817,

check out the attachment to see how
I would approach your problem(s)…

salma-817.zip (118.0 KB)

You will find that it fits all devices. :winky:

coothead

1 Like
10

Thank you a lot for your help, i really appreciate that. I would like to ask you too. Is there any possibility or another way for achieving the work you have done without touching or changing in the HTML code? or still i will have the same result i have achieved?

11

Hi there salma_817,

Why don’t you want to change the HTML?

Does it possesses certain magical properties?

I refuse to use the following HTM5 elements…

1. header
2. nav
3. section
4. main
5. aside
6. article
7. footer

I also refuse to use images that have sizes of
3,445.71 KB and 567.79 KB respectively.

coothead

12

Hi @coothead I understand what you saying, I can not change the HTML code, because the teacher of the curriculum asked us to apply the selectors that we have studied and without using any new selectors that we didn’t cover yet.
I understand also that if i do some change in the HTML Code that provide by the instructor the result will be better than what i have achieved

2 Likes
13

As we don’t know what selectors you have learned yet it becomes difficult for us to provide specific answers other than to say when you are doing something wrong :slight_smile:

Bearing in mind that this seems to be part of your coursework then it would be wrong of us to provide fully formed solutions anyway as you really need to get there on your own steam.

We can of course tell you where you are going wrong or what you should be doing but a big part of learning is working out things for yourself because that’s where most progress is made.:wink:

7 Likes
14

Hi Paul,
Thank you for your reply, Totally agree with what you said. I would like to ask if this community for people who are still studying or for the professional only?

15

It’s very definitely for everybody. (Hopefully we are all still learning one way or another, too. smile)

If you have a question about your coursework, then it’s best to be clear at the beginning firstly that it is coursework, and also if there are any specific requirements. (For example, that you must leave the HTML unchanged.) That way, you’re likely to get helpful responses tailored to your situation, rather than people offering you alternative methods which you are not allowed to use.

4 Likes
16

Hi there salma_817,

I cannot speak for other members, but I
am neither a professional nor a student. :wonky:

I am just an old retired postman congenitally
programmed to attempt problem solving. :winky:

My mother also told me that I came out of
the womb with a totally contrary attitude to
almost everything and everyone else. :eyebrows:

Because of this my thoughts about learning
techniques will not be in line with the “norm” :unhappy:

coothead

4 Likes
17

So that’s why the two “inappropriate” class names left and right are there?

You should practice using properties you just learned about, e.g. float, width, margin auto?

I tried use your pen to do that exercise yesterday but the pen never stopped loading, so I let it be. :slight_smile:

2 Likes
18

From my past experience, it’s a nice mix. We have a lot of people who are still students or attempting to learn still. And on the other side, we have the experienced professionals who answer those questions. And a lot of times, the professionals ask questions too! As @TechnoBear said, we have a nice mix :slight_smile: .

6 Likes
19

Hi @TechnoBear, Thank you for your reply :blush: and definitely i will be more clear next time when i post any question
Thank you again

3 Likes
20

You are great and you inspired me by what you said, Thank you a lot for your help yesterday, hopefully one day i will do the same to someone else and be an inspirational too :blush:

1 Like