Плавающее меню (position: fixed и прочее) (проблемы)

frankus · March 14, 2013

Уважаеме форумчане! Прошу помощи.

1) Не получаеться настроить "адаптивность" меню под разные мониторы. Если недостаточный размер экрана, то содержание меню справа (style="float: right;") как и надо наезжает на первое, но при этом, нижнее меню (третье, блок nav_top_2) с поиском это всё закрывает, а я хочу, чтобы оно сезжало ниже.

2) Нужно центрировать поисковые элементы (содержимое nav_top_2).

3) Нужно сделать, чтобы начало содержимого страницы (там где текст "Start"), т.е. начало блока с контентом (id="content") шло после этого меню, т.е., чтобы на маленьком экране, меню не перекрывало контент, а наоборот, контент сезжал вниз.

Заранее благодарен.

Splin · March 14, 2013

Приведите код в порядок, а то никто не хочет даже отвечать(

frankus · March 14, 2013

Splin, подскажите, что конкретно привести в порядок?

Березовский · March 14, 2013

Splin, подскажите, что конкретно привести в порядок?

код :-)

frankus · March 15, 2013

Вынес цсс в отдельный блок и убрал лишнее: http://jsfiddle.net/rgSFb/1/

Это имелось в виду? Что ещё нужно исправить?

Березовский · March 15, 2013

Вынес цсс в отдельный блок и убрал лишнее: http://jsfiddle.net/rgSFb/1/
Это имелось в виду? Что ещё нужно исправить?

Может это поможет)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<style type="text/css">
body {
font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font: bold 36px/100% Arial, Helvetica, sans-serif;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#header {
height: 180px;
position: relative;
}
#content {
width: 600px;
float: left;
}
#sidebar {
position: relative;
width: 300px;
float: right;
}
#footer {
clear: both;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {

#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
/* border & guideline (you can ignore these) */
#content {
background: #f8f8f8;
}
#sidebar {
background: #f0efef;
}
#header, #content, #sidebar {
margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
border: solid 1px #ccc;
}
</style>
</head>
<body>
<div id="pagewrap">
<div id="header">
<h1>Header</h1>
<p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p>

</div>
<div id="content">
<h2>Content</h2>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
<div id="sidebar">
<h3>Sidebar</h3>
<p>text</p>
<p>text</p>
</div>

<div id="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>

Edited March 15, 2013 by Березовский

frankus · March 15, 2013

Березовский, нет.

Splin · March 16, 2013

Почитайте про адаптивную верстку.

frankus · March 16, 2013

Почитайте про адаптивную верстку.

Возможно сделать только исключительно ей? Есть ещё вариант JS, как я понимаю, это проще будет?

Березовский · March 19, 2013

Почитайте про адаптивную верстку.
Возможно сделать только исключительно ей? Есть ещё вариант JS, как я понимаю, это проще будет?

смотря в чем больше разбираешься) если и там и там плохо я бы рекомендовал css все-таки там проще чем в скриптах, лично мне.

в создании адаптивных сайтов лично я пользуюсь @media only screen and (max-width: 1025px) { тут пишете свои стили для конкретного размера} , размер как видите указан в max-width то есть ДО 1025 пикселей будут действовать эти стили. еще момент иногда стили в @media only screen почему-то не хотят перебивать основные стили (если они были) тогда я ставлю !important для нужных классов...

frankus · March 19, 2013

Старые вопросы:

Первый вопрос, как сделать так, чтобы id="content" шёл после фиксированного контента в id="nav_top", а не лежал под ним? Отступы в определённый пикселях не подходит, так если и делать, то всё фиксированное содержание будет менять высоту.

Второй вопрос, как центрировать содержимое в nav_top_2?

Код http://jsfiddle.net/rgSFb/1/

Edited March 19, 2013 by frankus

Sign In

Плавающее меню (position: fixed и прочее) (проблемы)

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information