Закрепить div после другого элемента

279
21 декабря 2016, 02:55

Код страницы:

    <html>
    <head>
    <title>Хоккейная экипировка</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <header><div class = "headBlock" id="blink">Хоккейная экипировка</div></header>
    <div class = ""></div>
    <div class = "buttonPanel">
        <a href="#" class="button25" onclick="location.href='contacts.html';">Контакты</a>
        <a href="#" class="button25" onclick="location.href='location.html';">Где мы находимся</a>
        <a href="#" class="button25" onclick="location.href='galery.html';">Галерея</a>
        <a href="#" class="button25" onclick="location.href='mail.html';">Написать консультанту</a>
        <a href="#" class="button25">Отзывы клиентов</a>
    </div>
    <div class = "menu">
        <form class="form-1" action="autorization.html"  method ="post"> Авторизация
            <p class="field">
                <input type="text" name="login" placeholder="Логин">
                <i class="icon-user icon-large"></i>
            </p>
                <p class="field">
                <input type="password" name="password" placeholder="Пароль">
                <i class="icon-lock icon-large"></i>
            </p>       
            <p class="submit">
                <button type="submit" name="submit"><i class="icon-arrow-right icon-large">ОК</i></button>
            </p>
            <a href="./registration.html">Регистрация</a>
            </form>
        <table>
            <thead>
                <th>Главное меню</th>
               </thead>
               <tbody>
                <tr><td>Каталог</td></tr>
                <tr><td>Наши поставщики</td></tr>
                <tr><td onclick="location.href='time.html';">Сроки поставок и график работы</td></tr>
                <tr><td onclick="location.href='floor.html';">Расчет стоимости полового покрытия</tr>
                <tr><td onclick="location.href='wallpapers.html';">Расчет стоимости обоев</tr>
                <tr><td onclick="location.href='colors.html';">Расчет стоимости лако-красочных изделий</tr>
                <tr><td onclick="location.href='blocks.html';">Расчет стоимости газосиликатных блоков</tr>
                <tr><td onclick="location.href='brick.html';">Расчет стоимости силикатного кирпича</tr>
                <tr><td onclick="location.href='cement.html';">Расчет стоимости цемента</tr>
                <tr><td onclick="location.href='roof.html';">Расчет стоимости шифера</tr>
                <tr><td onclick="location.href='discount.html';">Расчет скидки</tr>
                <tr><td>О компании</tr>
               </tbody>
         </table>
         <div id="blink"><br>Зарегестрируйтесь и получите больше возможностей<br></div>
    </div>
    <div class = "centerBlock" id="result">
        <h2>О хоккейной экипировке</h2>
        <div align = "left">
        <p>Хоккей является одной из самых жестких и быстрых командных игр. 
        12 человек в полном комплекте защиты борются за одну-единственную шайбу, которая, при очень сильном ударе, развивает приличную скорость и способна нанести серьезную травму игроку.
        Однако это не единственная опасность в игре – травмироваться можно и лезвием конька, столкновением с соперником или бортом площадки, и после сильного удара клюшкой. 
        К счастью, большинства повреждений можно с легкостью избежать, если купить хоккейную экипировку высокого качества и грамотно ею пользоваться.</p>
        <p>Примером для подражания является хоккейная экипировка Bauer, которую предпочитает большинство команд КХЛ. 
        Купить краги этой компании – значит получить преимущество в умении управляться с клюшкой и шайбой. 
        Широкий ассортимент предоставляемых товаров для игры в хоккей – одно из преимуществ этой американской марки.
        Разумеется, конкуренты не дремлют и хоккейная экипировка Reebok вместе с дочерней компанией CCM стала одной из самых популярных за рубежом, среди команд Национальной Хоккейной Лиги.
        Зачастую перед начинающими хоккеистами встает дилемма – купить хоккейные краги которой из этих фирм будет предпочтительнее? В таком случае всё решают собственные ощущения от ношения той или иной амуниции. </p>
        </div>
    </div>
    <footer>
        <a href="#" class="button" onclick="location.href='location.html';">О разработчике</a>
    </footer>
    <script src = "js/loadPages.js"></script>
</body>

Нужно "намертво" закрепить меню после heder, чтобы не ездило вверх-вниз.

CSS:

  @import url(authorizationForm.css);
  @import url(button.css);
  @import url(forms.css);
header{
background: url('img/Myheader.jpg') no-repeat;
background-position: absolute;  
background-size:100%;
border-radius: 5px 5px 5px 5px;
border: 5px solid white;
margin: 0 5% 1% 5%;
-webkit-box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75);
box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75);
}
h{
display: block;
margin: 0 auto;
color: #343434;
font-weight: normal;
font-family: 'Ultra', sans-serif;  
font-size: 20px;
line-height: 20px;
text-transform: uppercase;
text-shadow: 0 2px white, 0 3px #777;
}
div.menu{
font-family: 'Arial';
background: #C6CCD3;
width: 20%;
min-height: 30%;
border-radius: 5px 5px 5px 5px;
margin: 0 5% 5% 6%;
padding: 0.5% 0.5% 0.5% 0.5%;
float: left;
text-align: center;
opacity: 0.9;
}
body{
background: url('img/fon.jpg') repeat;
background-size: 100%;
}
table {
width: 90%;
min-height: 25%;
padding: 10px;
text-align: center;
margin: 5% 5% 0 5%;
border-collapse: collapse; 
background: #FFF5EE;
}
td, th {
height: 7%;
padding: 3px; 
border: 1px solid #000;
}
th {
background: #696969;
color: #333;
}
tbody tr:hover {
background: #D1FFA3; 
color: #29331F; 
font: 25pt/25pt times new roman;
text-align: center;
}
div.centerBlock{
text-align: center;
float: left;
max-width: 60%;
min-width: 60%;
margin: 0 1% 1% 1%;
border-radius: 60px 60px 0 0 / 5px 5px 0 0;
background:  #FFF5EE;
-webkit-box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75);
box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75);
padding: 20px 20px 20px 20px;
background-image:linear-gradient(to top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
 }
div.buttonPanel{
position: fixed;
top: 10%;
width: 100%;
height: 5%;
margin: 0 5% 1% 5%;
padding: 1% 1% 1% 1%;
font-size:12px;
}
div.headBlock{
width: 20%;
margin: 2% 0 0 2.5%;
font: 40pt/40pt Buxton Sketch;
color: white;
text-align: center;
}
footer{
max-width: 90%;
height: 5%;
text-align: center;
margin: 50% 5% 0 1%;
position: fixed; 
left: 5%; bottom: 25; /* Левый нижний угол */
}
Answer 1

Если я правильно понял вопрос, то вот так будет нормально

body {height:3000px} 
header{ 
  background: url('img/Myheader.jpg') no-repeat; 
  background-position: absolute;   
  background-size:100%; 
  border-radius: 5px 5px 5px 5px; 
  border: 5px solid white; 
  margin: 0 5% 1% 5%; 
  -webkit-box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75); 
  -moz-box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75); 
  box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75); 
} 
div.buttonPanel{ 
  position: absolute; /* fixed => absolute */ 
  top: 16%; 
  width: 100%; 
  height: 5%; 
  margin: 0 5% 1% 5%; 
  padding: 1% 1% 1% 1%; 
  font-size:12px; 
}
<header><div class = "headBlock" id="blink">Хоккейная экипировка</div></header> 
<div class = "buttonPanel"> 
  <a href="#" class="button25" onclick="location.href='contacts.html';">Контакты</a> 
  <a href="#" class="button25" onclick="location.href='location.html';">Где мы находимся</a> 
  <a href="#" class="button25" onclick="location.href='galery.html';">Галерея</a> 
  <a href="#" class="button25" onclick="location.href='mail.html';">Написать консультанту</a> 
  <a href="#" class="button25">Отзывы клиентов</a> 
</div>

Answer 2
position: relative;
top: 100%;
left: 20px;

значения left править под нужные, только надо засунуть меню в блок header, а для более точного ответа нужен ваш css, так как не совсем ясно устройство блоков. В данном случае, меню будет идти сразу после header, но другие элементы оно не сдвинет ниже.

READ ALSO
Почему может не работать json?
HTML

Почему может не работать json?

код

 273
Как можно объединить ссылки?
HTML

Как можно объединить ссылки?

Привет! Имеется прайсНеобходимо, чтобы при наведении курсора на название продукта выделялась и цена данного продукта

 286
Как использовать данные из гугл скрипта при построении диалогового окна
HTML

Как использовать данные из гугл скрипта при построении диалогового окна

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

 235
Получать значения checkbox
HTML

Получать значения checkbox

Как получать значения checkbox, которые выбрал пользователь? value не вариант, ибо это показатель правильности/неправильности ответа на вопросname...

 292