CODEWITHSUNDEEP
htmlcss
Edson
Edson

Reputation: 275

Navigation text within circle list-item doesn't shrink fluidly. Instead text starts sticking out.

I rounded my nav list-items and have centered the link text inside of them. However, when I shrink the browser window, as I am trying to create a fluid website, the circle re-sizes while the text does not re-size proportionally along with it.

I thought this had something to do with the padding or width values of either the li a or the li. However, I have tried adjusting fixed values to percent values, yet, the problem still persists.

Below is the HTML

<nav>
    <ul>
        <li class="circle"><a href="about.html">About</a></li>
        <li class="circle"><a href="coding.html">Coding</a></li>
        <li class="circle"><a href="health.html">Health</a></li>
        <li class="circle"><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Below is the CSS

nav {
    text-align: center;
    padding: 0 0;
    margin: 10px 0 0;
}

nav ul {
    list-style: none;
    margin: 0; 10px;
    padding: 0;
}

nav li {
    display: inline-block;
    font-size: 0.8em;
  margin: 50px;
  padding: 2%;
  border: 1px solid black;
}

nav a {
  padding: 3em;
}

.circle {
    position: relative;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    line-height: 1px;
    text-align: center;
}

.circle a {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Upvotes: 0

Views: 138

Answers (3)

user488187
user488187

Reputation:

I don't believe that there is a way using just CSS to make the text stay inside the circles as they change size.

I suggest you take a look at FitText, which is a well-regarded Javascript script to do just that.

Upvotes: 0

Eddy
Eddy

Reputation: 109

Just add this at the beginning of your css : 

* { padding: 0; margin: 0; overflow: hidden;}

Live Demo

Upvotes: 1

user488187
user488187

Reputation:

If I understand you correctly, you just need to make the margin a percentage, e.g.

nav li {
    display: inline-block;
    font-size: 0.8em;
    margin: 7%;
    padding: 2%;
    border: 1px solid black;
}

Take a look at this Fiddle and see if it's what you want.

Upvotes: 0

Related Questions