2015-04-20 5 views
0

Я хотел бы попросить вашу помощь с моей нижней навигационной панелью и ссылкой на обеих навигационных барах.Фиксация нижней навигационной панели + фиксирующая ссылка на другую веб-страницу

Я не могу показаться, что он появился в центре. Будет ли использовать прокладку, чтобы исправить это? Я пытался его использовать, но мне нужно оценить количество пикселей.

Моя вторая проблема в том, что моя нижняя панель навигации не имеет правильного интервала. Я уже изменил размер шрифта, но это не устраняет проблему. Прямо сейчас, это выглядит так: «HomeWho We AreWhat We Do ...».

Моя третья проблема заключается в том, что одна из моих ссылок не работает. Это ссылка на другую веб-страницу, которую я закодировал. Я думаю, что набрал его правильно, но это не сработает.

Вот скрипку: https://jsfiddle.net/captainpokey/66szogpm/

А вот код:

html { 
 
\t 100% 
 
} 
 

 
body { 
 
\t background: #cecdcc; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t color: #8c8b8a; 
 
\t font-size: 18px; 
 
\t font-family: "Lato", sans-serif; 
 
} 
 

 
#wrap { 
 
\t background-color: #fff; 
 
\t width: 1000px; 
 
\t margin: 0 auto; 
 
} 
 

 
#nav { 
 
\t width: 1000px; 
 
\t height: 45px; 
 
\t background: #dcdbda; 
 
\t font-family: "Lato"; 
 
\t font-size: 18px; 
 
} 
 

 
#nav ul { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t background: #dcdbda; 
 
\t float: left; 
 
\t margin-left: 50px; \t 
 
} 
 
\t 
 
#nav li { 
 
\t height: 40px; 
 
\t padding-top: 4px; 
 
\t float: left; 
 
\t position: relative; 
 
\t width: 150px; 
 
\t list-style: none; 
 
} 
 
\t 
 
#nav a { 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t text-align: center; 
 
\t color: #949392; 
 
} 
 

 
#nav ul ul { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 100%; 
 
\t visibility: hidden; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
\t \t 
 
#nav li:hover, #nav li:hover li { 
 
\t background: #fff; 
 
} 
 

 
#nav li li:hover, #nav li li:hover li { 
 
\t background: #bbb; 
 
} 
 
\t 
 
#nav li:hover ul { 
 
\t visibility: visible; 
 
} 
 

 
#header { 
 
\t width: 1000px; 
 
\t height: 485px; 
 
\t background-image: url(../images/headerphoto.jpg); 
 
} 
 

 
#content { 
 
\t background-color: #fff; 
 
\t font-family: "Lato", sans-serif; 
 
\t color: #777674; 
 
\t padding-top: 10px; 
 
\t padding-bottom: 20px; 
 
} 
 

 
#content h4 { 
 
\t padding-left: 150px; 
 
\t padding-right: 150px; 
 
\t font-family: "Lato", sans-serif; 
 
\t font-size: 20px; 
 
\t text-transform: bold; 
 
} 
 

 
#content p { 
 
\t padding-left: 150px; 
 
\t padding-right: 150px; 
 
\t font-family: "Lato", sans-serif; 
 
\t font-size: 18px; 
 
\t text-transform: bold; 
 
} 
 

 
#footer { 
 
\t background-image: url(../images/footerphoto.jpg); 
 
\t width: 1000px; 
 
\t height: 255px; 
 
} 
 

 
#navbottom { 
 
\t padding-left: 130px; 
 
\t width: 1000px; 
 
\t color: #fff; 
 
\t font-size: 12px; 
 
\t font-family: "Lato"; 
 
} 
 

 
#navbottom ul { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t float: left; 
 
\t margin-left: 20px; 
 
\t margin-right: 20px; 
 
} 
 

 
#navbottom ul li { 
 
\t float: left; 
 
\t position: relative; 
 
\t list-style-type: none; 
 
} 
 

 
#navbottom li:hover ul { 
 
\t visibility: visible; 
 
} 
 

 
#navbottom a { 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t text-align: center; 
 
\t color: #fff; 
 
} 
 

 
#copyright { 
 
\t padding-left: 150px; 
 
\t padding-right: 150px; 
 
\t font-family: "Lato", sans-serif; 
 
\t font-size: 16px; 
 
}
<head> 
 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
 
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 
 
<title>Powers & Grant, Inc.</title> 
 
<meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 
\t <div id="wrap"> 
 
\t \t <div id="nav"> 
 
\t \t <ul> 
 
\t \t \t <li><a href="index.html">Home</a></li> 
 
\t \t \t <li><a href="whoweare.html">Who We Are</a></li> \t 
 
\t \t \t <li><a href="whatwedo.html">What We Do</a></li> 
 
\t \t \t <li><a href="ourservices.html">Our Services</a></li> 
 
\t \t \t <li><a href="thepowersteam.html">The Powers Team</a></li> 
 
\t \t \t <li><a href="contact.html">Contact</a></li> 
 
\t \t </ul> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div id="header"></div> 
 
\t \t 
 
\t \t <div id="content"> 
 
\t \t <p>As the Country&#39;s pioneer in sales force outsourcing, Powers knows the intricacies of managing the critical tasks involved in increasing revenues as well as saving the company from the costly maintenance of agents with minimal increase in sales growth.<br><br> 
 

 
Powers and Grant Inc. currently handles and manages sales teams for various industries principally involved in the Real Estate, Consumer, and 
 
Pharmaceutical and Direct Selling companies.<br><br> 
 

 
We assist companies in enhancing their competitiveness through application of competencies and integrate these essential factors needed to survive 
 
today&#39;s need for continued innovation.<br><br></p> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div id="footer"> 
 
\t \t 
 
\t \t <div id="navbottom"> 
 
\t \t <ul> 
 
\t \t \t <li><a href="index.html">Home</a></li> 
 
\t \t \t <li><a href="whoweare.html">Who We Are</a></li> \t 
 
\t \t \t <li><a href="whatwedo.html">What We Do</a></li> 
 
\t \t \t <li><a href="ourservices.html">Our Services</a></li> 
 
\t \t \t <li><a href="thepowersteam.html">The Powers Team</a></li> 
 
\t \t \t <li><a href="contact.html">Contact</a></li> 
 
\t \t </ul> 
 
\t \t </div><br> 
 
\t \t 
 
\t \t <div id="copyright">Copyright &copy; Powers and Grant, Inc. All Rights Reserved</div> 
 
\t \t </div> 
 
\t </div> 
 
</body>

Пожалуйста, помогите! Заранее большое спасибо.

ответ

0

Здесь внесены изменения.

https://jsfiddle.net/66szogpm/1/

код выровнять верхний текст нав к центру

#nav li { 
    line-height: 40px; 
    float: left; 
    position: relative; 
    width: 150px; 
    list-style: none; 
} 

код для выравнивания вашего дна Nav

#navbottom { 
    padding-left: 100px; 
    width: 1000px; 
    color: #fff; 
    font-size: 14px; 
    font-family: "Lato"; 
    margin: 0 auto; 
} 

#navbottom ul { 
    padding: 0; 
    margin: 0; 
    margin-left: 20px; 
    margin-right: 20px; 
} 

#navbottom ul li { 
    display: inline-block; 
    position: relative; 
    list-style-type: none; 
    margin: 5px 10px; 
} 

Вы использовали поплавок: осталось во многих местах, которые ISN Не нужно. Все, что вам нужно было сделать, это изменить свойство отображения на встроенный блок.

Я не изменил его для верхнего навигатора. Но вы можете попробовать.

+0

О, спасибо вам большое за вашу помощь! Это сработало! – captainpokey

+0

встроенный блок означает размещение элементов рядом друг с другом. Элементы переходят к следующей строке, если недостаточно места для их размещения в одной строке. – Aakash

+0

Еще раз спасибо за помощь! – captainpokey

Смежные вопросы