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

311

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, но другие элементы оно не сдвинет ниже.

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

код

305

HTML

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

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

342

HTML

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

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

269

HTML

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

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

320