|
JavaScript / HTML Создание динамической разметки страниц |
16.12.2010, 18:31
|
#16
|
Знающий
Регистрация: 22.12.2007
Сообщений: 223
Написано 22 полезных сообщений (для 51 пользователей)
|
Ответ: CSS FAQ
Я просто начал изучать блочную верстку и решил сделать по уроку пример веб-страницы. Поправил баг, связанный с цифрами. На сайте говорится о том, что подобный "эффект" возникает в случае, если устанавливается фиксированная ширина элемента <ol> , в мое пример ширина устанавливается для <div> . Пришлось поправить стили для <ol> , добавить ширину 120px (у <div>, в котором содержится, ширина 300px) и сделать отступы (margin).. Хотя цвет для цифр остался прежним в обоих браузерах. В архиве неисправленный вариант.
|
(Offline)
|
|
17.12.2010, 02:19
|
#17
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: CSS FAQ
Самому ol'у задай color (там где серый) и маркеры тоже поменяют цвет. Текст наследует цвет, а маркеры - нет (ЕМНИП для них есть отдельный параметр).
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
19.12.2010, 16:33
|
#18
|
Знающий
Регистрация: 22.12.2007
Сообщений: 223
Написано 22 полезных сообщений (для 51 пользователей)
|
Ответ: 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>
|
(Offline)
|
|
19.12.2010, 17:05
|
#19
|
Знающий
Регистрация: 14.06.2009
Сообщений: 338
Написано 139 полезных сообщений (для 257 пользователей)
|
Ответ: CSS FAQ
Кавычечку у style дива бы вернуть
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
19.12.2010, 20:09
|
#20
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: CSS FAQ
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-х, когда каждый писал как попало и верхом совершенства считалась личная страничка Васи Пупкина. Вообще, тут хорошо написано, почему инлайн - это плохо.
Извини за длинный пост, надеюсь, это поможет избежать ошибок.
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
20.12.2010, 08:52
|
#21
|
Знающий
Регистрация: 22.12.2007
Сообщений: 223
Написано 22 полезных сообщений (для 51 пользователей)
|
Ответ: CSS FAQ
Спасибо за советы. Хотел вот еще один вопрос задал, но сейчас думаю - а вдруг там опять не поставлен какой-нибудь знак препинания.
Тогда другой вопрос: если
Страницы с inline-css ти js больше по размеру, такой js и css не кэшируются, и всё это дело хуже индексируется поисковиками, которые ниже рейтингуют страницы с большим количеством инлайна по отношению к контенту.
|
то как же быть с сайтовым движком, который "услужливо" пихает инлайны в теги? К примеру, тот же "drupal". Я пытался сделать в нем внешний CSS , но никак и не вышло, так и пришлось инлайнить. При чем самое интересное то, что он заменяет атрибуты тегов на инлайновые стили.
Последний раз редактировалось JeanWinters, 20.12.2010 в 09:21.
Причина: добавление текста
|
(Offline)
|
|
21.12.2010, 03:11
|
#22
|
Знающий
Регистрация: 14.06.2009
Сообщений: 338
Написано 139 полезных сообщений (для 257 пользователей)
|
Ответ: CSS FAQ
Сообщение от DTamaturg
Тогда другой вопрос: если то как же быть с сайтовым движком, который "услужливо" пихает инлайны в теги? К примеру, тот же "drupal". Я пытался сделать в нем внешний CSS , но никак и не вышло, так и пришлось инлайнить. При чем самое интересное то, что он заменяет атрибуты тегов на инлайновые стили.
|
Как хорошо, что не часто приходится мне пользоваться CMS`ками, а всяким говном и того реже
А атрибуты тегов это он какие заменяет интересно? Примерчик давай.
Да и JS периодически приходится пихать инлайн. На onclick и прочие. А ещё для отработки по загрузке страницы. Кто вспомнит о body::onload, может смело менять ориентацию.
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
21.12.2010, 21:45
|
#23
|
Знающий
Регистрация: 22.12.2007
Сообщений: 223
Написано 22 полезных сообщений (для 51 пользователей)
|
Ответ: CSS FAQ
Что подразумевается под "примерчиком"? Если приводить примеры "drupal" , то тут будет много текста, он практически все атрибуты тегов помещает в атрибут стиля, если это возможно, т.е. если есть альтернативы (а они есть).
Тема по CSS , но все же не стал плодить ветки и спрошу здесь.
Никак не пойму какой "доктайп" лучше и вообще какой применять и когда, и нужно ли. Во многих источниках информация имеется, но она везде разная: в одних говорят одно и советуют тоже, в других - другое. Где правда?
|
(Offline)
|
|
22.12.2010, 01:11
|
#24
|
Знающий
Регистрация: 14.06.2009
Сообщений: 338
Написано 139 полезных сообщений (для 257 пользователей)
|
Ответ: CSS FAQ
XHTML Strict
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
22.12.2010, 01:17
|
#25
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: CSS FAQ
Ищи в настройках админки своего движка, там обязательно можно инклудить css и js.
А вообще да,
Как хорошо, что не часто приходится мне пользоваться CMS`ками, а всяким говном и того реже
|
ненавижу когда CMS считает себя умнее меня. Но если приходится - так приходится.
Да и JS периодически приходится пихать инлайн. На onclick и прочие.
|
Nope.
$(document).ready(function(){
$(".menu-item").mouseover(function(){
$(this).val("oh hi!");
});
});
Ориентацию пока менять не собираюсь
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
22.12.2010, 02:20
|
#26
|
Знающий
Регистрация: 14.06.2009
Сообщений: 338
Написано 139 полезных сообщений (для 257 пользователей)
|
Ответ: CSS FAQ
Сообщение от ABTOMAT
$(document).ready(function(){
$(".menu-item").mouseover(function(){
$(this).val("oh hi!");
});
});
Ориентацию пока менять не собираюсь
|
Вот ЭТА конструкция НЕ использует body::onload, она отрабатывает по факту окончания постройки DOM и не ждёт подгрузки стороннего контента (имиджей, флэшей и прочего). Так что повода менять ориентацию нету в данном случае
|
(Offline)
|
|
22.12.2010, 02:33
|
#27
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: CSS FAQ
Ок, думал, имелось в виду в целом назначение обработки событий по селекторам.
Впрочем, инлайн прокатил бы если нет жикверей, а обработчик умещается в десяток символов.
Кстати о дрюпалах: http://api.drupal.org/api/drupal/inc...rupal_add_js/6
Гугол находит довольно много адекватных постов на эту тему. Где-то рядом должен быть и css
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
05.01.2011, 14:41
|
#28
|
Нуждающийся
Регистрация: 05.08.2008
Сообщений: 73
Написано 11 полезных сообщений (для 24 пользователей)
|
Ответ: CSS FAQ
Сообщение от DTamaturg
Как средствами CSS сделать такое положение текста:
нужно без использования таблиц..
т.е. с одной стороны примечание (note) , а с другой сам текст
|
<!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>
|
(Offline)
|
|
09.01.2011, 22:38
|
#29
|
Знающий
Регистрация: 22.12.2007
Сообщений: 223
Написано 22 полезных сообщений (для 51 пользователей)
|
Ответ: CSS FAQ
Еще вопрос схожий с "реализацией" примечания. Как можно "классически" сделать картинку с надписью, чтобы она была по центру, а текст не выходил за рамки ширины изображения? Как можно сделать с тегами <div> ? Желательно чтобы было меньше текста.
|
(Offline)
|
|
09.01.2011, 23:09
|
#30
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: CSS FAQ
text-align: center
и задать ширину картинке, или я чего-то не понимаю?
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
Ваши права в разделе
|
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения
HTML код Выкл.
|
|
|
Часовой пояс GMT +4, время: 07:15.
|