div

[Romeo62]

Здравствуйте,я не очень разбираюсь в коде (как вы уже поняли).Вот такой вопрос <div> class=menu></div> Это я создал блок (как я понимаю).В css прописываем его св-ва #menu {

width: 650px;

margin: -20px auto 0;

height: 20px;

background: #BFF08E;

position: relative;

Это я так понимаю в блоке div мы расположили ссылки.

<div class="sidebar" id="sideLeft">

<ul>

<li><a href="music/index.php">Музыка</a>

<li><a href="film/index.php">Фильмы</a>

<li><a href="clips/index.php">Клипы</a>

<li><a href="forum/index.php">Форум</a>

</ul>

</div>

Если я создам отдельный блок типа <div class="im"> я создам новый блок.А если я в блок sidebar добавлю

картинку,то все меню(ссылки подвинуться.

<div class="sidebar" id="sideLeft">

<div class="menu"><img src="images/menu.png"/></div>

<ul>

<li><a href="music/index.php">Музыка</a>

<li><a href="film/index.php">Фильмы</a>

<li><a href="clips/index.php">Клипы</a>

<li><a href="forum/index.php">Форум</a>

</ul>

Мне нужно чтобы ссылки встали поверх картинки(одна картинка на одну ссылку).Правильно ли я делаю?Я теорию читал но непонял чем отличается class от id если не сложно объясните

Edited April 10, 2012 by Romeo62

[Switch74]

class это стиль для группы элементов

id на странице должен быть уникальным, следовательно это стиль для одного элемента

если у нас прописаны у элемента стили class и id, то они оба будут действовать

.class{border:1px solid #bbb;}
#id{background:#ddd;}

у элемента будет и фон и рамка

если class и id будут конфликтовать

.class{background:#bbb;}
#id{background:#ddd;}

то выиграет у нас id и фон у элемента будет #ddd

если вы хотите для каждой ссылки указывать фон, то это можно сделать так

<ul>
<li><a href="music/index.php" style="background:url('img1');">Музыка</a>
<li><a href="film/index.php" style="background:url('img2');">Фильмы</a>
<li><a href="clips/index.php" style="background:url('img3');">Клипы</a>
<li><a href="forum/index.php" style="background:url('img4');">Форум</a>
</ul>

так же этот стиль можно применять не к ссылкам, а к их контейнерам li, эффект будет немного другим

если фон для всех ссылок одинаковый, то проще создать для них один class

[Romeo62]

понятно это будет выглядеть примерно так

<div class="sidebar" id="sideLeft">
        <ul>
        <li><a href="music/index.php">Музыка</a>
        <li><a href="film/index.php">Фильмы</a>
        <li><a href="clips/index.php">Клипы</a>
        <li><a href="forum/index.php">Форум</a>

        </ul>

		</div

В css

.sidebar{
		background-image:url(../images/menu.png);
		}

но как подогнать картинку к конкретной ссылке?

[Switch74]

можно для sidebar указать padding или для ul margin

[Romeo62]

Спасибо огромное!!!