[X] Помощник

[denis_mw Topic Starter]

У меня текст не изменяется, после изменения в css-коде. Я так думаю, что я не правильно прописываю селектор. Помогите, пожалуйста.
Вот CSS-код:

.vidget p h4{
font: Arial, Helvetica, sans-serif; margin:0 20px 0 0; color:#000;
}
.vidget p h4 a{
color:#000; text-decoration:underline;
}
.vidget p h4 a:hover{
color:#0097bd; text-decoration:none;
}

Вот кусок HTML-кода:

<div class="sidebar">
              <div class="vidget">
                 <h3>Вход в аккаунт</h3>
                
              
                
                
                 <form class="loginform-main" action="" method="">
<input class="email-txt" type="text" name="email" value=" Email" onblur="if(this.value.length == 0) this.value = ' Email'" onfocus="if(this.value == ' Email') this.value = '' "/>

<input class="pass-txt" type="text" name="pass" value=" Пароль" onblur="if(this.value.length == 0) this.value = ' Пароль'" onfocus="if(this.value == ' Пароль') this.value = '' "/>

<input class="login-btn" type="image" src="images/bg-login.jpg" />
</form>
        
         <p><h4>Забыли пароль?</h4S></p>    
                
              </div>
          </div>

Заранее благодарю за помощь!

[sc2r2bey]

а что тут у тебя должно меняться, если у тебя тут форма?

а селекторы действительно не правильно прописал, нарушил синтаксис

и еще опечатка:

<h4>Забыли пароль?</h4S>

мне кажется S тут лишняя


а вообще попробуй

.vidget{
font: Arial, Helvetica, sans-serif; margin:0 20px 0 0; color:#000;
}
.vidget a{
color:#000; text-decoration:underline;
}
.vidget a:hover{
color:#0097bd; text-decoration:none;

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

<p><h4>Забыли пароль?</h4></p>
<p><a href="reset.php">восстановить</a></p>

[denis_mw Topic Starter]

У меня весь блок принимает тогда эти условия. Не помогло.

Форма та выше, или я чего то не знаю!? Опчетку исправил.

[c0ns0l3]

[member=denis], судя по твоему HTML, не говорю об ошибке ТЭГА - у тебя некчему применять твои правила! Т.к. либо я ослеп, либо я невижу в H4 ссылки, к которой ты применяешь стили.

[c0ns0l3]

Во вторых маленькое замечание-разяснение.

В твоем примере идет такой селектор:

.vidget p h4 a:hover

Как это будет работать: ищим все a с псевдоклассом hover "вложенные" h4 во вложенных p, которые в свою очередь вложены в .vidget
Теперь давай подумаем? А будет ли в твоем примере разница между
.vidget p h4 a:hover и .vidget h4 a:hover?

Небудет, т.к. он всеравно найдет в итоге одни и те же h4 и соответственно a тоже...

Разница между "h4 a" и "h4>a"?
"h4 a" - будут искать все А, которые будут находиться даже во вложенных DOM елементах, которые расположены внутри тэга H4 тоесть если у тебя будет в h4 (допустим) еще та же таблица, а где то там в какой-то ячейке находится наш зловредный тэг а - он будет найден.

"h4>a" - будут выбраны только те а , которые находятся непосредственно внутри h4, для которых этот h4 является родителем (верхний вариант не сработает)

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

В CSS есть понятие наследование и приоритетность...
Приоритетность по убыванию:
html>element - когда описан стиль в самом тэге.
css>teg
css>id
css>class

так же к каждому css>* описаному СВОЙСТВ можно дописывать !important; тогда, значемость данного свойства повышается до максимума, но опять же, играет вариант к какому селектору было прописано (если important стоит и в #id и в .class - важней будет #id)

Так же! Играет роль частенько где именно в css файле был описано свойство.

Если у тебя идет таким образом

.test {color:#fff}
.test {color:#000}

Будет у тебя в итоге черный цвет, т.к. последняя строка перекроет придыдущую...
Так .. что б еще...?

А вот чот... есть понятие наследование... какие-то елементы наследуют стили у своих родителей.. и есть встроенные (в каждом браузере по разному могут быть) свойства "стилей" елементов... к примеру тот же самый h1-6, li, ol, а и т.д. и очень часто это подводный камень для начинающих верстальщиков.. т.к. в одном браузере будет один паддинг - дивы будут влазить в отведенную ширину.. а в другом браузере будет другой паддинг.. и может уже не влезть и все поплыть, поэтому опытные люди - сразу пишут css-reset в начале "глобального" css файлика.. что б потом небыло геморою.

и на последок.. пользуйся хромом (просмотр кода элемента) или же фаербагом - в обоих случаях можно просмотреть все, что косается выбранного тобой елемента на странице.. какие свойства, какие css, откуда они взяты, что унаследовано и от кого... и т.д. - я уже не говорю о замечательном объекте "console" который помогает в дебаге как... даже слов немогу подобрать КАК он помогает.

[denis_mw Topic Starter]

Как выровнять картинку и надпись по одной горизонтальной линии?

[yury_mw]

У меня текст не изменяется, после изменения в css-коде. Я так думаю, что я не правильно прописываю селектор. Помогите, пожалуйста.

denis, у вас несколько ошибок:
1. Нельзя вкладывать тег h4 в тег p. Т.е. вот такая конструкция недопустима (браузер ее не поймет и будет хз как интерпретировать):

<p><h4>Забыли пароль?</h4></p>

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

<h4>Забыли пароль?</h4>

2. Чтобы указать имя шрифта в стилях следует писать не так:

font: Arial, Helvetica, sans-serif;

а так

font-family: Arial, Helvetica, sans-serif;

т.е. с учетом исправления первой ошибки правильно в стилях должно быть так:

.vidget h4{
font-family: Arial, Helvetica, sans-serif; margin:0 20px 0 0; color:#000;
}
.vidget h4 a{
color:#000; text-decoration:underline;
}
.vidget h4 a:hover{
color:#0097bd; text-decoration:none;
}

Как выровнять картинку и надпись по одной горизонтальной линии?

Смотря что вы подразумеваете под словами "выровнять по одной горизонтальной линии" и еще процедура выравнивания зависит от размеров картинки и надписи.
Короче, картинку и надпись в студию, + подробное описание или лучше скриншот нужного вам результата.

[denis_mw Topic Starter]

Да уже все, я разобрался во всем. Спасибо, кто помогал.

[WebMasterOleg]

А разве элемент "р" может содержать блочные элементы? Я что то подзабыл... вот читаю и вижу что тут ошибка .vidget p h4

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.