1

I am designing a personal site and am having a problem with spacing of the buttons when I make the page smaller. When the page is full, the buttons are in the middle, but it doesn't stay in the middle when I make the window smaller. Does anyone know any way I can fix this?

<div id="navigation">
    <ul id="nav_buttons">
        <a href="firstpage.html"> 
            <li class="navbutton" id="home">
                Home
            </li>
        </a>
        <a href="contactpage.html">
            <li class="navbutton" id="contact">
                Contact Me
            </li>
        </a>
        <a href="resume.html">
            <li class="navbutton" id="resume">
                Resumé
            </li>
        </a>
        <a href="resume.html">
            <li class="navbutton" id="projects">
                Projects
            </li>
        </a>
    </ul>
</div>

#navigation
{
width: 100%;
}
#nav_buttons
{
margin-left: 28%;
width: 100%;
}
.navbutton
{
line-height: 150%;
font-size: 24px;
background-color: #7373AF;
height: 42px;
width: 120px;
display: inline-block;
color: white;
text-align: center;
font-family: 'Lato', Tahoma;
overflow: hidden;
text-overflow: ellipsis;
z-index: 1;
position: relative;
float: left;
vertical-align: top;
border-left: 2px solid black;
border-right: 2px solid black;
}
.navbutton:hover
{
background-color: #68689E;
}
#projects
{
margin-right: 0px;
margin-left: 0px;
border-right: 0px solid black;
}
#home
{
border-left: 0px solid black;
}

JSFiddle

Liftoff
  • 24,717
  • 13
  • 66
  • 119
Oliver Spohngellert
  • 113
  • 5

6 Answers6

1

This is one of the great use cases for Flexbox.

Given a list like this:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

you would set the container to display: flex;, and the children (li in this case) to flex: 1, which sets the intrinsic width of the elements to 0, so they're all the same, and then distributes the available space evenly among the items:

ul { display: flex; }

li {
  flex: 1;
}

I whipped up a quick example: http://jsbin.com/pigofi/1/

stephenhay
  • 2,824
  • 24
  • 25
0

please see Why can't I center with margin: 0 auto? about using floats with center alignment.

To summaries... Remove the float: left; property, it interferes with display: inline and causes problems. (float: left; makes the element implicitly a block-level element. It is still good to use display: inline on it to overcome a bug in IE6 and below that doubles horizontal margins for floated elements) The styles below is the full style for the list-items.

Community
  • 1
  • 1
Quinn Keaveney
  • 1,248
  • 1
  • 17
  • 39
0

Edit your css id #navigation and #nav_buttons as following :

#navigation
{
width: 100%;
text-align:center
}
#nav_buttons
{
margin:auto;
display:inline-block;


}

Check here

Abhigyan Tiwari
  • 97
  • 3
  • 14
user3176335
  • 192
  • 1
  • 1
  • 14
0

Use this html and css. I hope it will be work

#navigation{
 width: 100%;
}
#nav_buttons{
 width: 80%;
 margin:0 auto;
}
.navbutton{
 line-height: 150%;
 font-size: 24px;
 background-color: #7373AF;
 height: 42px;
 width: 20%;
 display: inline-block;
 text-align: center;
 font-family: 'Lato', Tahoma;
 overflow: hidden;
 text-overflow: ellipsis;
 z-index: 1;
 position: relative;
 float: left;
 vertical-align: top;
 border-left: 2px solid black;
 font-size:13px
}
.navbutton a{
 color:white;
 text-decoration:none;
}
.navbutton:hover{
 background-color: #68689E;
}
#projects{
 margin-right: 0px;
 margin-left: 0px;
 border-right: 0px solid black;
}
#home{
 border-left: 0px solid black;
}
@media screen (max-width: 600px) {
 #nav_buttons{
  width: 80%;
  margin:0 auto;
 }
 .navbutton{
  line-height: 150%;
  font-size: 24px;
  background-color: #7373AF;
  height: 42px;
  width: 20%;
  display: inline-block;
  text-align: center;
  font-family: 'Lato', Tahoma;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
  position: relative;
  float: left;
  vertical-align: top;
  border-left: 2px solid black;
  font-size:13px
 }

}
<div id="navigation">
 <ul id="nav_buttons">
  <li class="navbutton" id="home">
   <a href="firstpage.html">
   Home</a>
  </li>
  <li class="navbutton" id="contact">
   <a href="contactpage.html">
  Contact Me </a>
  </li>
  <li class="navbutton" id="resume">
   <a href="resume.html">
  Resumé </a>
  </li>
  <li class="navbutton" id="projects">
   <a href="resume.html">
   Projects </a>
  </li>
 </ul>
</div>
Murugan
  • 1
  • 1
0

I see two main things that will throw it off, the percentage based left margin:

#nav_buttons {
  margin-left: 28%;
}

plus having your links float left. Float removes from the flow of the document, and can make troubleshooting tricky.

I removed the left padding on the main container and then removed the float on the buttons and changed them to display: inline and styled them with padding.

Another way to solve! Like this:

#navigation {
  width: 100%;
  text-align: center;
}

#nav_buttons {
  margin: auto;
  padding: 0;
  width: 100%;
}

.navbutton {

  display:inline;
  padding: 5px 7px;
  /* remaining styles */
}

Hope that helps,

Sara

Sara Mote
  • 236
  • 2
  • 7
-2

Try this boilerplate.css and this styles.css files, mainly provided when I create a fluid layout template by Adobe Dreamweaver(if you have not used fluid layout before).

I hope it helps.

Abhigyan Tiwari
  • 97
  • 3
  • 14