lga74 Опубликовано 15 мая, 2011 Жалоба Поделиться Опубликовано 15 мая, 2011 Не могу зафиксировать меню ! Хочу и вертикальное и горизонтальное зафиксировать. Применяю position: fixed, искажается все. Что не так? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Название сайта</title><meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><link href="style.css" rel="stylesheet" type="text/css" /></head><body><div id="container"> <div id="top"> <h1>Информатика</h1> </div> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="referat.html" id="current">Темы рефератов </a></li> <li><a href="litra.html">Литература</a></li> <li><a href="srs1.html">СРС №1</a></li> <li><a href="srs2.html">СРС №2</a></li> <li><a href="srs3.html">СРС №3</a></li> </ul> </div> <div id="leftnav"> <h2>Лекции</h2> <ul id="leftnavmenu"> <li><a href="lek1.html">Лекция №1 </a></li> <li><a href="lek2.html">Лекция №2</a></li> <li><a href="lek3.html">Лекция №3</a></li> <li><a href="lec4.html">Лекция №4</a></li> <li><a href="lek5.html"> Лекция №5</a></li> <li><a href="lek6.html">Лекция №6</a></li> <li><a href="lek7.html"> Лекция №7</a></li> <li><a href="lek8.html"> Лекция №8</a></li> <li><a href="lek9.html"> Лекция №9</a></li> <li><a href="lek10.html"> Лекция №10</a></li> <li><a href="lek11.html"> Лекция №11</a></li> <li><a href="lek12.html"> Лекция №12</a></li> <li><a href="lek13.html"> Лекция №13</a></li> <li><a href="lek14.html"> Лекция №14</a></li> <li><a href="lek15.html"> Лекция №15</a></li> <li><a href="lek16.html"> Лекция №16</a></li> </ul> <h2 align="center">Лабораторные рыботы </h2> <ul id="leftnavmenu"> <li><a href="lab1.html">Лабораторная работа №1 </a></li> <li><a href="lab2.html">Лабораторная работа №2</a></li> <li><a href="lab3.html">Лабораторная работа №3</a></li> <li><a href="lab4.html">Лабораторная работа №4</a></li> <li><a href="lab5.html"> Лабораторная работа №5</a></li> <li><a href="lab6.html">Лабораторная работа №6</a></li> <li><a href="lab7.html"> Лабораторная работа №7</a></li> <li><a href="lab8.html"> Лабораторная работа №8</a></li> <li><a href="lab9.html"> Лабораторная работа №9</a></li> <li><a href="lab10.html"> Лабораторная работа №10 </a></li> <li><a href="lab11.html"> Лабораторная работа №11 </a></li> <li><a href="lab12.html"> Лабораторная работа №12 </a></li> <li><a href="lab13.html"> Лабораторная работа №13 </a></li> <li><a href="lab14.html"> Лабораторная работа №14 </a></li> <li><a href="lab15.html"> Лабораторная работа №15 </a></li> <li><a href="lab16.html"> Лабораторная работа №16 </a></li> </ul> <p class="quote"> </p> </div> <div id="content"> <h2>Требования к уровню освоения программы курса</h2> <p>Студенты после прохождения курса “Информатика” обязаны:</p> <p>- усвоить полный объем программного материала и излагать его на высоком научном уровне;</p> <p>- изучить литературу к курсу и использовать ее при ответах;</p> <p>- свободно владеть методологией дисциплины, свободно излагать основные понятия дисциплины;</p> <p>- уметь творчески применить теоретические знания при решении практических задач, используя ЭВМ и современные методы исследования;</p> <p>- показать способность самостоятельно пополнять и обновлять знания в процессе дальнейшей учебы и профессиональной деятельности. </p> <h2> <strong> </strong></h2> <h2> </h2> <div align="center"><img src="2382638.jpg" width="458" height="546" /> </div> <h2> </h2> <p> </p> <p> </p> </div></div></body></html> css html, body { margin : 0;padding : 0;} body { font : 73% "Trebuchet MS", Arial, Helvetica, Tahoma, sans-serif;background : #f2f2f2 url(images/bg.gif) repeat-y top center;} /*WRAP*/ #container { width : 750px;margin : 0 auto;border : 10px solid #fff;line-height : 2em;background : #f2f2f2;color : #666;} /*TOP BANNER*/ #top { padding : 0;height : 100px;background : #8fb8cc url(images/head.jpg) no-repeat;color : #484500;} #top h1 { padding : 5px 0 0 25px;margin : 0;font-size : 140%;letter-spacing : 5px;} /*TOP NAVIGATION*/ #navcontainer { border-bottom : } #navcontainer ul { text-align : center;padding-bottom : 5px;padding-top : 5px;padding-left : 0;margin-top : 0;margin-bottom : 0;margin-left : 0;background : #036;color : white;width : 100%;font-family : Arial, Helvetica, sans-serif;line-height : 18px; } #navcontainer ul li { display : inline;padding-left : 0;padding-right : 0;padding-bottom : 5px;padding-top : 5px;} #navcontainer ul li a { padding-left : 10px;padding-right : 10px;padding-bottom : 5px;padding-top : 5px;color : white;text-decoration : none;border-right : 1px solid #fff;} #navcontainer ul li a:hover { background : #369;color : white;} #navcontainer #active { border-left : 1px solid #fff;} /*LEFT SIDEBAR*/ #leftnav { float : left;width : 200px;margin : 0;padding : 1em;} #leftnav p { margin : 0 0 1em 0;} #leftnavmenu { list-style : none;float : left;width : 200px;margin : 30px 0 30px 0;padding : 0;font-size : 0.9em;} #leftnavmenu ul { list-style : none;width : 150px;margin : 0 0 20px 0;padding : 0;font-size : 1.1em;} #leftnavmenu li { margin-bottom : 2px;} #leftnavmenu li a { font-weight : bold;height : 20px;text-decoration : none;color : #505050;background : #eaeaea url(images/up.gif) no-repeat left center;display : block;padding : 4px 0 0 30px;border-left : 0 solid #8fb8cc;} #leftnavmenu li a:hover { background : #8fb8cc url(images/right.gif) no-repeat left center;color : #fff;border-left : 0 solid #003366;} /*MAIN CONTENT*/ #content { margin-left : 240px;border-left : 10px solid #fff;padding : 1em;} #content p { padding : 0 2em 0 2em;} /*FOOTER*/ #footer { clear : both;margin : 0;padding : 0;font-size : 0.9em;border-top : 10px solid #fff;color : #fff;background : #8fb8cc;}* > html #footer img { margin : 0;} #footer p { padding : 0 0 0 5px;} /*TYPOGRAPHY*/ h2 { margin : 1em 0 0.5em 0;font-size : 130%;letter-spacing : 5px; text-align:center; }blockquote {padding : 5px;font-weight : bold;font-style : italic;color : #b29b35;} .quote { border-top : 1px solid #8fb8cc;padding : 10px;color : #036;} /*SEARH BAR*/form { float : right;margin-bottom : 20px;margin-right : 15px;} input.search { width : 100px;border : none;background : url(images/input.gif);padding : 4px;} input.login { width : 75px;border : none;background : url(images/logininput.gif);padding : 4px;} /*LINKS*/a:link, a:visited { color : #2480ad;background : transparent;text-decoration : none;} a:hover { color : #036;background : #8fb8cc;text-decoration : none;} a img { border : none;} /*IMAGESS*/.imgleft { float : left;padding : 5px;margin-right : 10px;} /*CLASS*/.post { background-color : #eee;padding : 3px;margin : 20px 10px 0 5px;border : 0 dashed #8a795d;font-size : 80%;} .post .date { background : url(images/clock.gif) no-repeat left center;padding-left : 15px;margin : 0 15px 0 5px;} .post .comments { background : url(images/comment.gif) no-repeat left center;padding-left : 15px;margin : 0 15px 0 5px;} .post .readmore { background : url(images/document.gif) no-repeat left center;padding-left : 15px;margin : 0 15px 0 5px;} Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
MaDW Опубликовано 16 мая, 2011 Жалоба Поделиться Опубликовано 16 мая, 2011 Применяю position: fixed Эт где Вы его применяете? Нигде в коде его не увидел. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
lga74 Опубликовано 16 мая, 2011 Автор Жалоба Поделиться Опубликовано 16 мая, 2011 (изменено) Простите, случайно скопировала вариант без position: fixed. Использовала для #top { padding : 0; height : 100px; background : #8fb8cc url(images/head.jpg) no-repeat; color : #484500; position: fixed ; } #leftnavmenu { list-style : none; float : left; width : 200px; margin : 30px 0 30px 0; padding : 0; font-size : 0.9em; position: fixed ;} } #navcontainer ul { text-align : center; padding-bottom : 5px; padding-top : 5px; padding-left : 0; margin-top : 0; margin-bottom : 0; margin-left : 0; background : #036; color : white; width : 100%; font-family : Arial, Helvetica, sans-serif; line-height : 18px; position: fixed; } Пробовала разные варианты, не получается Изменено 16 мая, 2011 пользователем lga74 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Griff Опубликовано 18 сентября, 2011 Жалоба Поделиться Опубликовано 18 сентября, 2011 (изменено) Здравствуйте. Попробовал поправить ваш код, и есть несколько проблем. При применении к блоку position: fixed он перестает видеться другими блоками, то бишь игнорируется. Следовательно, при своем размещении или отступах они отталкиваются от предыдущих блоков или родителя. У вас сместились вверх разные элементы, попробуем их выровнять. Что бы опустить позиционированный фиксировано блок горизонтально меню примените к #navcontainer ul { width : 750px;top: 100px;} Свойство топ даст отступ сверху ровно на ширину блока шапки. У него высота 100px, и мы следовательно так же задаем отступ 100. Далее устанавливаем ширину. Для чего? Ширину наш блок пытается считать от размера страницы. Хоть он и начинается в начале своего родителя. Мы же задаем ему фиксированную ширину, ровно такую, как и у родителя. #container { width : 750px;} Теперь же мы подходим к самому интересному, боковой вертикальной навигации. Поскольку она тоже позиционирована фиксировано, остальные блоки ее игнорируют. Поведение всех marginов меняется. Два вертикальных блока с навигацией "Лекции" и "Лабораторные" наползают друг на друга. Каждый из них фиксирован, потому следующему его не видит, и ему нужно задать такой отступ от верха, чтобы влез предыдущий. Но так как это навигация, размер отступа может быть динамичным. И значение должно меняться динамично. Такой вариант не подходит. Есть выход. Можно совместить оба блока к одному родителю и именно его зафиксировать. Имеющиеся два блока с id #leftnavmenu лежат в блоке #leftnav, ему то мы и перенесем от них значение fixed. В результате меню возвращается на привычные позиции, все работает, есть незначительные проблемы с отступами, но их просто нужно стереть и задать новые, в связи с новыми точками отсчета. Но опять таки есть проблема, меню не помещаются в экран и прокрутить окно вниз чтобы увидеть их конец невозможно. Это логично, так как если объект позиционирован при помощи fixed он имеет четкое положение в видимой(!) части страницы, в области просмотра браузера. За эту область он не может быть смещен при прокрутке, потому даже если он помещается в область просмотра не весь, прокрутки не будет. Я сомневаюсь что вам удастся найти решение для фиксированного положения вертикального меню. Мое лично мнение, что фиксировать постоянные важные элементы страницы не стоит. Это не практично и, главное, не привычно пользователю. Можно позиционировать панель инструментов на определенных страницах, например, в редакторе, в редких случаях - корзину, но не навигацию. Если хотите рамку с двумя блоками навигации, вмещающимися в страницу, а если нет - прокручивающимися - стройте страницу на фреймах. Одни фреймы будут содержать навигацию и не будут меняться, в других будут открываться страницы с содержимым по ссылкам. Но у вас появится проблема с предоставлением ссылок на разные страницы контента, так как они не будут нести в себе навигации, а родитель всегда будет иметь один адрес, придется писать скрипт проверяющий наличие навигации и достраивающий ее. В любом случае, я бы рекомендовал взять классическую структуру с шапкой и меню. И еще, у вас #leftnavmenu это id, лучше использовать классы, так как это повторяющийся элемент, то есть .leftnavmenu. Изменено 18 сентября, 2011 пользователем Griff 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.