Ответ
 
Опции темы
Старый 10.02.2009, 17:04      #1
dar
Chrome User
Пользователь Mozilla Firefox
Пользователь Google Chrome
 
Аватар для dar
 
Регистрация: 06.03.2008
Сообщений: 3,661
Вопрос Вопросы по 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':'');
Где пор последние можно ознакомиться подробнее !?
__________________
Кто хочет - ищет способ, кто не хочет - ищет причину. СОКРАТ
dar вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 10.02.2009, 19:27      #2
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

Сообщение от 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 почитать?
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Благодарности: 2
dar (11.02.2009), Petrovich (15.02.2009)
Старый 20.02.2009, 02:36      #3
dar
Chrome User
Пользователь Mozilla Firefox
Пользователь Google Chrome
 
Аватар для dar
 
Регистрация: 06.03.2008
Сообщений: 3,661
По умолчанию

Сообщение от MDM Посмотреть сообщение
dar, а самому сложно было Google почитать?
Почитать , то я почитал , да вот не совсем догнал .

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

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

Ни кто не знает еще подобных сервисов ?
__________________
Кто хочет - ищет способ, кто не хочет - ищет причину. СОКРАТ
dar вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 20.02.2009, 03:44      #4
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

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

Я в таких случаях пользуюсь выравнивающим блоком.
Код HTML:
.clear-both {
	clear: both;	
}

<div class="clear-both"></div>
P.S. Советую самому освоить верстку и не пользоваться генераторами. В качестве материала для изучения они подходят, но использовать их для работы я бы поостерегся.
P.P.S. И проверь разметку в IE6.
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Благодарности: 2
mishik (20.02.2009), Muskul (20.02.2009)
Старый 02.03.2009, 13:29      #5
dar
Chrome User
Пользователь Mozilla Firefox
Пользователь Google Chrome
 
Аватар для dar
 
Регистрация: 06.03.2008
Сообщений: 3,661
По умолчанию

MDM, А можно вычислить не используемые классы ?
Что бы их не перебирать по одному , а разом .
__________________
Кто хочет - ищет способ, кто не хочет - ищет причину. СОКРАТ
dar вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 02.03.2009, 13:49      #6
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

Расширение для Firefox: Dust-Me Selectors
Появится пункт в меню "Инструменты".
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Благодарности: 1
dar (02.03.2009)
Старый 02.03.2009, 15:07      #7
Muskul
Заблокирован
 
Регистрация: 15.05.2008
Сообщений: 778
По умолчанию

dar, знаешь, как можно учиться html/css, помимо учебников? Скачиваешь огромную кучу бесплатных шаблонов и просматриваешь; понравился какой-то элемент верстки - сразу смотришь код, изучаешь, сохраняешь и запоминаешь.
Muskul вне форума   Ответить с цитированием Вверх
Старый 02.03.2009, 16:03      #8
dar
Chrome User
Пользователь Mozilla Firefox
Пользователь Google Chrome
 
Аватар для dar
 
Регистрация: 06.03.2008
Сообщений: 3,661
По умолчанию

Muskul, Я примерно так и делаю . Только еще в инет учебник смотрю . И сравниваю . Но до серьезных вещей я еще не дошел .
Серьезно
во.jpg
__________________
Кто хочет - ищет способ, кто не хочет - ищет причину. СОКРАТ
dar вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 02.03.2009, 16:39      #9
Muskul
Заблокирован
 
Регистрация: 15.05.2008
Сообщений: 778
По умолчанию

dar, коду можно научиться, бизнес должен быть в крови. С постерами на варезниках надо контачить.
Muskul вне форума   Ответить с цитированием Вверх
Старый 21.03.2009, 09:10      #10
dar
Chrome User
Пользователь Mozilla Firefox
Пользователь Google Chrome
 
Аватар для dar
 
Регистрация: 06.03.2008
Сообщений: 3,661
По умолчанию

MDM, Muskul, Ни ка не могу понять почему идет разное отображение в браузерах .
В IE 6 появляется не понятная картинка , такое чувство , что не правильный путь к картинке .
IE6.png
В FF появляется надпись "Отправить запрос" - я такого в коде не вводил и не знаю как избавиться .
FF.png
Моя идея будет понятна если посмотреть исходный код - там всего одна кнопка и два стиля . Вроде все просто , но не отображается как хочется .
Скрытый текст
Вы должны войти под своим логином или зарегистрироваться и иметь 25 сообщение(ий)
Правила форума | Регистрация на форуме
Предупреждение: увидев этот блок скрытого текста, не стоит сразу бросаться набивать бессмысленные сообщения. Освойтесь на форуме, проникнитесь его атмосферой и пишите, если Вам действительно есть, что сказать. Если Модератор решит, что Вы набиваете сообщения, он удалит их все, а Вам выдаст либо предупреждение, либо сразу заблокирует Ваш аккаунт.
__________________
Кто хочет - ищет способ, кто не хочет - ищет причину. СОКРАТ

Последний раз редактировалось dar; 21.03.2009 в 09:11.
dar вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 21.03.2009, 15:17      #11
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

У поля type="image", а адрес картинки не указан. Либо пользуй clear.gif, либо тег <a>, что предпочтительней.
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Благодарности: 1
dar (22.03.2009)
Старый 21.03.2009, 16:05      #12
dar
Chrome User
Пользователь Mozilla Firefox
Пользователь Google Chrome
 
Аватар для dar
 
Регистрация: 06.03.2008
Сообщений: 3,661
По умолчанию

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 - это прозрачная картинка ?
__________________
Кто хочет - ищет способ, кто не хочет - ищет причину. СОКРАТ
dar вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 21.03.2009, 16:23      #13
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

clear.gif - прозрачное изображение 1х1 px.
В приведенном коде spacer.gif, вероятно, именно такое изображение.
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Благодарности: 1
dar (22.03.2009)
Старый 27.03.2009, 01:16      #14
dar
Chrome User
Пользователь Mozilla Firefox
Пользователь Google Chrome
 
Аватар для dar
 
Регистрация: 06.03.2008
Сообщений: 3,661
Вопрос

Например:
Код 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> включая все под блоки !?
__________________
Кто хочет - ищет способ, кто не хочет - ищет причину. СОКРАТ
dar вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 27.03.2009, 01:38      #15
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

Сообщение от dar Посмотреть сообщение
Можно ли так :
Код HTML:
#content a {}
Если стиль будет задан так , то форматирование будет распространяться на все теги <A> включая все под блоки !?
Все верно.
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Благодарности: 1
dar (27.03.2009)
Старый 27.03.2009, 02:10      #16
Muskul
Заблокирован
 
Регистрация: 15.05.2008
Сообщений: 778
По умолчанию

dar, можно же так:
Код:
<a style="blablabla" href="#">#</a>

Последний раз редактировалось Muskul; 27.03.2009 в 02:11.
Muskul вне форума   Ответить с цитированием Вверх
Благодарности: 1
dar (27.03.2009)
Старый 05.04.2009, 00:33      #17
dar
Chrome User
Пользователь Mozilla Firefox
Пользователь Google Chrome
 
Аватар для dar
 
Регистрация: 06.03.2008
Сообщений: 3,661
Вопрос

Код 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" можно еще как-нибудь решить эту проблему !?
Просто если вдруг шаблон резиновый и ширина постоянно плавает , то как выравнивают !?
__________________
Кто хочет - ищет способ, кто не хочет - ищет причину. СОКРАТ
dar вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 05.04.2009, 00:49      #18
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

Код HTML:
.box_icon {
	float: right;
}
Все работает.
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Благодарности: 1
dar (05.04.2009)
Старый 11.04.2009, 15:09      #19
dar
Chrome User
Пользователь Mozilla Firefox
Пользователь Google Chrome
 
Аватар для dar
 
Регистрация: 06.03.2008
Сообщений: 3,661
По умолчанию

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

Или нет смысла мучатся ради IE6 ? В остальных версия 7 , 8 все ok .
__________________
Кто хочет - ищет способ, кто не хочет - ищет причину. СОКРАТ
dar вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 11.04.2009, 17:24      #20
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

IE6 не понимает прозрачность PNG. Есть JavaScript-хаки, которые учат его этому. Поищи в Google.
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Благодарности: 1
dar (11.04.2009)
Ответ


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы

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

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопросы Путину iva На завалинке 49 14.06.2010 18:28
Как правильно решать “алкогольные” вопросы с ГИБДД bobby Авто-мото 0 27.05.2009 17:11
Поднимаем сервер CSS! DaleX Игровой мир 2 09.05.2007 15:26
Вопросы и ответы (F.A.Q.) MDM Mozilla Firefox 5 13.11.2006 21:09


Обратная связь
Текущее время: 12:19. Часовой пояс GMT +3.


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot