Второй код твой работает на ура. Объясняй тогда, что ты понимаешь под "отступами справа".

Добавлено @ 22:55
Мне кажется, мы в понятиях разошлись Для меня "отступ с правой стороны" это по умолчанию "padding-right"


Это сообщение отредактировал(а) dm9 - 20.4.2005, 22:55

Ой, все - все, разобралась!
Я совсем нетуда описание CSS вставляла
Добавлено @ 23:06
Просто из твоего примера я описание CSS вставила к сам код, а не в описание CSS, потому что посмотрела, ты когда про CSS писал, то так и называл код "CSS", а когда про код HTML, то так и называл код "HTML". А в последнем варианте не стал разбивать пример на "код в CSS" и "код HTML" - вот я немного и запуталась. Но теперь мне понятно

Это хорошо.

Тебе, а также Альянсу рекомендую посмотреть вот эту табличку (навеяно тем, что такая конструкция оказалась незнакомой: class="style1 style2"):
http://loc.stack.ru/projects/CSS2/selector.html#q1

Такие вещи, как задавание нескольких стилей одному элементу (class="style1 style2"), а также использование стилей для дочерних элементов очень сильно могут порой сократить код.
Можно сказать, основополагающая такая табличка

Это сообщение отредактировал(а) dm9 - 20.4.2005, 23:09

Цитата(dm9 @ 21.4.2005, 00:08)

Такие вещи, как задавание нескольких стилей одному элементу (class="style1 style2"), а также использование стилей для дочерних элементов очень сильно могут порой сократить код.

Это везде поддерживается?

Цитата(dm9 @ 21.4.2005, 00:08)

class="style1 style2"

Поддерживается Операми начиная с 6-й версии точно (возможно, и более ранними версиями).
Знаю, что поддерживается Firefox >= 1.0, IE 6.0.
С остальными браузерами не работал.

В спецификацц найти этого, к сожалению не смог. Найдёшь - покажи...

Вот, что мне хотелось бы получить: все тексты стиля 10 выравнить по центру (для чего я в CSS описала это под буквой "m", предполагаю, что это неправильно. А все тексты стиля 13 с параметрами буквы "p".
КАК показать в коде, что описания типа, text-align: center;vertical-align: center;, относятся к конкретному стилю 10, а не какому-либо другому, а описания стиля 13 - только к стилю 13! Я предположила, что надо эти описания располагать сразу под самим стилем. Правильно?
Ну вот, что у меня получилось, и, конечно же, не работает
}

Код

<style type="text/css">  BODY {   scrollbar-arrow-color:FFDEAD;   scrollbar-shadow-color:B5C2D5;   scrollbar-face-color:B5C2D5;   scrollbar-highlight-color:FFDEAD;   scrollbar-darkshadow-color:FFDEAD; } .style9,  .style10, .style13  {font-family: Arial, Helvetica, sans-serif} .style9,  .style10 {font-weight: bold; color: #7C93B3} m { text-align: center; vertical-align: center; } .style13 {font-size: 20px} p {     text-indent: 2em; /* otstup krasnoy stroki  */     margin-left: 10;     margin-right: 10;     margin-top: 20px; /* pustoe mesto sverxu ot p */     margin-bottom: 10px; /*  pustoe mesto snizu ot p  */     padding-left: 20px;  /*  otstup texta v p ot levoy ego granitsi */     padding-right: 20px; /* otstup texta v p ot pravoy ego granitsi */     vertical-align: top;     text-align: justify; } .style17 {color: #7C93B3} .style19 {font-family: Arial, Helvetica, sans-serif} </STYLE>

First of all, пойми, наконец, что цвета XXXXXX не существует! Существует цвет #XXXXXX.

Затем, vertical-align: center; - такого не бывает. То, что ты хочешь сделать, выглядит так: vertical-align: middle;

Теперь.
Рассказываю основы CSS

1.
Стили бывают разные. Некоторые задаются через свойство class. Такие стили начинаются с точки.

Код

<style type="text/css"> .qwe { color: orange } </style> <p class="qwe">К этому p стиль применяется</p> <p>К этому - нет</p> <div class="qwe">К этому div стиль применяется</div> <div>К этому - нет</div>

Некоторые относятся к конкретному тагу. Тут без точки, просто пишем таг.

Код

<style type="text/css"> p { color: orange } </style> <p class="qwe">К этому p стиль применяется</p> <p>К этому - ТОЖЕ ПРИМЕНЯТЕСЯ</p> <div class="qwe">К этому div НЕ применяется</div> <div>К этому - тоже НЕ применяется</div>

А некоторые сочетают оба эти метода, то есть сопоставляются только тем тагам, у которых прописан определённый class. Тут сначала указывается таг, а через точку - class

Код

<style type="text/css"> p.qwe { color: orange } </style> <p class="qwe">К этому p стиль применяется</p> <p>Сюда - не применяется</p> <div class="qwe">Сюда - не применяется</div> <div>Сюда - не применяется</div>

2.
Стиль можно задавать в несколько приёмов. Рассмотрим это на примере оптимизации кода.

Код

.style1 { font-weight: bold; text-decoration: underline; color: red; } .style2 { font-weight: bold; text-decoration: underline; color: green; } .style3 { font-weight: bold; text-decoration: underline; color: blue; }

Видно, что тут много раз задаётся один и тот же font-weight: bold и text-decoration: underline. Оптимизируем это дело.

Код

.style1, .style2, .style3 { font-weight: bold; text-decoration: underline; } .style1 { color: red; } .style2 { color: green; } .style3 { color: blue; }

На этом примере мы научились двум важным вещам.
ПЕРВОЕ. Один и тот же набор атрибутов (в данном случае, font-weight: bold; text-decoration: underline;) можно присвоить сразу нескольким стилям, задавая эти стили через запятую (.style1, .style2, .style3 {...}).
ВТОРОЕ. Одному стилю может соответствовать несколько описаний. В этом случае браузер обязан соединить все эти описания и сопоставить данному стилю все те атрибуты, которые задавались в разных местах. Например, здесь элемент со стилем style1 станет обладать шрифтом как жирным (font-weight: bold), подчёркнытым (text-decoration: underline), так и красным (color: red).

3.
Важное свойство, о нём я уже говорил. Применение нескольких стилей одному элементу. Можно задать в class два или более стилей через пробел, и применятся они все сразу.

Код

<style type="text/css"> .qwe { color: orange } .asd { font-weight: bold } </style> <p class="qwe asd">Этот шрифт будет как оранжевым, так и жирным</p>

Этими тремя пунктами всё не оканчивается, разумеется...

Попробуй на основе рассказанного сама разрешить свою задачу - это полезно...

Это сообщение отредактировал(а) dm9 - 23.4.2005, 18:28

Как можно указать текст в стиле teletype, т.е. он как на печатной машинке? Пробывала text-decoration: teletype; - не помогло

P.S. А про #XXXXXX и middle; - я знала, просто невнимательно посмотрела, да и сгоняли меня из-за компа

Это сообщение отредактировал(а) Urod - 24.4.2005, 00:27

Я вообще все в классы свела, т.к. у меня 4 типа текста. Т.о. ничего похожего на

Код

.style1, .style2, .style3 { font-weight: bold; text-decoration: underline; } .style1 { color: red; } .style2 { color: green; } .style3 { color: blue; }

у меня нет.
А есть только 4 класса:

Код

<style type="text/css">  BODY {   scrollbar-arrow-color:FFDEAD;   scrollbar-shadow-color:B5C2D5;   scrollbar-face-color:B5C2D5;   scrollbar-highlight-color:FFDEAD;   scrollbar-darkshadow-color:FFDEAD; } .asd { text-align: center; vertical-align: middle; font-weight: bold; color: #7C93B3 } .qwe {     text-indent: 2em; /* otstup krasnoy stroki  */     margin-left: 10;     margin-right: 10;     margin-top: 20px; /* pustoe mesto sverxu ot qwe */     margin-bottom: 10px; /*  pustoe mesto snizu ot qwe  */     padding-left: 20px;  /*  otstup texta v qwe ot levoy ego granitsi */     padding-right: 20px; /* otstup texta v qwe ot pravoy ego granitsi */     vertical-align: top;     text-align: justify;     font-size: 21px; /* по этому пункту я после кода вопрос задаю */     text-decoration: teletype; /* Не работает! Не знаю, как этот тип щрифта называется (это телетайп). Не подскажешь? */ } .zxc { text-indent: 2em; margin-left: 10; margin-right: 10; font-size: 20px; } .rty { text-align: center; font-size: 20px; } </STYLE>

- это нормально?
И вот еще с такой ерундой столкнулась: Когда меняю размер шрифта в font-size: 21px; (это в классе qwe) на 25px, например, в HTML-редакторе размер меняется, а при просмотре в браузерах (ИЕ и Мозилла) - НЕ меняется Почему?

Со стилями разобралась?

Насчёт шрифта:

Код

Попробуй так: <p style="font-family: 'Courier'">Лалала</p> Или так: <p style="font-family: 'Courier New'">Лалала</p> Или даже просто так: <p style="font-family: monospace">Лалала</p> Не совсем понимаю, что тебе надо.

И ещё раз - задавай каждый вопрос в новом топике. Преимущества очевидны как для тебя, так и не только: больше людей посмотрит на вопрос, и проще будет искать нужную информацию потом по поиску. Даже если это, казалось бы, мелкий вопрос, он может вылиться в очень длинное обсуждение


Это сообщение отредактировал(а) dm9 - 24.4.2005, 03:28

Ой, пока вчера писал предыдущее сообщение, ты своё запостила, а я и не заметил.

Цитата(Urod @ 24.4.2005, 02:21)

text-decoration: teletype;

Смотри описание text-decoration:
http://loc.stack.ru/projects/CSS2/text.htm...-striking-props
Там такого нет Попробуй то, что я написал в предыдущем посте.

Цитата(Urod @ 24.4.2005, 02:21)

А есть только 4 класса - это нормально?

Да нормально... Главное, чтоб удобно было. Тут один CSS показывать бесполезно, надо смотреть, насколько это оптимально выглядит в коде...

Цитата(Urod @ 24.4.2005, 02:21)

И вот еще с такой ерундой столкнулась: Когда меняю размер шрифта в font-size: 21px; (это в классе qwe) на 25px, например, в HTML-редакторе размер меняется, а при просмотре в браузерах (ИЕ и Мозилла) - НЕ меняется

По CSS не скажу, давай исходник полностью (с html вместе).

Цитата(Urod @ 24.4.2005, 02:21)

margin-left: 10;     margin-right: 10;     margin-top: 20px; /* pustoe mesto sverxu ot qwe */     margin-bottom: 10px; /*  pustoe mesto snizu ot qwe  */

Во-первых, 10 ЧЕГО? Просто 10 не бывает. Бывает 10px, 10pt, 10% итд.
Во-сторых, это записывается проще. Все эти маржины объединяются в один:
margin: <top> <right> <bottom> <left>.
В твоём случае это выглядит так:

Код

margin: 20px 10px 10px 10px;

dm9
Так, это мой CSS:

Код

<style type="text/css">  BODY {   scrollbar-arrow-color:FFDEAD;   scrollbar-shadow-color:B5C2D5;   scrollbar-face-color:B5C2D5;   scrollbar-highlight-color:FFDEAD;   scrollbar-darkshadow-color:FFDEAD; } .asd { text-align: center; vertical-align: middle; font-weight: bold; font-style:italic; color: #7C93B3; font-size: 20px; } p.qwe {     text-indent: 2em; /* otstup krasnoy stroki  */     margin: 20px 10px 10px 10px;         padding-left: 20px;  /*  otstup texta v qwe ot levoy ego granitsi */     padding-right: 20px; /* otstup texta v qwe ot pravoy ego granitsi */     vertical-align: top;     text-align: justify;     font-family: "Courier New", Courier, mono;     font-size: 16px; } .zxc { text-indent: 2em; margin-left: 10; margin-right: 10; font-family: "Times New Roman", Times, serif; font-size: 18px; } .rty { text-align: center; font-family: "Times New Roman", Times, serif; font-size: 18px; } </STYLE>

А это HTML:

Код

<tr>                 <td width="791" height="281" colspan="2"><p class="qwe"> С каждым годом число зданий с элементами из стекла, неуклонно растет. Архитекторские идеи становятся все более  авангардными. Нетрудно себе представить, как безинтересно сморелись бы эти здания, если бы их стекла были грязными. </p>                   <p class="qwe">Пристижные офисы, элитные дома - их необходимо поддерживать в безусловной чистоте. А если это - магазин, кафе, автосалон или торговый комплекс? Понятно, что грязные, невымытые стекла ветрин, окон  оттолкнут клиента и спровоцируют его обратиться к услугам Вашего конкурента, у которого стекла здания в чистоте.</p>                   <p class="qwe">Чистое, ухоженное здание - это &quot;визитная карточка&quot; Вашего предприятия, а для клиента - приглашение зайти к Вам! </p></td>               </tr>             </table>             <div align="center">               <table width="744" bordercolor="#7C93B3" border="2">                 <tr>                   <td height="60"><p class="asd">Услуга</p></td>                   <td width="183"><p class="asd">Единица<br />измерения</p></td>                   <td width="219"><p class="asd">Цена/ ед. измерения<br>(руб.)</p></td>                 </tr>                 <tr>                   <td><p class="zxc">Мойка стекол</p></td>                   <td><p class="rty">1 кв. м</p></td>                   <td><p class="rty">30</p></td>                 </tr>

Возможно, еще где-то можно оптимизировать, но больших ошибок я, вроде, уже не вижу
И, самое главное, я со своими вопросами разобралась - ВСЕ РАБОТАЕТ!

Это сообщение отредактировал(а) Urod - 24.4.2005, 20:21

Цитата(Urod @ 24.4.2005, 21:17)

ВСЕ РАБОТАЕТ!

Я счастлив
Несколько замечаний

width="791" - это очень неправильно. Лучше делать "резиновый" дизайн, то есть подстраивающийся по ширине под окно браузера. Но это субъективно. Если уж делаешь фиксированную ширину и стараешься подогнаться под 800х600, максимальная ширина должна быть 780 пикселей (можно чуть больше, кажется, но на пару пикселей максимум). И 780 - это ширина всей таблицы, а не ячейки. Чтобы делать "резиновый" дизайн, надо всё задавать в процентах.

Непонятно, зачем ты поставила высоту height="281" - всё равно ячейка раздвигается...

p внутрь td вставлять тоже не стоит

У класса .zxc лучше прописать text-align: left; Никогда не знаешь, какие умолчания стоят на каких-нибудь линуксоидных браузерах. Я так недавно сам попался...

И ещё. Лебедев тебя за дефисы выгнал бы из своей конторы Я там давал как-то сслку на "Типограф", который дефисы расставляет как положено. Дефис и тире - разные вещи

И всё-таки, ты забыла поставить # перед кодами цветов )

В общем, я немного оптимизировал CSS и HTML. Попробуй разобраться. В общем, в чём не разберёшься - не страшно, для первого раза получилось хорошо

Код

<style type="text/css"> BODY {     scrollbar-arrow-color: #FFDEAD;     scrollbar-shadow-color: #B5C2D5;     scrollbar-face-color: #B5C2D5;     scrollbar-highlight-color: #FFDEAD;     scrollbar-darkshadow-color: #FFDEAD; } tr.asd td {     text-align: center;     vertical-align: middle;     font-weight: bold;     font-style: italic;     color: #7C93B3;     font-size: 20px; } div.qwe {     width: 780px; } div.qwe p {     text-indent: 2em;     margin: 20px 30px 10px 30px;     vertical-align: top;     text-align: justify;     font-family: "Courier New", Courier, mono;     font-size: 16px; } .zxc, .rty {     font-family: "Times New Roman", Times, serif;     font-size: 18px; } .zxc {     text-align: left;     text-indent: 2em;     padding-left: 10px;     padding-right: 10px; } .rty {     text-align: center; } </STYLE> <div align="center">     <div class="qwe">         <p>С каждым годом число зданий с элементами из стекла, неуклонно растет. Архитекторские идеи становятся все более авангардными. Нетрудно себе представить, как безинтересно сморелись бы эти здания, если бы их стекла были грязными.</p>         <p>Пристижные офисы, элитные дома — их необходимо поддерживать в безусловной чистоте. А если это — магазин, кафе, автосалон или торговый комплекс? Понятно, что грязные, невымытые стекла ветрин, окон оттолкнут клиента и спровоцируют его обратиться к услугам Вашего конкурента, у которого стекла здания в чистоте.</p>         <p>Чистое, ухоженное здание — это &quot;визитная карточка&quot; Вашего предприятия, а для клиента — приглашение зайти к Вам!</p>     </div>     <table width="744" bordercolor="#7C93B3" border="2">         <tr class="asd">             <td height="60">Услуга</td>             <td width="183">Единица<br />измерения</td>             <td width="219">Цена/ ед. измерения<br>(руб.)</td>         </tr>         <tr>             <td class="zxc">Мойка стекол</td>             <td class="rty">1 кв. м</td>             <td class="rty">30</td>         </tr>     </table> </div>

Добавлено @ 00:01
PS Разумеется, до состояния "идеально" я код не доводил, но сейчас работать должно нормально во всех более-менее приличных браузерах.

Добавлено @ 00:03
Ну и, конечно, надо понимать, что
scrollbar-arrow-color: #FFDEAD;
scrollbar-shadow-color: #B5C2D5;
scrollbar-face-color: #B5C2D5;
scrollbar-highlight-color: #FFDEAD;
scrollbar-darkshadow-color: #FFDEAD;
- всё это только под Internet Explorer.


Это сообщение отредактировал(а) dm9 - 25.4.2005, 00:02

Что-то у меня классы .zxc и .rty не работаю. Почему?
Вот ссылка на страничку: http://marinavladimirovna.nm.ru/Site/Pages...gie_raboty1.htm
P.S. По каким-то непонятным мне причинам страничка по ссылке с зазором (что плохо), а у меня на компе без (что хорошо), хотя код один и тот же.

Вопрос снят: я скобку после названия класса ставила через пробел - так не правильно!