X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Добавить ответ в эту тему
> Помогите
LazyBoy
LazyBoy
Topic Starter сообщение 7.12.2010, 16:37; Ответить: LazyBoy
Сообщение #1


В принципе, огрехи не большие, но все портят...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<LINK href="images/logo_mini.jpg" type=ico rel=icon>
<style>
.menu{
font-family:arial, sans-serif;
position:center;
font-size:14px;
z-index:100
}
.menu ul li a, .menu ul li a:visited{
display:block;
text-decoration:none;
color:#000;
text-align:center;
color:#000000;
border:0px solid #000000;
background:none;
font-size:14px;
overflow:hidden
}
.menu ul{
padding:0;
margin:0;
list-style:none
}
.menu ul li{
float:left;
position:relative}
.menu ul li ul{
display:none
}
.menu ul li:hover a{
color:#000000;
background:none
}
.menu ul li:hover ul{
display:block;
position:absolute;
top:35px;
left:0;
width:105px
}
.menu ul li:hover ul li a{
display:block;
background:#797950;
color:#000
}
.menu ul li:hover ul li a:hover{
background:#cccccc;
color:#000000
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="index.html"><img src="images/UP_01.jpg"></a>
</td>
<td>
<a href="contacts.html"><img src="images/UP_02.jpg"></a>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/DOWN_01.jpg">
</td>
<td>
<div class="menu">
<ul>
<li><a class="hide" href="Auto.html"><img src="images/DOWN_02.jpg"></a>
<ul>
<li><a href="bag.html" title="Экспедиционные багажники">Экспедиционные багажники</a></li>
<li><a href="rams.html" title="Сварка рам (для грузовых)">Сварка рам (для грузовых)</a></li>
<li><a href="box.html" title="Инструментальные ящики (для грузовых)">Инструментальные ящики<br/>(для грузовых)</a></li>
<li><a href="tent.html" title="Каркасы под тент">Каркасы под тент</a></li>
<li><a href="bamp.html" title="Силовые бамперы">Силовые бамперы</a></li>
</ul>
</li>

<li><a class="hide" href="Blago.html"><img src="images/DOWN_03.jpg"></a>
<ul>
<li><a href="vorota.html" title="Въездные ворота и калитки">Въездные ворота и калитки</a></li>
<li><a href="detsk.html" title="Качели, детские площадки">Качели, детские площадки</a></li>
<li><a href="decor.html" title="Декоротивные ограждения">Декоротивные ограждения</a></li>
<li><a href="zabor.html" title="Изготовление заборов">Изготовление заборов</a></li>
<li><a href="flower.html" title="Цветочницы">Цветочницы</a></li>
<li><a href="scam.html" title="Скамейки">Скамейки</a></li>
<li><a href="resh.html" title="Решетки">Решетки</a></li>
<li><a href="mang.html" title="Мангалы">Мангалы</a></li>
<li><a href="bes.html" title="Беседки">Беседки</a></li>
<li><a href="tepl.html" title="Теплицы">Теплицы</a></li>
<li><a href="naves.html" title="Навесы">Навесы</a></li>
<li><a href="urni.html" title="Урны">Урны</a></li>
</ul>
</li>

<div class="menu">
<ul>
<li><a class="hide" href="Inter.html"><img src="images/DOWN_04.jpg"></a>
<ul>
<li><a href="safe.html" title="Металлические ящики (сейфы)">Металлические ящики (сейфы)</a></li>
<li><a href="mebel.html" title="Металлокаркасы для мебели">Металлокаркасы для мебели</a></li>
<li><a href="dver.html" title="Входные двери">Входные двери</a></li>
<li><a href="lest.html" title="Лестницы">Лестницы</a></li>
<li><a href="stelaj.html" title="Стелажи">Стелажи</a></li>
<li><a href="stul.html" title="Стулья">Стулья</a></li>
<li><a href="petli.html" title="Петли">Петли</a></li>
<li><a href="pechi.html" title="Печи">Печи</a></li>
</ul>
</li>

<li><a class="hide" href="Unstan"><img src="images/DOWN_05.jpg"></a>
<ul>
<li><a href="konv.html" title="Ленточные конвейры">Ленточные конвейры</a></li>
<li><a href="proiz.html" title="Производственные металлоконструкции">Производственные<br/>металлоконструкции</a></li>
<li><a href="oborud.html" title="Вспомогательное оборудование">Вспомогательное<br/>оборудование</a></li>
<li><a href="bunk.html" title="Бункеры">Бункеры</a></li>
<li><a href="mach.html" title="Мачты">Мачты</a></li>
</ul>
</li>

<div class="menu">
<ul>
<li><a class="hide" href="Obr-met"><img src="images/DOWN_06.jpg"></a>
<ul>
<li><a href="frezer.html" title="Фрезерные работы">Фрезерные работы</a></li>
<li><a href="tokar.html" title="Токарные работы">Токарные работы</a></li>
<li><a href="rubka.html" title="Рубка металла">Рубка металла</a></li>
</ul>
</li>

<li><a class="hide" href="Stroit"><img src="images/DOWN_07.jpg"></a>
<ul>
<li><a href="opalub.html" title="Изготовление сложных опалубок">Изготовление сложных опалубок</a></li>
<li><a href="met-build.html" title="Металлокаркасные строения">Металлокаркасные строения</a></li>
<li><a href="zaklad.html" title="Изготовление закладных">Изготовление закладных</a></li>
<li><a href="mob.html" title="Мобильные здания">Мобильные здания</a></li>
<li><a href="poyas.html" title="Сварка арм.пояса">Сварка арм.пояса</a></li>
<li><a href="garaj-vor.html" title="Гаражные ворота">Гаражные ворота</a></li>
<li><a href="groups.html" title="Входные группы">Входные группы</a></li>
<li><a href="esto.html" title="Эстокады">Эстокады</a></li>
<li><a href="garaj.html" title="Гаражи">Гаражи</a></li>
</ul>
</li>

</ul>
</div>
</td>
<td>
<img src="images/DOWN_08.jpg">
</td>
</tr>
</table>
</body>
</html>

Помощь нужна:
1. Меню-"шапка" разделена на части;
2. Во втором "спойлере" почему-то последние две ссылки пишутся на одной строке;
3. Выпадающий блок того же размера, что и картинка-"спойлер".
4. Что бы при уменьшении окна браузера картинка не разбивалась на части, а просто появлялся горизонтальный ползунок
В общем нужно это довести до ума...
P.S. вот архив, который содержит страничку и изображения.
P.P.S. не знаю,Ю во сколько оценить проблему... думаю, вы мне в этом поможете!!!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LazyBoy
LazyBoy
Topic Starter сообщение 7.12.2010, 18:57; Ответить: LazyBoy
Сообщение #2


уже сам разобрался... помощь больше не нужна!!!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Krusnik_hb
Krusnik_hb
сообщение 7.12.2010, 19:13; Ответить: Krusnik_hb
Сообщение #3


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<LINK href="images/logo_mini.jpg" type=ico rel=icon>


<style type="text/css">
/*пишем стиль для главного списка, и всех списков внутри него(т.е. пишем те правила, которые относятся ко всем спискам)*/
#nav, #nav ul{
list-style:none;/*убираем маркеры списка*/
margin:0;/*обнуляем поля и отступы*/
padding:0;
background-color: #444444;/*задаем фоновый цвет*/
font:12px/28px Verdana, Arial, Helvetica, sans-serif;/*Указываем размер шрифта/высоту строки и семейство шрифта. Высота строки нужна для автоматического выравнивания текста по высоте*/
}

/*стиль только для главного списка*/
#nav{
height:28px;/*обязательно жестко задавать высоту, чтобы список не схлопывался,и была возможность задавать фоновый цвет*/
/*ширина меню. Можно не указывать, тогда меню растянется на всю ширину родительского элемента*/
}

/*стиль для пунктов списка*/
#nav li{
float:left;/*делаем элементы списка плавающими(включаем обтекание) вследствие чего, они выстраиваются в один ряд*/
position:relative;/*задаем относительное позиционирование. Теперь, вложенные элементы будут позиционироваться не относительно окна браузера, а относительно элементов списка.*/
}

/*стиль для пунктов списка при наведении на них */
#nav li:hover, #nav li.jshover{
background-color: #333;/*цвет фона*/
}

/*стиль для ссылок встречающихся внутри главного списка*/
#nav a{
display:block;/*делаем ссылку блоком (по умолчанию, ссылка это элемент строчный) */
width:auto;/*ширина блока ссылки*/
color:#fff;/*цвет текста ссылки*/
padding:0 0px; /*поля внутри блока ссылки*/
text-align:center;/*выравнивание текста по центру*/
text-decoration:none;/*убираем подчеркивание*/
}

/*стиль для ссылок при наведении*/
#nav a:hover{
background-color:#ccc;/*цвет фона*/
color:#000;/*цвет текста */
}

/*стиль касающийся вложенного списка*/
#nav ul{
border:1px solid #000;/*задаем рамку*/
border-top:0;/*обнуляем рамку сверху*/
border-bottom:0;/*обнуляем рамку снизу(она будет задана для ссылки)*/
visibility:hidden;/*прячем список*/
width:auto;/*ширина вложенного списка. Задается обязательно, т.е. иначе в I.E. 6 список будет располагаться горизонтально. 118 - потому,что даем по 1пикселу слева и справа на рамку*/
position:absolute;/*абсолютное позиционирование. В данном случае, вложенный список будет позиционироваться относительно родителя(Елемента списка li , для которого мы задавали position:relative)*/
top:28px;/*координата по вертикали(отступ сверху) равен высоте нашего главного списка*/
left:0;/*координата по горизонтали(отступ слева)*/
}
#nav ul li{float:none;}
/*стиль для ссылок внутри вложенного списка */
#nav ul a{
border:0; /*обнуляем рамку, унаследованную от стиля #nav a */
border-bottom:1px solid #000; /*теперь задаем рамку снизу, чтобы она разделяла ссылки*/
width:auto;/*задаем ширину блоков ссылки, ставим 78, а не 80, т.к. по 1 пикселю с каждой стороны будет рамка списка*/
}

/*стиль для вложенного списка, в момент наведения на пункт главного списка*/
#nav li:hover ul, #nav li.jshover ul{visibility:visible;} /*показывам список*/

/*стиль для списка 3 уровня вложенности, при наведении на элемент списка первого уровня*/
#nav li:hover li ul, #nav li.jshover li ul{
border-top:1px solid #000; /*задаем верхнюю рамку, которую мы убирали для родительского списка*/
top:-1px; /*ставим отрицательную координату, чтобы приподнять список на 1 пиксель вверх, компенсируя ширину рамки*/
left:118px; /*левая координата,т.е отступ слева */
visibility:hidden; /*скрываем список*/
}

/*стиль для списка третьего уровня вложенности, в момент наведения на элемент списка 1 уровня и 2 уровня одновременно*/
#nav li:hover li:hover ul, #nav li.jshover li.jshover ul{
visibility:visible; /*показываем список*/
}

.header{
float:left;
}

</style>



</head>
<body>
<table>
<div class="header"><a href="index.html"><img src="images/UP_01.jpg"></a></div>
<div><a href="contacts.html"><img src="images/UP_02.jpg"></a></div></table>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td>
<img src="images/DOWN_01.jpg">
</td>
<td>
<div class="menu">
<ul id="nav">
<li><a class="hide" href="Auto.html"><img src="images/DOWN_02.jpg"></a>
<ul>
<li><a href="bag.html" title="Экспедиционные багажники">Экспедиционные багажники</a></li>
<li><a href="rams.html" title="Сварка рам (для грузовых)">Сварка рам (для грузовых)</a></li>
<li><a href="box.html" title="Инструментальные ящики (для грузовых)">Инструментальные ящики<br/>(для грузовых)</a></li>
<li><a href="tent.html" title="Каркасы под тент">Каркасы под тент</a></li>
<li><a href="bamp.html" title="Силовые бамперы">Силовые бамперы</a></li>
</ul>
</li>


<li><a class="hide" href="Blago.html"><img src="images/DOWN_03.jpg"></a>
<ul>
<li><a href="vorota.html" title="Въездные ворота и калитки">Въездные ворота и калитки</a></li>
<li><a href="detsk.html" title="Качели, детские площадки">Качели, детские площадки</a></li>
<li><a href="decor.html" title="Декоротивные ограждения">Декоротивные ограждения</a></li>
<li><a href="zabor.html" title="Изготовление заборов">Изготовление заборов</a></li>
<li><a href="flower.html" title="Цветочницы">Цветочницы</a></li>
<li><a href="scam.html" title="Скамейки">Скамейки</a></li>
<li><a href="resh.html" title="Решетки">Решетки</a></li>
<li><a href="mang.html" title="Мангалы">Мангалы</a></li>
<li><a href="bes.html" title="Беседки">Беседки</a></li>
<li><a href="tepl.html" title="Теплицы">Теплицы</a></li>
<li><a href="naves.html" title="Навесы">Навесы</a></li>
<li><a href="urni.html" title="Урны">Урны</a></li>
</ul>
</li>

<li><a class="hide" href="Inter.html"><img src="images/DOWN_04.jpg"></a>
<ul>
<li><a href="safe.html" title="Металлические ящики (сейфы)">Металлические ящики (сейфы)</a></li>
<li><a href="mebel.html" title="Металлокаркасы для мебели">Металлокаркасы для мебели</a></li>
<li><a href="dver.html" title="Входные двери">Входные двери</a></li>
<li><a href="lest.html" title="Лестницы">Лестницы</a></li>
<li><a href="stelaj.html" title="Стелажи">Стелажи</a></li>
<li><a href="stul.html" title="Стулья">Стулья</a></li>
<li><a href="petli.html" title="Петли">Петли</a></li>
<li><a href="pechi.html" title="Печи">Печи</a></li>
</ul>
</li>


<li><a class="hide" href="Unstan"><img src="images/DOWN_05.jpg"></a>
<ul>
<li><a href="konv.html" title="Ленточные конвейры">Ленточные конвейры</a></li>
<li><a href="proiz.html" title="Производственные металлоконструкции">Производственные<br/>металлоконструкции</a></li>
<li><a href="oborud.html" title="Вспомогательное оборудование">Вспомогательное<br/>оборудование</a></li>
<li><a href="bunk.html" title="Бункеры">Бункеры</a></li>
<li><a href="mach.html" title="Мачты">Мачты</a></li>
</ul>
</li>


<li><a class="hide" href="Obr-met"><img src="images/DOWN_06.jpg"></a>
<ul>
<li><a href="frezer.html" title="Фрезерные работы">Фрезерные работы</a></li>
<li><a href="tokar.html" title="Токарные работы">Токарные работы</a></li>
<li><a href="rubka.html" title="Рубка металла">Рубка металла</a></li>
</ul>
</li>


<li><a class="hide" href="Stroit"><img src="images/DOWN_07.jpg"></a>
<ul>
<li><a href="opalub.html" title="Изготовление сложных опалубок">Изготовление сложных опалубок</a></li>
<li><a href="met-build.html" title="Металлокаркасные строения">Металлокаркасные строения</a></li>
<li><a href="zaklad.html" title="Изготовление закладных">Изготовление закладных</a></li>
<li><a href="mob.html" title="Мобильные здания">Мобильные здания</a></li>
<li><a href="poyas.html" title="Сварка арм.пояса">Сварка арм.пояса</a></li>
<li><a href="garaj-vor.html" title="Гаражные ворота">Гаражные ворота</a></li>
<li><a href="groups.html" title="Входные группы">Входные группы</a></li>
<li><a href="esto.html" title="Эстокады">Эстокады</a></li>
<li><a href="garaj.html" title="Гаражи">Гаражи</a></li>
</ul>
</li>



</ul>
</div>
</td>
<td>
<img src="images/DOWN_08.jpg">
</td>
</tr>
</table>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Изготовление сайтов · Следующая тема »
 
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите вспомнить рекламного бота Телеграм для обмена рекламой
 0 Mixatraider 723 21.2.2024, 23:42
автор: Mixatraider
Открытая тема (нет новых ответов) Помогите рещить проблему с монитором.
Почему низкое разрешение при подключении монитора через displayport?
 0 Levels 1701 11.12.2020, 0:48
автор: Levels
Открытая тема (нет новых ответов) Помогите кто нибудь получить партнерку Росбанк!
 7 heisenberg_mw 2339 7.8.2020, 9:28
автор: heisenberg_mw
Открытая тема (нет новых ответов) Помогите найти тему пожалуйста
 7 virtas 12448 24.7.2020, 17:02
автор: -JamesSmips-
Открытая тема (нет новых ответов) Помогите с поиском доноров
 3 tehno_music 3350 4.11.2019, 17:15
автор: goblin78


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 16.4.2024, 14:11

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet