Jump to content
  • 0

Фиксированное меню

max2012

Asked by max2012,

 Share

Question

max2012 Explorer

max2012

Posted
Posted (edited)

В опере иногда сьезжает


#wrapper{
margin:50px auto 0px auto;
width:960px;
height:auto;
}
aside{
width:309px;
padding:10px;
float:left;
height:auto;
border-collapse: collapse;
}
article{
width:609px;
padding:10px;
float:left;
height:auto;
border-left:1px solid #B9E3F3;
border-collapse: collapse;
}

.clear{clear:both;}

footer{
border-top:1px solid #B9E3F3;
width:940px;
padding:10px;
height:auto;
}
nav{
position:fixed;
top:0;
left:0;
padding:0px;
margin:0px;
width:100%;
height:50px;
background:black;
}


<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>Sign in Mysite</title>
</head>
<body>
<nav>
</nav>
<div id="wrapper">
<aside>
Блок
</aside>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisl non justo feugiat viverra. Donec eu quam sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus, velit vel auctor porta, nunc metus venenatis velit, vel vestibulum libero sapien in mi. Aliquam erat volutpat. Sed nibh lacus, bibendum vitae aliquam sit amet, lacinia non justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel enim nec velit pellentesque porttitor. Mauris quis tincidunt dui. Cras lacinia dapibus dolor ac aliquet.
Aliquam malesuada orci vel lacus malesuada in consectetur dui malesuada. Integer suscipit libero a erat fringilla fermentum. Sed ligula leo, sollicitudin tristique molestie ut, fermentum et nunc. Praesent tristique mauris eget sem ullamcorper a posuere urna eleifend. Maecenas tincidunt bibendum leo et aliquet. Sed et leo odio. Proin eget justo libero, eu viverra mi.
Ut dapibus, lorem sed molestie placerat, nibh est pretium ligula, ornare vestibulum felis lectus ut metus. Mauris tellus risus, laoreet placerat consequat et, porta in mi. Aliquam rhoncus, eros sit amet tincidunt venenatis, elit ipsum feugiat leo, eu ornare ante arcu quis orci. Duis turpis nibh, egestas a elementum sit amet, elementum ac tortor. Mauris et elit mauris. Fusce pretium congue nunc vitae interdum. Vivamus ut sem at nibh feugiat vehicula. Nullam et facilisis eros. Sed aliquam, dui sit amet porttitor tempus, tellus augue pharetra orci, sed tincidunt erat erat nec ante. Pellentesque venenatis lacinia varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eget elit diam. Sed sed felis quam.
Sed condimentum commodo dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean mattis metus porta orci consequat aliquet. Maecenas vulputate dictum tempor. Sed rhoncus velit non odio vestibulum lacinia. Integer felis diam, venenatis et feugiat sed, pellentesque at diam. Suspendisse et varius velit. Proin ligula augue, ultrices vitae auctor eget, fringilla non nulla. Sed eu velit nec ligula cursus pellentesque ut eu ante. Nullam ullamcorper urna sed nunc auctor aliquam. Sed suscipit mi quis enim ornare sed congue odio mattis. Integer volutpat justo faucibus eros scelerisque rhoncus. Donec elementum, urna ut sodales sodales, dui sapien tempus erat, et dignissim tortor arcu vel augue. Aenean pretium volutpat tellus ultricies vestibulum. Etiam pretium tellus id arcu dictum convallis. Nulla a orci turpis, tristique fermentum sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisl non justo feugiat viverra. Donec eu quam sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus, velit vel auctor porta, nunc metus venenatis velit, vel vestibulum libero sapien in mi. Aliquam erat volutpat. Sed nibh lacus, bibendum vitae aliquam sit amet, lacinia non justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel enim nec velit pellentesque porttitor. Mauris quis tincidunt dui. Cras lacinia dapibus dolor ac aliquet. Aliquam malesuada orci vel lacus malesuada in consectetur dui malesuada. Integer suscipit libero a erat fringilla fermentum. Sed ligula leo, sollicitudin tristique molestie ut, fermentum et nunc. Praesent tristique mauris eget sem ullamcorper a posuere urna eleifend. Maecenas tincidunt bibendum leo et aliquet. Sed et leo odio. Proin eget justo libero, eu viverra mi. Ut dapibus, lorem sed molestie placerat, nibh est pretium ligula, ornare vestibulum felis lectus ut metus. Mauris tellus risus, laoreet placerat consequat et, porta in mi. Aliquam rhoncus, eros sit amet tincidunt venenatis, elit ipsum feugiat leo, eu ornare ante arcu quis orci. Duis turpis nibh, egestas a elementum sit amet, elementum ac tortor. Mauris et elit mauris. Fusce pretium congue nunc vitae interdum. Vivamus ut sem at nibh feugiat vehicula. Nullam et facilisis eros. Sed aliquam, dui sit amet porttitor tempus, tellus augue pharetra orci, sed tincidunt erat erat nec ante. Pellentesque venenatis lacinia varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eget elit diam. Sed sed felis quam. Sed condimentum commodo dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean mattis metus porta orci consequat aliquet. Maecenas vulputate dictum tempor. Sed rhoncus velit non odio vestibulum lacinia. Integer felis diam, venenatis et feugiat sed, pellentesque at diam. Suspendisse et varius velit. Proin ligula augue, ultrices vitae auctor eget, fringilla non nulla. Sed eu velit nec ligula cursus pellentesque ut eu ante. Nullam ullamcorper urna sed nunc auctor aliquam. Sed suscipit mi quis enim ornare sed congue odio mattis. Integer volutpat justo faucibus eros scelerisque rhoncus. Donec elementum, urna ut sodales sodales, dui sapien tempus erat, et dignissim tortor arcu vel augue. Aenean pretium volutpat tellus ultricies vestibulum. Etiam pretium tellus id arcu dictum convallis. Nulla a orci turpis, tristique fermentum sapien.
</article>
<div class="clear"></div>
<footer>
Футер
</footer>
</div>
</body>
</html>

Edited by max2012
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Алеся
      Размещение фоновой картинки, заключенной в div, на всю ширину вьюпорта
      By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • Etaro
      Менюшка :<
      By Etaro
      Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.


    • Sve
      Проблема с меню на CSS
      By Sve
      Всем привет :)
      Пытаюсь сверстать свой первый макет, и возникла проблема с меню. Должно быть, как на первой картинке - это макет из фш.
      Выходит, как на второй, меню спадает вниз. 
      Прошу, пожалуйста, тыкните на ошибку в коде, и, если есть возможность, объясните. буду очень рада ответам!
      Код кидаю:
      *{margin: 0; padding: 0; outline: 0} .clearfix::after { content:""; height: 0; display: block; clear: both; } div .container { width: 1300px; margin: auto; background: #fff; } header { width: 100%; height: 130px; border-top: 8px solid #a292b3; position: fixed; z-index: 2; } .logo { margin: 30px 0 20px 170px; } .menu { float: right; margin-right: 145px; } .menu li { display: inline-block; list-style: none; padding: 35px; }  


    • Рома
      Выравнивание блока меню относительно кнопки вызова
      By Рома
      Доброго дня!
      Есть многоуровневое меню (картинка 1)
      Жму на кнопку Каталог - открывается блок с дополнительным содержимым. В этом содержимом есть подменю и под-под меню. Проблема тут такая часть содержимого из правого под-под меню не умещается на экране. Все потому, что блок с доп. содержимым относительно кнопки КАТАЛОГ открывается с выравниванием по левой своей части.
      Вот код в этом положении
      .cs-menu-container .dropdown, ul.type-category li .sub-cate { position: absolute; top: auto; left: 0; z-index: 1000; float: none; min-width: 230px; padding: 0; margin: 0; border: 1px solid #cccccc; border-top:2px solid #c04a62; background: #fff; Что я делаю: 
      меняю значение left: на -200px;
      В итоге получаю нужное мне расположение (картинка 2)
      Но тут же исправляя одно я получаю вторую проблему: блок содержимого кнопки ИНФОРМАЦИЯ уходит далеко влево от самой кнопки вызова (картинка 3)
       
      Какие мне элементы использовать в коде, чтобы выравнивание всех блоков меню (который появляется при нажатии на кнопку) происходило по центру самого блока относительно кнопки? Как правильно выровнять блок относительно кнопки?
       



    • gumuch
      Проблемы с позиционированием текста
      By gumuch
      Добрый день. Нуждаюсь в помощи/совете! 
      В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить..., игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так? 
      Сам сайт: http://2metra.com/
      Вот код который я прописал:
       
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept