Studio AD : Вопросы по CSS

Очень важная тема!
Filmzona — онлайн фильмы.

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

Задаем вопросы!

OnMusic

Дата: Пятница, 18.12.2009, 15:59 | Сообщение # 2

говорун

Группа: Проверенные

Пользователь №: 120

Сообщений: 158

Получено оценок: 11

Карма: 11

Замечания: 40%

Code

::selection {
  background: #add2e1;
  color: #000;
  }
::-moz-selection {
  background: #add2e1;
  color: #000;
  }

.mframe1 {padding:2 10 30 10px;}
label {cursor:pointer;cursor:hand}

#ntf {width:79%; margin:0 0 25px 10px;}
*:first-child+html #ntf {width:82%;}

h1, h2, h3, h4 { font-weight:normal; }
h1, h2 { font-size:20px; margin-bottom:0px; }
h1.fullstory { color:#0fadb3; }
h1.fullstory span { color:#000; }

За что все это отвечает?

Дата: Пятница, 18.12.2009, 16:17 | Сообщение # 3

Группа: Удаленные

За классы которые ты тут показываеш. Тут применены хаки, вероятно изза этого ты не очень понял.

UnderShot

Дата: Пятница, 18.12.2009, 16:54 | Сообщение # 4

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Очень важная тема!
Filmzona — онлайн фильмы.

OnMusic, «h1, h2, h3, h4» — заголовки

Code

.mframe1 {padding:2 10 30 10px;}
label {cursor:pointer;cursor:hand}

Что-то стандартное у юкоза

Дата: Пятница, 18.12.2009, 18:31 | Сообщение # 5

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

-moz-selection и selection это цвет выделения текста.

*:first-child+html это хак для IE7.

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

Дата: Пятница, 18.12.2009, 18:47 | Сообщение # 6

Watching you

Группа: Администраторы

Пользователь №: 2

Сообщений: 1621

Получено оценок: 167

Карма: 193

Code

label {cursor:pointer;cursor:hand}

это сопроводительный текст, обычно к radio или checkbox, нажатие на который так же вызывает их реагирование.

WRC

Дата: Суббота, 20.02.2010, 08:07 | Сообщение # 7

говорун

Группа: Проверенные

Пользователь №: 223

Сообщений: 149

Получено оценок: 11

Карма: 25

Устраняем баг при просмотре материала

как это:

Code

div>div.lol {...}

можно осуществить в ie???

Дата: Суббота, 20.02.2010, 22:34 | Сообщение # 8

Watching you

Группа: Администраторы

Пользователь №: 2

Сообщений: 1621

Получено оценок: 167

Карма: 193

WRC, конкретно это - никак (кроме expressions, что долго и неудобно), поэтому ie все ненавидят. Но можно писать в данном случае через пробел. Эффект тот же будет:

Code

div div.lol{}

Дата: Четверг, 11.03.2010, 22:00 | Сообщение # 9

молчун

Группа: Проверенные

Пользователь №: 203

Сообщений: 37

Поставил себе подсветку от гугла, но столкнулся с проблемой она растягивает форум, я поставил:

Code

width: 100%; overflow: auto;

но она всё равно растягивает форум, что делать?

Дата: Пятница, 12.03.2010, 02:35 | Сообщение # 10

Watching you

Группа: Администраторы

Пользователь №: 2

Сообщений: 1621

Получено оценок: 167

Карма: 193

kyza, надеяться на наши экстрасенсорные способности по определению адреса вашего сайта и типа подсветки..

Дата: Пятница, 12.03.2010, 06:05 | Сообщение # 11

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Quote (Aleko)

наши экстрасенсорные способности

Силой ясновиденья, Вангой великой даною мне, я узрел истину!

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

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

Сообщение отредактировал BeSinLi - Пятница, 12.03.2010, 06:05

Дата: Пятница, 12.03.2010, 13:30 | Сообщение # 12

молчун

Группа: Проверенные

Пользователь №: 203

Сообщений: 37

Aleko, Извините я подумал вы сочтёте это за рекламу вот пример
я пока-что поставил

Code

width: 800px;

но мне надо чтобы она растягивалась на всю страницу

Quote (BeSinLi)

полностью весь код и дизайн сайта нужно переделать, или конец ему настанет

не пугай меня так

Дата: Пятница, 12.03.2010, 14:13 | Сообщение # 13

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Quote (kyza)

но мне надо чтобы она растягивалась на всю страницу

Это из-за того что скрипт использует тег pre а не div, по крайней мере мне так показалось.

Простейший выход из ситуации поменять скрипт.

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

Дата: Пятница, 12.03.2010, 14:21 | Сообщение # 14

молчун

Группа: Проверенные

Пользователь №: 203

Сообщений: 37

Quote (BeSinLi)

Простейший выход из ситуации поменять скрипт.

Это мне не подходит... есть ещё варианты, может можно заменить "pre" на "div" ?

Дата: Пятница, 12.03.2010, 15:36 | Сообщение # 15

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Quote (kyza)

Это мне не подходит...

Почему?

Quote (kyza)

может можно заменить "pre" на "div"

Перепиши скрипт.

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

Дата: Пятница, 12.03.2010, 18:45 | Сообщение # 16

Watching you

Группа: Администраторы

Пользователь №: 2

Сообщений: 1621

Получено оценок: 167

Карма: 193

kyza, юзай мою подсветку.

Дата: Пятница, 12.03.2010, 19:54 | Сообщение # 17

молчун

Группа: Проверенные

Пользователь №: 203

Сообщений: 37

Quote (BeSinLi)

Почему?

Мне эта нравится

Quote (BeSinLi)

Перепиши скрипт.

Эх... если-бы нашёл хороший сайт по яве и jQuery...

Дата: Пятница, 12.03.2010, 22:30 | Сообщение # 18

Группа: Удаленные

Я не особо понимаю что делает clear в css. Можете просвятить ?

SinuS

Дата: Пятница, 12.03.2010, 23:21 | Сообщение # 19

говорун

Группа: Модераторы

Пользователь №: 179

Сообщений: 195

Получено оценок: 15

Карма: 20

ad, параметр clear устанавливает с какой стороны запрещено обтекание элемента другими элементами.

Talk is cheap.

Дата: Суббота, 13.03.2010, 01:08 | Сообщение # 20

Группа: Удаленные

SinuS, Тоесть например 2 дива есть. Один красный, другой синий. Синий немного наезжает справа на красный див. А clear если написать к синему, то наезд уберется ? Или я чет непонял ? O_o

Дата: Суббота, 13.03.2010, 06:01 | Сообщение # 21

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Quote (Aleko)

kyza, юзай мою подсветку.

Твоя подсветка не доделана.

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

SinuS

Дата: Суббота, 13.03.2010, 23:19 | Сообщение # 22

говорун

Группа: Модераторы

Пользователь №: 179

Сообщений: 195

Получено оценок: 15

Карма: 20

ad, clear: right в css назначишь красному диву, тогда синий его не будет обтекать справа.

Talk is cheap.

Дата: Воскресенье, 14.03.2010, 01:05 | Сообщение # 23

Группа: Удаленные

SinuS, Аа, спасибо! ^_^

Raiderr

Дата: Воскресенье, 14.03.2010, 01:50 | Сообщение # 24

болтун

Группа: Проверенные

Пользователь №: 673

Сообщений: 349

Получено оценок: 26

Карма: 42

Замечания: 80%

Мне нужно, чтобы Изображение1 (оно полупрозрачное), стояло поверх Изображение2 и сделать это через классы. Нужно сделать, чтобы это работало вот так:

Code

Что в классе xxxxxx нужно писать? И какой скрипт нужен сюда?

Новый кавер Jar of Hearts: http://www.youtube.com/watch?v=OLkXQMHVRhI

Дата: Воскресенье, 14.03.2010, 03:15 | Сообщение # 25

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Raiderr,

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.img { background: url(.../img-2.png); }
</style>
</head>

<body>
<img class="img" src=".../img-1.png" />
</body>

</html>

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

Сообщение отредактировал BeSinLi - Воскресенье, 14.03.2010, 03:16

Raiderr

Дата: Воскресенье, 14.03.2010, 10:28 | Сообщение # 26

болтун

Группа: Проверенные

Пользователь №: 673

Сообщений: 349

Получено оценок: 26

Карма: 42

Замечания: 80%

только так? так я знаю, просто переменная у меня Изображение2, а Изображение1 стабильная. Кароче нужно чтобы в стилях было накладывающее изображение, а в самом имг был его класс

Новый кавер Jar of Hearts: http://www.youtube.com/watch?v=OLkXQMHVRhI

icRosS

Дата: Четверг, 15.04.2010, 18:04 | Сообщение # 27

молчун

Группа: Проверенные

Пользователь №: 1508

Сообщений: 21

Замечания: 20%

И так вт в чем заключаеся моя проблема:

Когда я начал верстать один шаблон, что бы не пользваоться

Code

<span style = "font-size:9pt" и т.д.>текст</span>

Я решил сделать через css:

Добавил в css:

Code

{
  font-family: Arial, sans-serif;
  }
  .letter {
  color: red;
  font-size: 200%;
  font-family: serif;
  position: relative;
  top: 5px;
  }

И когда пишу в html шаблоне, пишу просто:

Code

<span class="letter">текст</span>

Но не работает, может поможете, скажите как сделать так чтоб работало?

И можно letter заменить на свое?

Дата: Четверг, 15.04.2010, 18:19 | Сообщение # 28

Watching you

Группа: Администраторы

Пользователь №: 2

Сообщений: 1621

Получено оценок: 167

Карма: 193

icRosS, должно работать. Попробуй не в процентах указать.

chu4___x

Дата: Пятница, 16.04.2010, 01:54 | Сообщение # 29

говорун

Группа: Проверенные

Пользователь №: 13

Сообщений: 211

Получено оценок: 19

Карма: 36

«POST данные для модулей системы»

Code

{
font-family: Arial, sans-serif;
}

Что это такое?

icRosS

Дата: Пятница, 16.04.2010, 11:58 | Сообщение # 30

молчун

Группа: Проверенные

Пользователь №: 1508

Сообщений: 21

Замечания: 20%

chu4___x, это указывает шрифт и вроде бы его стиль

Дата: Пятница, 16.04.2010, 12:02 | Сообщение # 31

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

http://www.w3.org/TR/CSS2/fonts.html#font-family-prop

Quote (chu4___x)

Что это такое?

Или я не понял о чем речь…

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

WRC

Дата: Пятница, 16.04.2010, 12:14 | Сообщение # 32

говорун

Группа: Проверенные

Пользователь №: 223

Сообщений: 149

Получено оценок: 11

Карма: 25

Устраняем баг при просмотре материала

chu4___x, имеет ввиду почему оно там стоит без указания класса или ещё чёт... кароче... то есть должно быть .lol{...}

Djekky

Дата: Пятница, 16.04.2010, 16:05 | Сообщение # 33

шептун

Группа: Проверенные

Пользователь №: 28

Сообщений: 70

Получено оценок: 11

Карма: 8

Замечания: 20%

Quote (BeSinLi)

Или я не понял о чем речь…

Quote

body {
font-family:Arial, sans-serif;font-size:12px;
}

Рыжиk

Дата: Понедельник, 17.05.2010, 23:09 | Сообщение # 34

молчун

Группа: Пользователи

Пользователь №: 799

Сообщений: 4

Здравствуйте=) очень нужен совет))) скажите пожалуйста если я хочу сделать текст в круге как мне это осуществить?) ведь текст всегда разный.. чтобы не вылезало)))
спасибо большое!=)

Сообщение отредактировал Рыжиk - Понедельник, 17.05.2010, 23:14

Raiderr

Дата: Понедельник, 17.05.2010, 23:16 | Сообщение # 35

болтун

Группа: Проверенные

Пользователь №: 673

Сообщений: 349

Получено оценок: 26

Карма: 42

Замечания: 80%

Рыжиk, сделать можно, но гимаройно, с помощью js и css3

Новый кавер Jar of Hearts: http://www.youtube.com/watch?v=OLkXQMHVRhI

MrFrost

Дата: Среда, 19.05.2010, 18:21 | Сообщение # 36

молчун

Группа: Проверенные

Пользователь №: 2614

Сообщений: 31

Получено оценок: 5

Карма: 1

Рыжиk, Я не совсем понял. Если вы имеете ввиду то, что текст вылезает за круг, то так:

Code

.class{overflow:auto}

А если текст вылезает на углах круга, то круг лучше сделать через border-radius, хотя это не кроссбраузерно:

Code

.class{
border:1px solid #000;
width:300px;
height:300px;
border-radius:150px;
-moz-border-radius:150px;
-webkit-border-radius:150px;
}

Я не понял что именно нужно

Сообщение отредактировал MrFrost - Среда, 19.05.2010, 18:22

Дата: Пятница, 04.06.2010, 11:52 | Сообщение # 37

спикер

Группа: Проверенные

Пользователь №: 127

Сообщений: 516

Получено оценок: 41

Если кто знает, что делает фильтр :target, прост понять не могу...

aka Latro

Дата: Пятница, 04.06.2010, 12:20 | Сообщение # 38

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Quote (DSC)

Если кто знает, что делает фильтр :target, прост понять не могу...

К примеру:

Code

Если перейти по ссылке http://www.google.com/#blah цвет текста спана с id #blah изменится с белого на красный.

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

Дата: Пятница, 04.06.2010, 14:28 | Сообщение # 39

спикер

Группа: Проверенные

Пользователь №: 127

Сообщений: 516

Получено оценок: 41

аааа, спасиб! =)

aka Latro

Дата: Суббота, 05.06.2010, 19:22 | Сообщение # 40

спикер

Группа: Проверенные

Пользователь №: 127

Сообщений: 516

Получено оценок: 41

а что делает псевдо-класс :not()

aka Latro

Дата: Суббота, 05.06.2010, 19:43 | Сообщение # 41

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

http://www.quirksmode.org/css/not.html

Quote (DSC)

а что делает псевдо-класс :not()

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

Дата: Четверг, 10.06.2010, 18:22 | Сообщение # 42

спикер

Группа: Проверенные

Пользователь №: 127

Сообщений: 516

Получено оценок: 41

я вот не пойму, чем отличается :first-child от :first-of-type

aka Latro

Дата: Четверг, 10.06.2010, 19:20 | Сообщение # 43

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo

Quote (DSC)

я вот не пойму, чем отличается :first-child от :first-of-type

http://www.w3.org/TR/css3-selectors/#first-child-pseudo

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

Дата: Четверг, 10.06.2010, 19:26 | Сообщение # 44

спикер

Группа: Проверенные

Пользователь №: 127

Сообщений: 516

Получено оценок: 41

BeSinLi, я понял что оно так работает, но мне не понятно, чем отличается!

aka Latro

ROBIBEX

Дата: Пятница, 11.06.2010, 14:47 | Сообщение # 45

молчун

Группа: Пользователи

Пользователь №: 3049

Сообщений: 8

Всем привет

, надеюсь я попал по адресу, потому что я новенький тут, ещё не освоился, ну да ладно. Итак:
Наглядная проблема (Скрин):

как вы видите мой первый и неудачный сайт состоит из...не важно... всё сделано в CSS а вёрстка div-ами. скажите пожалуйста что мне написать в CSS чтобы "правый контейнер" "контент" "левый контейнер" растягивались нормально(ну то есть по одной ширине до footer'а
если вы не против мой весь код в CSS:

Code

body{
   margin:0;
   padding:0;
   font:bold 13px Verdana, Arial, Helvetica, sans-serif;
   color:#666;
   text-align:center;
}

#content h2 {
   text-shadow: 2px 2px 1px #C3DBE5;
   }

#wrapper {
   margin:0 auto;
   width:100%;
   min-width:920px;
}
*html #wrapper{
   width:expression(document.documentElement.clientWidth < 920 ? "920px" : "auto");
}
#header{
   background-image:url(/img/logofon.png);
   height:100px;
   border:1px solid #a4ce60;
   line-height:100px;
   border-right:0;
   border-left:0;
}

#navigation{
   border:1px solid #bed63a;
   background:#e1edbf;
   padding: 0px 0px 35px 35px;

}
#main{
   float:left;
   width:100%;
   display:inline;
   overflow:hidden;
}
#content{
   margin:0 202px 0 201px;
   border:1px solid #d2d2d2;
   height:100%;
   min-height:350px;
   line-height:350px;
   background:#e6e6e6;
}
#leftcolumn{
   float:left;
   overflow:visible;
   width:200px;
   margin:0 -201px 0 0;
   display:inline;
   background:#e1edbf;
   height:100%;
   min-height:350px;
   border-top:1px solid #bed63a;
   border-bottom:1px solid #bed63a;
   border-right:1px solid #bed63a;
}
#rightcolumn{
   float:left;
   width:201px;
   overflow:visible;
   position: relative;
   margin:0 0 0 -202px;
   background:#e1edbf;
   height:100%;
   min-height:350px;
   border-top:1px solid #bed63a;
   border-bottom:1px solid #bed63a;
   border-left:1px solid #bed63a;
}
#footer{
   clear:left;
   background-image:url(/img/footer.png);
   text-align:center;
   overflow:visible;
   border:1px solid #bed63a;
   border-left:0;
   border-right:0;
   padding:10px 0;
   width:100%;
}
.innertube{
   margin:0 10px 0 10px;
}
/*навигация горизонтальное меню(начало)*/
   * {
   border: 0;
   padding: 0;
   margin: 0;
   }
   #nav {
   float: left;
   width: 500px;
   list-style: none;
   position: relative;
   }
   #nav li {
   float: left;
   border-right: 1px solid #999;
   }
   #nav li a {
   padding: 10px 15px;
   display: block;
   color: #AFCE51;
   text-decoration: none;
   }
   #nav li a:hover {
   color: #fff;
   text-decoration: none;
   }
   #nav li:hover {
   background: #bdda7e;
   }
   #nav li span {
   float: ;
   padding: 15px 0;
   position: absolute;
   left: 0;
   top:35px;
   display: none;
   width: 500px;
   background: #bdda7e;
   color: #fff;
   }
   #nav li:hover span {
   display: block;
   }
   #nav li span a {
   display: inline;
   }
/*навигация горизонтальное меню(конец)*/

HTML я думаю не нужен там всё равно ничего нет

Сообщение отредактировал ROBIBEX - Пятница, 11.06.2010, 14:49

WRC

Дата: Пятница, 11.06.2010, 16:24 | Сообщение # 46

говорун

Группа: Проверенные

Пользователь №: 223

Сообщений: 149

Получено оценок: 11

Карма: 25

Устраняем баг при просмотре материала

ROBIBEX, думаю для такой проблема нужно создавать темы...
http://studioad.ru/index/0-10 > http://studioad.ru/divit/divit_4444.txt

ROBIBEX

Дата: Пятница, 11.06.2010, 16:30 | Сообщение # 47

молчун

Группа: Пользователи

Пользователь №: 3049

Сообщений: 8

не буду флудить, думаю вопрос элементарный просто я только начал изучать css, и хотя руководствуюсь электронным вариантом всё равно не нашёл ответа

Сообщение отредактировал ROBIBEX - Пятница, 11.06.2010, 16:30

Андрей

Дата: Пятница, 11.06.2010, 19:30 | Сообщение # 48

шептун

Группа: Проверенные

Пользователь №: 189

Сообщений: 65

Получено оценок: 11

Карма: 6

ROBIBEX, Поищи ответ здесь
P.S "Правый контейнер - Левый контейнер" помню нам всадике на руке ручкой крестики ставили, чтоб знали, что это правая рука, если крестика нет, значит это левая.
Попробуй, помогает !

Сообщение отредактировал Андрей - Пятница, 11.06.2010, 19:34

ROBIBEX

Дата: Пятница, 11.06.2010, 19:45 | Сообщение # 49

молчун

Группа: Пользователи

Пользователь №: 3049

Сообщений: 8

Изучил статью вдоль и поперёк, результат не тот.

Quote

После установки подобных стилей, наш шаблон приобрел более менее завершенный вид, но это ещё не всё. Обратите внимание: если вы начнете добавлять контент в левую или в правую колонку - она, растягиваясь, проедет над футером. Это происходит от того, что боксы с параметром float:left; или float:right; не растягивают родительский бокс (бокс в котором находятся).
Для решения этой проблемы нам нужно добавить в самый низ бокса "контейнер" ещё один пустой бокс с параметром clear:both; и после этого контейнер будет растягиваться при увеличении контента в колонках

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

Сообщение отредактировал ROBIBEX - Пятница, 11.06.2010, 19:48

Андрей

Дата: Пятница, 11.06.2010, 19:58 | Сообщение # 50

шептун

Группа: Проверенные

Пользователь №: 189

Сообщений: 65

Получено оценок: 11

Карма: 6