Placing div under div

Placing div under div
0

#1

Trying to build my first portfolio page with simple structure of navigation bar at the top and then 2-3 sections one beneath the other.
Having 2 issues:

  1. text-decoration:none; in not working and the lines under the links in the navigation bar still appear.

  2. I did not succeed in adding a new section under the navigation bar - when adding a new, part of its content appear on the navigation bar.


#2

You will also have to remove the underline (text-decoration: none) when the link is hovered (li a:hover).

This is because you use position: fixed on the navigation bar. This basically removes it from the “flow” of the page so the div after it is just placed at the top. You can fix it by adding top: 0 to the nav bar so it always placed on the top, and margin-top: 60px (or padding-top) to the body.


#3

Now I have same issue with other sections on the screen.
After the first image section, I would like to add a section ‘About’ and then beneath it ‘Project’ and so on…
How do I place a div under div under div (each one with its own content) in a simple way, without having the need to specify each time the Top or Height value?


#4

https://codepen.io/Annestezia/pen/pwyoXx

what top value? you do it only for the first section. whats wrong with specifying height?
sorry couldnt resist , added some olive =))


#5

New at this so was trying to find a way how to do it.
Got it, thanks


#6

still feel need to comment on this, my version was sloppy … wasn’t sure what you wanted to do there, was more a question
please see this sample template at w3schools https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_me_complete&stacked=h

in that sample height of div is height of its content + margins & paddings;
you can use it for reference
pls note it is created with bootstrap 3
you can use bootstrap navbar too


#7

Here, this is what I was trying to do:
put the image directly as part of the div and not bring it from the CSS as background.
As you can see, now the second olive colored div “About me” is behind the first one.
Can you point out what I am doing wrong?


#8

the second div goes under the first one because of

  position:absolute;
}```

position absolute  takes  element  out  of normal  flow 

   FYI  bootstrap  has  its  margins  and paddings  ,  you   will have to dig them  to   make it  all  work)      use     you  browser  inspector to   see  where it comes from f12  for chrome
if you want   to  know  more abt  css  positioning    http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/
look through smth  abt   normal document flow too