← Вернуться в раздел «Web-программирование»

» Вопросы по CSS

Автор: Xrobak
Дата сообщения: 27.10.2004 17:46

Вот что есть:

Цитата:

<table border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" bordercolordark="#ffffff">
<tr><td>
<table border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" bordercolordark="#ffffff">
<tr><td>dfghdfgjhdfgjdfgj</td></tr>
</table>
</td></tr>
</table>

А вот как теперь мне добиться этого же эффекта, но с помощью CSS?
Максимум что у меня получилось, так это вот что:

Цитата:

<style type="text/css">
.tb {border-top-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
border-right-color: #000000;
}
</style>
<table class="tb" border="1" cellspacing="0" cellpadding="0">
<tr><td>
<table class="tb" border="1" cellspacing="0" cellpadding="0">
<tr><td>dfghdfgjhdfgjdfgj</td></tr>
</table>
</td></tr>
</table>

Но это немножко не то. Чтобы понять о чем я - попробуйте эти 2 примера и увидите разницу (могу подсказать - между бордерами двух таблиц существует белое пространство, к-рое хорошо заметно в коде без CSS, а вот в коде с CSS черный цвет расплывается, вобщем смотрите сами).

Автор: Troitsky
Дата сообщения: 27.10.2004 20:37

А не проще будет заменить эти вложенные таблицы одной со стилем

Код: .tb {border-style: double; border-width: 3px; border-color: #000000}

Автор: vladmir
Дата сообщения: 27.10.2004 22:28

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.tb{
border-top:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
</style>
<title>titled</title>
</head>
<body>
<table class="tb" cellspacing="0">
<tr><td>
<table class="tb" cellspacing="0">
<tr><td>dfghdfgjhdfgjdfgj</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

Автор: Xrobak
Дата сообщения: 27.10.2004 22:49

Troitsky
нет, вложенность была необходима чтобы достичь такого эффекта, наверное последую твоему совету

Кстати, спасибо, твой вариант работает

vladmir
спасибо! Работает и твой вариант

Мдя... а всему виной оказался cellpadding="0" и border="1"

2 all
И еще, раз уж о CSS заговорил, такой вот вопрос: когда мы описываем какой-то класс к примеру, то все свойства внутри {} разделяем точкой с запятой, а нужно ли ставить эту ; в конце последнего свойства, т.е. беред закрытием фигурной скобки?
Одни люди ставят, другие не ставят... Это вообще где-то зафиксировано как должно быть? А то вроде CSS и прочитал, а вот такого не встречал. Просто если уж писать, то писать по правилам/стандартам

Автор: bredonosec
Дата сообщения: 28.10.2004 03:11

Цитата:

а нужно ли ставить эту ; в конце последнего свойства, т.е. беред закрытием фигурной скобки?

- В специфкации об этом не говорят. (сам читал на днях) И в примерах последней кавычки нет.
Значит необязательно.

Автор: vladmir
Дата сообщения: 28.10.2004 11:09

Xrobak

Цитата:

нужно ли ставить эту ; в конце последнего свойства, т.е. беред закрытием фигурной скобки?

Не нужно.Точно.
Но и не мешает.
В процессе работы имеет смысл не убирать, чтобы не забыть поставить, когда добавишь новые свойства.
Сумлеваешься - проверь валидатором CSS - уверен, любой вариант пройдёт.

Автор: Xrobak
Дата сообщения: 28.10.2004 22:28

vladmir
я знаю что и тот и тот вариант подходит, просто интересно стало, стандарты придумали, а на такую как бы мелочь ничего не пишут. Просто это может выработаться в привычку, а потом гляди и станет к примеру обязательна ; в конце, переучиваться прийдется, посему наверное лучше ставить ; в конце :)

Такс, ну и еще пару вопросов задам, и думаю наверное лучше тему топика поменять, а то тема немного от bordercolordark уходит...
Что значит это:

Цитата:

Line : 0 font-family: You are encouraged to offer a generic family as a last alternative

Чем заменить это:

Цитата:

Line: 0 Context : body
Property scrollbar-face-color doesn't exist : #ebebeb

Line: 0 Context : body
Property scrollbar-highlight-color doesn't exist : #ebebeb

Line: 0 Context : body
Property scrollbar-shadow-color doesn't exist : #000000

Line: 0 Context : body
Property scrollbar-3dlight-color doesn't exist : #003399

Line: 0 Context : body
Property scrollbar-arrow-color doesn't exist : #6f4ab5

Line: 0 Context : body
Property scrollbar-track-color doesn't exist : #ebebeb

Line: 0 Context : body
Property scrollbar-darkshadow-color doesn't exist : #003399

Пока все, это мне валидатор такое выдал...

Автор: vladmir
Дата сообщения: 30.10.2004 11:15

Xrobak

Цитата:

0 font-family: You are encouraged to offer a generic family as a last alternative

Ну это понятно: нужно указывать список шрифтов и в конце семейство шрифтов - если в браузере не окажется ни одного из списка, то будет применён любой шрифт из "семьи" - sans-serif или serif

font:normal 14px verdana,arial,helvetica,sans-serif;

Цитата:

Line: 0 Context : body
Property scrollbar-face-color doesn't exist : #ebebeb

Гадать не буду - приведи кусок CSS с body - что у тебя там со скроллбаром?

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

Автор: Xrobak
Дата сообщения: 01.11.2004 18:22

body {background-color:#ffffff; margin:2px 2px 2px 0px; font-family:0.8em Verdana, Arial, Helvetica; scrollbar-face-color:#ebebeb; scrollbar-highlight-color:#ebebeb; scrollbar-shadow-color:#000000; scrollbar-3dlight-color:#003399; scrollbar-arrow-color:#6f4ab5; scrollbar-track-color:#ebebeb; scrollbar-darkshadow-color:#003399;}

Автор: vladmir
Дата сообщения: 02.11.2004 09:45

Xrobak
А, ну да - скроллбара же нет совсем в стандартах.
Работать в Ехплорере и, кажется, иногда в Опере, будет, а валидироваться не будет.

Цитата:

font-family:0.8em Verdana, Arial, Helvetica;

в font-family можно задавать только сами шрифты - без размеров:
font-family: verdana,arial,helvetica,sans-serif;

а лучше используй краткую форму:
font:0.8em verdana,arial,helvetica,sans-serif;
или с жирностью:
font:bold 0.8em verdana,arial,helvetica,sans-serif;

Автор: Xrobak
Дата сообщения: 02.11.2004 14:18

1) про валидацию ясно...
2) сенкс, я просто переписывал код CSS и просмотрел что написано font-family у меня а не font
Спасибо! Пока все.

Добавлено

Цитата:

ul {list-style:url("/images/right_arrow.gif") circle}

когда применяется этот стиль к списку, то рисунок этот находится не по центру текста элемента списка, такое впечатление что у него вертикальное выравнивание стоит top.
Можно ли как-то его выровнять (middle or bottom)?
Читал спецификацию, и о выравнивании в списках там ничего такого не встретил, вот...

Автор: vladmir
Дата сообщения: 03.11.2004 09:10

Xrobak

Цитата:

list-style:url

Можно ли как-то его выровнять (middle or bottom)?

В Мозилле - вертикально посередине (чуть ниже середины), в Ехплорере - вверху, ничего специально для выравнивания нет.

Автор: Xrobak
Дата сообщения: 03.11.2004 12:55

жаль :(
может в CSS3 уже появится такая возможность

Автор: Xrobak
Дата сообщения: 03.11.2004 21:32

Еще вопрос: когда лучше использовать единицу измерения PT, а когда PX ? А то у меня в стилях присутсвуют и pt(больше всего) и px.

Автор: bredonosec
Дата сообщения: 03.11.2004 21:50

Цитата:

когда лучше использовать единицу измерения PT, а когда PX ?

- Пикселы - абсолютный размер пикселя. То есть, если твой проект будут смотреть на экране с разным размером пиксела, выглядеть будет по-разному.
Пункты же(pt), как и линии (em - (стандартная?) высота шрифта), (ex) привязаны к размеру шрифта. Единственное исключение - для размера шрифта - по размеру ролительского.
Кроме того, есть еденицы pc (picas), cm, in (inches)..
Все это гораздо более подробно описано в спецификации, которую, как уверяешь, ты недавно читал.
(раздел 6 Еденицы измерения, CSS1 )

Автор: Xrobak
Дата сообщения: 04.11.2004 13:02

да, читал(какие единицы есть тоже знаю) и про цсс2 в том числе, просто не понял на практике что лучше применять.
Т.е. я так понял что мне нужно использовать пункты в связке с em.

Автор: bredonosec
Дата сообщения: 05.11.2004 08:01

Цитата:

Т.е. я так понял что мне нужно использовать пункты в связке с em.

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

Автор: vladmir
Дата сообщения: 05.11.2004 13:34

bredonosec

Цитата:

По идее, предпочтительно.

Я бы переиначил - предпочтения по идеям.
Мне наиболее симпатична связка:
- px для меню, копирайтов и т.п.
- x-small для основного текста.
- иногда - проценты

Нафига пункты вообще не в курсе.

Автор: Xrobak
Дата сообщения: 05.11.2004 22:11

во-во... вроде описано что за единицы есть, а вот реально на практике когда сталкиваешся, то задумываешся... на чем же остановить свой выбор, и сидиш гадаеш...
Я сейчас использую em для основного текста и ссылок в основном тексте, чтобы можно было размер шрифта изменять; а вот pt - уже в менюшке и копирайтах, так как там изменять размер шрифта не нужно...

Автор: IDreamer
Дата сообщения: 07.11.2004 14:06

Привет! Я зеленый в css, сайт по шаблону jobhelp.narod.ru Вот проблема: иногда навожу мышкой на меню слева(Регистрация......Подпишись на рассылку) и оно пропадает в никуда, пустое место. Что это? На страницах в этом меню явно есть ошибки, но я не шарю как их можно легко исправить. Помогите.

Автор: Xrobak
Дата сообщения: 08.11.2004 15:17

IDreamer
ИЕ 5.01 - все нормально работает и ничего никуда не исчезает. Ты чем просматриваеш сайт (и версию в студию тоже)?
Скорее всего если у тебя что-то и пропадает, так это из-за того что у тебя используются слоя. У нетшкафа слой записывается через layer например, вобщем у тебя просто под ИЕ написан код сайта.

Автор: bredonosec
Дата сообщения: 08.11.2004 18:01

Цитата:

иногда навожу мышкой на меню слева и оно пропадает в никуда, пустое место. Что это?

- Значит забыл написать (или неправильно написал) ссылку на картинку, которая должна появиться при наведении. Или вообще забыл её (картинку) добавить.
ЗЫ. А при чем тут css?
vladmir

Цитата:

Мне наиболее симпатична связка:

- Твоё право.

Я px юзаю только для ширины границ. Или ширины ячеек/таблиц (когда не процентами). Всё остальное, что связано с текстовыми элементами (и блоковыми, содержащими текст) - пункты и строки (pt, em). Так даже если забыл указать размер для какого-то элемента, не окажется, что он вышел больше, когда должен был меньше, или наоборот. (потому как у юзера дефолтный шрифт другой, или еще что-нить сменено)

Автор: IDreamer
Дата сообщения: 08.11.2004 18:22

bredonosec
Я, конечно, прошу прощения, но Вы бы страницу для начала открыли что ли. На сайте и графики нет.
Xrobak
Да, я просмотриваю страницы только в IE sp2, и меню уходит минуты через 2-3. Это конечно геморойно сидеть и водить мышкой по меню. Но если есть желание помочь...?

Автор: Xrobak
Дата сообщения: 08.11.2004 20:05

IDreamer
1) про версию IE Спрашивалось а не про сервис-пак для него
2) знаеш... поводил я 3 минуты мышкой по менюшке - ничего не происходит. Посему я не знаю как тебе помочь, если ничего не происходит из того что ты описываеш.
ЗЫ: как вариант - сделай скриншот того что происходит у тебя и выложи его где-то, чтобы посмотрели в чем проблемы.
3) если все-таки речь в слоях - то ты вопрос задал не в той теме явно... Слои это к гиппертекстовой разметке.
4) а про валидацию кода HTML и CSS слыхал? Пробовал пользоваться? Если нет, то попробуй ;)
Что это такое - ищи фильтром, уже обсуждалось...

Автор: bredonosec
Дата сообщения: 09.11.2004 19:08

Цитата:

Вы бы страницу для начала открыли что ли

не вижу ссылки. А.. это не название шаблона, а имя сайта.. зашел. Ничего не исчезает. (ИЕ-5,0)
ЗЫ, на странице "инструкция в меню 2 пункта кривые - прыгают при наведении. Проверь, одинаковый ли размер и тип шрифта дал для наведения (hover) и просто линка.

Автор: IDreamer
Дата сообщения: 10.11.2004 07:55

Xrobak
bredonosec
IE- 6.0.2900.2180.xpsp sp2 rtm.040803-2158
Вот , что происходит у меня.

Код: <div id="navBar">
<div id="search">
<form NAME="web" METHOD="get action="http://www.yandex.ru/yandsearch">
<label>Поиск</label>
<INPUT TYPE="text" NAME="text" SIZE=10 VALUE="" MAXLENGTH=160>
<INPUT TYPE=SUBMIT VALUE="Найти!">
<INPUT TYPE="hidden" NAME="serverurl" VALUE="http://jobhelp.narod.ru/">
<INPUT TYPE="hidden" NAME="server_name" VALUE="Работа и трудоустройство">
<INPUT TYPE="hidden" NAME="referrer1" VALUE="http://jobhelp.narod.ru/">
<INPUT TYPE="hidden" NAME="referrer2" VALUE="Работа и трудоустройство">
</form>
<FORM TARGET=_blank ACTION=http://subscribe.ru/member/quick METHOD=POST>
<INPUT TYPE=hidden NAME=action VALUE=quick>
<FONT SIZE=-1>
<INPUT TYPE=hidden NAME=grp VALUE="economics.icommerce.jobhelp">
<A HREF=http://subscribe.ru/catalog/economics.icommerce.jobhelp
TARGET=_top title="Будь в курсе всех событий сайта"><B>Рассылка новостей</B></A><BR>
<INPUT TYPE=text NAME=email SIZE=9 MAXLENGTH=100 VALUE="ваш e-mail"
style="font-size: 9pt">
<INPUT TYPE=submit VALUE="OK" style="font-size: 9pt">
</FONT></div>
<div id="sectionLinks">
<ul>
<li><a href="/instruction/instruction.html" title="Регистрация на русском">Регистрация</a></li>
<li><a href="/instruction/instruction.html#1" title="Как правильно работать жителям СНГ">Инструкция СНГ</a></li>
<li><a href="/instruction/usa/usa.html" title="Повышение заработка">Инструкция USA</a></li>
<li><a href="/instruction/instruction.html#3" title="О специальных предложениях на русском">Специальные предложения</a></li>
<li><a href="/errors/errors.html" title="Что не нужно делать!">Типичные ошибки</a></li>
<li><a href="/club/goldclub.html" title="Больше денег только в клубе!">Для членов КА</a></li>
<li><A href="/subscribe/subscribe.html" title="Будь в курсе всех событий сайта!">Подпишись на рассылку</A></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Ссылки</h3>
<ul>
<li><a href="http://dollarseasy.narod.ru" title="телеработа дома зарплата высокая">Срочно требуется...</a></li>

</ul>
</div>
<div class="relatedLinks"></div>
<div id="headlines">
<h3>Новости</h3>
<p> 1 доллар в час <a href="/news/news.html" title="Как получать 1 66 долларов час?">подробнее...</a>
</p>
<p>
Друзья помогут Вам <a href="/news/news.html" title="Рефералы до 8-го уровня">подробнее...</a>
</p>
<p> 
</p>
</div>
</div>

Автор: bredonosec
Дата сообщения: 10.11.2004 18:21

Подожди-ка.. а разве дивы могут быть вложенными?
В спецификации нтмл3,2 вообще ничего об этом не сказано, а 4,0 под рукой нету..

Автор: Yaakov
Дата сообщения: 11.11.2004 10:52

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

Автор: Vezlivii_Ham2
Дата сообщения: 16.11.2004 21:42

Всем привет.
Вот такой вопрос:
вид ссылок прописан в css таблице моего сайта... Мне нужно, чтобы ссылки из определенной таблицы (ну например ссылки меню) не подчинялись общему правилу описанному в css, а отображались согласно правилу созданному специально для них. Т.е. я конечно могу сделать ссылку такого вида
<a href="#" style="color:#000; font-family:Arial; и т.д"></a>
Но я помню, что можно как-то прописывать это в той же таблице стилей... Раньше делал, а теперь забыл как

И найти нигде не могу... Как это реализовать?

P.S. Если криво задал вопрос - плз... уточните.
Заранее спасибо.

Автор: Xrobak
Дата сообщения: 26.11.2004 22:31

Vezlivii_Ham2
таблица стилей:

Цитата:

a.mmm:link {color:#000; font-family:Arial;}

ссылка:

Цитата:

<a class="mmm" href="#">your text</a>

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Предыдущая тема: Вопрос к знатокам CSS

Форум Ru-Board.club — поднят 15-09-2016 числа. Цель - сохранить наследие старого Ru-Board, истории становления российского интернета. Сделано для людей.