HTML CSS Problem (Help!)

[lukazec]

So I'm trying to make a website in html5/css (Don't judge me,I started with the thing a few days ago)

So I made a basic <nav> and a dropdown box feature.

The whole thing worked all of the time since I made some minor edits and without looking saved and exited...

The problem right now is that the dropdown content of the dropdown box is behind a paragraph that was previously made.

Here are pictures of the current situation and the code:

 

Problem: http://imgur.com/a/p0bCM

 

html: http://imgur.com/a/RP4uv

CSS: http://imgur.com/a/s9BFc

 

if you need any additional info,I'm happy to add.

 

Thanks for the help.

[Enderman]

Add z-index: 10 (or some other number greater than 0) to the css of the drop down box.

[lukazec]

2 minutes ago, Enderman said:

Add z-index: 10 (or some other number greater than 0) to the css of the drop down box.

Tried, didn't work.

I tried adding it to the dropdown button and dropdown content (the box that pops up) individually but still doesn't work.

[Enderman]

1 minute ago, lukazec said:

Tried, didn't work.

I tried adding it to the dropdown button and dropdown content (the box that pops up) individually but still doesn't work.

It should be added to whatever class your navbar is in, which should be a different class than what the paragraph is in.

[Mira Yurizaki]

I don't know how to exactly fix this, but I can leave with these notes:

• Absolute positioning screws with the drawing. It basically makes several attributes harder to work with.
• HTML renders each element from bottom to top. If you want to make sure your element is the top-most one without extra CSS, have it towards the bottom of the HTML.

[lukazec]

1 minute ago, Enderman said:

It should be added to whatever class your navbar is in, which should be a different class than what the paragraph is in.

The thing is,due to my inexperience, the navbar as a whole and the button with dropdown are different classes, since I wasn't sure how to integrate them together. But I'll try.

[lukazec]

3 minutes ago, M.Yurizaki said:

I don't know how to exactly fix this, but I can leave with these notes:

• Absolute positioning screws with the drawing. It basically makes several attributes harder to work with.
• HTML renders each element from bottom to top. If you want to make sure your element is the top-most one without extra CSS, have it towards the bottom of the HTML.

The second point makes sense,I tried it but it just messes up the whole page.

[lukazec]

4 minutes ago, M.Yurizaki said:

I don't know how to exactly fix this, but I can leave with these notes:

• Absolute positioning screws with the drawing. It basically makes several attributes harder to work with.
• HTML renders each element from bottom to top. If you want to make sure your element is the top-most one without extra CSS, have it towards the bottom of the HTML.

And is there any alternative to absolute positioning?

[Enderman]

2 minutes ago, lukazec said:

The thing is,due to my inexperience, the navbar as a whole and the button with dropdown are different classes, since I wasn't sure how to integrate them together. But I'll try.

w3.css has some good examples of dropdown navbars, try checking those out.

[lukazec]

Just now, Enderman said:

w3.css has some good examples of dropdown navbars, try checking those out.

Okay,I'll check it out. Thanks.

[Mira Yurizaki]

7 minutes ago, lukazec said:

And is there any alternative to absolute positioning?

http://www.barelyfitz.com/screencast/html-training/css/positioning/

 

I read, probably on Stack Exchange or similar, that absolute positioning is for people who couldn't be bothered to figure out how to position their divs properly. While that sounds harsh, I've had scenarios where absolute positioning would make modifying the HTML a nightmare. An example of this is a row of divs that needed to be spaced specifically. I got this down in a few classes so that all I have to do if I want to add another div, I just create a div with those classes. If I used absolute positioning, then I would have to make an entirely new class just for that div. So maintenance would be a problem if I wanted to change the spacing.

[lukazec]

36 minutes ago, M.Yurizaki said:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

 

I read, probably on Stack Exchange or similar, that absolute positioning is for people who couldn't be bothered to figure out how to position their divs properly. While that sounds harsh, I've had scenarios where absolute positioning would make modifying the HTML a nightmare. An example of this is a row of divs that needed to be spaced specifically. I got this down in a few classes so that all I have to do if I want to add another div, I just create a div with those classes. If I used absolute positioning, then I would have to make an entirely new class just for that div. So maintenance would be a problem if I wanted to change the spacing.

Well I managed to fix the problem.

I just had to change the position of the paragraph below it to relative and THEN add z-index: -10; to it.

Adding relative position to the dropdown menu makes it push all the content below it when opened.

So yeah new lesson for me.

Thanks for the help.

[vorticalbox]

Any reason why you're not using bootstrap?

[lukazec]

2 hours ago, vorticalbox said:

Any reason why you're not using bootstrap?

Didn't know about it.. Will check it out.

[vorticalbox]

1 minute ago, lukazec said:

Didn't know about it.. Will check it out.

Frameworks are awesome and reduce development time.

[lukazec]

1 minute ago, vorticalbox said:

Frameworks are awesome and reduce development time.

Well,thanks for the suggestion and help

[vorticalbox]

4 minutes ago, lukazec said:

Well,thanks for the suggestion and help

Just be aware that bootstrap does require JS enabled in the browser, another option would be SaaS or even angularJS

[lukazec]

Will take that into account.

And I didn't know about it because I pretty much started with HTML and CSS a few days ago,so I'm not yet completely into all the useful tools and stuff.

[vorticalbox]

1 hour ago, lukazec said:

Will take that into account.

And I didn't know about it because I pretty much started with HTML and CSS a few days ago,so I'm not yet completely into all the useful tools and stuff.

 

building it yourself is a great way to learn but you end up wasting time writing code that a framework that would have done it in a shorter time frame.