Невозможно центрировать навигационную панель и нужно щелкнуть само слово - PullRequest
Новая
       29

Невозможно центрировать навигационную панель и нужно щелкнуть само слово

0 голосов
/ 09 января 2019

Это мой код CSS (для страницы индекса): 

span{
display:block;
font-size:100px;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
}

.index {
    background-image: url("images/indexbackground.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
  background-size: 1600px 800px;
}

/*NAVBAR (begin)*/
a {
  text-decoration: none;
}

nav {
    font-family: Arial;
    background-color: Black;
}

ul {
  background: black;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

li {
    color: #white;
  background: black;
    display: block;
    float: left;
    padding: 27px;
    position: relative;
    text-decoration: none;
  transition-duration: 0.5s;
}

li a {
  color: #fff;
}

li:hover {
    background: #DEB887;
    cursor: pointer;
}

ul li ul {
    background: black;
    visibility: hidden;
  opacity: 0;
  min-width: 17rem;
    position: absolute;
  transition: all 0.5s ease;
  margin-top: 27px;
    left: 0;
  display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
    clear: both;
  width: 100%;
}
/*NAVBAR (end)*/

Это код для HTML (индексная страница): 

<!DOCTYPE html>
<link rel="stylesheet" href="piano.css" />
<html class="index">
<head>
<title>The piano - Home</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center><span>The Piano</span></center>

<!--(start) NAVBAR-->
<br><br><br><br><br><br>
<nav>
<div class="navwrapperindex">
<nav class="navmenuindex">
<ul class="clearfixindex">
<li><a href="index.html">Home</a></li>
<li><a>The piano itself</a>
<ul class="sub-menu">
<li><a href="mechanics.html">Mechanics</a></li>
<li><a href="construction.html">Construction</a></li>
</ul>
<li><a>Types of pianos</a>
<ul class="sub-menu">
<li><a href="grand.html">Grand</a></li>
<li><a href="upright.html">Upright</a></li>
<li><a href="electric.html">Electric</a></li>
</ul>
</li>
<li><a href="historypianos.html">History of the piano</a>
</li>
<li><a href="pianosongs.html">Piano songs</a>
</li>
</div>
</nav>
<!--(end)NAVBAR-->

</body>
</html>

Я уже много чего пробовал, но ничего не получается ... Прямо сейчас моя страница индекса выглядит так:

(страница указателя, но мне пришлось ее обрезать, потому что полная картинка была более 2 МБ)

(извините, это действительно плохо, но я впервые делаю сайт с html и css).

Мне нужно отцентрировать панель навигации и иметь возможность щелкнуть поле вместо слова. Спасибо, что прочитали (и, возможно, ответили)!

1 Ответ

0 голосов
/ 09 января 2019

Прежде всего, я рекомендую использовать классы вместо прямого селектора элемента, Если вы хотите центрировать навигацию, вам нужно только установить свойство align-text: center в родительском элементе div главной навигации. и если вы хотите щелкнуть все поле, а не только текст, то элемент, который нуждается в заполнении и поле, - это a, а не li.

Проверьте фрагмент: 

span{
display:block;
font-size:100px;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
}

.index {
    background-image: url("images/indexbackground.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
  background-size: 1600px 800px;
}

.navwrapperindex {
  text-align: center;
}
.navwrapperindex > nav{
  display: inline-block;
}


a {
  text-decoration: none;
}

nav {
    font-family: Arial;
}

ul {
  background: black;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

li {
    color: #white;
  background: black;    
    float: left;    
    position: relative;
    text-decoration: none;
  transition-duration: 0.5s;
}

li a {
  color: #fff;
  padding: 27px;
  display: block;
}

li:hover {
    background: #DEB887;
    cursor: pointer;
}

ul li ul {
    background: black;
    visibility: hidden;
  opacity: 0;
  min-width: 17rem;
    position: absolute;
  transition: all 0.5s ease;
    left: 0;
  display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
    clear: both;
  width: 100%;
}
<center><span>The Piano</span></center>

<!--(start) NAVBAR-->
<br><br><br><br><br><br>
<nav>
  <div class="navwrapperindex">
    <nav class="navmenuindex">
      <ul class="clearfixindex">
        <li><a href="index.html">Home</a></li>
        <li><a>The piano itself</a>
          <ul class="sub-menu">
            <li><a href="mechanics.html">Mechanics</a></li>
            <li><a href="construction.html">Construction</a></li>
          </ul>
          <li><a>Types of pianos</a>
            <ul class="sub-menu">
              <li><a href="grand.html">Grand</a></li>
              <li><a href="upright.html">Upright</a></li>
              <li><a href="electric.html">Electric</a></li>
            </ul>
          </li>
          <li><a href="historypianos.html">History of the piano</a>
        </li>
        <li><a href="pianosongs.html">Piano songs</a>
        </li>
      </ul>
    </nav>
  </div>
</nav>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...