mumka 0 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 хтмл <div class="nav"> <ul> <li><img src="images/menu-l.jpg" alt="ПРОСТАВИТЬ" /><img src="images/menu-s.jpg" alt="ПРОСТАВИТЬ" /><a href="index.html">Главная</a><img src="images/menu-s.jpg" alt="ПРОСТАВИТЬ" /></li> <li><a href="teachers.html">Преподаватели</a><img src="images/menu-s.jpg" alt="ПРОСТАВИТЬ" /></li> <li><a href="exams.html">Экзамены</a><img src="images/menu-s.jpg" alt="ПРОСТАВИТЬ" /></li> <li><a href="course.html">Курсы</a><img src="images/menu-s.jpg" alt="ПРОСТАВИТЬ" /></li> <li><a href="childs.html">Детям</a><img src="images/menu-s.jpg" alt="ПРОСТАВИТЬ" /></li> <li><a href="contacts.html">Контакты</a><img src="images/menu-s.jpg" alt="ПРОСТАВИТЬ" /><img src="images/menu-r.jpg" alt="ПРОСТАВИТЬ" /></li> </ul> </div> css .nav {margin: 0px; padding: 0px; width: 100%;} .nav li {display: inline; padding-top: 30px;} .nav a {float: both; padding: 10px 0px; background-image: url("images/menu-m.jpg"); background-repeat: repeat-x; text-decoration: none;} результат укажите плиз где копать? Ссылка на сообщение Поделиться на других сайтах
lifestar 18 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 попробуй так: .nav {margin: 0px; padding: 0px; width: 100%;} .nav li {float:left} .nav a {display:block; padding: 10px 0px; background-image: url("images/menu-m.jpg"); background-repeat: repeat-x; text-decoration: none;} Ссылка на сообщение Поделиться на других сайтах
mumka 0 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Автор попробуй так: .nav {margin: 0px; padding: 0px; width: 100%;} .nav li {float:left} .nav a {display:block; padding: 10px 0px; background-image: url("images/menu-m.jpg"); background-repeat: repeat-x; text-decoration: none;} так еще хуже стало, чем было Ссылка на сообщение Поделиться на других сайтах
lifestar 18 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 так еще хуже стало, чем былону так покажи Ссылка на сообщение Поделиться на других сайтах
mumka 0 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Автор вот Ссылка на сообщение Поделиться на других сайтах
lifestar 18 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 есть ещё вариант) <div class="nav"> <ul> <li><img src="images/menu-l.jpg" alt="ПРОСТАВИТЬ" /></li> <li class="s"></li> <li><a href="index.html">Главная</a></li> <li class="s"></li> <li><a href="teachers.html">Преподаватели</a></li> <li class="s"></li> <li><a href="exams.html">Экзамены</a></li> <li class="s"></li> <li><a href="course.html">Курсы</a></li> <li class="s"></li> <li><a href="childs.html">Детям</a></li> <li class="s"></li> <li><a href="contacts.html">Контакты</a></li> <li class="s"></li> <li><img src="images/menu-r.jpg" alt="ПРОСТАВИТЬ" /></li> </ul> </div> и CSS .nav { margin: 0; padding: 0; width: 100%; } .nav li { float:left } .nav li.s { background:url(images/menu-s.jpg); width:20px; } .nav li a { display:block; padding: 10px 0; background: url(images/menu-m.jpg) repeat-x; text-decoration: none; } Где width:20px; - это ширина картинки images/menu-s.jpg Ссылка на сообщение Поделиться на других сайтах
mumka 0 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Автор опять все плохо list-style: none; - разве не надо ставить? или просто вы попытались схитрить заменив маркер изображением? может быть в таблицу это как то запихать? Ссылка на сообщение Поделиться на других сайтах
EzS 2 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Блин, ну поиском сложно пользоваться? http://www.13styles.com/ Вопросы, честное слово, детские с подтекстом "сделайте все за меня" Ссылка на сообщение Поделиться на других сайтах
mumka 0 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Автор Блин, ну поиском сложно пользоваться? http://www.13styles.com/ Вопросы, честное слово, детские с подтекстом "сделайте все за меня" СПАСИБО у меня таких меню 40 штук скачено и я разбираюсь со своим, а если сложно помочь то и не помогайте, я Вас лично не просил, может кто-нибудь и подскажет. А не подскажет, так и сам сделаю. Вы бы меня еще гуглом поучили пользоваться. а впрочем, может быть подгоню под свое... вроде нашел одно похожее. несовсем конечно такого плана, но буду экспериментировать Ссылка на сообщение Поделиться на других сайтах
EzS 2 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 а впрочем, может быть подгоню под свое... Кто мешает воспользоваться готовым кодом и вставить свою графику? Ищите, да обрещете! (с) Holy Bible Ссылка на сообщение Поделиться на других сайтах
mumka 0 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Автор а впрочем, может быть подгоню под свое... Кто мешает воспользоваться готовым кодом и вставить свою графику? Ищите, да обрещете! (с) Holy Bible просто в чужом мне не всегда все понятно, а когда сам,делаешь, вроде проще... и запоминаешь хоть... Ссылка на сообщение Поделиться на других сайтах
EzS 2 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 просто в чужом мне не всегда все понятно, а когда сам,делаешь, вроде проще... и запоминаешь хоть Интересно, а с изучением по мануалам как обстоят дела? Там тоже чужой код в примерах-) Учиться проще на предоставленных примерах, кстати, большинство ресурсов предоставляющих подобные готовые решения ставят комментарии в коде: что, зачем, почему и для чего использован именно этот селектор/идентификатор/класс/строка и т.п.. у меня таких меню 40 штук скачено Ну, если бессмысленно качать, то понятно, что никогда и ни в чем не разберешься. Стоит вникнуть в структуру одного-двух примеров, свои будешь делать уже намного быстрее и "без подсказок". Нравится, используем готовые решения, не нравится, учимся делать свои. Ссылка на сообщение Поделиться на других сайтах
mumka 0 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Автор Интересно, а с изучением по мануалам как обстоят дела? Там тоже чужой код в примерах-) Учиться проще на предоставленных примерах, кстати, большинство ресурсов предоставляющих подобные готовые решения ставят комментарии в коде: что, зачем, почему и для чего использован именно этот селектор/идентификатор/класс/строка и т.п.. если бы не изображения,то прекрасно с изучением мануала, потому что пару книжек хороших есть, без картинок у меня получается, с картинками нет... точнее раньше получалось и так и так, а щас без картинок только, что то я путаю гдето... Ну, если бессмысленно качать, то понятно, что никогда и ни в чем не разберешься. Стоит вникнуть в структуру одного-двух примеров, свои будешь делать уже намного быстрее и "без подсказок". Нравится, используем готовые решения, не нравится, учимся делать свои. они просто в пакете шли... с картинками Ссылка на сообщение Поделиться на других сайтах
lifestar 18 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 list-style: none; - разве не надо ставить?надо - я просто привык к своим стилям где по умолчанию list-style-type: none стоит для всех списков вообще.. тогда добавляем.. .nav { margin: 0; padding: 0; width: 100%; list-style-type: none } .nav li { float:left } .nav li.s { background:url(images/menu-s.jpg); width:20px; height:75px; } .nav li a { display:block; padding: 10px 0; background: url(images/menu-m.jpg) repeat-x; text-decoration: none; } width:20px; height:75px; это размеры картинки menu-s.jpg Ссылка на сообщение Поделиться на других сайтах
mumka 0 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Автор во как, уже получше, только почему то точки не убираются, хотя стоит без точек побыстрому откоректировал до такого кода .nav { margin: 0; padding: 0; width: 100%; height:39px; list-style-type: none } .nav li { list-style-type: none; float:left } .nav li.s { background:url(images/menu-s.jpg); width:8px; height:39px; } .nav li a { display:block; padding: 12px 0; background: url(images/menu-m.jpg) repeat-x; text-decoration: none; } осталось пробелы убрать и чето не вижу где, паддинги и маржины вроде наманые, а все равно вон что: почему он их делает непонимаю... Ссылка на сообщение Поделиться на других сайтах
lifestar 18 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 аа, блин не обратил внимания на хтмл.. зачем тебе лишний DIV - сделай так: <ul class="nav"> <li><img src="images/menu-l.jpg" alt="ПРОСТАВИТЬ" /></li> <li class="s"></li> <li><a href="index.html">Главная</a></li> <li class="s"></li> <li><a href="teachers.html">Преподаватели</a></li> <li class="s"></li> <li><a href="exams.html">Экзамены</a></li> <li class="s"></li> <li><a href="course.html">Курсы</a></li> <li class="s"></li> <li><a href="childs.html">Детям</a></li> <li class="s"></li> <li><a href="contacts.html">Контакты</a></li> <li class="s"></li> <li><img src="images/menu-r.jpg" alt="ПРОСТАВИТЬ" /></li> </ul> осталось пробелы убрать и чето не вижу где .nav li { float:left; margin: 0; padding: 0; } Ссылка на сообщение Поделиться на других сайтах
mumka 0 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Автор ура... чето правдо меню не очень теперь нравится,но хорошо, что технику саму теперь пойму. Спасиба огромное! эммм... .nav li a {display:block; padding: 12px 0; background: url(images/menu-m.jpg) repeat-x; text-decoration: none;} а почему изменение паддинга с 12 на 10 влияет на текст, но при этом и на фон? Ссылка на сообщение Поделиться на других сайтах
lifestar 18 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 а почему изменение паддинга с 12 на 10 влияет на текст, но при этом и на фон?а фиг его знает почему) попробуй следующий хак .nav li a { display:block; padding: 12px 0; background: url(images/menu-m.jpg) repeat-x top center; text-decoration: none; } и зачем ты пишешь здесь стиль в одну линию? чтобы нам было сложнее читать? Ссылка на сообщение Поделиться на других сайтах
mumka 0 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Автор попробуй следующий хак и зачем ты пишешь здесь стиль в одну линию? чтобы нам было сложнее читать? не не получается так... а про линию - мне так наоборот в строку легче, и потом в файле сразу много всего видно, больше вмещается... да я на самом деле думал, что и сокращать от дублей так проще, когда например несколько свойств на несколько хаков идет одинаковых, так мне кажется заметить проще.... ну вообщем, я всегда так делал, точнее последние месяцы, перековал себя что так проще стало. Ссылка на сообщение Поделиться на других сайтах
lifestar 18 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 высота menu-m.jpg какая? Ссылка на сообщение Поделиться на других сайтах
mumka 0 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Автор 39 пыкселов Ссылка на сообщение Поделиться на других сайтах
lifestar 18 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 ну вот и посуди сам - фон высотой 39px, отступ сверху и снизу по 12px, на шрифт остаётся 15px - так и напиши.. .nav li a { display:block; padding: 12px 0; background: url(images/menu-m.jpg) repeat-x top center; text-decoration: none; font: normal 12px/15px verdana; } вместо verdana напиши свой шрифт Ссылка на сообщение Поделиться на других сайтах
mumka 0 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Автор font: normal 12px/15px verdana; а что за дробь такая, я про такое нигде не видел... разве так можно писать? я поставил отступы по 10px... получается 2 на 10 = 20, 39 - 20 = 19, 19пыксов на шрифт еси воткнуть то он огромный, и все равно не по центру, а если меньше взять где нить 14 то вроде бы и ничего, но видно что не по центру... ф принципе итак нормально, но не понятно почему так получается... Я кстати вспомнил зачем мне тот див нужен был в котором UL находится, чтобы меню центровать по середине... Ссылка на сообщение Поделиться на других сайтах
lifestar 18 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 )) весёлый ты парень! а что за дробь такая, я про такое нигде не видел... разве так можно писать?можно) в данном примере 12px - размер кегля шрифта, а 15px - высота строки (css свойство line-height) Ссылка на сообщение Поделиться на других сайтах
EzS 2 Опубликовано: 19 июня 2008 Рассказать Опубликовано: 19 июня 2008 Я кстати вспомнил зачем мне тот див нужен был в котором UL находится, чтобы меню центровать по середине... И как, центрировался? Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Архивировано
Эта тема находится в архиве и закрыта для публикации сообщений.