CODEWITHSUNDEEP
htmlcss
suzumakes
suzumakes

Reputation: 770

Larger gap between first and second elements in a list

In the list below, the spans do not line up to the center of their corresponding dots. I believe this is caused by the larger gap between the first and second spans.

HTML 

<nav class="side-nav-right">
    <ul>
        <li class="bullet">
            <a data-scroll href="#center-splash"><span style="width: 66px; left: -80px;">Intro</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section1"><span style="width: 66px; left: -80px;">section1</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section2"><span style="width: 66px; left: -80px;">section2</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section3"><span style="width: 66px; left: -80px;">section3</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section4"><span style="width: 66px; left: -80px;">section4</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section5"><span style="width: 66px; left: -80px;">section5</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section6"><span style="width: 66px; left: -80px;">section6</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section7"><span style="width: 66px; left: -80px;">section7</span></a>
        </li>
    </ul>
</nav>

SCSS 

.side-nav-right {
    display: block;
    position: fixed;
    top: 20%;
    right: 1rem;

    ul {
        list-style: none outside;

        li {
            margin-bottom: 1rem;

            a {
                color: transparent;
                display: block;
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                background: $light-text;
                box-shadow: inset 0.025rem 0.025rem 0.075rem $PG-red;
                vertical-align: top;

                &.active {
                    background: #808080;
                    box-shadow: none;
                }
            }

            span {
                color: $light-text;
                position: absolute;
                background: rgba(0,0,0,0.7);
                display: none;
                padding: 0.25rem 0.5rem;
                border-radius: 3px;
                vertical-align: middle;
            }

            span:before {
                content:"";
                display:block;
                width:0;
                height:0;
                border:solid 5px;
                border-color:transparent transparent transparent rgba(0,0,0,0.7);
                position:absolute;
                right:-10px;
                top:9px
            }

            &:hover span {
                display: block;
            }
        }

        li:first-child a>span{top:-5px}
    }
}

@media only screen and (min-width: 1025px) {
    .side-nav-right {
        top: 30%;
        right: 2rem;

        ul {
            li {
                margin-bottom: 1.5rem;

                a {
                    width: 1.25rem;
                    height: 1.25rem;
                }
            }
        }
    }
}

span list

vertical-align seems to do nothing, commenting out all margins and padding doesn't work. I'm at a loss for why these elements aren't lining up past the first one.

Upvotes: 1

Views: 72

Answers (2)

Sagar B
Sagar B

Reputation: 204

Here is the solution without affecting your original code structure: Replace your html with followg code:

<nav class="side-nav-right">
    <ul>
        <li class="bullet">
            <a data-scroll href="#center-splash"><span>Intro</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section1"><span>section1</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section2"><span>section2</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section3"><span>section3</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section4"><span>section4</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section5"><span>section5</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section6"><span>section6</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section7"><span>section7</span></a>
        </li>
    </ul>
</nav>

Then replace your css with following code:

.side-nav-right {
    display: block;
    position: fixed;
    top: 20%;
    right: 1rem;

    ul {
        list-style: none outside;

        li {
            margin-bottom: 1rem;
            position:relative;

            a {
                color: transparent;
                display: block;
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                background: $light-text;
                box-shadow: inset 0.025rem 0.025rem 0.075rem $PG-red;
                vertical-align: top;

                &.active {
                    background: #808080;
                    box-shadow: none;
                }
            }

            span {
                color: $light-text;
                position: absolute;
                background: rgba(0,0,0,0.7);
                display: none;
                padding: 0.25rem 0.5rem;
                border-radius: 3px;
                vertical-align: middle;
                width: 66px;
                left: -90px;
                top:-4px;
            }

            span:before {
                content:"";
                display:block;
                width:0;
                height:0;
                border:solid 5px;
                border-color:transparent transparent transparent rgba(0,0,0,0.7);
                position:absolute;
                right:-10px;
                top:9px
            }

            &:hover span {
                display: block;
            }
        }

        li:first-child a>span{top:-5px}
    }
}

@media only screen and (min-width: 1025px) {
    .side-nav-right {
        top: 30%;
        right: 2rem;

        ul {
            li {
                margin-bottom: 1.5rem;

                a {
                    width: 1.25rem;
                    height: 1.25rem;
                }
            }
        }
    }
}

Upvotes: 1

Omri Aharon
Omri Aharon

Reputation: 17064

You're looking at it the other way around. Notice that only your first element has a specific top property set to it:

li:first-child a>span{top:-5px}

The others do not.

Just align the others, and have the first one adjusted.

In this Fiddle I gave a margin-top to all spans and removed the special treatment for the first child. Might only be working on this fiddle and your exact measurements might need some adjustments, if so correct the fiddle.

span {
        color: black;
        position: absolute;
        background: rgba(0,0,0,0.7);
        display: none;
        padding: 0.25rem 0.5rem;
        border-radius: 3px;
        vertical-align: middle;
        margin-top: -8px;
}

Upvotes: 3

Related Questions