Просмотр полной версии : Вопросы по 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 прилеплен странным образом , а в частности ( такого ни разу не видел ) :
<!--[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':'');
Где пор последние можно ознакомиться подробнее !?
#middle:after {
content: '.'; Что делает эта точка !????
display: block;
clear: both;
visibility: hidden;
height: 0;}
google: css after content (http://www.google.ru/search?hl=ru&newwindow=1&q=css+after+content&btnG=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA&lr=lang_ru&aq=f&oq=)
htmlbook.ru (http://www.htmlbook.ru/css/after.html)
Не знаю, кто это писал, но на первый взгляд выглядит абсурдно.
Как бы то ни было, точка здесь - всего лишь текст. Она ничего не делает.
height: auto !important; Что в данном случае импортируется и откуда !???
google: css important (http://www.google.ru/search?hl=ru&newwindow=1&q=css+important&btnG=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA&lr=lang_ru&aq=f&oq=)
htmlbook.ru (http://www.htmlbook.ru/css/!important.html)
<!--[if lte IE 7]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen" /><![endif]-->
Условный комментарий. Имеет значение только для IE. Для остальных браузеров это обычный комментарий и они его не читают.
В приведенном случае дополнительные стили подгрузятся только в IE версий 7 и более старых.
google: html комментарий (http://www.google.ru/search?hl=ru&q=html+%D0%BA%D0%BE%D0%BC%D0%BC%D0%B5%D0%BD%D1%82% D0%B0%D1%80%D0%B8%D0%B9&btnG=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA+%D0%B2+Google&lr=&aq=f&oq=)
google: css ie хак (http://www.google.ru/search?hl=ru&newwindow=1&q=css+ie+%D1%85%D0%B0%D0%BA&btnG=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA&lr=&aq=f&oq=)
dar, а самому сложно было Google почитать? :)
dar, а самому сложно было Google почитать?
Почитать , то я почитал , да вот не совсем догнал .
Она ничего не делает.
Без неё весь макет на перекасяк . Сразу разваливается и трудно разобраться и дивы друг на друга налезают .
Убираешь точку и вся верстка сбивается .
Пользовался следующим сервисом csstool.ru (http://csstool.ru/) .
Ни кто не знает еще подобных сервисов ?
Ясно. Посмотрел, как там генерируется верстка. Элемент after используется в качестве "выравнивателя".
Все блоки внутри #middle имеют стиль float и родитель "теряет" их габариты. Поэтому надо последнему элементу у родителя запретить обтекание элементов (стиль clear).
Я в таких случаях пользуюсь выравнивающим блоком.
.clear-both {
clear: both;
}
<div class="clear-both"></div>
P.S. Советую самому освоить верстку и не пользоваться генераторами. В качестве материала для изучения они подходят, но использовать их для работы я бы поостерегся.
P.P.S. И проверь разметку в IE6.
MDM, А можно вычислить не используемые классы ?
Что бы их не перебирать по одному , а разом .
Расширение для Firefox: Dust-Me Selectors (http://www.sitepoint.com/dustmeselectors/)
Появится пункт в меню "Инструменты".
dar, знаешь, как можно учиться html/css, помимо учебников? Скачиваешь огромную кучу бесплатных шаблонов и просматриваешь; понравился какой-то элемент верстки - сразу смотришь код, изучаешь, сохраняешь и запоминаешь.
Muskul, Я примерно так и делаю . Только еще в инет учебник смотрю :) . И сравниваю . Но до серьезных вещей я еще не дошел .
Серьезно
81784
dar, коду можно научиться, бизнес должен быть в крови. С постерами на варезниках надо контачить. :)
MDM, Muskul, Ни ка не могу понять почему идет разное отображение в браузерах .
В IE 6 появляется не понятная картинка , такое чувство , что не правильный путь к картинке :huh: .
83410
В FF появляется надпись "Отправить запрос" - я такого в коде не вводил и не знаю как избавиться :huh: .
83411
Моя идея будет понятна если посмотреть исходный код - там всего одна кнопка и два стиля . Вроде все просто , но не отображается как хочется .
.:: Скрытый текст<br />Вы должны войти под своим логином или зарегистрироваться и иметь 25 сообщение(ий) ::.
У поля type="image", а адрес картинки не указан. Либо пользуй clear.gif, либо тег <a>, что предпочтительней.
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 - это прозрачная картинка ?
clear.gif - прозрачное изображение 1х1 px.
В приведенном коде spacer.gif, вероятно, именно такое изображение.
Например:
<div id="content">
<h3 class="tab">
<div class="tabtxt"><a href="#">#</a></div>
</h3>
Есть ли разница м/у :
.tab a {} /*Первый вариант*/
.tabtxt a {} /*Второй вариант*/
Чтобы изменить стиль ссылки только в определенном блоке , но не применяя его ко всей странице мне нужно прописать целый путь со всеми под блоками или только предыдущий в данном случае относительно тега <a> (т.е. второй вариант)!?
Можно ли так :
#content a {}
Если стиль будет задан так , то форматирование будет распространяться на все теги <A> включая все под блоки !?
Можно ли так :
#content a {}
Если стиль будет задан так , то форматирование будет распространяться на все теги <A> включая все под блоки !?
Все верно.
dar, можно же так:<a style="blablabla" href="#">#</a>
<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" можно еще как-нибудь решить эту проблему !?
Просто если вдруг шаблон резиновый и ширина постоянно плавает , то как выравнивают !?
.box_icon {
float: right;
}
Все работает.
Во всех браузерах все хорошо а в IE 6 вот так
85141
это можно как-нить исправить ?
Или нет смысла мучатся ради IE6 ? В остальных версия 7 , 8 все ok .
IE6 не понимает прозрачность PNG. Есть JavaScript-хаки, которые учат его этому. Поищи в Google.
dar, при проблемах с прозрачность png можно попробовать использовать прозрачный gif.
Вот еще вопрос в эту же тему .
Вот как сделали так
90932
проходишь в раздел регистрация , то вот так
90933
т.е. не мышку перемещаешь (делаешь активным область), именно уже когда нажал .
.:: Скрытый текст<br />Вы должны войти под своим логином или зарегистрироваться и иметь 25 сообщение(ий) ::.
Это сделано по средствами css ???
Да, CSS. Выделенному пункту меню дается class="active", а в CSS описывается правило для .active со своим фоновым изображением.
P.S. Полезно изучать HTML-код страницы.
MDM, а по каким причинам класс может не присваиваться ???
FureBug показывает что его нет .
<style type="text/css">
a:active {
color: #f00; /* Вы имеете ввиду это ??? */
}
</style>
<a href="#">текст</a>
Дело в том что когда наводишь на ссылку и она меняет цвет это работает у меня и я это знал .
a:visited {
color: #900060; /* Цвет посещенных ссылок */
}
Это посещенная ссылка .
А там затемняется ( меняет цвет фона или даже накладывается изображение ) , на той ссылке в которой ты сейчас находишь ( ну т.е. в той категории ) и если перейти на другую категорию , то затемниться другая .
Вот зайти на этот сайт и провести по верхнему меню - используется active , а если допустим нажать на "регистрация" - эта область затемниться ( даже если мышь убрать она не пропадет цвет/изображение ) , а потом нажать на "контакты" , то затемнится область контактов , а область регистрация станет стандартного цвета :unsure: .
Что еще самое странное у меня не присваивается класс active , а там присваивается :blink: . По каким причинам это возможно ???
.active {
background: #F00 url('image.png');
}
...
<a class="active" href="#">Link</a>
Все вроде правильно , как Вы указали , но что-то все равно не работает :( Вот так написано у меня
<!-- 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 -->
<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: .
Страница динамическая, генерируется скриптом. Он и добавляет .active в зависимости от того, на какой странице находишься.
Также, проверь, соответствуют ли смещения фона ссылок изображениям. Если фон отображается корректно, тогда порядок. Если нет, погугли на предмет background-position.
Почему-то мне кажется, что ты изучаешь материал "методом тыка" и "copy-paste", не пытаясь понять, как это работает.
Тут просто надо понять, что не все зависит от css. Надо скрипт смотреть.
MDM,
Muskul,
Дело было не в css в css без ошибок было все . Дело было в особенностях движка DLE не хватало class="active" в категории .
105661
У меня вот так нарезано, как показано на рисунке.
Сама проблема:
как сделать кончик активным, когда активно и основную поверхность, чтобы он тоже закрашивался?
105663
Второй блок у меня делается активным (из первого рисунка), а первый нет.
Какая должна быть вложенность чтобы оба можно было заставить изменяться при наведении мышки.
UPD Вопрос решен, всем спасибо.
^_^ Начал тут изучать css и возник вопрос.
Вот так отображает правильно:
h1 {
font-family: arial, verdana, sans-serif;
font-variant: small-caps;
font-size: 30px;
}
а вот так не правильно:
h1 {
font: small-caps 30px arial, verdana, sans-serif;
}
Хотя аналог же?
И ещё, коли уж тут пишу: подкиньте какой-нибуть редактор под linux, чтобы не только синтаксис высвечивал, но и предлагал теги по мере набора
SuperSkat
15.08.2010, 20:26
SoaT, смотри сюда: http://htmlbook.ru/css/
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, странно, потому что у меня всё отлично работает...
<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
И ещё, коли уж тут пишу: подкиньте какой-нибуть редактор под linux, чтобы не только синтаксис высвечивал, но и предлагал теги по мере набора
Ну например bluefish. К тому же, ко многим редакторам: vim,emacs,gedit, и т. д. - есть плагин zencoding: zencoding (http://linux.vsevteme.ru/items/show?id=14783)
есть плагин zencoding
Офигенная вещица, жаль мне рановато пока - совсем иначе запутаюсь (:
А так спасибо, возьму на заметку)
Можно её использовать по мере обучения. Например не помешает шаблон типа:
<!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:4s
Всяко удобнеё чем набирать всё это вручную. Да даже просто вставка закрывающегося тега уже облегчит тебе учебу и работу
Вопрос по Stylish. Где не правильно то? Почему хед не скрывается?(
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("vip.karelia.ru") {
table:first-child {
display: none;
}
}
vBulletin® v3.8.4, Copyright ©2000-2026, Jelsoft Enterprises Ltd. Перевод: zCarot