forum.boolean.name

forum.boolean.name (http://forum.boolean.name/index.php)

- JavaScript / HTML (http://forum.boolean.name/forumdisplay.php?f=136)

- - CSS FAQ (http://forum.boolean.name/showthread.php?t=12399)

ABTOMAT

20.04.2010 23:54

CSS FAQ

Предлагаю запилить FAQ по мелким вопросам по CSS/HTML, которые могут возникнуть.
Или которые возникли у Вас, Вы нашли решение и хотите поделиться, чтоб другие не искали.
В дальнейшем будем расширять и дополнять.
Итак, запиливаю первый вопрос:

1. В: Chrome и Safari подсвечивают мне поля жёлтой/синей рамочкой, а мне этого не надо! Как это отключить?
О: Прописать в стиле инпута outline: none;

2. В: Эти же негодяи подсвечивают форму ввода с сохранённым вводом, чего мне опять не надо.
О: Придётся жёстко задавать цвет, причём даже с !important'ом: color: #2a2a2a !important;. Цвет, естессна, какой надо выбираем сами.

devolonter

21.04.2010 00:52

Ответ: CSS FAQ

3.В: В IE6-7 у float-элементов удваивается отступ слева и справа. Как лечить?
О: установить свойство display для ie в значение inline (это можно сделать в том же css файле используя хак //display:inline)

4. В: В IE6-7 не работает свойство display:inline-block. Что делать?
О: Добавляем для IE zoom:1, display:inline (опять можно воспользоваться хаками)

5. Ставлю в IE6-7 высоту блока = 1px, но она явно больше. Как исправить?
О: Добавляем для IE следующее правило: font-size:0

JeanWinters

13.12.2010 16:21

Ответ: CSS FAQ

А вопросы можно задавать в этом разделе?

ABTOMAT

13.12.2010 18:07

Ответ: CSS FAQ

Давай, потом оформим как FAQ

JeanWinters

13.12.2010 18:27

Ответ: CSS FAQ

Как средствами CSS сделать такое положение текста:

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

ABTOMAT

13.12.2010 18:34

Ответ: CSS FAQ

То, что у тебя выделено, вынести в отдельный див. Назовём его .note
Далее по обстановке:
1. Если NOTE - это фигурный текст картинкой, ну или просто картинка, то диву .note даём background-image: url('путь к картинке') no-repeat; padding-left: 30px;
2. Если NOTE - текст.
Тогда внутри .note делаем ещё два дива, пусть они называются .left и .right
В .left будет надпись NOTE и будет ему ксс такой: width: 30px; float: left;
В .right будет собственно текст, и ксс такой: float: left;
Цвета и шрифты - по вкусу.

JeanWinters

13.12.2010 20:00

Ответ: CSS FAQ

Мне кажется ты ошибся со вторым внутренним div'ом, может быть "float:right;"? Хотя, в любом случае, этот способ не возымел действия.

Код:

<html>

<head>

</head>

<body>

   <div>

         <div style="width:30px; float:left;">

          NOTE

         </div>



         <div style="float:right;"> 

           There is nothing special about the scripts we are using for the player. They  are perfectly ordinary Unity scripts which have been built for this projects. There is no default Character Controller script.

           </div>



</div>

</body>

</html>

В IE6 работает, но коряво ("NOTE" наезжает на текст, который справа), а в FF3.6 вообще нет эффекта.

JeanWinters

13.12.2010 20:43

Ответ: CSS FAQ

Сделал вот так:

Код:

<html>

<head>

</head>

<body style="margin:25px;">



<div style="width:512px;">

    <div style="width:15%; float:left;">

       NOTE

     </div>



      <div style="width:85%; float:left;"> 

           There is nothing special about the scripts we are using for the player. 

            They are perfectly ordinary Unity scripts which have been built for this 

            projects.  There is no  default Character Controller script.

      </div>

</div>



<p>

Some text..

</p>



</body>

</html>

Но тут (как всегда) вылезло "другое" - в IE6 работает как нужно, в FF3.6 текст в теге <p></p> не переходит на новую строку, т.е. почему-то этот тег не рассматривает предыдущий как блочный, а вроде видит как инлайновый..:crazy:

ABTOMAT

13.12.2010 21:38

Ответ: CSS FAQ

clear: both примени, можно даже инлайном (не люблю ну да ладно):
<div style="clear: both"></div>

после второго дива

JeanWinters

13.12.2010 22:09

Ответ: CSS FAQ

ты имеешь ввиду так?

Код:

      <div style="width:85%; float:left; clear:both;"> 

           There is nothing special about the scripts we are using for the player. 

            They are perfectly ordinary Unity scripts which have been built for this 

            projects.  There is no  default Character Controller script.

      </div>

Не вышло..
Добавил перед <p></p>
<br style="clear:both;">
Вроде сработало, но протестировал только в IE6 и FF3.6

ABTOMAT

13.12.2010 22:47

Ответ: CSS FAQ

<div style="width:85%; float:left;">
There is nothing special about the scripts we are using for the player.
They are perfectly ordinary Unity scripts which have been built for this
projects. There is no default Character Controller script.
</div>

после вот этого дива

JeanWinters

14.12.2010 17:53

Ответ: CSS FAQ

Другой вопрос. Не могу понять зачем нужен импорт CSS , если есть внешнее подключение стиля, разве это ни одно и тоже?

ABTOMAT

14.12.2010 18:04

Ответ: CSS FAQ

Одно и то же.
Сам не юзаю, видел в других движках.
Просто иногда удобней редактировать несколько файлов, а подключить - один.

JeanWinters

16.12.2010 14:18

Ответ: CSS FAQ

Сделал div и описал в css его id

Код:

#side2 ol{

 color: #999;

 font-size: 120%;

 margin: 10px;

 float: left;

}

Почему-то в IE6 пропала нумерация у нумерованного списка, а в FF3.6 она есть, только цвет для номеров не изменился. Почему в первом браузере не отображаются, а во втором цвет не изменился?

ABTOMAT

16.12.2010 15:28

Ответ: CSS FAQ

Довольно известный баг (кстати от старого осла уже можно и отказаться).
http://haslayout.net/css/No-Bullets-...--and--ol--Bug
Насчёт ФФ - маркеры поменяли цвет. Может, мы о разных вещах говорим

JeanWinters

16.12.2010 18:31

Ответ: CSS FAQ

Вложений: 1

Я просто начал изучать блочную верстку и решил сделать по уроку пример веб-страницы. Поправил баг, связанный с цифрами. На сайте говорится о том, что подобный "эффект" возникает в случае, если устанавливается фиксированная ширина элемента <ol> , в мое пример ширина устанавливается для <div> . Пришлось поправить стили для <ol> , добавить ширину 120px (у <div>, в котором содержится, ширина 300px) и сделать отступы (margin).. Хотя цвет для цифр остался прежним в обоих браузерах. В архиве неисправленный вариант.

ABTOMAT

17.12.2010 02:19

Ответ: CSS FAQ

Самому ol'у задай color (там где серый) и маркеры тоже поменяют цвет. Текст наследует цвет, а маркеры - нет (ЕМНИП для них есть отдельный параметр).

JeanWinters

19.12.2010 16:33

Ответ: CSS FAQ

Элемент <span> почему-то не действует на содержимое текста.

Код:

CSS:

span.tip {

 color: #165d7a;

 font-weight:bold; 

}



html:

<div>

<div style="width:15%; float:left;>

<span class="tip">Примечание.</span>

</div>

<div style="width:85%; float:left;">

Скрипты, вошедшие в урок, содержат много комментариев и разработаны так, чтобы было легче им следовать. Подобные комментарии обычно не приводятся в коде обучающего текста, чтобы сэкономить пространство.

</div>

</div>

cyberblut

19.12.2010 17:05

Ответ: CSS FAQ

Кавычечку у style дива бы вернуть

ABTOMAT

19.12.2010 20:09

Ответ: CSS FAQ

Вложений: 1

DTamaturg, совет: если что-то в css "не работает", посмотри на этот элемент в отладчике (FireBug на Firefox, DragonFly на Опере, Safari и Chrome имеют родной отладчик, IE, к сожалению, вперде, вроде, ставил к нему какой-то, но по функционалу он ужасен) и узнай, присутствуют ли там свойства, которые ты ему прописывал.
Если их там нет, то, возможно, неправильно указан селектор, или, как в данном случае, имеет место синтаксическая ошибка - забытые кавычки.
Бывает, что они там есть, но не влияют на результат (тогда они выбраны неверно, или не к тому элементу). Кроме того, прямо в отладчике можно менять css-параметры элементу, добавлять новые. Очень удобно подобрать нужное, а затем просто скопировать полученное в свой код, чем менять и каждый раз перезагружать страницу.
Кроме того, используй IDE (NetBeans(пользуюсь им) или Eclipse, например).
Я понимаю, что в труЪ-книжках конца 1990-х советуют использовать Блокнот, но тот же NetBeans сразу подсвечивает красным незакрытые теги, незакрытые кавычки, скобки и т.д., т.е. твоя ошибка в принципе не могла бы появиться незамеченно. Кроме того, прямо там можно посмотреть, как будет выглядеть элемент с прописанным ему стилем (хотя, конечно, проверять браузером строго обязательно, но общее впечатление о стиле даёт) Для того IDE и есть, чтоб помогать выполнять рутинные задачи.
Кроме того, in-line css и js - это очень плохо, можно его использовать только в исключительных случаях. Для этого есть css и js-файлы. Страницы с inline-css ти js больше по размеру, такой js и css не кэшируются, и всё это дело хуже индексируется поисковиками, которые ниже рейтингуют страницы с большим количеством инлайна по отношению к контенту. Не знаю, откуда взялась эта любовь к инлайну, видимо, так и тянется с 1990-х, когда каждый писал как попало и верхом совершенства считалась личная страничка Васи Пупкина. Вообще, тут хорошо написано, почему инлайн - это плохо.
Извини за длинный пост, надеюсь, это поможет избежать ошибок.

JeanWinters

20.12.2010 08:52

Ответ: CSS FAQ

Спасибо за советы. Хотел вот еще один вопрос задал, но сейчас думаю - а вдруг там опять не поставлен какой-нибудь знак препинания. :)

Тогда другой вопрос: если

Цитата:

Страницы с inline-css ти js больше по размеру, такой js и css не кэшируются, и всё это дело хуже индексируется поисковиками, которые ниже рейтингуют страницы с большим количеством инлайна по отношению к контенту.

то как же быть с сайтовым движком, который "услужливо" пихает инлайны в теги? К примеру, тот же "drupal". Я пытался сделать в нем внешний CSS , но никак и не вышло, так и пришлось инлайнить. При чем самое интересное то, что он заменяет атрибуты тегов на инлайновые стили.

cyberblut

21.12.2010 03:11

Ответ: CSS FAQ

Цитата:

Сообщение от DTamaturg (Сообщение 172554)

Тогда другой вопрос: если то как же быть с сайтовым движком, который "услужливо" пихает инлайны в теги? К примеру, тот же "drupal". Я пытался сделать в нем внешний CSS , но никак и не вышло, так и пришлось инлайнить. При чем самое интересное то, что он заменяет атрибуты тегов на инлайновые стили.

Как хорошо, что не часто приходится мне пользоваться CMS`ками, а всяким говном и того реже :)
А атрибуты тегов это он какие заменяет интересно? Примерчик давай.
Да и JS периодически приходится пихать инлайн. На onclick и прочие. А ещё для отработки по загрузке страницы. Кто вспомнит о body::onload, может смело менять ориентацию.

JeanWinters

21.12.2010 21:45

Ответ: CSS FAQ

Что подразумевается под "примерчиком"? Если приводить примеры "drupal" , то тут будет много текста, он практически все атрибуты тегов помещает в атрибут стиля, если это возможно, т.е. если есть альтернативы (а они есть).

Тема по CSS , но все же не стал плодить ветки и спрошу здесь.
Никак не пойму какой "доктайп" лучше и вообще какой применять и когда, и нужно ли. Во многих источниках информация имеется, но она везде разная: в одних говорят одно и советуют тоже, в других - другое. Где правда?

cyberblut

22.12.2010 01:11

Ответ: CSS FAQ

XHTML Strict

ABTOMAT

22.12.2010 01:17

Ответ: CSS FAQ

Ищи в настройках админки своего движка, там обязательно можно инклудить css и js.
А вообще да,

Цитата:

Как хорошо, что не часто приходится мне пользоваться CMS`ками, а всяким говном и того реже :)

ненавижу когда CMS считает себя умнее меня. Но если приходится - так приходится.

cyberblut

22.12.2010 02:20

Ответ: CSS FAQ

Цитата:

Сообщение от ABTOMAT (Сообщение 172797)

Код:

$(document).ready(function(){

       $(".menu-item").mouseover(function(){

              $(this).val("oh hi!");

       });

});

Ориентацию пока менять не собираюсь

Вот ЭТА конструкция НЕ использует body::onload, она отрабатывает по факту окончания постройки DOM и не ждёт подгрузки стороннего контента (имиджей, флэшей и прочего). Так что повода менять ориентацию нету в данном случае :)

ABTOMAT

22.12.2010 02:33

Ответ: CSS FAQ

Кстати о дрюпалах: http://api.drupal.org/api/drupal/inc...rupal_add_js/6
Гугол находит довольно много адекватных постов на эту тему. Где-то рядом должен быть и css

HAMANN

05.01.2011 14:41

Ответ: CSS FAQ

Цитата:

Сообщение от DTamaturg (Сообщение 171843)

Как средствами CSS сделать такое положение текста:

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

PHP код:


		
			
<!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" />

<title>Untitled Document</title>

<style>

div#wrapper {

    width:500px;

    margin-left:10px;

}

div#wrapper .element {

    padding:2px;

    font-family:Verdana, Geneva, sans-serif;

    font-size:12px;

    color:#000;

    text-align:justify;

    margin-bottom:10px;

}

div#wrapper .element .note {

    width:45px;

    text-transform:uppercase;

    color:#09C;

    font-weight:bold;

    float:left;

}

div#wrapper .element .body {

    margin-left:45px;

}



</style>

</head>



<body>

<div id="wrapper">

    <div class="element">

        There is nothing special about the scripts we are using for the player. They  are perfectly ordinary Unity scripts which have been built for this projects. There is no default Character Controller script.

    </div>

    <div class="element">

        <div class="note">NOTE</div>

        <div class="body">There is nothing special about the scripts we are using for the player. They  are perfectly ordinary Unity scripts which have been built for this projects. There is no default Character Controller script.</div>

        <div style="clear:left;"></div>

    </div>

    <div class="element">

        There is nothing special about the scripts we are using for the player. They  are perfectly ordinary Unity scripts which have been built for this projects. There is no default Character Controller script.

    </div>

</div>

</body>

</html>

JeanWinters

09.01.2011 22:38

Ответ: CSS FAQ

Еще вопрос схожий с "реализацией" примечания. Как можно "классически" сделать картинку с надписью, чтобы она была по центру, а текст не выходил за рамки ширины изображения? Как можно сделать с тегами <div> ? Желательно чтобы было меньше текста.

ABTOMAT

09.01.2011 23:09

Ответ: CSS FAQ

text-align: center
и задать ширину картинке, или я чего-то не понимаю?

JeanWinters

09.01.2011 23:17

Ответ: CSS FAQ

Я так и делаю:

Код:

<div style="line-height: 0.8em; text-align: center;  margin-bottom: 14px;">

<img src="p6.jpg" alt="" width="266" height="446" /> 

<br /> 

<span style=" font-size: 0.8em;">Компонент Character Controller   и компонент-скрипт Third Person Controller</span>

</div>

Текст, расположенный в теге <span> , выходит за допустимые пределы ширины изображения, а нужно, чтобы он переносился на новую строку.

HAMANN

10.01.2011 01:09

Цитата:

Сообщение от JeanWinters (Сообщение 175016)

а почему ее как фон не сделать?

Код:

<div style="background-image:url(...); background-repeat:no-repeat; background-position:center center"></div>

хм, нет я тебя не понял что ты хочешь. Нарисовал бы хоть

а, наверно подпись под картинкой. Так задай ширину DIV равной ширине картинки

PHP код:


		
			
<div style="width:266px; line-height: 0.8em; text-align: center;  margin-bottom: 14px;">

<img src="p6.jpg" alt="" width="266" height="446" /> 

<div style="font-size: 0.8em;">Компонент Character Controller   и компонент-скрипт Third Person Controller</div>

</div>

JeanWinters

10.01.2011 14:34

Ответ: CSS FAQ

Нужно сделать так:

А выходит вот так:

Т.е. картинка должна быть в центре, а текст, расположенный ниже, не должен выходить за пределы ее ширины и сам не должен центрироваться. Для второй иллюстрации был использован код, указанный выше, результат виден, а если непонятно, могу выложить сам html-файл. Короче <div> вообще все странно центрирует, но нужно сделать именно с его использованием.

HAMANN

10.01.2011 15:03

Ответ: CSS FAQ

Цитата:

Сообщение от JeanWinters (Сообщение 175104)

Нужно сделать так:

А выходит вот так:

Ну в главный DIV поставь еще margin:0 auto; А в последнем выравнивание по левому краю. Вообщем будет выглядеть так:

PHP код:


		
			
<div style="width:266px; margin:0 auto; line-height: 0.8em; margin-bottom: 14px;">
<img src="p6.jpg" alt="" width="266" height="446"> 
<div style="font-size: 0.8em; text-align:left;">Компонент Character Controller   и компонент-скрипт Third Person Controller</div>
</div>

JeanWinters

03.02.2011 22:43

Ответ: CSS FAQ

Можно ли как-то средствами CSS отыскать определенный текст в теге (соответствующем) и изменить его цвет или другие характеристики?

devolonter

04.02.2011 11:24

Ответ: CSS FAQ

Цитата:

Сообщение от JeanWinters (Сообщение 177839)

Нет. В CSS можно только найти тег с определенным свойством например input[type=password] (подробнее смотри CSS3-selectors) Для поиска определенного текста и изменения его свойств используется JS

JeanWinters

04.02.2011 13:17

Ответ: CSS FAQ

На каком ресурсе можно узнать об использовании JS в этом плане?

devolonter

04.02.2011 13:23

Ответ: CSS FAQ

Ну вот тут например

JeanWinters

04.02.2011 19:03

Ответ: CSS FAQ

Почитал, но что-то вообще не могу вникнуть. Есть какие-нибудь еще примеры, несложные?

Часовой пояс GMT +4, время: 01:28.