Идентификатора в разных местах

@Golovastik · Регистрация: 25.05.2009

Студворк — интернет-сервис помощи студентам

Пробую просто по разному пробовать создавать.

Встретил ещё такой стиль:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#coolmenu a{
font: bold 13px Verdana; /*Шрифт текста*/
padding: 2px; /*Внутренний отсутп текста ссылки от краев ячейки*/
padding-left: 4px;/*Внутренний отсутп текста ссылки от левого края ячейки*/
display: block;
width: 100%; /*Ширина ячейки*/
color: #000000;  /*Цвет текста*/
text-decoration: none; /*Подчеркивание у ссылок - нет*/
border-bottom: 1px solid gray;
}
 
html>body #coolmenu a{ 
width: auto;
}
 
#coolmenu a:hover{
background-color: #cccccc; /*Фоновый цвет ячейки при наведение курсора*/
color: #ffffff;  /*Цвет текста при наведении курсора*/
}

Скажите вот в первом случае

CSS
1
#coolmenu a{ //Это объявление идентификатора для тега а

А вот здесь:

CSS
1
#coolmenu a:hover{

Снова свойства идентификатором колменю для тега а задаются, это что переопределение происходит или что?

@GalaX · 27.07.2010, 22:09

a и a:hover это разные вещи
возьмем твой случай:

CSS
1
2
3
4
5
6
#coolmenu a{
color: #000000;  /*Цвет текста*/
}
#coolmenu a:hover{
color: #ffffff;  /*Цвет текста при наведении курсора*/
}

изначально у тебя цвет текста будет черным
при наведении мыши он станет белым
как тока мышу уберешь, то он снова вернется в изначальное положение (в черный цвет)

@Golovastik · 27.07.2010, 22:24 **[ТС]**

Напишите как называется вот это:
#coolmenu a:hover{
Это
#coolmenu a{
и это
#coolmenu
И вот этот кусок какой-то странный:

Code
1
2
3
html>body #coolmenu a{ 
width: auto;
}

@GalaX · 27.07.2010, 22:41

#coolmenu a:hover{
в html вроде идентификатор, в css может как-нить по-другому
в html тэг, в css наверное тоже
вообще понятия не имею как это назвается.. типа атрибута наверное

Сообщение от Golovastik

И вот этот кусок какой-то странный:

помоему он не только странный, но еще и ненужный

@Golovastik · 27.07.2010, 22:56 **[ТС]**

border-bottom-width: 0;
Скажите, зачем такое прописуют?

@MaD1z · 28.07.2010, 01:25

Сообщение от Golovastik

border-bottom-width: 0;
Скажите, зачем такое прописуют?

тут расписано подробней, для чего это ссылка

Добавлено через 17 минут

#coolmenu

это называется блок с id="coolmenu", т.е. в css будут прописываться стили только для данного блока, в html этот блок будет выглядеть примерно так:

HTML5
1
2
3
<div id="coolmenu">
...
</div>

Сообщение от Golovastik

#coolmenu a:hover

этим мы задаем стиль для нашего блока coolmenu, а именно для его ссылок, а точнее для стиля ссылок при их наведении.

Про ссылки в css советую посмотреть тут

#coolmenu a

а это просто стиль для ссылок в блоке coolmenu

html>body #coolmenu a{
width: auto;
}

это называется "Наследственность", в данном случае "родителем" является внешний тег <html> для дочернего <body>. Что это все значит? Рассказываю, это означает, что стиль, который был прописан для всего <html> передается полностью и для <body>, но и еще добавляется (только к <body> !!!) ширина auto.
Другими словами, это нужно, чтобы не загромождать повторной писаниной стилей ваш css-файл, а просто копировать стиль с одного элемента вашей страницы на другой с добавлением или изменением некоторых параметром во втором.

надеюсь, что вы поймете, если что — спрашивайте еще

Добавлено через 9 минут
Вот, специально поискал в инете для вас инфу о "наследственности", прочтите пожалуйста, да и вообще посмотрите на этом сайте статьи, очень подробно расписано все
Сайт

@Golovastik · 28.07.2010, 02:11 **[ТС]**

Попробовал сам с нуля создать меню. Вылаживать много кода будет. Вот как сделал. (см. file.rar)
Проблема такая, у меня уже есть созданное меню,но нижняя граница каждой строки таблицы меню толстая, это произошло из-за стыковки верхней и нижней границы каждой ячейки,после каждой строки ячейки, не могу убрать, подскажите пож. как.

2)Проблема с расположением меню синего в браузере Ие, в др. нормально толкьо в Ие меню синее идёт как-т овправо и немного длинее чем меню с подпунктами ниже. подскажите как одолеть это?
Заранее благодарю.

@MaD1z · 28.07.2010, 02:56

Сообщение от Golovastik

Попробовал сам с нуля создать меню. Вылаживать много кода будет. Вот как сделал. (см. file.rar)
Проблема такая, у меня уже есть созданное меню,но нижняя граница каждой строки таблицы меню толстая, это произошло из-за стыковки верхней и нижней границы каждой ячейки,после каждой строки ячейки, не могу убрать, подскажите пож. как.

в css для этой таблицы пропишите

CSS
1
border-collapse: collapse;

тогда толщина ечеек будет такой, какая вам нужна даже на стыках.
только это свойство относится к ячейкам внутри таблицы, а не к отдельным таблицам, прилегающим друг к другу.
про это можно почитать тут

Сообщение от Golovastik

Проблема с расположением меню синего в браузере Ие, в др. нормально толкьо в Ие меню синее идёт как-т овправо и немного длинее чем меню с подпунктами ниже. подскажите как одолеть это?
Заранее благодарю.

Изменил:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Ãëàâíàÿ</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Øàïêà ñàéòà-->
<table  align="center">
<tr>
<td><img src="img/header.jpg"></td>
</tr>
 
<!--2 ñòðîêà òàáëèöû-->
<tr>
<td>
<!----------------------------Âíóòðåííÿÿ òàáëèöà â ÿ÷åéêå---------------------->
<tr>
<td>
 <table border="1" width="972px">                  <tr>
 <!--Ìåíþ-->
 <td width="210px">
 
 <div id="menu">
 <p class="navigator" align="center">Ãëàâíîå  &nbsp; ìåíþ</p>
 <a href="#1">Ãëàâíàÿ</a>
  <a href="#2">Ôîòî</a>
   <a href="#3">Âèäåî</a>
    <a href="#4">Êîíòàêòû</a>
 </div>
 <br>
 
  </td>
 <td>&nbsp; </td>
 
                                                   </tr>
 </table>
 </td>
 </tr>
 <!---------------------------------------------------------------------->
</td>
</tr>
 
<!-------------ÊÎÏÈÐÀÉÒ----------------------->
<tr>
<td><img src="img/footer.jpg"></td>
</tr>
</table>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.navigator{margin-top:20px; padding-left:8px;
font-weight:bold;  font-size:16pt; background:#3366CC; color:white;
width:100%;
}
 
* html #menu{ 
width: 210px;/*Øèðèíà ìåíþ äëÿ Internet Explorer*/
}
 
#menu{
    width:210px;
margin:15px;
padding:5px;
/*background:#FFFFCC;*/
border-bottom-width: 0;
 
}
 
#menu a{
padding-top:4px; 
padding-bottom:4px;
padding-left:8px;
width:100%;
display:block;
font:bold 12pt Verdana;
text-decoration:none;
background:white; 
color:black;
border:1px solid black;
}
 
#menu a:hover{
 
background:#FFFFCC; color:#663333;
}

Добавлено через 8 минут
По поводу вашего меню, могу предложить вот что, чтобы не было жирных стыков:
создаете 2 класса, один будет для верхнего пункта меню, в нем все бордюры оставляете без изменений, т.е. как у вас сейчас есть

CSS
1
border:1px solid black;

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

CSS
1
border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black;

@Golovastik · 28.07.2010, 02:58 **[ТС]**

Прописал border-collapse:collapse внутри идентификатора #menu a{
Ничего не изменилось.
2)Как убрать выступ синего,которое выступает вправо в ИЕ?

@MaD1z · 28.07.2010, 03:00

Сообщение от Golovastik

Прописал border-collapse:collapse внутри идентификатора #menu a{
Ничего не изменилось.

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

Сообщение от Golovastik

Как убрать выступ синего,которое выступает вправо в ИЕ?

написал выше.

@Golovastik · 28.07.2010, 03:08 **[ТС]**

Значит мне каждую строку меню в тег тд списывать,то есть переделывать,чтоб стыков не было?

@MaD1z · 28.07.2010, 03:13

я же написал, что можно сделать таблицей, а можно к пунктам меню присвоить 2 разных класса, прочитайте еще раз, мои предыдущие посты.

@Golovastik · 28.07.2010, 03:22 **[ТС]**

Чтоб не в таблице делать, не создавать её, попробовал создать класс .stirka{border-bottom-width:0px;}

А затем например в строке:

HTML5
1
  <a class="stirka" href="#3">Видео</a>

Не работает

@MaD1z · 28.07.2010, 10:04

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Главная</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Шапка сайта-->
<table  align="center">
<tr>
<td><img src="img/header.jpg"></td>
</tr>
 
<!--2 строка таблицы-->
<tr>
<td>
<!----------------------------Внутренняя таблица в ячейке---------------------->
<tr>
<td>
 <table border="1" width="972px">                  <tr>
 <!--Меню-->
 <td width="210px">
 
 <div id="menu">
 <p class="navigator" align="center">Главное  &nbsp; меню</p>
 <a class="astyle1" href="#1">Главная</a>
  <a class="astyle2" href="#2">Фото</a>
   <a class="astyle2" href="#3">Видео</a>
    <a class="astyle2" href="#4">Контакты</a>
 </div>
 <br>
 
  </td>
 <td>&nbsp; </td>
 
                                                   </tr>
 </table>
 </td>
 </tr>
 <!---------------------------------------------------------------------->
</td>
</tr>
 
<!-------------КОПИРАЙТ----------------------->
<tr>
<td><img src="img/footer.jpg"></td>
</tr>
</table>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.navigator{margin-top:20px; padding-left:8px;
font-weight:bold;  font-size:16pt; background:#3366CC; color:white;
width:100%;
}
 
* html #menu{ 
width: 210px;/*?????? ???? ??? Internet Explorer*/
}
 
#menu{
        width:210px;
margin:15px;
padding:5px;
/*background:#FFFFCC;*/
border-bottom-width: 0;
 
}
 
#menu a{
padding-top:4px; 
padding-bottom:4px;
padding-left:8px;
width:100%;
display:block;
font:bold 12pt Verdana;
text-decoration:none;
background:white; 
color:black;
}
 
#menu a:hover{
 
background:#FFFFCC; color:#663333;
}
 
/* стиль для верхнего пункта меню */
.astyle1{
    border:1px solid black;
}
 
/* стиль для последующих пунктов меню */
.astyle2{
    border-bottom:1px solid black;
    border-left:1px solid black;
    border-right:1px solid black;
}

Работает.

@Golovastik · 28.07.2010, 20:00 **[ТС]**

Встретил такое объявление

Code
1
ul#menu li

Что это объявление означает?

@MaD1z · 28.07.2010, 21:22

Сообщение от Golovastik

Встретил такое объявление

Code
1
ul#menu li

Что это объявление означает?

это значит, что стиль описывается для пунктов (li) списка (ul) с id="menu"

Список мог выглядеть так:

HTML5
1
2
3
<ul id="menu">
<li>Пункт</li>
</ul>

@Golovastik · 29.07.2010, 01:37 **[ТС]**

Извиняюсь, по поводу меню, когда я использовал margin-top:-2px; вроде как на картинке,первая менюшка которая отображается во всех браузерах кроме браузера ИЕ,
если у величить минуса, тогда в Ие одном будет тонкая граница, а в других юраузерах толстая, что-то кручусь так и не вышло.
Вот вылаживаю,запустите в Ие, а потом в др. браузерах.

@Golovastik · 29.07.2010, 02:09 **[ТС]**

Я слышал что можно как-то условными комментариями хтмл это сделать, но как не знаю.

@MaD1z · 29.07.2010, 11:23

Немного про условные комментарии.

Я не очень понимаю, что вы хотите сделать.

Vovan-VE · 29.07.2010, 15:00

Сообщение от MaD1z

CSS
1
ul#menu li

это значит, что стиль описывается для пунктов (li) списка (ul) с id="menu"

На самом деле это означает "все li, которые находятся внутри ul с id="menu" не зависимо от глубины сложенности".

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 01.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 31.01.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Golovastik 11 / 11 / 2 Регистрация: 25.05.2009 Сообщений: 435
	27.07.2010, 22:56 [ТС]
	border-bottom-width: 0; Скажите, зачем такое прописуют? 0

@Golovastik 11 / 11 / 2 Регистрация: 25.05.2009 Сообщений: 435
	28.07.2010, 02:58 [ТС]
	Прописал border-collapse:collapse внутри идентификатора #menu a{ Ничего не изменилось. 2)Как убрать выступ синего,которое выступает вправо в ИЕ? 0

@Golovastik 11 / 11 / 2 Регистрация: 25.05.2009 Сообщений: 435
	28.07.2010, 03:08 [ТС]
	Значит мне каждую строку меню в тег тд списывать,то есть переделывать,чтоб стыков не было? 0

@MaD1z 8 / 8 / 0 Регистрация: 23.10.2009 Сообщений: 53
	28.07.2010, 03:13
	я же написал, что можно сделать таблицей, а можно к пунктам меню присвоить 2 разных класса, прочитайте еще раз, мои предыдущие посты. 0

@Golovastik 11 / 11 / 2 Регистрация: 25.05.2009 Сообщений: 435
	29.07.2010, 02:09 [ТС]
	Я слышал что можно как-то условными комментариями хтмл это сделать, но как не знаю. 0

@MaD1z 8 / 8 / 0 Регистрация: 23.10.2009 Сообщений: 53
	29.07.2010, 11:23
	Немного про условные комментарии. Я не очень понимаю, что вы хотите сделать. 0