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:
-
text-decoration:none; in not working and the lines under the links in the navigation bar still appear.
-
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.
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
.
1 Like
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?
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 =))
New at this so was trying to find a way how to do it.
Got it, thanks
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
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?
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