Войти
  1. ВКонтакте
  2. Facebook
  1. » » » Решение проблем с CSS - 13 страница
Новые публикации Скрыть панель справаПоказать панель справа

Решение проблем с CSS

2008-07-09T16:24:02+04:00 2018-01-23T14:41:21+03:00
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 181 отправлено 10:54, 09.02.2012
Добрый день! Есть горизонтальное выпадающее меню на сайте van-na.ru
Как сделать чтобы сначала меню выпадало вниз а подкатегории выпадали в сторону (напрмиер вправо), а не вниз как это сейчас.

HTML code:
  1. <div class="menu_nav">
  2.         <ul>
  3.           <li><a href="http://van-na.ru">Главная</a></li>
  4. ........
  5.     <li><a href="#">Товары для ванной</a>
  6.                  <ul class="submenu">
  7.                   <li><a href="#">Унитазы</a></li>
  8.                   <li><a href="#">Аксессуары</a></li>
  9.     <li><a href="#">Коврики</a>
  10.                  <ul class="submenu">
  11.                   <li><a href="#">Ковер 1</a></li>
  12.                   <li><a href="#">Ковер 2</a></li>
  13.                   <li><a href="#">Коврик 3</a></li>
  14.              </ul>
  15.         </li>
  16.                   <li><a href="#">Смесители</a></li>
  17.              </ul>
  18.         </li>
  19.     <li><a href="#">Тест тест тест</a></li>
  20.  
  21.         </ul>
  22.         <div class="clr"></div>
  23.       </div>


вот где коврики, нужн очтобы ковер 1 ковер 2 ковер 3 выпадали вправо.

HTML code:
  1. /* menu */
  2. .menu_nav { padding-left:20px; float:left; width:auto; padding-top:42px; font-size:16px;}
  3. .menu_nav ul { list-style:none;
  4. position:relative;
  5. }
  6. .menu_nav ul li { margin:0 4px; float:left;}
  7. .menu_nav ul li a { display:block; margin:0; padding:2px 24px; color:#fff; background-color:#7cae31; text-decoration:none;}
  8. .menu_nav ul li.active a, .menu_nav ul li a:hover { background:url(images/menu_a.gif) repeat top;}
  9. .menu_nav li ul {   visibility: hidden;
  10.     position: absolute;
  11. }
  12. .menu_nav li:hover {
  13. position:relative;
  14. }
  15. .menu_nav li:hover > ul {
  16.     visibility: visible;
  17.  }
  18. .submenu { font-size:10px; display:block;}
  19. .submenu li {width:180px;}
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 182 отправлено 12:32, 12.04.2012
Здравствуйте! Помогите исправить!
Сайт mosobel.ru/ в разработке, решили сделать бэкграунд для слайдера, но почему-то фон не заливается до конца. Подскажите - как исправить, в чём загвоздка?
/*.fs-sp1 {background:url(../images/bkg.gif) no-repeat} */
/*#freeSlide_sp1_id80 {background:url(../images/bkg.gif) no-repeat}*/
/* .sp-inner clearfix {background:url(../images/bkg.gif) no-repeat} */
/* .sp-inner-clearfix {background:url(../images/bkg.gif) no-repeat} */
/* .fs-sp1 {background:url(../images/bkg.gif) no-repeat} */
/* .fs-sp1-content {background:url(../images/bkg.gif) no-repeat} */
.fs-sp1-inner {background:url(../images/bkg3.jpg) no-repeat}
/* .fs-sp1-desc {background:url(../images/bkg.gif) no-repeat} */



.fs-sp1{position:relative}
.fs-sp1-content{background:#fff}
.fs-sp1-inner{padding:10px}
/* .fs-sp1-image{float:right;margin:0 0 0 40px} */
.fs-sp1-image{float:right;margin:0 0 0 40px} /* !!!!! */


.fs-sp1-desc{overflow:hidden;position:relative}
h2.fs-sp1-title{font-size:18px;line-height:normal;letter-spacing:normal;margin:5 px 0}

.fs-sp1-controllers{height:auto;position:absolute;bottom:10px;left:45%;z-index:1 }
.fs-sp1-prev,.fs-sp1-next,.fs-sp1-controllers span,.fs-sp1-controllers span.active{display:block;float:left;height:12px;margin-right:3px;width:12px;cur sor:pointer}
.fs-sp1-controllers span,.fs-sp1-controllers span.active{text-indent:-9999px}
.fs-sp1-controllers span{background:url(../images/btn-slider.png) no-repeat scroll 0 0}
.fs-sp1-next{background:url(../images/next.png) no-repeat scroll 0 0}
.fs-sp1-prev{background:url(../images/prev.png) no-repeat scroll 0 0}
.fs-sp1-controllers span.active{background:url(../images/btn-slider-active.png) no-repeat scroll 0 0}
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 183 отправлено 14:18, 08.05.2012
Уважаемые спецы!

Помогите разобраться. У меня есть блок #wrapper_registration в котором залит беграунд из трех картинок, в него я хочу поместить ссылки "регистрация" и "войти" это для входа пользователей. Но, никак не получается загнать эти ссылки внутрь этого блока. Ниже привожу код.

html
Спойлер [+]


css
Спойлер [+]
Профессор
  1. Офлайн
  2. Посетители
  3. 138 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 184 отправлено 15:49, 08.05.2012
советую прочитать про позиционирование, но ошибка у тебя именно в нем.
что-бы использовать абсолютное позиционирование, тебе нужен блок родитель, с позиционированием, relative

Последний раз редактировал arrow25 15:51, 08.05.2012
Абитуриент
  1. Офлайн
  2. Посетители
  3. 2 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 185 отправлено 20:30, 08.05.2012
Добрый день, у меня проблема следующего характера, на моём сайте есть боковая панель в Opera позиционирование этого элимента постоянно меняется в других же браузерах он имеет фиксированное положение.

Вот вся таблица css:

/**
* TemplatePlazza
* TemplatePlazza.com
**/
body{
overflow-x: hidden;
}

#dropcartborder{
width: 112px;
font-size: 11px;
color: #ffffff;
padding: 0px 10px;
background-color: #000000;
position: fixed;
top: 0px;
right: 0px;

}

#showhidecart{
width: 30px;
height: 100px;
color: #ffffff;
background: url(showhide.png) 50% 50% no-repeat #000000;
position:absolute;
top: 50%;
left: -25px;
cursor: pointer;
-moz-border-radius: 5px;

}

#titledragcart{
width: 108px;
height: 50px;
}

#dropcart{
width: 110px;
line-height: normal;
}

#dropcart a:link,
#dropcart a:visited,
#dropcart a:active{
text-decoration: underline;
}

.itemcart{
width: 105px;
cursor: move;
margin-bottom: 10px;
background: url(handle.png) no-repeat 50% 0;
}

.itemcart .imgdragcart{
border: 1px solid #ffffff;
background-color: #ffffff;
}

.thumbscart{
display: block;
width: 112px;
text-align: center;
padding: 10px 0px;
}

.thumbscart a:link, .thumbscart a:visited, .thumbscart a:active{
display: block;
}

.thumbscart img{
width: 50px;
height: 50px;
}

.cartborder{
}

#myminicart{
overflow: hidden;

padding: 20px 0px;
background: url(back.png) repeat-y #ffffff;
-moz-border-radius: 5px;
position: relative;
}

.minicartinner{
position: absolute;
}

.cartleft, .cartright{
height: 36px;
margin-bottom: -15px;
background: url(up.png) 50% 50% no-repeat;
position: relative;
z-index: 99999;
cursor: pointer;
}

.cartright{
margin-bottom: 0px;
margin-top: -15px;
background: url(bottom.png) 50% 50% no-repeat;
}

.cartinfo{
line-height: normal;
padding-top: 10px;
}

.minicarttotal, .minicartprice, .shopcartcheck{
font-size: 11px;
color: #ffffff;
text-align: center;
padding: 0px 10px;
}

.minicarttotal{
font-size: 13px;
font-weight: bold;
letter-spacing: -0.05em;
}

.shopcartcheck{
font-weight: bold;
margin-top: 10px;
}

#myminicartborder .shopcartcheck a:link,
#myminicartborder .shopcartcheck a:visited,
#myminicartborder .shopcartcheck a:active{
display: block;
width: 84px;
height: 20px;
text-decoration: none;
color: #ffffff;
line-height: 20px;
background: url(button.png) no-repeat;
}

#myminicartborder .shopcartcheck a:hover{
color: #ffffff;
}

.cartempty{
font-size: 11px;
color: #afafaf;
font-weight: bold;
padding-top: 30px;
}

.cartf {
display:block;
width:10px;
height:5px;
text-indent:-50000px;
}

как мне кажется проблема кроется в #dropcartborder и #showhidecart, что можно сделать для того чтобы в Opera элемент тоже был фиксирован.Вот адрес сайта fi-ko.com.ua, а вот как к примеру выглядит тоже место
на другой странице чтобы вы могли представить в чём дело.

Заранее огромное спасибо за помощь!!!!!!!!!!!!!!!
Абитуриент
  1. Офлайн
  2. Посетители
  3. 2 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 186 отправлено 20:33, 08.05.2012
Добрый день, у меня проблема следующего характера, на моём сайте есть боковая панель в Opera позиционирование этого элимента постоянно меняется в других же браузерах он имеет фиксированное положение.

Вот вся таблица css:

/**
* TemplatePlazza
* TemplatePlazza.com
**/
body{
overflow-x: hidden;
}

#dropcartborder{
width: 112px;
font-size: 11px;
color: #ffffff;
padding: 0px 10px;
background-color: #000000;
position: fixed;
top: 0px;
right: 0px;

}

#showhidecart{
width: 30px;
height: 100px;
color: #ffffff;
background: url(showhide.png) 50% 50% no-repeat #000000;
position:absolute;
top: 50%;
left: -25px;
cursor: pointer;
-moz-border-radius: 5px;

}

#titledragcart{
width: 108px;
height: 50px;
}

#dropcart{
width: 110px;
line-height: normal;
}

#dropcart a:link,
#dropcart a:visited,
#dropcart a:active{
text-decoration: underline;
}

.itemcart{
width: 105px;
cursor: move;
margin-bottom: 10px;
background: url(handle.png) no-repeat 50% 0;
}

.itemcart .imgdragcart{
border: 1px solid #ffffff;
background-color: #ffffff;
}

.thumbscart{
display: block;
width: 112px;
text-align: center;
padding: 10px 0px;
}

.thumbscart a:link, .thumbscart a:visited, .thumbscart a:active{
display: block;
}

.thumbscart img{
width: 50px;
height: 50px;
}

.cartborder{
}

#myminicart{
overflow: hidden;

padding: 20px 0px;
background: url(back.png) repeat-y #ffffff;
-moz-border-radius: 5px;
position: relative;
}

.minicartinner{
position: absolute;
}

.cartleft, .cartright{
height: 36px;
margin-bottom: -15px;
background: url(up.png) 50% 50% no-repeat;
position: relative;
z-index: 99999;
cursor: pointer;
}

.cartright{
margin-bottom: 0px;
margin-top: -15px;
background: url(bottom.png) 50% 50% no-repeat;
}

.cartinfo{
line-height: normal;
padding-top: 10px;
}

.minicarttotal, .minicartprice, .shopcartcheck{
font-size: 11px;
color: #ffffff;
text-align: center;
padding: 0px 10px;
}

.minicarttotal{
font-size: 13px;
font-weight: bold;
letter-spacing: -0.05em;
}

.shopcartcheck{
font-weight: bold;
margin-top: 10px;
}

#myminicartborder .shopcartcheck a:link,
#myminicartborder .shopcartcheck a:visited,
#myminicartborder .shopcartcheck a:active{
display: block;
width: 84px;
height: 20px;
text-decoration: none;
color: #ffffff;
line-height: 20px;
background: url(button.png) no-repeat;
}

#myminicartborder .shopcartcheck a:hover{
color: #ffffff;
}

.cartempty{
font-size: 11px;
color: #afafaf;
font-weight: bold;
padding-top: 30px;
}

.cartf {
display:block;
width:10px;
height:5px;
text-indent:-50000px;
}

как мне кажется проблема кроется в #dropcartborder и #showhidecart, что можно сделать для того чтобы в Opera элемент тоже был фиксирован.Вот адрес сайта fi-ko.com.ua, а вот как к примеру выглядит тоже место
на другой странице чтобы вы могли представить в чём дело.

Заранее огромное спасибо за помощь!!!!!!!!!!!!!!!
Профессор
  1. Офлайн
  2. Посетители
  3. 138 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 187 отправлено 21:27, 09.05.2012
какая панель?, та что с права где корзина?, если делаешь магазин то на мой взгляд лучше использовать cms специализированный именно на магазин, а не всякие расширения для joomla.
если есть возможность отключить эту выдвижную панель то просто отключи её), и картинки все прогоняй через какой-нить ужиматель), или это скриптов у тебя так много что сайт довольно таки долго грузится , при моих 2мб скорости, если у тебя у самого скорость 100мб это не значит что у всех она такая-же.

и да по пути относительно твоего каталога сайта, замени стиль css тут /modules/mod_tpdropcartvm/mod_tpdropcartvm.css

а именно
найди класс .searchvm .inputbox

и в него запиши это:

JavaScript code:
  1. .searchvm .inputbox {
  2.     background: url("../images/search-back.png") no-repeat scroll 0 0 transparent;
  3.     border: medium none;
  4.     padding: 8px 10px;
  5.     width: 250px; /*или оставь как и было 230px , посмотри с разных браузеров, и найди оптимальный вариант*/
  6. }


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


и нахрена писать по 2 поста?, да и еще 1 в другой теме?

Последний раз редактировал arrow25 22:18, 09.05.2012
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 188 отправлено 21:03, 27.05.2012
Здравствуйте.
Я новичок в области css.
Требуется ваша помощь.
Суть в следующем:

необходимо спозиционировать echo "<p>тро-ло-ло.</p>"; так,чтобы оно было напротив выводимого поля.
данный вывод текста находися в условии " if ".
Заранее всем большое спасибо.
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 189 отправлено 19:37, 10.07.2012
добрый день пытаюсь сделать таблицу дивами но получается вот че
рисунок

HTML code:
  1. <div>
  2.         <div id="one" class="le"></div><div id="four"></div>
  3.         <div id="two" class="le"></div><div id="five"></div>
  4.         <div id="three" class="le"></div>
  5.         <div class="clear"></div>
  6.  
  7. </div>

HTML code:
  1. .clear{
  2. clear:both;
  3. }
  4. .le{
  5. float:left;
  6. width:20px;
  7. height:20px;
  8. display:inline-block;
  9. background:#cfc;
  10. }
  11. #four{
  12. background:#222;
  13. width:20px;
  14. height:20px;
  15. position:relative;
  16. left:20px;
  17. }
  18. #five{
  19. background:#555;
  20. width:20px;
  21. height:200px;
  22. position:relative;
  23. left:20px;
  24. }


в чем ошибка подскажите

Последний раз редактировал IHD 19:39, 10.07.2012
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 190 отправлено 02:28, 16.05.2013
Здравствуйте!
Никак не могу победить проблему. Может быть, кто-то знает решение?

Суть:
Есть двух колоночная разметка страницы, состоящая из классических блоков div: #header, #content, #sidebar и #footer.
#sidebar - справа.

Для лучшей поисковой оптимизации порядок следования блоков в html следующий:
HTML code:
  1. #header
  2. #content
  3. #sidebar
  4. #footer


Разметка div на одном уровне выполняется с помощью float. Таблицы не используются.

Необходимо, чтобы #sidebar имел фон (background) во всю страницу до самого #footer, но не пересекал его границы.
При этом содержимое #content может быть выше содержимого #sidebar.

Для решения задачи использую дополнительный блок div - #middle, а также css background-image.
Вот схематичный код html:

HTML code:
  1. <div id="header">...</div>
  2. <div id="middle">
  3.     <div id="content">...</div>
  4.     <div id="sidebar">...</div>
  5. </div>
  6. <div id="footer">...</div>



Вот ключевые моменты кода css:
HTML code:
  1. #content{
  2.    float: left;
  3.    width: 650px;
  4. }
  5. #sidebar{
  6.    float: right;
  7.    width: 300px;
  8. }
  9. #footer{
  10.    clear: both;
  11. }
  12. #middle{
  13.    background: url(images/bg.gif) repeat-y right top;
  14.    border: 1px solid red;
  15. }


Вроде всё должно работать, как надо, но не работает.
Дело в том, что блок #middle почему-то сжимается в линию (это можно увидеть, благодаря border). В итоге #content и #sidebar располагаются под ним, а должны располагаться в нём.

Можно ли как-то решить эту проблему, не отказываясь от float?
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 191 отправлено 19:56, 15.08.2013
Здравствуйте. У меня проблемка, я делал шаблон на артистере, и щас мне нужно создать для него вертикальное, выплывающее меню вручную. Вроде все сделал так как надо, но... вертикальное меню начинает выплывать только при нажатии этой ссылки. Т.е, когда я нажимаю на ссылку того пункта на котором должно выплывать меню, я жду загрузки той ссылки и только после этого начинает работать выплывающее меню, а когда я перехожу на другую ссылку, то это меню не выплывает. Вопрос. Какой код в шаблоне может мешать выплыванию этих подменю без нажатия. Помогите пожалуйсто, уже 2-й день сижу и не как. Заранее благодарен.
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 192 отправлено 04:11, 29.03.2014
Задача выравнять текст как это показано в шаблоне фш, пробовал через vertical-align - безуспешно. Помогите советом, пожалуйста. :)
P.S.
Думаю, отличите скрин фш от скрина браузера.

Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 193 отправлено 14:41, 23.01.2018
Добрый день! У меня вопрос! Прошу прощения, но написал чуть не в ту тему видимо... forum.css-school.ru
 
Перейти
Найти

Доступ закрыт.

  1. Вам запрещено отвечать в темах данного форума.

Последние темы

  1. Как выбрать по пустому аттрибуту?
    Автор: 1datr 16:24, 16.05.2018
  2. Решение проблем с CSS
    Автор: Toshka 14:41, 23.01.2018
  3. Проблема с подвалом
    Автор: Toshka 11:40, 23.01.2018
  4. Запись из формы в текстовый файл.
    Автор: Ralphreula 00:49, 24.11.2017
  5. А как?
    Автор: delmetfne 21:14, 20.11.2017

Изменения статуса

  1. профиль Видимо, я последний выживший :) 01:19, 17.10.2011
  2. профиль Готов стать модератором)) 12:04, 17.09.2011
  3. профиль Восстанавливаем нормальную работу сайта и форума. 20:09, 13.09.2011