Не удается отобразить изображения, текст и т. Д. Рядом с моим меню вертикальной навигации. - PullRequest
Новая
       27

Не удается отобразить изображения, текст и т. Д. Рядом с моим меню вертикальной навигации.

0 голосов
/ 28 апреля 2018

Я пытаюсь создать веб-сайт в первый раз, и у меня возникают некоторые проблемы с правильным макетом.

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

рассматриваемая страница находится ниже ... извините за вероятно плохо написанный html. 

  .vertical-menu {
  width: 200px;
}

.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.vertical-menu a:hover {
  background-color: #ddd;
}

.vertical-menu a.active {
  background-color: #ccc;
  color: white;
}

div.spacer {
  font-size: 0;
  height: 0px;
  line-height: 0;
}

div {
  border: 0px solid black;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-right: 50px;
  margin-left: 50px;
  background-color: white;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

  <center>
    <h1 style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">music etc.</h1>
  </center>

  <div class=“panel”>
    <left>
      <img src=img/glassparklogodraft1yellow.png height=215 width=215>
    </left>

  </div>

  <div class="spacer"></div>

  <div class=“panel”>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </div>

  <body>

    <div class="vertical-menu">
      <a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=main.html>home</a>
      <a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=magazine.html>magazine</a>
      <a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=visual.html>visual content</a>
      <a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=audio.html>audio</a>
      <a style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;" href=contact.html>contact</a>
    </div>


  </body>

  <body>
    <center>
      <p>2nd floor - the fabled sound
        <p>

          <a href=gpmaudio/2ndfloorthefabledsound.zip download>

            <img src=img/fabledsoundcover.png width=200 height=200>

          </a>
    </center>
  </body>

  <div class=“spacer”></div>

  <body>
    <center>
      <p>2nd floor - the lebron bonus
        <p>

          <a href=gpmaudio/2ndfloorthelebronbonus.zip download>

            <img src=img/lebronbonuscover.jpg width=200 height=200>

          </a>
    </center>
  </body>

</html>

1 Ответ

0 голосов
/ 28 апреля 2018

Добавьте свойство CSS, position к классу vertical-menu и установите для него absolute

.vertical-menu {
    position: absolute;
}

Более подробную информацию о свойствах позиции CSS можно найти здесь W3C или MDN .

...