Разметка блока

[ShootingStar]

Здравствуйте, верстаю учебный урок №2.

Думаю вот так разметить блок:

Подскажите как правильней.

Чистый скриншот если кто-то захочет нарисовать свою разметку:

[ShootingStar]

Сделал вот так

Вопрос по поводу меню, можно ли с помощью цсс убирать свойства класса active когда навели на элемент?

            <div class="topnav">
                <ul>
                    <li><a href="#" class="active">home</a></li>
                    <li><a href="#">portfolio</a></li>
                    <li><a href="#">webhosting</a></li>
                    <li><a href="#">about</a></li>
                </ul>
            </div>

.topnav {
    margin: 0 164px 0 0;
    float: right;

}

.topnav ul {
    margin: 0 auto;
    overflow: hidden;
    padding: 0;

}

.topnav ul li {
    float: left;
}

.topnav ul li a {
    display: block;
    float: left;
    width: 100px;
    color: #ffffff;
    padding: 51px 0 9px 0;
    text-align: center;
    font: bold 16px Rockwell;
    text-decoration: none;

}

.topnav ul li a:hover,.topnav ul li .active {
    background: url("../image/menu_bg.png") repeat-x;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    -o-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

[Searcher]

можно

[Catherine]

.topnav ul li .active:hover {
   /*новые свойства*/
}

Edited March 2, 2012 by Catherine

[Searcher]

.topnav ul li .active:hover {
   /*новые свойства*/
}

Да, так логичней

[ShootingStar]

.topnav ul li .active:hover {
   /*новые свойства*/
}

Извиняюсь за не точную формулировку, хотелось что бы свойства убирались когда наводились на другие li. Тойсть когда наводят на другой ли, убирается фон у .active.

Возникла проблема с выборкой селекторов. Есть картинки, к одной нужно сделать border. Цеплять класс думаю это не очень правильно. Пытался выбрать такими способами:

.left-panel img img{} - что бы сбросить бордер и задать свойства второй картинке

.left-panel img:first-child{} - что бы задать только первой

Код:

                <div class="left-panel">
                    <a href="#"><img src="image/cont-img1.jpg" alt="" width="201" height="103"></a>
                    <hr />
                    <a href="#"><img src="image/back.png" alt="" width="20" height="22"></a>
                    <a href="#">Back</a>
                </div>

.left-panel img{
    margin: 0 0 19px 23px;
    border: 3px solid #000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

}

[Catherine]

.topnav ul li .active:hover {
   /*новые свойства*/
}

Извиняюсь за не точную формулировку, хотелось что бы свойства убирались когда наводились на другие li. Тойсть когда наводят на другой ли, убирается фон у .active.

Возникла проблема с выборкой селекторов. Есть картинки, к одной нужно сделать border. Цеплять класс думаю это не очень правильно. Пытался выбрать такими способами:

.left-panel img img{} - что бы сбросить бордер и задать свойства второй картинке

.left-panel img:first-child{} - что бы задать только первой

Код:

                <div class="left-panel">
                    <a href="#"><img src="image/cont-img1.jpg" alt="" width="201" height="103"></a>
                    <hr />
                    <a href="#"><img src="image/back.png" alt="" width="20" height="22"></a>
                    <a href="#">Back</a>
                </div>

.left-panel img{
    margin: 0 0 19px 23px;
    border: 3px solid #000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

}

.left-panel img img{}

не сбросит свойства второй картинки, он будет искать все img внутри img, а вот

.left-panel img + img{}

задаст свойства всем картинкам, кроме первой. Почитайте про контекстные селекторы и соседние селекторы.

Если картинок всего две, можно попробовать задать бордер второй картинке и как-нибудь так:

.left-panel img{
    margin: 0 0 19px 23px;
    border: 3px solid #000;
    border-radius: 3px;
}

.left-panel a:first-child img {
    border: none;
}

Но если картинок будет больше, то все-таки лучше задать нужной картинке класс.

Edited March 3, 2012 by Catherine

[ShootingStar]

.left-panel img + img{} - не работает, потому что картинки раздлеляет <hr />

.left-panel a:first-child img - вот это подошло, спасибо.

[Catherine]

.left-panel img + img{} - не работает, потому что картинки раздлеляет <hr />

.left-panel a:first-child img - вот это подошло, спасибо.

Если картинки разделяет </hr>, можно использовать селектор обобщенных родственных элементов:

.left-panel img ~ img{}

Пожалуйста

Edited March 3, 2012 by Catherine

[ShootingStar]

.left-panel img + img{} - не работает, потому что картинки раздлеляет <hr />

.left-panel a:first-child img - вот это подошло, спасибо.

Если картинки разделяет </hr>, можно использовать селектор обобщенных родственных элементов:

.left-panel img ~ img{}

Пожалуйста

.left-panel img ~ img{} - тоже не сработало.

[Catherine]

.left-panel img ~ img{} - тоже не сработало.

Сработает, но только когда картинки являются обобщенными родственными элементами:

<div>
   <img src="image/cont-img1.jpg" alt="" width="201" height="103">
   <hr />
   <img src="image/back.png" alt="" width="20" height="22">
   <a href="#">Back</a>
</div>

Если картинки не обобщенные родственные элементы, а используется нижеприведенный код

<div class="left-panel">
   <a href="#"><img src="image/cont-img1.jpg" alt="" width="201" height="103"></a>
   <hr />
   <a href="#"><img src="image/back.png" alt="" width="20" height="22"></a>
   <a href="#">Back</a>
</div>

то в этом случае обобщенными родственными элементами будут теги a, и тогда надо использовать .left-panel a ~ a img{} ссылка

Edited March 3, 2012 by Catherine

[ShootingStar]

.left-panel img ~ img{} - тоже не сработало.

Сработает, но только когда картинки являются обобщенными родственными элементами:

<div>   <img src="image/cont-img1.jpg" alt="" width="201" height="103">   <hr />   <img src="image/back.png" alt="" width="20" height="22">   <a href="#">Back</a></div>

Если картинки не обобщенные родственные элементы, а используется нижеприведенный код

<div class="left-panel">   <a href="#"><img src="image/cont-img1.jpg" alt="" width="201" height="103"></a>   <hr />   <a href="#"><img src="image/back.png" alt="" width="20" height="22"></a>   <a href="#">Back</a></div>

то в этом случае обобщенными родственными элементами будут теги a, и тогда надо использовать .left-panel a ~ a img{} ссылка

.left-panel a ~ a img{} - круть

Сама страница

Написал такие стили для hr:

                <div class=left-panel>
                    <a href="#"><img class=preview-left src="image/cont-img1.jpg" alt="" width=201 height=103></a>
                    <hr/>
                    <a href="#"><img class=back-img src="image/back.png" alt="" width=20 height=22></a>
                    <a href="#">Back</a>
                </div>

.left-panel hr {
    margin: 0 0 13px 17px;
    border: 0;
    background: url("../image/line.png") repeat-x;
}

В файрфоксе виден hr, а в опере и хроме нет. Может есть способ оптимизировать под все браузеры? Поставил height:1px; и стало видно.

Catherine если я вам еще не надоел, можете подсказать как снять стили с .active в меню? Когда наводят на другие элементы в меню.

            <div class=topnav>
                <ul>
                    <li><a href="#" class=active>home</a></li>
                    <li><a href="#">portfolio</a></li>
                    <li><a href="#">webhosting</a></li>
                    <li><a href="#">about</a></li>
                </ul>
            </div>

.topnav ul li a:hover, .topnav ul li .active {
    background: url("../image/menu_bg.png") repeat-x;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    -o-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

Edited March 3, 2012 by ShootingStar

[Catherine]

Прописать в стилях высоту <hr>

как снять стили с .active в меню? Когда наводят на другие элементы в меню.

такой вариант подойдет?

[ShootingStar]

Прописать в стилях высоту <hr>

как снять стили с .active в меню? Когда наводят на другие элементы в меню.

такой вариант подойдет?

Да, спасибо.