CODEWITHSUNDEEP
htmlcss
Genious1414
Genious1414

Reputation: 23

Dots aren't showing up

I want the dots to show up, later I want to create a fix side nav with that. It doesn't show up anymore. I tried to solve it but when the dots are showing up and then it disappears 

 .dot {
        height: 0.8em;
        width: 0.8em;
        background-color: #fff;
        border-radius: 50%;
        float: right;
        margin-bottom: 2em;
        margin-right: 2em;
        
    }
    
    
    .sitenav {
        height: auto;
        width: 1em;
        float: right;
        position: fixed;
        }
<div class="sitenav">
        <a href="#start"><span class="dot" id="f"></span></a>
        <a href="#two"><span class="dot" id="i"></span></a>
        <a href="#three"><span class="dot" id="r"></span></a>
        <a href="#four"><span class="dot" id="s"></span></a>
        <a href="#five"><span class="dot" id="t"></span></a>
        </div>
    
    <div id="start">
    <div class="site">
    </div>
    </div>

Upvotes: 0

Views: 430

Answers (3)

Selva Supriya VS
Selva Supriya VS

Reputation: 455

Remove position:fixed

.sitenav{
  height: auto;
  float: right;
  width : 1em
}

Upvotes: 0

user10640963
user10640963

Reputation:

your dots background-color is #fff 

 <style>
 .dot {
    height: 0.8em;
    width: 0.8em;
    background-color: #000;
    border-radius: 50%;
    float: right;
    margin-bottom: 2em;
    margin-right: 2em;

}


.sitenav {
    height: auto;
    width: 1em;
    float: right;
    margin-right: 2em;
    }
</style>
<div class="sitenav">
    <a href="#start"><span class="dot" id="f"></span></a>
    <a href="#two"><span class="dot" id="i"></span></a>
    <a href="#three"><span class="dot" id="r"></span></a>
    <a href="#four"><span class="dot" id="s"></span></a>
    <a href="#five"><span class="dot" id="t"></span></a>
    </div>

<div id="start">
<div class="site">
</div>
</div>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

Remove the width from the .sitenav (1em is less than 5 x 2.8em so the overflow is hidden) and change the color to anything other than white.

 .dot {
        height: 0.8em;
        width: 0.8em;
        background-color: #f00;
        border-radius: 50%;
        float: right;
        margin-bottom: 2em;
        margin-right: 2em;
        
    }
    
    
    .sitenav {
        height: auto;
        /*width: 1em;*/
        float: right;
        position: fixed;
        }
<div class="sitenav">
        <a href="#start"><span class="dot" id="f"></span></a>
        <a href="#two"><span class="dot" id="i"></span></a>
        <a href="#three"><span class="dot" id="r"></span></a>
        <a href="#four"><span class="dot" id="s"></span></a>
        <a href="#five"><span class="dot" id="t"></span></a>
        </div>
    
    <div id="start">
    <div class="site">
    </div>
    </div>

Upvotes: 1

Related Questions