Нижняя фиксированная навигационная панель

Question

Я хочу, чтобы панель навигации была в нижней части страницы, что я смог сделать отлично, но я думаю, что я выбрал довольно плохой метод для ориентации позиции ссылок. Проблема с тем, как я это сделал, используя абсолютное позиционирование, - это когда я сжимаю экран, он отсекает все без полосы прокрутки. Если я использую float, я не уверен, как использовать трюк замены изображений для 1-й ссылки.

В идеале, он должен держать все по центру, пока окно не станет слишком маленьким, а затем позволит пользователю прокручивать бок о бок, чтобы увидеть, что было отрезано. Я уверен, что есть легкое решение, но у меня возникли проблемы с поиском любой информации о позиционировании ссылок для нижнего фиксированного меню с заменой изображения. Я ценю помощь.

Вот мой код:

li#initials{ 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 200px; 
 
    width: 50px; 
 
    height: 45px; 
 
    background: url(../images/initials.jpg) no-repeat 0 0; 
 
    text-indent: -9999px; 
 
} 
 

 
/*makes initials img clickable*/ 
 
#initials a{ 
 
    display: block; 
 
    width: 50px; 
 
    height: 45px; 
 
} 
 

 
li#story { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 300px; 
 
} 
 
li#gallery { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 400px; 
 
} 
 
li#party { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 500px; 
 
} 
 
li#event { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 650px; 
 
} 
 
li#travel { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 750px; 
 
} 
 
li#rsvp { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 850px; 
 
} 
 
li#gifts { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 950px; 
 
} 
 
li#print { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 1050px; 
 
}

<nav id="page-menu"> 
 
    <ul id="bottom-nav"> 
 
     <li id="initials"><a href="home.html">Home</a></li> 
 
     <li id="story"><a href="story.html">Our Story</a></li> 
 
     <li id="gallery"><a href="gallery.html">Gallery</a></li> 
 
     <li id="party"><a href="party.html">Wedding Party</a></li> 
 
     <li id="event"><a href="event.html">Event</a></li> 
 
     <li id="travel"><a href="travel.html">Travel</a></li> 
 
     <li id="rsvp"><a href="rsvp.html">RSVP</a></li> 
 
     <li id="gifts"><a href="gifts.html">Gifts</a></li> 
 
     <li id="print"><a href="images/invitation.pdf">Print</a></li> 
 
    </ul> 
 
</nav>

Answer 1

использование фиксированного вместо абсолютного и ваш способ позиционирования также не является эффективным

#page-menu{ position:fixed; bottom:0px; left:15%;} 
 

 
#page-menu li{ display:inline-block; padding:10px;} 
 

<nav id="page-menu"> 
 
    <ul id="bottom-nav"> 
 
     <li id="initials"><a href="home.html">Home</a></li> 
 
     <li id="story"><a href="story.html">Our Story</a></li> 
 
     <li id="gallery"><a href="gallery.html">Gallery</a></li> 
 
     <li id="party"><a href="party.html">Wedding Party</a></li> 
 
     <li id="event"><a href="event.html">Event</a></li> 
 
     <li id="travel"><a href="travel.html">Travel</a></li> 
 
     <li id="rsvp"><a href="rsvp.html">RSVP</a></li> 
 
     <li id="gifts"><a href="gifts.html">Gifts</a></li> 
 
     <li id="print"><a href="images/invitation.pdf">Print</a></li> 
 
    </ul> 
 
</nav>

Answer 2

Этот код всегда сохраняет меню в центре.

JSFiddle: http://jsfiddle.net/jennift/qsu3q3q6/1/

<nav> 
<div id="page-menu"> 
    <ul id="bottom-nav"> 
     <li id="initials"><a href="home.html">Home</a></li> 
     <li id="story"><a href="story.html">Our Story</a></li> 
     <li id="gallery"><a href="gallery.html">Gallery</a></li> 
     <li id="party"><a href="party.html">Wedding Party</a></li> 
     <li id="event"><a href="event.html">Event</a></li> 
     <li id="travel"><a href="travel.html">Travel</a></li> 
     <li id="rsvp"><a href="rsvp.html">RSVP</a></li> 
     <li id="gifts"><a href="gifts.html">Gifts</a></li> 
     <li id="print"><a href="images/invitation.pdf">Print</a></li> 
    </ul> 
</div> 
</nav> 

nav { 
    position:absolute; 
    bottom:0; 
    left:0; 
    right:0; 
    background:#666; 
    width:100%; 
} 
#page-menu { 
    width: 80%; //whatever you width is 
    margin:0 auto; 
    background:#f00; 
    text-align:center; //remove this if you want 
} 

#bottom-nav li { 
    display:inline-block; 
    padding:5px; 
}