Вопрос:

Может ли CSS действительно переопределить порядок элементов HTML на странице?

html css

13808 просмотра

8 ответа

3527 Репутация автора

Если у вас есть несколько divs на странице, вы можете использовать CSS для определения размера, плавать их и немного переместить их ... но я не вижу способа обойти тот факт, что первый divбудет отображаться в верхней части и последняя страница divбудет внизу! Я не могу полностью изменить порядок элементов, поскольку они исходят из исходного HTML, не так ли?

Я, должно быть, что-то упускаю, потому что люди говорят: «Мы можем изменить внешний вид всего сайта, просто отредактировав один CSS-файл», но это будет зависеть от того, что вы по-прежнему хотите использовать divs в том же порядке!

(PS Я уверен, что никто не использует position:absoluteкаждый элемент на странице.)

Автор: Magnus Smith Источник Размещён: 18.09.2008 12:52

Ответы (8)


2 плюса

20617 Репутация автора

Вам не нужно положение: абсолютное для каждого элемента, чтобы делать то, что вы хотите.

Вы просто используете его для нескольких ключевых элементов, а затем можете расположить их где угодно, перемещая все содержащиеся в них элементы вместе с корневым элементом раздела.

Автор: workmad3 Размещён: 18.09.2008 12:56

37 плюса

307634 Репутация автора

CSS может вывести элементы из нормального потока и расположить их где угодно и любым способом. Но это не может создать новый поток .

Под этим я подразумеваю, что вы можете поместить последний элемент из HTML-документа в начало / верх страницы / окна, и вы можете разместить первый элемент из HTML-документа в конец / нижнюю часть страницы / окна. Но когда вы делаете это, вы не можете расположить эти предметы относительно друг друга; Вы должны знать сами, как далеко вниз будет конец страницы, чтобы первый элемент HTML-документа располагался правильно. Если этот контент является динамическим (то есть: из базы данных или CMS), это может быть далеко не тривиальным.

Автор: Joel Coehoorn Размещён: 18.09.2008 12:57

3 плюса

531838 Репутация автора

Возможно, вы захотите взглянуть на CSS Zen Garden, чтобы найти отличные примеры того, как делать то, что вы хотите. Множество примеров макетов по ссылкам справа, чтобы увидеть различные способы перемещения всего с использованием строго CSS.

Автор: Nick Craver Размещён: 18.09.2008 12:57

1 плюс

26272 Репутация автора

Я думаю, что наиболее важным фактором является размещение ваших html-элементов таким образом, который имеет смысл семантически, и, если повезет, ваш макет в CSS не будет выполнять слишком много работы. Например, заголовок вашего сайта, вероятно, будет первым элементом на странице, за которым следует общая навигация, затем суб-навигация, контент и нижний колонтитул (неполный список).

Вероятно, около 90-95% макетов, с которыми вы хотите работать, должны быть относительно тривиальными, чтобы манипулировать этой разметкой во что-то вроде того, что вам нужно. остальные 5-10% все еще будут возможны, если приложить немного больше усилий, но вопрос, который вам нужно задать себе: «Как часто я хочу, чтобы заголовок моего сайта располагался в правом нижнем углу страницы?»

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

Автор: ZombieSheep Размещён: 18.09.2008 01:01

0 плюса

3527 Репутация автора

Хорошая мысль о том, что верхний колонтитул всегда будет первым, а нижний колонтитул последним! Но я мог бы захотеть переместить мой рекламный DIV сверху вниз, вправо.

Еще одна вещь, о которой я слышал, - это поставить контент DIV на первое место, поэтому Google уделяет вам больше внимания (релевантные ключевые слова находятся в верхней части рейтинга страницы выше) ... или это миф? Для этого потребовался бы такой фокус CSS, о котором я тоже спрашиваю.

Автор: Magnus Smith Размещён: 18.09.2008 01:05

9 плюса

8257 Репутация автора

Решение

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

Например, в StackOverflow, если разметка настроена правильно, заголовок и содержание основного текста могут быть первыми двумя элементами в разметке, а затем навигация / поиск и, наконец, правая боковая панель. Это можно сделать, установив контейнер содержимого с достаточно большим верхним полем для размещения навигации и достаточно большим правым полем для боковых панелей. Тогда оба могут быть абсолютно позиционированы на месте. Разметка может выглядеть так:

h1 {
  position: absolute;
  top: 0;
  left: 0;
}

#content {
  margin-top: 100px;
  margin-right: 250px;
}

#nav {
  position: absolute;
  top: 0;
  left: 300px;
}

#side {
  position: absolute;
  right: 0;
  top: 100px;
}
<h1> Stack Overflow </h1>
<div id="content">
  <h2> Can Css truly blah blah? </h2>
  ...
</div>
<div id="nav">
  <ul class="main">
    <li>quiestions</li> ... </ul>
  ....
</div>
<div id="side">
  <div class="box">
    <h3> Sponsored By </h3>
    <h4> New Zelands fish market </h4>
    ....
  </div>
</div>

Здесь важно то, что разметка должна выполняться с учетом такого рода магии позиционирования.

Изменить положение так, чтобы навигационная панель находилась слева, а боковая панель под навигацией, было слишком сложно.

Автор: Jonathan Arkell Размещён: 18.09.2008 01:07

1 плюс

34668 Репутация автора

Вы можете позиционировать отдельные блоки полностью независимо от исходного порядка, используя position: absolute. Таким образом, вы можете переместить верхний колонтитул внизу страницы, а нижний колонтитул вверх, используя CSS.

Однако обратите внимание, что это обычно плохо для доступности: у вас должен быть порядок содержимого в источнике более или менее в том же порядке, в котором вы представляете его читателю. Причина в том, что программа чтения с экрана или подобное устройство будет отображать контент в том порядке, в котором он определен в источнике, а не в визуальном порядке, определенном вашим CSS.

Автор: JacquesB Размещён: 18.09.2008 01:11

3 плюса

640 Репутация автора

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

  1. Использование дисплея CSS значения table-caption, table-rowи table-cellпозволяют вертикальное упорядочение более чем трех элементов , контролируемых исключительно с помощью CSS.

  2. Это намного позже и будет работать только во всех последних браузерах (да, в IE9 произойдет сбой): использование CSS-свойств flexbox.

Вы можете просмотреть примеры в реальном времени и узнать больше об этих методах на странице шаблонов " это отзывчивый ". Два, о которых я говорю, находятся в разделе, озаглавленном «Сдвиг источника-порядка»

Автор: pieroxy Размещён: 10.11.2012 10:16
Вопросы из категории :
32x32