3 replies [Last post]
jgcbrouns
jgcbrouns's picture
Offline
newbie
Last seen: 6 years 20 weeks ago
Timezone: GMT+1
Joined: 2014-02-15
Posts: 2
Points: 3

Hello!

I am currently redesigning my homepage. Now I want to make the navigation bar in the bottom-right corner of the screen. Now I am known with the existing properties in CSS for positioning (:absolute, :relative etc).

However trying out with this properties doesn't give me the desired result I want:
The DIV should stay in place (most bottom-right), when I resize my window.
This to make sure people use the site in fullscreen view.
Can anyone help me with this?

Grz,

Jeroen

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

did you try

did you try

position:fixed;
bottom:0;
right:0;

jgcbrouns
jgcbrouns's picture
Offline
newbie
Last seen: 6 years 20 weeks ago
Timezone: GMT+1
Joined: 2014-02-15
Posts: 2
Points: 3

Yes

Yes...When I tried to resize the same problem occured: it moves with the resizing, it will always stay in my bottom-right corner. Puzzled

So just to be clear: I want it NOT to move along my resizing, it should not adapt to resizing the screen.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi jgcbrouns,Sounds like a

Hi jgcbrouns,
Sounds like a bad idea for mobiles etc, so I will assume you are looking after that in other ways such as media queries.

Wrap all your page content in a div ( you may want to set it's width and height) set it's position value to relative.
Then add the nav bar just before you close it, and position that relative bottom right.

<body>
<div class="pagewrapper">
 
... other content etc.
 
<nav />
</div>
</body>

.pagewrapper{
  position:relative;
}
nav{
  position:relative;
  bottom:0;
  right:0;
}