Размещение элемента на странице - PullRequest
Новая
       10

Размещение элемента на странице

0 голосов
/ 28 февраля 2019

Я новичок в html и css и пытаюсь сделать простую страницу.К сожалению, у меня возникают трудности с размещением основного в меню навигации.Может быть, я хочу разместить его около 100px под меню навигации.Я пытался изменить положение на относительное, абсолютное и т. Д. Но я почти не представляю, что я делаю.Проблема в том, что даже когда я назначаю своему основному положению хорошую позицию, когда я заполняю его большим количеством контента, он автоматически поднимается вверх (не расширяет только нижнюю часть) и переходит через меню и скрывает его.Я пытаюсь как-то «заблокировать» верхнюю часть main, чтобы она всегда была на одном и том же расстоянии от моей навигации.Если я помещаю много текста в свой основной файл, я хочу, чтобы он расширил свою нижнюю часть, а не изменил свою позицию.

Мой код здесь: https://www.w3schools.com/code/tryit.asp?filename=G1M05IYUPR2H.

Может кто-нибудь дать мнепосоветуйте как это сделать?Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Надеюсь, это поможет.убрал position:relative из .bg-image, добавил position:absolute в main и дал top для выравнивания.спасибо 

body, html {
  margin: 0;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: black;
}

.bg-image {
    background-image: url(http://www.stix.bg/wp-content/themes/stix-theme/images/stix1.jpg);
    filter: blur(8px);
    -webkit-filter: blur(8px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    background-attachment: fixed;
 }     
 .navigation {
   background-color: rgba(0, 0, 0, 0.4);
   position: absolute; 
  left: 50%;
  top: 15%;
  transform: translate(-50%,-50%);
  width: 80%;
  font-family:Arial;
  border-radius: 10px;
  justify-content: space-around;
  display: flex;
  border: 1px solid #f1f1f1;
}
main {
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.4);
    color: white;
    font-weight: bold;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    top: 310px;
}
a, a:visited{
  color:white;
  text-decoration: none;
  cursor:pointer;
}
a:hover, a:active {
  color: white;
  background-color: rgba(162, 44, 255, 0.5);
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  box-shadow: inset 0 -4px 20px 2px rgba(162, 44, 255, 1); 
}
.link {
  padding: 10px;
  border-radius: 10px 0 0 10px;
  width: 100%;
  text-align: center;
}
.link2 {
  padding: 10px;
  border-radius: 0 0 0 0;
  width: 100%;
  text-align: center;
}
.link3 {
  padding: 10px;
  border-radius: 0px 10px 10px 0px;
  width: 100%;
  text-align: center;
}
p {
  text-align: center;
  margin-left: 25px;
  margin-right: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg-image"></div>
<div class="navigation">
<a class="link" href="#"> Menu 1 </a>
<a class="link2" href="#"> Menu 2 </a>
<a class="link2" href="#"> Menu 3 </a>
<a class="link2" href="#"> Menu 4 </a>
<a class="link3" href="#"> Menu 5 </a>
</ul>
</div>
<main>
<h1 style="font-size:30px">Text here</h1>
  <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>
0 голосов
/ 28 февраля 2019

https://www.w3schools.com/code/tryit.asp?filename=G1M0W1037H57

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body, html {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background-color: black;
    }
    
    .bg-image {
      background-image: url("http://www.stix.bg/wp-content/themes/stix-theme/images/stix1.jpg");
      filter: blur(8px);
      -webkit-filter: blur(8px);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      position: absolute;
      margin-top: -300px; /*compensate for margin below*/
      padding: 0;
      height: 100%;
      width: 100%;
    }
    
    .navigation {
      background-color: rgba(0, 0, 0, 0.4);
      position: absolute;
      left: 50%;
      top: 15%;
      transform: translate(-50%, -50%);
      width: 80%;
      font-family: Arial;
      border-radius: 10px;
      justify-content: space-around;
      display: flex;
      border: 1px solid #f1f1f1;
    }
    
    main {
      background-color: rgb(0, 0, 0);
      background-color: rgba(0, 0, 0, 0.4);
      color: white;
      font-weight: bold;
      border: 1px solid #f1f1f1;
      border-radius: 10px;
      position: relative;
      left: 50%;
      margin-top: 200px; /** <--set distance here**/
      transform: translate(-50%);
      width: 80%;
      text-align: center;
    }
    
    ul li {
      float: left;
      text-decoration: none;
      list-style: none;
    }
    
    a,
    a:visited {
      color: white;
      text-decoration: none;
      cursor: pointer;
    }
    
    a:hover, a:active {
      color: white;
      background-color: rgba(162, 44, 255, 0.5);
      padding-top: 10px;
      padding-bottom: 10px;
      font-weight: bold;
      box-shadow: inset 0 -4px 20px 2px rgba(162, 44, 255, 1);
    }
    
    .link {
      padding: 10px;
      border-radius: 10px 0 0 10px;
      width: 100%;
      text-align: center;
    }
    
    .link2 {
      padding: 10px;
      border-radius: 0 0 0 0;
      width: 100%;
      text-align: center;
    }
    
    .link3 {
      padding: 10px;
      border-radius: 0px 10px 10px 0px;
      width: 100%;
      text-align: center;
    }
    
    p {
      text-align: center;
      margin-left: 25px;
      margin-right: 25px;
    }
  </style>
</head>

<body>
  <div class="bg-image"></div>
  <div class="navigation">
    <ul>
      <li><a class="link" href="#"> Menu 1 </a></li>
      <li><a class="link2" href="#"> Menu 2 </a></li>
      <li><a class="link2" href="#"> Menu 3 </a></li>
      <li><a class="link2" href="#"> Menu 4 </a></li>
      <li><a class="link3" href="#"> Menu 5 </a></li>
    </ul>
  </div>
  <main>
    <h1 style="font-size:30px">Text here</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

</body>

</html>
...