Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Как убрать зазор между меню и контентом?

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

Diman19

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Всем привет! Подскажите пожалуйста где в стилях допущена ошибка?Появился зазор между меню и страницей сайта.Вот как это выглядит!
   
 
Стрелочкой указал что просвечивается background.
 
Вот как хочется чтобы выглядело!
 
   
 
 
Вот сам стиль меню который я поменял!
 
[code=css]
#nav {}
#navl {}
#navr {height:32px; background:url(../images/top_menu.png) 0 0 repeat-x; font-family: Tahoma; font-size:11px; margin-top: 5px;margin-top: -4px;}
#nav {z-index:10; position:relative;}
#nav-left { float:left; width:80%;}
#nav-right { float:right; width:20%;}
#nav ul {margin:0; padding:0; float:left;}
#nav ul li {list-style:none;float:left;height:100%;position:relative; padding:0; margin:0;display: inline; background:url(../images/line.png) no-repeat;}
#nav ul li a {width:auto; height:32px; padding:0px 12px; display:block;line-height:32px; color:#fff; text-decoration:none;font-size:11px;font-weight:normal; float:left;}
#nav ul li.active {}
#nav ul li.active a {background:url(../images/mainmenu-h.png) repeat center; color:#555;}
#nav ul li:hover {}
#nav ul li a:hover{text-decoration:none; font-weight:normal; font-size:11px; background:url(../images/hov.png) repeat; color:#a0a0a0;}
#nav ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}
#nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}
#nav ul li ul li {padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;}
#nav ul li ul li:hover ul {left:180px; top:0}
#nav ul li:hover ul li a {text-shadow:none;}
#nav ul li:hover ul li { background:none;}
#nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#555;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:12px;font-weight:normal;text-shadow:none; -moz-border-radius: 0px; border-radius: 0px; border:}
#nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a {text-align: left; padding:0 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:13px;text-shadow:none;}
#nav ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}
#nav ul li ul li ul li{padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;}
[/code]
 
Перечитывал данный код несколько раз,не могу найти где ошибка.Помогите пожалуйста.
 
P.s прикрепляю весь CSS файл.На случай если ошибка не здесь.
http://www54.zippyshare.com/v/15889261/file.html

Всего записей: 88 | Зарегистр. 10-11-2008 | Отправлено: 03:58 09-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Diman19
целиком выкладывайте - html и css

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 04:08 09-01-2014
Diman19

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
HTML нету.шаблон от Joomla.Php файл я не трогал.Редактировал только CSS.Его выложил полностью по ссылке выше.

Всего записей: 88 | Зарегистр. 10-11-2008 | Отправлено: 04:21 09-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Diman19

Цитата:
HTML нету.шаблон от Joomla.Php файл я не трогал.

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

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 04:25 09-01-2014
Diman19

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
то есть сохранить html код из браузера сложно?

 
Вот

Всего записей: 88 | Зарегистр. 10-11-2008 | Отправлено: 02:06 10-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Diman19
ай, выложите шаблон целиком.  
ну нельзя же так.. причина может оказаться даже в том, что где то размер картинки не совпадает или что то еще - одного css мало.
то, что выложили, выглядит обрывками, потому что многого, что ему нужно, там нет.
когда говорил о сохранении страницы - речь шла о полном сохрании страницы целиком (тогда браузер сохраняет и картинки и стили и подгруженные js файлы)


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 02:29 10-01-2014
Diman19

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
ай, выложите шаблон целиком.  

 
Вот

Всего записей: 88 | Зарегистр. 10-11-2008 | Отправлено: 03:36 10-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Diman19
другое дело.. у вас images/menu.png, что через css пытаетесь вставить в элемент высотой 32 пикселя, всего 31 пиксель по высоте. вот и просвечивает фон.
запишите, к примеру, так для #navr

Цитата:
background: url(../images/menu.png) black 0 0 repeat-x;

 
ну или другой цвет. либо уменьшайте высоту до 31 пикселя, либо растягивайте фоновое изображение до 32

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 03:46 10-01-2014
Diman19

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо за помощь!Уменьшил размер до 31 Px ничего не изменилось.Если дописать цвет то работает.Но вот в Html шаблоне который пытаюсь портировать на джумлу зазора нету.Также в джумле плохо отображются кнопки в меню под шапкой при наведении.Если посмотреть HTML шаблон то кнопки не перекрывают разделительные полосы между именами.В HTML от джумлы,полоски при наведении закрываются.Почему это происходит я так и не разобрался.Видимо где-то ошибка в коде CSS. Также хотелось бы узнать как через CSS можно добавить картинку под блоком меню?(Посмотрите оригинальный HTML там под блоком черная полоска.)
 
Заранее большое спасибо за помощь.

Всего записей: 88 | Зарегистр. 10-11-2008 | Отправлено: 05:25 10-01-2014 | Исправлено: Diman19, 05:26 10-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Diman19

Цитата:
Но вот в Html шаблоне который пытаюсь портировать на джумлу зазора нету.

потому, что там высота 31 пиксель
   
 

Цитата:
Уменьшил размер до 31 Px ничего не изменилось.

значит выставили не везде, где надо. у вас там в нескольких местах выставлено 32 пикселя.
 

Цитата:
Почему это происходит я так и не разобрался.

потому, что прописано  

Код:
background: url(../images/hov.png) repeat;

то есть картинка, хоть по высоте тоже 31 пиксель, но начинает повторяться по вертикали и горизонтали.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 07:47 10-01-2014 | Исправлено: Cheery, 07:53 10-01-2014
bordellinoff

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
@Diman19
 
Всё правильно, зазор и должен просвечивать. Высота меню 32px, а высота картинки 31px:
 
#nav ul li {
  background: url("../images/line.png");
}
 
LINE.png виновен! Увеличьте его, а не что-то другое.

Всего записей: 50 | Зарегистр. 13-10-2013 | Отправлено: 15:11 10-01-2014
Diman19

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Всем привет! Большое спасибо кто помогает.С зазором разобрался спасибо! С полоской непонятно,

Цитата:
потому, что прописано  
 
Код:
background: url(../images/hov.png) repeat;

 
Убрал repeat результат такой-же.Где ещё может быть причина?
 
Также хотелось бы узнать,что нужно прописать в стилях чтобы под блоками появилась картинка черная полоска помечена стрелкой?
 
 

Всего записей: 88 | Зарегистр. 10-11-2008 | Отправлено: 02:18 11-01-2014 | Исправлено: Diman19, 02:24 11-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Diman19

Цитата:
С полоской непонятно,

не совсем понятно о какой полоске тогда идет речь. скриншоты показывайте.
 
то, что сейчас голубым пунктиром?  
#sidebar .module ul.menu li
   
border-bottom что хочется.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 05:24 11-01-2014
Diman19

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
не совсем понятно о какой полоске тогда идет речь. скриншоты показывайте.  

 
Откройте оригинальный шаблон HTML (не от Joomla) там внизу блока будет черная полоска.В Html записана через тег div.

Всего записей: 88 | Зарегистр. 10-11-2008 | Отправлено: 14:56 11-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Diman19

Цитата:
В Html записана через тег div.

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

Цитата:
В HTML от джумлы,полоски при наведении закрываются.

блин, наконец понял о чем речь. вы внятнее можете описывать проблему, с картинками? либо так и сказали бы сразу - вертикальные полоски, разделяющие ссылки в меню
 
в начальном шаблоне они сделаны как <li class="line"></li>
у вас же - применяется картинка к li, которая перекрывается при :hover, поэтому линия исчезает.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 11:36 12-01-2014
Diman19

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
ну так задайте размеры диву и поместите картинку в его фон. либо картинку внутри дива.  
иначе я не понимаю что вы хотите сделать.  

 
Я хочу сделать через CSS для шаблона в Joomla.
 
 

Цитата:
у вас же - применяется картинка к li, которая перекрывается при :hover, поэтому линия исчезает.

 
Как это можно исправить? В CSS от джумлы вроде все прописал также как и в оригинальном CSS.

Всего записей: 88 | Зарегистр. 10-11-2008 | Отправлено: 15:03 12-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Diman19

Цитата:
В CSS от джумлы вроде все прописал также как и в оригинальном CSS

нет. еще раз,  в оригинальном шаблоне вертикальные разделители создаются отдельным <li> элементом, поэтому они не перекрываются фоновой картинки от <a> при :hover
 

Цитата:
Я хочу сделать через CSS для шаблона в Joomla.

 

Код:
<div class="inner">
    <div class="h3c"><div class="h3r"><div class="h3l"><h3 class="module-title">Название</h3></div></div></div>
    <div class="module-body">
    <ul class="menu">
            <li class="item-107"><a href="" >Ссылка</a></li>
        </ul>
        </div>
       <div>Нужный вам div под ссылкой</div>
        </div>


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 23:52 12-01-2014 | Исправлено: Cheery, 00:39 13-01-2014
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Как убрать зазор между меню и контентом?


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru