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

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.

rmn	11.04.2009 21:59

dar, при проблемах с прозрачность png можно попробовать использовать прозрачный gif.

dar	23.07.2009 19:39

Вложений: 2

Вот еще вопрос в эту же тему .
Вот как сделали так
Вложение 90932
проходишь в раздел регистрация , то вот так
Вложение 90933
т.е. не мышку перемещаешь (делаешь активным область), именно уже когда нажал .

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

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

Это сделано по средствами css ???

MDM	23.07.2009 19:44

Да, CSS. Выделенному пункту меню дается class="active", а в CSS описывается правило для .active со своим фоновым изображением.

P.S. Полезно изучать HTML-код страницы.

dar	23.07.2009 23:45

MDM, а по каким причинам класс может не присваиваться ???
FureBug показывает что его нет .

Код HTML:

<style type="text/css">

   a:active {

    color: #f00; /* Вы имеете ввиду это ??? */ 

   } 

</style>

<a href="#">текст</a>

Дело в том что когда наводишь на ссылку и она меняет цвет это работает у меня и я это знал .

Код HTML:

a:visited {

    color: #900060; /* Цвет посещенных ссылок */

   }

Это посещенная ссылка .

А там затемняется ( меняет цвет фона или даже накладывается изображение ) , на той ссылке в которой ты сейчас находишь ( ну т.е. в той категории ) и если перейти на другую категорию , то затемниться другая .
Вот зайти на этот сайт и провести по верхнему меню - используется active , а если допустим нажать на "регистрация" - эта область затемниться ( даже если мышь убрать она не пропадет цвет/изображение ) , а потом нажать на "контакты" , то затемнится область контактов , а область регистрация станет стандартного цвета :unsure: .

Что еще самое странное у меня не присваивается класс active , а там присваивается :blink: . По каким причинам это возможно ???

MDM	24.07.2009 01:00

Код HTML:

.active {

        background: #F00 url('image.png');

}

...

<a class="active" href="#">Link</a>

dar	24.07.2009 01:40

Вложений: 2

Все вроде правильно , как Вы указали , но что-то все равно не работает :( Вот так написано у меня

Код HTML:

<!-- MENU -->

<div class="topmenu"><div class="dleft"><div class="dright">

<a class="flink factive" href="/index.php" title="Главная"><b>Главная</b></a>

<a href="/index.php?do=register" title="Регистрация"><b>Регистрация</b></a>

<a href="/index.php?do=feedback" title="Контакты"><b>Контакты</b></a>

<a href="/index.php?do=stats" title="Статистика"><b>Статистика</b></a>

<a href="/sitemap.xml" title="Карта сайта"><b>Карта сайта</b></a>

<a href="/engine/rss.php" title="RSS"><b>RSS</b></a>

<a href="#" title="О нас"><b>О нас</b></a>

</div></div></div>

<!-- END MENU -->

Код HTML:

<style type="text/css">

.topmenu a:hover { color: #fff; background: #71a3c1 url("../images/menutop_links.png") repeat-x 0 -47px; }

.topmenu a.flink { background-position: 0 -188px; }

.topmenu a.active { background: #1e72a4 url("../images/menutop_links.png") repeat-x 0 0; }

.topmenu a.active:hover { background: #337fab url("../images/menutop_links.png") repeat-x 0 -282px; }

.topmenu a.factive { background: #1e72a4 url("../images/menutop_links.png") no-repeat 0 -141px; }

.topmenu a.factive:hover { background: #337fab url("../images/menutop_links.png") repeat-x 0 -235px; }</style>

У оригинала Вложение 91044 У меня Вложение 91045
У него есть active у меня нет :wacko: .

MDM	24.07.2009 02:02

Страница динамическая, генерируется скриптом. Он и добавляет .active в зависимости от того, на какой странице находишься.

Также, проверь, соответствуют ли смещения фона ссылок изображениям. Если фон отображается корректно, тогда порядок. Если нет, погугли на предмет background-position.

Почему-то мне кажется, что ты изучаешь материал "методом тыка" и "copy-paste", не пытаясь понять, как это работает.

Muskul

24.07.2009 13:21

Тут просто надо понять, что не все зависит от css. Надо скрипт смотреть.

dar	24.07.2009 13:24

MDM,
Muskul,
Дело было не в css в css без ошибок было все . Дело было в особенностях движка DLE не хватало [aviable=main]class="active"[/aviable] в категории .

dar	03.07.2010 17:44

Вложений: 2

Вложение 105661

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

Сама проблема:
как сделать кончик активным, когда активно и основную поверхность, чтобы он тоже закрашивался?

Вложение 105663

Второй блок у меня делается активным (из первого рисунка), а первый нет.

Какая должна быть вложенность чтобы оба можно было заставить изменяться при наведении мышки.

UPD Вопрос решен, всем спасибо.

SoaT	15.08.2010 00:21

^_^ Начал тут изучать css и возник вопрос.
Вот так отображает правильно:

Код:

h1 {

 font-family: arial, verdana, sans-serif;

 font-variant: small-caps;

 font-size: 30px;

}

а вот так не правильно:

Код:

h1 {

 font: small-caps 30px arial, verdana, sans-serif;

}

Хотя аналог же?

SoaT	15.08.2010 00:27

И ещё, коли уж тут пишу: подкиньте какой-нибуть редактор под linux, чтобы не только синтаксис высвечивал, но и предлагал теги по мере набора

SuperSkat

15.08.2010 20:26

SoaT, смотри сюда: http://htmlbook.ru/css/

SoaT	15.08.2010 20:51

SuperSkat, так куда именно то смотреть?)
Вот сюда смотрел: http://ru.html.net/tutorials/css/lesson4.asp

Цитата:

Сокращённая запись [font]
Используя сокращенную запись font, можно указывать все свойства шрифта в одном стилевом правиле.
Например, вот четыре строки описания свойств шрифта для <p>:

Код:

p {

font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

Используя сокращённую запись, код можно упростить:

Код:

p {

font: italic bold 30px arial, sans-serif;

}

Порядок свойств font таков:
font-style | font-variant | font-weight | font-size | font-family

А в конце урока 3 написано про background:

Цитата:

Если свойство отсутствует, оно автоматически получает значение по умолчанию.

SuperSkat

15.08.2010 21:11

SoaT, странно, потому что у меня всё отлично работает...

Код HTML:

<style>

h1 {

        font: small-caps 30px arial, verdana, sans-serif;

}

</style>

<h1>Hello!</h1>

Добавлено через 2 минуты
погорячился немного, при полном описании текст жирный..

Сергей Копылов

15.08.2010 21:14

Я почти уверен, что дело в font-variant.

Попробуй перечислить все свойства: font-style | font-variant | font-weight | font-size | font-family

zhekas

16.08.2010 18:08

Цитата:

Сообщение от SoaT (Сообщение 455636)

Ну например bluefish. К тому же, ко многим редакторам: vim,emacs,gedit, и т. д. - есть плагин zencoding: zencoding

SoaT	16.08.2010 18:29

Цитата:

Сообщение от zhekas (Сообщение 455786)

есть плагин zencoding

Офигенная вещица, жаль мне рановато пока - совсем иначе запутаюсь (:
А так спасибо, возьму на заметку)

zhekas

17.08.2010 00:19

Можно её использовать по мере обучения. Например не помешает шаблон типа:

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ru">

<head>

        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <title></title>

</head>

<body>

        

</body>

</html>

~

который разворачивается при наборе

Код HTML:

html:4s

Всяко удобнеё чем набирать всё это вручную. Да даже просто вставка закрывающегося тега уже облегчит тебе учебу и работу

SoaT	25.10.2010 12:23

Вопрос по Stylish. Где не правильно то? Почему хед не скрывается?(

Спойлер

Код:

@namespace url(http://www.w3.org/1999/xhtml);



@-moz-document domain("vip.karelia.ru") {

   table:first-child {

      display: none;

   }

}

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