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

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Battle Forum (http://battlefox.rooty.ru/index.php)

- Web-программирование / Сайтостроение (http://battlefox.rooty.ru/forumdisplay.php?f=110)

- - Вопросы по CSS знатокам (http://battlefox.rooty.ru/showthread.php?t=10690)

dar	10.02.2009 17:04

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

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

Макет построен на дивах .
В 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 прилеплен странным образом , а в частности ( такого ни разу не видел ) :

Код:

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

Код:

* html #wrapper,

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

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

MDM	10.02.2009 19:27

Цитата:

Сообщение от dar (Сообщение 346462)

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

google: css after content
htmlbook.ru

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

Цитата:

Сообщение от dar (Сообщение 346462)

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

google: css important
htmlbook.ru

Цитата:

Сообщение от dar (Сообщение 346462)

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

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

dar	20.02.2009 02:36

Цитата:

Сообщение от MDM (Сообщение 346503)

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

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

Цитата:

Сообщение от MDM (Сообщение 346503)

Она ничего не делает.

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

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

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

MDM	20.02.2009 03:44

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

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

Код HTML:

.clear-both {

        clear: both;        

}



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

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

dar	02.03.2009 13:29

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

MDM	02.03.2009 13:49

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

Muskul

02.03.2009 15:07

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

dar	02.03.2009 16:03

Вложений: 1

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

Muskul

02.03.2009 16:39

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

dar	21.03.2009 09:10

Вложений: 3

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

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

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

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

MDM	21.03.2009 15:17

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

dar	21.03.2009 16:05

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

Код HTML:

<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	21.03.2009 16:23

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

dar	27.03.2009 01:16

Например:

Код HTML:

<div id="content">

<h3 class="tab">

<div class="tabtxt"><a href="#">#</a></div>

</h3>

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

Код HTML:

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

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

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

Код HTML:

#content a {}

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

MDM	27.03.2009 01:38

Цитата:

Сообщение от dar (Сообщение 361458)

Можно ли так :

Код HTML:

#content a {}

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

Все верно.

Muskul

27.03.2009 02:10

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

Код:

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

dar	05.04.2009 00:33

Код HTML:

<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>

Код HTML:

.box_icon {float:left;

}

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

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

Код HTML:

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

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

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

MDM	05.04.2009 00:49

Код HTML:

.box_icon {

        float: right;

}

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

dar	11.04.2009 15:09

Вложений: 1

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

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

MDM	11.04.2009 17:24

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

Текущее время: 00:45. Часовой пояс GMT +3.

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице