_Tornado_
-
Posts
9 -
Joined
-
Last visited
_Tornado_'s Achievements
Explorer (1/14)
0
Reputation
-
Спасибо большое. А почему картинки должны быть именно в png? или можно в другом формате?
-
сорри, не тот css код, вот новый #menu_bottom{ width:175px; background:#fae2d3 url(image/menu_border_vert.jpg) left repeat-y; display:block; } #menu_bottom .right{ width:175px; background:url(image/menu_border_vert.jpg) right repeat-y; } #menu_bottom .top{ background:url(image/menu_top.jpg) no-repeat top; border-top:none; } #menu_bottom a:hover .top{ background:#e66d24 url(image/menu_top_h.jpg) no-repeat top; } #menu_bottom .bottom{ background:url(image/menu_bottom.jpg) no-repeat bottom; } #menu_bottom a:hover .bottom{ background:#e66d24 url(image/menu_bottom_h.jpg) no-repeat bottom; } #menu_bottom div{ width:100%; background:url(image/delimeter_menu.gif) no-repeat; padding-bottom:10px; padding-top:10px; border-top:1px solid #e66d24; } #menu_bottom span{ padding-left:15px; } #menu_bottom a{ text-decoration:none; outline:none; color:#000000; } #menu_bottom a:hover{ background:#e66d24; color:#FFFFFF; } #menu_bottom a:hover div{ background:#e66d24; color:#FFFFFF; } но класс right не работает
-
Подскажите, пожалуйста, как сделать такое меню, целый день мучаюсь. вот код <div id="menu_bottom"> <span class="right"> <a href="#"><div class="top"><span>Пункт 1</span></div></a> <a href="#"><div><span>Пункт 1</span></div></a> <a href="#"><div><span>Пункт 1</span></div></a> <a href="#"><div><span>Пункт 1</span></div></a> <a href="#"><div><span>Пункт 1</span></div></a> <a href="#"><div class="bottom"><span>Пункт 1</span></div></a> </span> </div> #menu_bottom{ width:175px; background:#fae2d3 url(image/menu_border_vert.jpg) left repeat-y; } #menu_bottom .right{ width:175px; background:url(image/menu_border_vert.jpg) right repeat-y; } #menu_bottom .top{ background:url(image/menu_top.jpg) no-repeat top; } #menu_bottom .bottom{ background:url(image/menu_bottom.jpg) no-repeat bottom; } #menu_bottom div{ width:100%; background:url(image/delimeter_menu.gif) no-repeat; padding-bottom:10px; padding-top:10px; } #menu_bottom a{ text-decoration:none; outline:none; color:#000000; } #menu_bottom a:hover { background:#e66d24; color:#FFFFFF; } #menu_bottom a:hover div { background:#e66d24; color:#FFFFFF; } Но справа граница не работает. Помогите, плиз!
-
Вот результат: HTML <body> <div id="topbg"> <div id="container"> <!--header start--> <div id="header"> <p> <a href="#"><img src="img/freex.gif" width="292" height="143" alt="" class="name" /></a> <img src="img/freeware.gif" width="401" height="80" alt="" class="freeware" /> </p> </div> </div> </div> <!--header end--> <!-- body start --> <table cellspacing="10"> <tr> <td rowspan="2" class="line"></td> <td class="leftside"> <div class="menu"><p><a href="#">Программы</a></p> <ul> <li><a href="#">Безопасность</a> <ul> <li><a href="#">Антивирусы</a></li> <li><a href="#">Файрволлы</a></li> </ul> </li> <li><a href="#">Графика</a> <ul> <li><a href="#">Графические редакторы</a></li> <li><a href="#">Просмотр изображений</a></li> </ul> </li> <li><a href="#">Интернет</a> <ul> <li><a href="#">FTP-клиенты</a></li> <li><a href="#">Браузеры</a></li> <li><a href="#">Менеджеры закачек</a></li> <li><a href="#">Обмен файлами</a></li> <li><a href="#">Общение</a></li> <li><a href="#">Почта</a></li> </ul> </li> <li><a href="#">Мультимедиа</a> <ul> <li><a href="#">Кодеки</a></li> <li><a href="#">Конверторы</a></li> <li><a href="#">Проигрыватели</a></li> <li><a href="#">Редакторы</a></li> </ul> </li> <li><a href="#">Офисные</a> <ul> <li><a href="#">Просмотр файлов</a></li> <li><a href="#">Текстовые редакторы</a></li> <li><a href="#">Читалки</a></li> </ul> </li> <li><a href="#">Системные</a> <ul> <li><a href="#">Дефрагментаторы</a></li> <li><a href="#">Диагностика системы</a></li> <li><a href="#">Резервное копирование</a></li> <li><a href="#">Чистка реестра</a></li> </ul> </li> <li><a href="#">Файловые</a> <ul> <li><a href="#">CD/DVD</a></li> <li><a href="#">Архиваторы</a></li> <li><a href="#">Восстановление удаленных файлов</a></li> <li><a href="#">Файловые менеджеры</a></li> </ul> </li> </ul></div> </td> <td rowspan="2" class="rightside"> <h2>Мультимедиа \ Проигрыватели</h2> <div class="block-round"> <b class="r1"> </b><b class="r2"> </b><b class="r3"> </b><b class="r4"> </b> <div class="block-round-content"><h2>GOM Media Player</h2> <p><img src="img/gom.gif" width="150" height="123" class="unit_icon" alt="GOM Media Player"/>Шустрый и красивый GOM Player включает в себя много кодеков, в том числе XviD, DivX, FLV1, AC3, OGG, MP4, H263. Отличает его от аналогов то, что некоторые кодеки реализованы в самом GOM-е. Это удобно с той точки зрения, что внутренние кодеки оптимизированы по производительности и, если не присутствуют в системе, плеер всё равно сможет воспроизвести видеофайл. Для тех же видеофайлов, кодек для которых не найден, предоставляется возможность полуавтоматически скачать его и установить.</p> <span><a href="#" class="download">Скачать</a> <a href="#" class="continue">Подробнее</a> <a href="#" class="comments">Комментарии (0)</a></span> </div> <b class="r4"> </b><b class="r3"> </b><b class="r2"> </b><b class="r1"> </b> </div> <div class="block-round"> <b class="r1"> </b><b class="r2"> </b><b class="r3"> </b><b class="r4"> </b> <div class="block-round-content"><h2>The KMPlayer</h2> <p><img src="img/km.gif" width="150" height="130" class="unit_icon" alt="The KMPlayer"/>The KMPlayer - это видео/аудио проигрыватель со встроенными кодеками (VCD, DVD, AVI, MKV, OGG, MP3, OGM, 3GP, MPEG-1/2/4, WMV, REALMEDIA, FLV, QUICKTIME и др.), что позволяет смотреть видео-фильмы (в том числе и DVD) и слушать музыку без установки каких-либо кодеков (K-Lite Codec, Vista Codec Package).</p> <span><a href="#" class="download">Скачать</a> <a href="#" class="continue">Подробнее</a> <a href="#" class="comments">Комментарии (0)</a></span> </div> <b class="r4"> </b><b class="r3"> </b><b class="r2"> </b><b class="r1"> </b> </div> <div class="block-round"> <b class="r1"> </b><b class="r2"> </b><b class="r3"> </b><b class="r4"> </b> <div class="block-round-content"><h2>The KMPlayer</h2> <p><img src="img/km.gif" width="150" height="130" class="unit_icon" alt="The KMPlayer"/>The KMPlayer - это видео/аудио проигрыватель со встроенными кодеками (VCD, DVD, AVI, MKV, OGG, MP3, OGM, 3GP, MPEG-1/2/4, WMV, REALMEDIA, FLV, QUICKTIME и др.), что позволяет смотреть видео-фильмы (в том числе и DVD) и слушать музыку без установки каких-либо кодеков (K-Lite Codec, Vista Codec Package).</p> <span><a href="#" class="download">Скачать</a> <a href="#" class="continue">Подробнее</a> <a href="#" class="comments">Комментарии (0)</a></span> </div> <b class="r4"> </b><b class="r3"> </b><b class="r2"> </b><b class="r1"> </b> </div> <div class="block-round"> <b class="r1"> </b><b class="r2"> </b><b class="r3"> </b><b class="r4"> </b> <div class="block-round-content"><h2>The KMPlayer</h2> <p><img src="img/km.gif" width="150" height="130" class="unit_icon" alt="The KMPlayer"/>The KMPlayer - это видео/аудио проигрыватель со встроенными кодеками (VCD, DVD, AVI, MKV, OGG, MP3, OGM, 3GP, MPEG-1/2/4, WMV, REALMEDIA, FLV, QUICKTIME и др.), что позволяет смотреть видео-фильмы (в том числе и DVD) и слушать музыку без установки каких-либо кодеков (K-Lite Codec, Vista Codec Package).</p> <span><a href="#" class="download">Скачать</a> <a href="#" class="continue">Подробнее</a> <a href="#" class="comments">Комментарии (0)</a></span> </div> <b class="r4"> </b><b class="r3"> </b><b class="r2"> </b><b class="r1"> </b> </div> </td> <td rowspan="2" class="line"></td></tr> <tr> <td align="center" class="form_find"> <form action="#"> <input type="text" name="find_text" value="Что ищем?" class="m_find" /> <input type="submit" name="send" value=" " class="lens" /> </form> </td> </tr> </table> <!-- body end --> <!-- footer start --> <div id="footer"> <p>Design by Dean & Anga</p> </div> <!-- footer end --> </body> CSS * {padding: 0; margin: 0;} html, body{ width: 100%; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; background:#000000; } #topbg{ background:url(img/bg_header.jpg) repeat-x; height: 166px; } #container{ width: 1000px; margin: 0 auto; } #header .freeware{ float:right; padding-top:50px; } #header .name{ float:left; padding-bottom:23px; border: none; } .line{ width:32px; background:#f48a21; } TABLE{ width:1015px; margin: 0 auto; } TD{ height:100%; vertical-align:top; } .leftside{ padding-left:25px; padding-top:25px; padding-bottom:25px; color:#f48a21; width:250px; border:2px solid #f48a21; } .menu a{ text-decoration:none; color:#f48a21; outline:none; /* Убираем границу вокруг ссылок */ line-height:1.5; } .menu a:hover{ color:#FFFFFF; } .menu a:active{ color:#999999; } .menu p{ font-size:18px; font-weight:bold; padding-bottom:10px; } .menu ul{ list-style-type:none; } .menu ul li ul{ padding-left:30px; font-size:12px; } .form_find{ border:2px solid #f48a21; vertical-align:top; } .form_find .lens{ background:url(img/lens.gif) 0 0 no-repeat; border:none; cursor:pointer; width:21px; height:30px; margin-left:20px; margin-top:10px; margin-bottom:10px; } .form_find .m_find{ background-color:#000000; border: 2px solid #666666; color:#FFFFFF; margin-bottom:10px; } .rightside{ color:#FFFFFF; border-top:2px solid #f48a21; border-bottom:2px solid #f48a21; padding:30px 10px; font-size:12px; vertical-align:top; } .rightside h2{ color:#f48a21; padding-bottom:30px; } .block-round{ margin-bottom:40px; } .block-round-content{ background:#1f1e1e; padding:20px; text-align:justify; } .r1, .r2, .r3, .r4 { display: block; font-size: 0; height: 1px; background: #1f1e1e; } .r1 { margin: 0 5px; } .r2 { margin: 0 3px; } .r3 { margin: 0 2px; } .r4 { margin: 0 1px; height: 2px; } .block-round-content h2{ color:#f48a21; padding-bottom:10px; } .block-round-content .unit_icon{ float:left; margin-right:10px; } .block-round-content span{ display:block; text-align:right; padding-top:30px; } .block-round-content a{ color:#f48a21; } .block-round-content a.download{ background:url(img/icon_download.gif) no-repeat; padding-left:20px; padding-right:30px; } .block-round-content a.continue{ background:url(img/icon_continue.gif) no-repeat; padding-left:20px; padding-right:30px; } .block-round-content a.comments{ background:url(img/icon_comment.gif) no-repeat; padding-left:20px; } #footer{ clear:both; padding-top:30px; padding-bottom:30px; text-align:center; font-size:12px; color:#FFFFFF; } Возможно здесь будут ляпы, т.к. раньше я верстала только пару легких макетов, это я делаю для своего первого сайта. Принимается критика и замечания)
-
Всем спасибо. Сверстала .
-
Те способы, которые я находила, не подходят. Если бы у меня блоки 1 и 2 были в одной рамке, я бы сделала как Вы говорите, но из-за этого разделения, не получается.
-
Здравствуйте. Подскажите, пожалуйста, как сделать, чтобы рамка блока 2 растягивалась в зависимости от высоты рамки блока 3. Верстка блочная. Помогите пожалуйта.
-
Спасибо за ответ, я разобралась, все работает. нужно было написать так: echo "<a class=\"on\"><span class=\"icon\"></span>{$title[$i]}</a>\n"; и так: div.main_menu .icon { background:url(img/lock.gif) no-repeat; border:0px; width:12px; padding-right: 15px; }
-
Здравствуйте! Есть горизонтальное меню, перед одним из пунктов должна быть иконка. Вывод: <?php $title = {"Главная","Отчетность","Обучение","Услуги","Контакты"}; for($i=0; $i<count($title); $i++) { if($i=3) { echo "<a class=\"on\"><span class=\"icon\">{$title[$i]}</span></a>\n"; } else { echo "<a class=\"on\">{$title[$i]}</a>\n"; } } ?> стили: div.main_menu { font-size:13px; font-weight:bold; line-height:16px; background:#cfc9ab url(img/menu_bg.gif) repeat-x left bottom; } div.menu_pos { padding:0px 0px 14px 0px; } div.main_menu a { color:#130f0b; text-decoration:none; margin:0px 10px 0px 23px; height:20px; padding-top:7px; float:left; } div.main_menu a:hover { padding-top:4px; border-top:3px solid #A66452; } div.main_menu a.on{ padding-top:4px; border-top:3px solid #A66452; } div.main_menu .icon { background:url(img/lock.gif) no-repeat; border:0px; width:12px; } Иконка лезет на текст. Вопрос: как сделать отступ между иконкой и текстом? Помогите, пожалуйста)