Невозможно получить текст для перехода к началу страницы - PullRequest
Новая
       6

Невозможно получить текст для перехода к началу страницы

0 голосов
/ 15 мая 2018

Я не могу получить текст для навигации, отображаемый в строке и на серой полосе в верхней части страницы. Я предполагаю, что есть какая-то проблема с моим CSS. До того, как у меня был текст, включенный в class = "box", и форматирование работало, но кнопки не работали, поэтому я создал новый div class = "new", чтобы кнопки работали.

HTML: 

<div class="box-contents">
    <img src="../images/LOGO.png" alt="Stephen Crawford Photography Logo">
</div>

<div class="box">
</div>
<div class="new">
    <nav>
        <ul>
            <li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
            <li class="button"><a class="button-text" href="../html/about.html">about</a></li>
            <li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
        </ul>
    </nav>
</div>

CSS: 

@charset "utf-8";
/* CSS Document */
body{
  margin: 0;
  padding: 0;
  font-size: 100%;
}
.box {
    width: auto;
    height: 120px;
    background: grey;
    overflow: hidden;
    opacity: 0.85;
    position: relative;
    z-index: 3;
}
.box-contents {
    margin: auto;
    width: 100%;
    overflow: hidden;
    position: absolute;
    opacity: 1 !important;
    z-index: 4;
}
.new ul{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: lighter;
    letter-spacing: 2px;
    font-size: 2em;
    margin-top: 0;
    padding-top: 25px;
    float: right;
    margin-right: 100px;
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline;
    z-index: 99;
}
a{
    text-decoration: none;
    color: inherit;
}
img{
  display: block;
  float: left;
  width: 150px;
  margin: 10px 2%;
}
.images{
    display: block;
    width: 800px;
    float: inherit;
    margin: auto;
    padding-bottom: 20px;
    padding-top: 20px;
}

На рисунке ниже показаны проблемы форматирования
enter image description here

Ответы [ 3 ]

0 голосов
/ 15 мая 2018

Наиболее подходящим подходом является размещение вашего логотипа и навигационных ссылок в элементе <nav>. Прямо сейчас они разбиты на отдельные элементы, которые заставят их складываться. В последнее время flexbox стал лучшим решением для подобных ситуаций. Вы будете сгибать свой навигационный контейнер и неупорядоченный список внутри. Свойство margin в ul имеет значение auto, что приведет к перемещению элементов навигации вправо.

Я удалил все ненужные элементы, поскольку нам действительно нужно <nav>. Надеюсь, это поможет. Я включил только соответствующий CSS, чтобы вы лучше понимали происходящее. 

nav {
  display: flex;
  align-items: center;
  background-color: grey;
}

nav ul {
  display: flex;
  margin: 0 0 0 auto;
  list-style-type: none;
}

nav ul li {
  padding-right: 10px;
}
<nav>
    <img src="//placehold.it/150x50" alt="Stephen Crawford Photography Logo">
    <ul>
        <li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
        <li class="button"><a class="button-text" href="../html/about.html">about</a></li>
        <li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
    </ul>
</nav>
0 голосов
/ 15 мая 2018

Поместите ваш div с классом new в div с классом box 

<div class="box">
   <div class="new">...</div> 
</div>

, а затем измените ваш CSS, заменив .new ul на .new li

.new li{
  ...
 }
0 голосов
/ 15 мая 2018

Добавьте этот CSS к своему коду и <div class="new"> //content </div> внутри <div class="box"> </div>, вот так 

    .new ul li{
      display: inline-block;
    }


body{
  margin: 0;
  padding: 0;
  font-size: 100%;
}
.box {
    width: auto;
    height: 120px;
    background: grey;
    overflow: hidden;
    opacity: 0.85;
    position: relative;
    z-index: 3;
}
.box-contents {
    margin: auto;
    width: 100%;
    overflow: hidden;
    position: absolute;
    opacity: 1 !important;
    z-index: 4;
}
.new ul{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: lighter;
    letter-spacing: 2px;
    font-size: 2em;
    margin-top: 0;
    padding-top: 25px;
    float: right;
    margin-right: 100px;
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline;
    z-index: 99;
}

.new ul li{
  display: inline-block;
}

a{
    text-decoration: none;
    color: inherit;
}
img{
  display: block;
  float: left;
  width: 150px;
  margin: 10px 2%;
}
.images{
    display: block;
    width: 800px;
    float: inherit;
    margin: auto;
    padding-bottom: 20px;
    padding-top: 20px;
}
<body>
            <div class="box-contents">
    <img src="../images/LOGO.png" alt="Stephen Crawford Photography Logo">
        </div>

<div class="box">
<div class="new">
   <nav>
    <ul>
    <li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
    <li class="button"><a class="button-text" href="../html/about.html">about</a></li>
    <li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
    </ul>
   </nav>
    </div>
</div>

    <div>
        <img class="images" src="../images/DSC_7997-Edit.jpg" alt="Trevi Fountain, Rome">
        <img class="images" src="../images/DSC_1195.jpg" alt="Lake Hartwell">
        <img class="images" src="../images/DSC_7564-Edit.jpg" alt="Cinque Terre">
        <img class="images" src="../images/_DSC4277.jpg" alt="Park City">
        <img class="images" src="../images/LAC_6060.jpg" alt="Toccoa Falls">
        <img class="images" src="../images/DSC_7547-Edit.jpg" alt="Cinque Terre">
        <img class="images" src="../images/_DSC8776.jpg" alt="Campfire">
        <img class="images" src="../images/_DSC2203-Edit.jpg" alt="Milkyway">
        <img class="images" src="../images/_DSC8094-Edit.jpg" alt="Lake Hartwell">
    </div>
</body>
...