Help with html and css on my portfolio please :)

1

https://s.codepen.io/mariana_moniz/debug/xRgmEw

So I’m trying to build a portfolio page where it should have 2 sections occupying the whole screen when the page loads. I’ve managed to do that for the first section, with the space picture background.

But now, under that section I should have a table where I show some of the projects. But the text doesn’t seem to fall under the first section, instead everything I write goes on top of the first one.

Thoughts?

2

It’s because you use on both text tag h1 and in CSS you have top:40%. So basically all h1 text will be set on 40% from the top of the screen.

2 Likes
3

@atolambada What @malmin said. It is usually not a good idea to use position: absolute; on a CSS selector if you want to have several instances of it in your HTML. They will all be clustered on top of each other.

2 Likes
4

Yes, malmin’s suggestion is the first thing to sort out. But even once that is done, your page wouldn’t look like you want it to. Once you separate the h1 of the first section from the others, remove the

position: fixed;

CSS property from the .header class. That property should be added when you want a div to hold its place on the screen even after scrolling. It alters the normal flow of HTML div’s on the page i.e. as block elements that fall one below the other. Now your bottom section should fall below your top section. But your top section would be shortened.

That’s because you’ve specified,

min-height: 100%;

When you set the height/width in terms of %, the height is calculated in terms of the containing div and not the viewport height. If you insist on using % then what you need to do is give the container a height of its own so that the .header class can know what is the 100% that you’re mentioning. For that you need to start giving the height right from the top of the DOM chain. I would suggest you try to understand this concept, but for the time being I can offer you a hack. Well it’s not a hack, but it should help you skip the additional learning [for now, hopefully].

Instead of setting the height in terms of percentage. Set,

min-height: 100vh;

vh is a unit that’s great for this purpose. 1vh = 1% of the height of the viewport. So it’ll measure the screen size and set accordingly. Once you do this, your first section should take up 100% of your screen height and the remaining sections will fall one below the other, as they should.

3 Likes
5

Once you’ve done those three things, your page should look like this,

http://s.codepen.io/BluecodeA/debug/NbOPWG

Still some issues are there in terms of the styling. Try to go through your CSS and see if there are things you do not really know why you’ve written them there. High chances are that you do not need those. It’s these things that make our page at times act funny. We all try using new commands when one thing doesn’t work, that’s how we’ve all learned. But if the new command that you try doesn’t make it work either, make sure you remove it before trying the next. Just a tip from someone who’s gone through the same in the early stages :slight_smile:

1 Like
6

don’t know if it’ll help you out but try this link about postioning in css
http://www.w3schools.com/css/css_positioning.asp

1 Like