Вопросы по CSS знатокам

[dar]

Воспользовавшись одним из сервисов строения макетов и скачав от туда резиновый , наткнулся на несколько непонятных вещей .
Полистав пару пособий и справочников ответов не нашел .

Макет построен на дивах .
В css обнаружено :

#middle:after {
content: '.';  Что делает эта точка !????
display: block;
clear: both;
visibility: hidden;
height: 0;}

#wrapper {
min-width: 1000px;
min-height: 100%;
height: auto !important; Что в данном случае импортируется и откуда !???
height: 100%;
}

Странно , то что к html документу прикреплёно два файла css ( выше выдержка из первого ) .
Второй документ css прилеплен странным образом , а в частности ( такого ни разу не видел ) :

<!--[if lte IE 7]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen" /><![endif]-->

Документ style_ie.css содержит лишь пару строк :

* html #wrapper,
* html #footer {width: expression((documentElement.clientWidth||document.body.clientWidth)}<995?'1000px':'');

Где пор последние можно ознакомиться подробнее !?

[MDM]

Сообщение от dar #middle:after { content: '.'; Что делает эта точка !???? display: block; clear: both; visibility: hidden; height: 0;}

google: css after content
htmlbook.ru

Не знаю, кто это писал, но на первый взгляд выглядит абсурдно.
Как бы то ни было, точка здесь - всего лишь текст. Она ничего не делает.

Сообщение от dar height: auto !important; Что в данном случае импортируется и откуда !???

google: css important
htmlbook.ru

Сообщение от dar <!--[if lte IE 7]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen" /><![endif]-->

Условный комментарий. Имеет значение только для IE. Для остальных браузеров это обычный комментарий и они его не читают.
В приведенном случае дополнительные стили подгрузятся только в IE версий 7 и более старых.
google: html комментарий
google: css ie хак

dar, а самому сложно было Google почитать?

[dar]

Сообщение от MDM dar, а самому сложно было Google почитать?

Почитать , то я почитал , да вот не совсем догнал .

Сообщение от MDM Она ничего не делает.

Без неё весь макет на перекасяк . Сразу разваливается и трудно разобраться и дивы друг на друга налезают .
Убираешь точку и вся верстка сбивается .

Пользовался следующим сервисом csstool.ru .

Ни кто не знает еще подобных сервисов ?

[MDM]

Ясно. Посмотрел, как там генерируется верстка. Элемент after используется в качестве "выравнивателя".
Все блоки внутри #middle имеют стиль float и родитель "теряет" их габариты. Поэтому надо последнему элементу у родителя запретить обтекание элементов (стиль clear).

Я в таких случаях пользуюсь выравнивающим блоком.

.clear-both {
	clear: both;	
}

<div class="clear-both"></div>

P.S. Советую самому освоить верстку и не пользоваться генераторами. В качестве материала для изучения они подходят, но использовать их для работы я бы поостерегся.
P.P.S. И проверь разметку в IE6.

[dar]

MDM, А можно вычислить не используемые классы ?
Что бы их не перебирать по одному , а разом .

[MDM]

Расширение для Firefox: Dust-Me Selectors
Появится пункт в меню "Инструменты".

[Muskul]

dar, знаешь, как можно учиться html/css, помимо учебников? Скачиваешь огромную кучу бесплатных шаблонов и просматриваешь; понравился какой-то элемент верстки - сразу смотришь код, изучаешь, сохраняешь и запоминаешь.

[dar]

Muskul, Я примерно так и делаю . Только еще в инет учебник смотрю . И сравниваю . Но до серьезных вещей я еще не дошел .
Серьезно
во.jpg

[Muskul]

dar, коду можно научиться, бизнес должен быть в крови. С постерами на варезниках надо контачить.

[dar]

MDM, Muskul, Ни ка не могу понять почему идет разное отображение в браузерах .
В IE 6 появляется не понятная картинка , такое чувство , что не правильный путь к картинке .
IE6.png
В FF появляется надпись "Отправить запрос" - я такого в коде не вводил и не знаю как избавиться .
FF.png
Моя идея будет понятна если посмотреть исходный код - там всего одна кнопка и два стиля . Вроде все просто , но не отображается как хочется .

Скрытый текст
Вы должны войти под своим логином или зарегистрироваться и иметь 25 сообщение(ий)

Правила форума | Регистрация на форуме

Предупреждение: увидев этот блок скрытого текста, не стоит сразу бросаться набивать бессмысленные сообщения. Освойтесь на форуме, проникнитесь его атмосферой и пишите, если Вам действительно есть, что сказать. Если Модератор решит, что Вы набиваете сообщения, он удалит их все, а Вам выдаст либо предупреждение, либо сразу заблокирует Ваш аккаунт.

[MDM]

У поля type="image", а адрес картинки не указан. Либо пользуй clear.gif, либо тег <a>, что предпочтительней.

[dar]

MDM, Вот так выглядит , то что я хотел модернизировать .

<input class="btn" onclick="submit();" onmouseover="this.className='btnhover'" onmouseout="this.className='btn'" name="image" value="Войти" type="image" src="{THEME}/images/spacer.gif" />

Разве так можно через <a> ?
clear.gif - это прозрачная картинка ?

[MDM]

clear.gif - прозрачное изображение 1х1 px.
В приведенном коде spacer.gif, вероятно, именно такое изображение.

[dar]

Например:

<div id="content">
<h3 class="tab">
<div class="tabtxt"><a href="#">#</a></div>
</h3>

Есть ли разница м/у :

.tab a {}       /*Первый вариант*/
.tabtxt a {}   /*Второй вариант*/

Чтобы изменить стиль ссылки только в определенном блоке , но не применяя его ко всей странице мне нужно прописать целый путь со всеми под блоками или только предыдущий в данном случае относительно тега <a> (т.е. второй вариант)!?
Можно ли так :

#content a {}

Если стиль будет задан так , то форматирование будет распространяться на все теги <A> включая все под блоки !?

[MDM]

Сообщение от dar Можно ли так : #content a {} Если стиль будет задан так , то форматирование будет распространяться на все теги <A> включая все под блоки !?

Все верно.

[Muskul]

dar, можно же так:

<a style="blablabla" href="#">#</a>

[dar]

<td class="t">

<div class="box_icon"><a id="rss" href="#" title="RSS">
<img src="spacer.gif" alt="RSS" /></a></div>

<div class="box_icon"><a id="map" href="#" title="Карта сайта">
<img src="spacer.gif" alt="Карта сайта" /></a>

</div>
</td>

.box_icon {float:left;
}

Все как бы нормально не могу к правому краю прижать <div class="box_icon"> нужно чтобы дивы друг за другом шли и выровнены по правому краю относительно <td class="t"> .

Вот такой вариант почему - то не работает , или это только для теста ?

<td class="t" align="right">

Что только не делал с .box_icon {}

Сделал временно паддингом для class="t" можно еще как-нибудь решить эту проблему !?
Просто если вдруг шаблон резиновый и ширина постоянно плавает , то как выравнивают !?

[MDM]

.box_icon {
	float: right;
}

Все работает.

[dar]

Во всех браузерах все хорошо а в IE 6 вот так
sshot-4.png
это можно как-нить исправить ?

Или нет смысла мучатся ради IE6 ? В остальных версия 7 , 8 все ok .

[MDM]

IE6 не понимает прозрачность PNG. Есть JavaScript-хаки, которые учат его этому. Поищи в Google.