Перейти к содержимому



Подскажите как избавиться от align='center'

#11 hnerd

hnerd
  • Пользователь
  • 284 сообщений
  • Репутация: 18
0

Отправлено 19 Апрель 2015 - 15:48

display: inline-block;

 

Ах. опередили меня!

Только что хотела написать про display: inline-block или display:inline-block прописываете Вашему меню и оно становится блочным элементом.

 

Для автора вопроса, если используете display:inline-block, то не забудьте указать ширину width. А еще, если не указали, то укажите overflow: hidden для ul или div меню, если используете float: left для элементов меню.


  • 0

#12 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 714 сообщений
  • Репутация: 407

Отправлено 19 Апрель 2015 - 16:14

overflow: hidden для ul или div меню

Спасибо, проверю, в принципе с помощью @yury всё заработало как было задумано!

Начал работу над кроссбраузерностью и @media, чтоб потом просто вписать в дизайн контент и завершить ре-дизайн...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#13 hnerd

hnerd
  • Пользователь
  • 284 сообщений
  • Репутация: 18

Отправлено 20 Апрель 2015 - 12:33

Начал работу над кроссбраузерностью и @media, чтоб потом просто вписать в дизайн контент и завершить ре-дизайн...

 

Желаю. чтобы у Вас все получилось!


  • 0

#14 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 714 сообщений
  • Репутация: 407

Отправлено 20 Апрель 2015 - 19:29

Подскажите, плз, а можно таким же образом, как и с меню, поступать с div у которых высота разная (непредсказуемо).

Наглядно:div.png

Раньше я пробовал это реализовать через float:left, но не получилось - блоки по верхнему краю (построчно) не выравнивались... Всё пытались найти свободное место для "обтекания" предыдущего блока и "выстраивались" не пойми как... Реализовать получилось только при условии трех блоков в ряд и <hr> шириной 100% между строками блоков.

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

Например так:div+.png

Реально это средствами css?, или даже не стоит голову ломать?

Или это реализуемо посредством display:table-row или какими-нибудь другими display:table-???


Сообщение отредактировал ShowPrint: 20 Апрель 2015 - 19:43

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#15 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 21 Апрель 2015 - 02:14

@ShowPrint,
display: inline-block; решит вашу проблему. http://jsfiddle.net/ec5w2day/17/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
.catalog li {
	display: inline-block;
	//display: inline;
	zoom: 1;
	margin: 0 10px 15px 0;
	padding: 5px;
	width: 150px;
	vertical-align: top;
	text-align: left;
	background: #ccc;
}
</style>
</head>
<body>
<h2>Каталог, в котором заранее не известно количество текста</h2>
<ul class="catalog">
	<li>
		<h3>Заголовок</h3>
		<p>Текст номер 1</p>
	</li>
	<li>
		<h3>Заголовок</h3>
		<p>Текст номер непонятно сколько, много слов, много смысла.</p>
	</li>
	<li>
		<h3>Заголовок</h3>
		<p>Текст номер 1</p>
	</li>
	<li>
		<h3>Заголовок</h3>
		<p>Граждане! Храните деньги в сберегательной кассе. Если, конечно, они у вас есть.</p>
	</li>
	<li>
		<h3>Заголовок</h3>
		<p>Текст номер фих его знает какой. Смысла и слов еще больше. Много донов Педро. Мало ли в Бразилии Педров?! И не сосчитаешь! Еще чего-то тоже много. Три магнитофона, три кинокамеры заграничных. три портстигара отечественных. куртка замшевая... три</p>
	</li>
	<li>
		<h3>Заголовок</h3>
		<p>Текст номер 3</p>
	</li>
	<li>
		<h3>Заголовок</h3>
		<p>Текст номер 4</p>
	</li>
	<li>
		<h3>Заголовок</h3>
		<p>Текст номер 5</p>
	</li>
</ul>
<p>Если б мишки были пчёлами, То они бы нипочём, Никогда и не подумали, Так высо́ко строить дом. Мишка очень любит мёд. Почему – кто поймёт? В самом деле, почему Мёд так нравится ему?</p>
</body>
</html>

  • 0

#16 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 714 сообщений
  • Репутация: 407

Отправлено 21 Апрель 2015 - 02:22

display: inline-block;
 Это свойство просто находка, а Вы, @yury, Настоящий Волшебник!
Правильно я понимаю, что:

//display: inline;
zoom: 1;

служит для совместимости с IE6-7 (Валидатор ругается...)

Где-то читал что в качестве заглушки (//) еще может применяться звездочка (*), или я опять всё перепутал?

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#17 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 21 Апрель 2015 - 07:50

Правильно я понимаю, что: //display: inline; zoom: 1; служит для совместимости с IE6-7 (Валидатор ругается...)

Да. Потому и ругается, что это хак, а не обычные CSS-правила.

В данном случае нужна именно //, потому что старые ИЕшки ее не воспринимают, как комментарий. А современные эту строку пропускают, как комментарий.

Чтобы валидатор не ругался, следует подключать эти правила через условные комментарии, примерно, так:

<!--[if lte IE 7]><link href="ie6-7.css" rel="stylesheet" type="text/css" /><![endif]-->

Что в переводе тарабарского на человеческий означает: "Если у клиента браузер IE, причем, 7й или более древней версии, то нужно взять CSS правила из файла "ie6-7.css". В противном случае ничего не делать, а эту строку воспринимать как html-комментарий."

 

Примечание: Следует отдавать себе отчет, что валидатор – инструмент верстальщика, но никак не самоцель. Он лишь помогает находить ошибки верстки, если они есть, и не более того. И поскольку _в_данном_случае_ ошибок верстки нет, то можно просто не обращать внимание на сообщения валидатора и не прятать хаки указанным выше способом, ваша страница будет отображаться точно также, если не быстрее.


Сообщение отредактировал yury: 21 Апрель 2015 - 08:15

  • 0

#18 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 714 сообщений
  • Репутация: 407

Отправлено 21 Апрель 2015 - 10:10

@yury, спасибо, правильно я понимаю что с помощью // надо также закрыть и zoom, так как и на его использование валидатор тоже ругается?

Причем интересно, что хак воспринимается как ошибка, а кроссбраузерность обеспеченная при помощи описания свойств посредством -moz-, -webkit-, -ms- и -o- характеризуется как "предупреждение", а не "ошибка"... )))

 

С условными комментариями знаком, буду думать чем жертвовать: линковкой стилей для старых ИЕшек или валидностью CSS... Кстати, создал отдельную тему по вопросу линковки CSS - мне хотелось бы узнать именно Ваше мнение по данному вопросу...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru