HTML Page Navbar - Spacing issues with percentage

Question

enter image description here

^^ The above images show =900px, >900px, <900px...I just want to center and shorten padding as window shrinks.(at 15px)

enter image description here

^^Using 1.666666666666666%

Right now im trying to make my webpage navbar work with changes in widths. When the window is exactly 900px The navbar fits perfectly. I have 30px spacing around each block (15px left and right; 15px start and end of list). I took 900 and divided by 60 to get 15px and that is my percentage (%/60). When i use the formula calc(1/60*100%) the navbar has the wrong spacing. Am i misunderstanding something.

I dont think this is google chrome issue assuming something is wrong with the above logic. I can post the html file if anyone needs it. Don't know if its neccessary.

   body {
        margin:0px;
        font-family:avenir, sans-serif;
    }
    .nav {
        margin: 0px 0px 0px 0px;
        overflow:hidden;
        width:100%;
        <!--box-shadow: 0px 0px 10px 0px #000000;-->
    }
    .link-header {
        background-color:rgb(242,242,235);
    }
    .school-header {
        background-color:rgb(40,110,123);
    }
    .nav-left {
        display: inline-block;
        float:left;
    }
    .nav-right {
        display: inline-block;
        float:right;
    }<!--
    .nav-center {
        text-align: center;
    }-->
    a {
        text-decoration: none;
    }
    .school-header a {
        color:white;
    }
    .link-header a {
        color:rgb(40,40,40);
    }
    .nav-li-outer {
        padding-left:calc(1/60*100%);
        padding-right:calc(1/60*100%);
        display: inline-block;
        margin-top: 0px;
        vertical-align: top;
    }
    .school-header li {
        line-height:80px;
    }
    .link-header li {
        line-height:30px;
    }
    .link-header li:hover {
        box-shadow:inset 0 -3px   0 rgb(40, 40, 40);
    }
    ul {
        margin: 0;
        list-style-type: none;
        padding-left: calc(1/60*100%);
        padding-right:calc(1/60*100%);
    }

html:

<html>
    <head>
        <link rel="stylesheet" href="kamsc.css">
    </head>
    <body>
        <div class="school-header">
            <div class="nav">
                <div class="nav-left">
                    <ul>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    <img src="Logo-Test.png" width=600px style="vertical-align:middle">
                                </li>
                            </div>
                        </a>
                    </ul>
                </div>
                <div class="nav-right">
                    <ul>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Login
                                </li>
                            </div>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
        <div class="link-header">
            <div class="nav">
                <div class="nav-left">
                    <ul>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Home
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    KAMSC
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Staff
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Admissions
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Curriculum
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Sizzling Summer
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    KAMSC Connection
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Alumni
                                </li>
                            </div>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

I want the distance to be 1/60 of the width which for 900 is 15px — orwinmc, Jan 20 '15 at 17:38
no that doesnt make any remote sense. doesnt even show labels now — orwinmc, Jan 20 '15 at 17:42
Why don't you set it to be 15px? Or just set it to be 1.6666666666666666666666[...]7%? (like ntgCleaner said). — Ismael Miguel, Jan 20 '15 at 17:43
Because then when i change the window the nav isnt centered when the width gets bigger or smaller(tacks extra on end / cuts off part of nav) — orwinmc, Jan 20 '15 at 17:54
Could you post a screenshot of what you're trying to accomplish? The HTML is a bit confusing. Typically there shouldn't be additional tags between UL and LIs. See: http://stackoverflow.com/questions/8557869/is-this-html-structure-valid-ul-div-li-li-div-li-li-div I think there may be a better way to address this than trying to compute the percentage. — Darren, Jan 20 '15 at 17:55
1.6666666666666666666666[...]7% = `100/(1/60)`. What you are trying to do is `(1/60) * (1/1)`, which is 0.016666666666666666[...]7%. As a side note, if you want to keep your menu centered, either use soem media queries to control the `font-size`, use viewport units or break the menu in half. Another solution is to set `width:100%,min-width:900px;` — Ismael Miguel, Jan 20 '15 at 18:01
How would you break the menu and also i might have error in math but if i hard code it in it doesnt work. — orwinmc, Jan 20 '15 at 18:04
It has something to do with it being a percentage of the relative space? maybe? maybe percentage isnt the window? — orwinmc, Jan 20 '15 at 18:09
Can I alter the widths based on window size in javascript (seems unneccessary but anything to make it work) — orwinmc, Jan 20 '15 at 18:17
Please learn how to create a [MVCE](http://stackoverflow.com/help/mcve). — Terry, Jan 20 '15 at 18:39
What can I do to make it minimal...All css is needed and same with almost all html...I gave you pictures so you dont have to check and almost solved the whole problem myself (percentage is based on parent container not window i think). I got 0 replies and yet 40 people have viewed. If it is really that confusing provide reasons for it without being rude. Just a tip...minimal isnt always better - like your comment — orwinmc, Jan 20 '15 at 18:57

score 0 · Accepted Answer · edited May 23 '17 at 12:31

You can significantly simply your HTML, particularly for the nav section. Here's a JSFiddle: http://jsfiddle.net/vanu2ynx/

I didn't completely recreate what you're trying to do, but you can probably fill in the details.

Here's the HTML I used:

<header>
    <h1>Title</h1>
    <div class="login">Login</div>
</header>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">KAMSC</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Adminssions</a></li>
        <li><a href="#">Curriculum</a></li>
        <li><a href="#">Sizzling Summer</a></li>
        <li><a href="#">KAMSC Connection</a></li>
        <li><a href="#">Alumni</a></li>
    </ul>
</nav>

And the CSS:

header {
    background: teal;
    overflow: hidden;
    padding: 2% 2%;
}

header h1 {
    float: left;
    margin: 0;
    padding: 0;
}

header .login {
    float: right;
}

nav {
    background: lightgray;
    padding: 2% 2%;
}

nav ul {
    font-size: 0;
    margin: 0;
    padding: 0;
    text-align: justify;
}

nav ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

nav li {
    display: inline-block;
    font-size: 16px;
}

The trick here is the text-align: justify; on nav ul and then the :after creates a full width child element for the justify to work.

You'll need to add media queries to have this break properly, but that should be pretty straight-forward.

Read more here: How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

This is really helpful. Is there a way I can put a div around the list to add a border on hover?? — orwinmc, Jan 20 '15 at 19:04
Do you want the hover on the entire list or just specific links? If specific links, then just add a hover on the anchor tag. Something like this? http://jsfiddle.net/vanu2ynx/2/ — Darren, Jan 20 '15 at 19:06
But the way I was doing it before when I hover it but the horizontal line below the block (or i highlight the whole tab) but with this setup i have no access to the nav item other than through the link which has a much smaller bounding box — orwinmc, Jan 20 '15 at 19:12
No. Just the fact that he recoded it and it works. If you can figure it out the way I was doing it that is fine and I will give you credit. Apparently things shouldn't go between ul and li so he fixed two of my problems in one fell swoop. I think the solution is "text-align:justify" — orwinmc, Jan 23 '15 at 22:49

HTML Page Navbar - Spacing issues with percentage

1 Answers1