меню не в дле

[mumka 0]

хтмл

			<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]

попробуй так:

.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;}

Изменено 19 июня 2008 пользователем Александр Медведев

[mumka 0]

попробуй так:

.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]

так еще хуже стало, чем было

ну так покажи

[mumka 0]

вот

[lifestar 18]

есть ещё вариант)

			<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

Изменено 19 июня 2008 пользователем Александр Медведев

[mumka 0]

опять все плохо

list-style: none; - разве не надо ставить?

или просто вы попытались схитрить заменив маркер изображением?

может быть в таблицу это как то запихать?

Изменено 19 июня 2008 пользователем mumka

[EzS 2]

Блин, ну поиском сложно пользоваться?

http://www.13styles.com/

Вопросы, честное слово, детские с подтекстом "сделайте все за меня"

[mumka 0]

Блин, ну поиском сложно пользоваться?

http://www.13styles.com/

Вопросы, честное слово, детские с подтекстом "сделайте все за меня"

СПАСИБО

у меня таких меню 40 штук скачено

и я разбираюсь со своим, а если сложно помочь то и не помогайте, я Вас лично не просил, может кто-нибудь и подскажет.

А не подскажет, так и сам сделаю.

Вы бы меня еще гуглом поучили пользоваться.

а впрочем, может быть подгоню под свое...

вроде нашел одно похожее. несовсем конечно такого плана, но буду экспериментировать

Изменено 19 июня 2008 пользователем mumka

[EzS 2]

а впрочем, может быть подгоню под свое...

Кто мешает воспользоваться готовым кодом и вставить свою графику?

Ищите, да обрещете! (с) Holy Bible

[mumka 0]

а впрочем, может быть подгоню под свое...

Кто мешает воспользоваться готовым кодом и вставить свою графику?

Ищите, да обрещете! (с) Holy Bible

просто в чужом мне не всегда все понятно, а когда сам,делаешь, вроде проще... и запоминаешь хоть...

[EzS 2]

просто в чужом мне не всегда все понятно, а когда сам,делаешь, вроде проще... и запоминаешь хоть

Интересно, а с изучением по мануалам как обстоят дела? Там тоже чужой код в примерах-)

Учиться проще на предоставленных примерах, кстати, большинство ресурсов предоставляющих подобные готовые решения ставят комментарии в коде: что, зачем, почему и для чего использован именно этот селектор/идентификатор/класс/строка и т.п..

у меня таких меню 40 штук скачено

Ну, если бессмысленно качать, то понятно, что никогда и ни в чем не разберешься. Стоит вникнуть в структуру одного-двух примеров, свои будешь делать уже намного быстрее и "без подсказок". Нравится, используем готовые решения, не нравится, учимся делать свои.

[mumka 0]

Интересно, а с изучением по мануалам как обстоят дела? Там тоже чужой код в примерах-)

Учиться проще на предоставленных примерах, кстати, большинство ресурсов предоставляющих подобные готовые решения ставят комментарии в коде: что, зачем, почему и для чего использован именно этот селектор/идентификатор/класс/строка и т.п..

если бы не изображения,то прекрасно с изучением мануала, потому что пару книжек хороших есть, без картинок у меня получается, с картинками нет... точнее раньше получалось и так и так, а щас без картинок только, что то я путаю гдето...

Ну, если бессмысленно качать, то понятно, что никогда и ни в чем не разберешься. Стоит вникнуть в структуру одного-двух примеров, свои будешь делать уже намного быстрее и "без подсказок". Нравится, используем готовые решения, не нравится, учимся делать свои.

они просто в пакете шли... с картинками

[lifestar 18]

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]

во как, уже получше, только почему то точки не убираются, хотя стоит без точек

побыстрому откоректировал до такого кода

.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;

}

осталось пробелы убрать и чето не вижу где, паддинги и маржины вроде наманые, а все равно вон что:

почему он их делает непонимаю...

Изменено 19 июня 2008 пользователем mumka

[lifestar 18]

аа, блин не обратил внимания на хтмл..

зачем тебе лишний 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]

ура...

чето правдо меню не очень теперь нравится,но хорошо, что технику саму теперь пойму.

Спасиба огромное!

эммм...

.nav li a {display:block; padding: 12px 0; background: url(images/menu-m.jpg) repeat-x; text-decoration: none;}

а почему изменение паддинга с 12 на 10 влияет на текст, но при этом и на фон?

Изменено 19 июня 2008 пользователем mumka

[lifestar 18]

а почему изменение паддинга с 12 на 10 влияет на текст, но при этом и на фон?

а фиг его знает почему)

попробуй следующий хак

.nav li a {

display:block;

padding: 12px 0;

background: url(images/menu-m.jpg) repeat-x top center;

text-decoration: none;

}

и зачем ты пишешь здесь стиль в одну линию? чтобы нам было сложнее читать?

Изменено 19 июня 2008 пользователем Александр Медведев

[mumka 0]

попробуй следующий хак

и зачем ты пишешь здесь стиль в одну линию? чтобы нам было сложнее читать?

не не получается так...

а про линию - мне так наоборот в строку легче, и потом в файле сразу много всего видно, больше вмещается...

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

Изменено 19 июня 2008 пользователем mumka

[lifestar 18]

высота menu-m.jpg какая?

[mumka 0]

39 пыкселов

[lifestar 18]

ну вот и посуди сам - фон высотой 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]

font: normal 12px/15px verdana;

а что за дробь такая, я про такое нигде не видел...

разве так можно писать?

я поставил отступы по 10px... получается 2 на 10 = 20, 39 - 20 = 19, 19пыксов на шрифт еси воткнуть то он огромный, и все равно не по центру, а если меньше взять где нить 14 то вроде бы и ничего, но видно что не по центру...

ф принципе итак нормально, но не понятно почему так получается...

Я кстати вспомнил зачем мне тот див нужен был в котором UL находится, чтобы меню центровать по середине...

Изменено 19 июня 2008 пользователем mumka

[lifestar 18]

)) весёлый ты парень!

а что за дробь такая, я про такое нигде не видел...

разве так можно писать?

можно) в данном примере 12px - размер кегля шрифта, а 15px - высота строки (css свойство line-height)

[EzS 2]

Я кстати вспомнил зачем мне тот див нужен был в котором UL находится, чтобы меню центровать по середине...

И как, центрировался?