Хоть убейте не получается :(

[AssaCSSin]

Здравствуйте, господа сиэсэс-гуру. Верстаю сайт и столкнулся вот с какой проблемой.

Есть список. Каждый <li> должен выглядеть следующим образом:

<li><a><img src="" width="40" height="40" style="float: left;" /></a><a>Текст ссылки, который должен выравниваться вертикально по середине, при том что текст может быть и в две и в три строки</a></li>

Если текст в одну строку, то все тривиально выравнивается vertical-align: middle. А вот если не в одну строку... Хоть убейте, не знаю как реализовать без таблиц, да и чтобы во всех браузерах смотрелось одинаково. Просто руки опускаются. Для тех кто не понял чего надо добиться привожу ссылку на сайт http://www.arcade-gamespalette.com. Листаем в самый низ страницы и видим темный блок с играми. Сразу поймете в чем дело.

Edited November 14, 2008 by AssaCSSin

[e1f]

<li><a class="img_a"><img src="" width="40" height="40" style="float: left;" /></a><a>Текст ссылки, который должен выравниваться вертикально по середине, при том что текст может быть и в две и в три строки</a></li>

CSS:

.img_a { display:block; float:left; }

[AssaCSSin]

Я немного обманул... Сейчас у img нет style="float: left;"

.img_a { display:block; float:left; }

Каша получается...

[homm]

#blackblock .content div ul li {clear: left;}

#blackblock .content div ul li img { float: left;}

[AssaCSSin]

#blackblock .content div ul li {clear: left;}

#blackblock .content div ul li img { float: left;}

Красиво работает, если текст состоит из двух строк. Если из одной или из трех, то выравнивание некорректное Пример на сайте. Видимо без таблиц никак не обойтись...

[AssaCSSin]

Скажу так, с вертикальным выравниванием простого текста в любое кол-во строк все понятно, много раз обсуждалось.

В контейнере пишем

display: table-cell; 
vertical-align: middle;

И чтобы понимал IE, через условные комментарии пишем:

<!--[if IE ]> 
<style type="text/css">
.outer {position:relative;} 
.container {top:50%;position: absolute;} 
.inner {top:-50%;position:relative;} 
</style> 
<![endif]-->

Но как быть, если к тексту добавляется картинка, которая плывет влево? Или не плыет влево, но она должна быть слева от текста. Вот в чем вопрос.

[psywalker]

AssaCSSin Слушай,а как ты сделал такие колонки прикольные с закруглёнными углами и тенями? Если можно поподробнее пожалуйста или дай какую нибудь ссылочку, где можно про это почитать

[spdif]

AssaCSSin, вопрос к вам про стили,

в вашем файле http://www.arcade-gamespalette.com/agp-style.css

для ниже представленных id class ипользуеться некое свойство zoom

122 #mainblock .center {zoom: 1;}

129 #mainblock .center .bg {zoom: 1;}

650 #greyblock .content {zoom: 1;}

908 #blackblock .content {zoom: 1;}

для чего это свойство?

Я на пример чот не встречал такого, а например validator вообще сообщает что этого свойства не существует.

Поделитесь пожалуйста информацией для каких целей вы это используете?

[AssaCSSin]

AssaCSSin Слушай,а как ты сделал такие колонки прикольные с закруглёнными углами и тенями? Если можно поподробнее пожалуйста или дай какую нибудь ссылочку, где можно про это почитать

Обычные блоки с закругленными углами. Почитать можно тут, тут и тут.

Если ты про то, как это нарисовано, то рисовал не я

в вашем файле http://www.arcade-gamespalette.com/agp-style.css

для ниже представленных id class ипользуеться некое свойство zoom

122 #mainblock .center {zoom: 1;}

129 #mainblock .center .bg {zoom: 1;}

650 #greyblock .content {zoom: 1;}

908 #blackblock .content {zoom: 1;}

для чего это свойство?

Я на пример чот не встречал такого, а например validator вообще сообщает что этого свойства не существует.

Поделитесь пожалуйста информацией для каких целей вы это используете?

Была у меня проблема - не показывался (не рендерился) бэкграунд (левые и правые границы) для вышеуказанных блоков в IE. Я немного погуглил и нашел вот такое решение. Что такое zoom и что он фиксит в IE

Кстати, мой вопрос остается открытым

[Searcher]

Завернуть текст и картинку еще в один див, картинку float:left. Или вместо дива табличку с 2-мя ячейками воткнуть.

[e1f]

Посмотрел на сайте в фаербаге...

убери рисунку float:left, поставь ссылке в которой рисунок display: block и float:left, и выглядит вроде бы так как тебе надо

[AssaCSSin]

Посмотрел на сайте в фаербаге...

Что есть фаербаг?

убери рисунку float:left, поставь ссылке в которой рисунок display: block и float:left, и выглядит вроде бы так как тебе надо smile.gif

Не работает однако. Опять же, хорошо когда текст в две строки, когда в одну или в три - плохо. Смотрите на сайте

Или вместо дива табличку с 2-мя ячейками воткнуть.

Похоже, это самый надежный способ

Вот задачка, блин

[klierik]

Что есть фаербаг?

https://addons.mozilla.org/ru/firefox/addon/1843

по теме.

а в чем суть вопроса? а то влом перечитывать весь сабж

[e1f]

Что есть фаербаг?

FireBug -- плугин для ФФ для просмотра нутра страницы.

А что именно не так?

[AssaCSSin]

а в чем суть вопроса? а то влом перечитывать весь сабж wink.gif

Суть вопроса - как, средствами css и html, без помощи таблиц, воплотить следующую конструкцию:

В некоем контейнере (див, ли, не суть важно) вертикально по центру выровнять ссылку-картинку и справа от нее текст-ссылку, который может быть в одну-две-три строки. Чтобы понять проблему смотрите сайт http://www.arcade-gamespalette.com, где внизу страницы расположен темный блок с играми.

FireBug -- плугин для ФФ для просмотра нутра страницы.

https://addons.mozilla.org/ru/firefox/addon/1843

Большое спасибо, поставил

А что именно не так?

Если две строки текста, то все так. Если одна строка - выравнивает не по центру а выше центра

[e1f]

У тебя стиль:

#blackblock .content div ul li img {
border:1px solid #E4971E;
float:left;
margin-right:5px;
}

Убери рисунку float: left;

Edited November 17, 2008 by e1f

[klierik]

для выравнивания текста ознакомтесь, пожалуйста, с решениями представлеными тут:

http://cssing.org.ua/2005/07/14/vertical-align-middle/

[AssaCSSin]

Убери рисунку float: left;

Господин e1f, пробовал я уже по-всякому, и убирал, и снова добавлял. Вот сейчас на сайте висит ваша версия без float:left у img и display: block; float: left у <a>. Результат можете посмотреть сами.

для выравнивания текста ознакомтесь, пожалуйста, с решениями представлеными тут:

http://cssing.org.ua/2005/07/14/vertical-align-middle/

Ознакомился, но мне не просто текст, а картинку и справа от нее текст нужно равнять по центру.

[hmelii]

Привет

Заценика мой способ решения Мне кажется все остальные перед ним отдыхают

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
*{ margin:0; font-size:10px; padding:0;}
ul li{ width:30%; padding-right:3%; float:left; list-style:none;}
ul li span.img{ width:40px; height:40px; background:red; vertical-align:middle; margin-right:-40px; display:inline-block;}
ul li span.txt{ display:inline-block; vertical-align:middle;padding-left:50px; }
</style>
</head>

<body>
<ul>
	<li><span class="img"></span><span class="txt">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </span></li>

	<li><span class="img"></span><span class="txt">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </span></li>

	<li><span class="img"></span><span class="txt">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </span></li>

</ul>
</body>
</html>

Вместо тега "span" с классом "img" можно вставить картинку

Мой сайт

Edited November 18, 2008 by hmelii

[klierik]

2hmelii,

да, не плохое решение, но inline-block не работает в FF2

надо использовать display: -moz-inline-block;

но это не валидно

[hmelii]

2hmelii,

да, не плохое решение, но inline-block не работает в FF2

надо использовать display: -moz-inline-block;

но это не валидно

Скачай ff3

[e1f]

2hmelii: действительно, классный метод, возьмем на заметку

надо использовать display: -moz-inline-block;

но это не валидно

Да класть на подобное "нарушение" валидности.

[hmelii]

Ну так Я еще и не такое умею

[klierik]

Скачай ff3

Давайте Вы не будете мне указывать что качать (когда у меня стоят все массово используемые браузеры)!

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

Я бы не рекомендовал автору топа использовать этот метод если нужен валидный CSS (:

[hmelii]

А теперь послушай меня

Во первых я больше чем уверен что из этих 17 процентов 15 такие же тестеры как и ВЫ уверенные в том что 17 процентов пользователей пользуются ff2

Во вторых -moz-inline-block это такой же грязый хак как и условные комментарии в ie которые ВЫ используете Просто ie из за некоторой привилегии что ли узаконили валидность этого хака

В третьих эмуляция таблиц через display:table и тд это тажа табличная верстка

В четвертых если пользователь ff2 увидет сайт чуть в ином свете суть от этого не поменяется