CODEWITHSUNDEEP
htmlcss
iori
iori

Reputation: 3506

How to make a div float at the same place at all time?

What I want

enter image description here

What I have

enter image description here

What I've tried

PHP

<div id="nav-bar">
    <ul class="inline">

        <?php 

        foreach(array_unique(array_values($continent)) as $continent_id){


            if($continent_id == 1 ) $continent_name = "Europe" ;  
            elseif ($continent_id == 2 ) $continent_name = "Asia" ;  
            elseif ($continent_id == 3 ) $continent_name = "North America" ;  
            elseif ($continent_id == 4 ) $continent_name = "Oceania" ;  
            elseif ($continent_id == 5 ) $continent_name = "South America" ;  
            else  $continent_name = "Africa" ;  

            ?>



            <li><a href="#<?php echo $continent_name ?>"><?php echo $continent_name ?></a></li>

            <?php }?>

        </ul>
    </div>

CSS

#nav-bar {
    width: 960px;
    margin: 0 auto;
    position: absolute;
    top: 100;
    left:200;
    z-index: 10;
}

Upvotes: 2

Views: 86

Answers (5)

axiac
axiac

Reputation: 72366

Try position: fixed;

position: absolute; puts the element at a fixed position inside its innermost positioned parent element. It is usually used to place an element at a fixed position inside the page.

position: fixed; keeps it at a fixed position inside the viewport (the browser's window).

See the documentation for position attribute.

Upvotes: 3

besciualex
besciualex

Reputation: 1892

You forgot to add px(unit of measure) to top and left. Ex:

top:100px;
left:200px;

http://jsfiddle.net/70xvgsvt/1

Upvotes: -1

Vladyslav Savchenko
Vladyslav Savchenko

Reputation: 1352

Use these css-styles:

#navbar {
    position: fixed;
    left: 0;
    top: 0;
}

Upvotes: 1

jeroen
jeroen

Reputation: 91792

Assuming that you mean the same place in the browser window, you need position: fixed; instead of position: absolute;.

Upvotes: 0

Mostafa Mohsen
Mostafa Mohsen

Reputation: 786

position:fixed;

add this to your div.and scroll up and down it will be float.add z-index too..

Upvotes: 3

Related Questions