Навигация списками - картинка плюс заголовок

[extruder]

Никак не могу справиться с небольшой задачкой. Хотел сделать на CSS, не получилось. Бросил, перешел на табличную верстку. Но в ее рамках не удается отработать одну фишку, и решил снова вернуться к CSS.

Теперь подробнее.

Есть блок, отображающий список статей. Заголовки статей, оформленные в виде ссылок, и слева маленькие квадратные картинки-превьюшки, иллюстрирующие статью. Причем надо, что заголовки не обтекали картинки, а просто были правее. Так аккуратнее смотрится вся эта навигация.

В таблицах реализуется просто.

<tr>
 <td valign="top"><a href="#"><img src="pic.jpg" border="0"></a><td>
 <td width="100%" valign="top"><a href="#">Заголовок статьи</a></td>
</tr>

Но меня здесь не устраивает то, что ссылки картинки и заголовка отдельные друг от друга. Хочется, чтобы при наведении на картинку, заголовок статьи тоже отрабатывал hover. У меня для этих заголовков задано изменение цвета фона ссылок при hover.

То есть, вывод такой. Надо делать на CSS.

Напрашивается решение - делать на основе списка

[*]....

Вот тут как раз и вопрос вам, уважаемые коллеги.

Каким образом можно сделать список, в котором элементы списка представляют собой картинку 30x30 пикселов, плюс заголовок статьи, причем заголовок не обтекает картинку, а просто находится правее нее. Плюс все это оформлено в виде ссылки, и при событии hover меняется цвет фона под текстом, но не меняется под картинкой.

Или сделать это не списком, а как-либо еще?

Прошу помочь.

[Vlad]

Используй float с margin. float создаст обтекание картинки текстом и одновременно заставит изображение располагаться справа или слева от текста. А margin сдвинет текст влево или вправо, при этом получится как в таблице.

[Mordraug]

Решать надо именно на списках.. и проблем вообще нет никаких

1. делаете маркированный список (

• 
  

)

2. убираете у него маркеры.

3. каждый элемент

[*] включает в себя ссылку, которая делается блочной (display:block) нужных размеров (в вашем случае высота 30px, отступ слева 30-40px для размещения картинки )

4. назначаете картинку для блока ссылки фоном (с атрибутами left center no-repeat)

5. для наведенных ссылок меняете фон с помощью псевдокласса :hover

в итоге html конструкция должна получиться примерно такой:

<ul>
<li><a href="#" title="Title"> Заголовок статьи 1 </a></li>
<li><a href="#" title="Title"> Заголовок статьи 2 </a></li>
<li><a href="#" title="Title"> Заголовок статьи 3 </a></li>
<li><a href="#" title="Title"> Заголовок статьи 4 </a></li>
<li><a href="#" title="Title"> Заголовок статьи 5 </a></li>
</ul>

1. и картинка и текст будут являться ссылкой.

2. фон будет меняться толкьо под текстом (потомучто высота у вас ? это высота картинки, а картинка ? непрозрачный jepeg).

3.все просто и не надо никаких флоатов там.

Если не получится ? выложите пример картинки и заголовка, я на их примере покажу как.

[extruder]

Mordraug,

Попробовал сделать, как вы сказали.

Вот я выложил на хост результаты экспериментов.

http://www.untex.com/5/

Дополнительно задал еще margin-bottom для

[*], чтобы не слипались.

Получилось почти то, что нужно.

Единственный вопрос, можно ли сделать так, чтобы при наведении фоном выделялся не весь прямоугольник, а только текстовая часть ссылки? То есть, чтобы не было изменения фона под картинкой, вокруг картинки, и вообще на пустых частях ссылочного блока. А то, как-то не слишком красиво, особенно, например, 7 пункт.

Спасибо!

[mongoose]

поставь background-image элементу списка (li).а вообще. в данном случае лучше использовать нумерованный список. это позволит задать одним правилом серую подложку, а цифры будут назначаться на автомате.

[extruder]

поставь background-image элементу списка (li).а вообще. в данном случае лучше использовать нумерованный список. это позволит задать одним правилом серую подложку, а цифры будут назначаться на автомате.

Мысль интересная, поэкспериментировал. Ничего не получилось.

Вот результат.

http://www.untex.com/6/

Во-первых, непонятно, как сделать так, чтобы картинка оказалась ровно под цифрой.

Во-вторых, не убрать точку у цифры.

[extruder]

В общем, убрать точки из нумерованного списка я так и не смог.

Все-таки придется использовать 10 картинок.

Решил остановиться на таком варианте.

http://www.untex.com/7/

По-моему, очень классно получилось, как считаете, коллеги?

[Mordraug]

У меня "на вскидку" получился вот такой вариант (архив .rar ~12 Кб).

Это по поводу того, чтобы цыфры не меняли фон при наведении.

Ваш последний вариант мне нравится, но не забывайте, что при такой сокращенной записи:

padding: 6 6 6 44;

указывать размерность обязательно (px, pt, em ? что-то там должно стоять). И еще момент ? вы используете элементы списка, но контейнера самого списка я в разметке не обнаружил.. тег

должен быть внутри тега

1. или

• .

В остальном ? можно еще поиграться с паддингами.

[extruder]

Mordraug,

Большое спасибо, уважаемый коллега!

Подскажите, пожалуйста, еще вот что.

Ссылка та же.

http://www.untex.com/7/

Можно ли каким-либо образом сделать весь этот блок - серое поле, вокруг него белый отступ в 4px, и вокруг еще однопиксельная серая рамочка - чтобы весь этот блок был сделан в одном div'е. Сейчас это делается двумя.

.block_outside{
 width: 100%;
 border: #EAEAEA solid 1px;
 padding: 4px;
 margin-top: 20px;
}

.block_inside{
 width: 100%;
 background: #F0F0F0;
 padding: 10px 6px 12px 8px;
 font: normal 11px Tahoma, Arial, Helvetica, sans-serif;
}

 <div class="block_outside">
 <div class="block_inside">
 ...
 </div>
 </div>

Таких блоков на лэйауте страницы будет много, хотелось бы минимизировать код, сделать все в одном div'е.

Подскажите, пожалуйста.

Спасибо.

[Mordraug]

Ну так вы используйте сам список.. он же тоже блок, по сути.

Получится только внешний див-контейнер, и внутренний блок-список.. второй див там не нужен.

Тоесть что-то вроде такого:

 <div class="block_outside">
 <ul class="block_inside">
 ...
 </ul>
</div>

[extruder]

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

[Mordraug]

В чем проблема-то? вам всего лишь нужно контейнеру задать рамку однопиксельную, белый фон и паддинг в 4 пикселя, а тому что будет внутри содержаться, соответственно ? серный фон.. ведь все равно в какой-то тег это содержимое будет заключаться вот сним и оперируйте.

[extruder]

Так ведь внутри нет одного какого-то тега, который все в себя включает.

Там содержимое может быть таким:

<h2>...</h2>
<p>...</p>
<hr>
<img src="...">

<p>...</p>

То есть, просто контент, который может содержать любые теги.

Ну не присобачивать же всем тегам серый фон через таблицу стилей?

[Mordraug]

ну тогда самое простое решение ? второй див внутри с серым фоном...