Новости сайтов

[• kw.egorov]

Есть задача:
- Создать квадрат на HTML странице;
- Окрасить квадрат в любой цвет, отличающийся от фона;
- Центрировать квадрат по горизонтали и вертикали (центрирование должно сохраняться в любом браузере и на любых популярных экранах для проверки).

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

+ Сколько времени это заняло.

[• bombi]

наверное так

HTML

<style>
body {
overflow: hidden;
margin: 0;
}

div {
background: #000;
height: 50px;
width: 50px;
position: relative;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
</style>

<div>
</div>

Сообщение отредактировал bombi - Oct 1 2014, 14:31

[• kw.egorov]

Исходный код

..
height/width: 50px;
[B]position: relative;[/B]
top: 50%;left: 50%;
margin: -25px 0 0 -25px;
..

Это один из популярных вариантов от верстальщиков на дивах. Одно из наиболее современных, но часто overfow:hidden не используют и квадрат позиционируют абсолютно.

5 баллов, сколько времени заняло?

[• bombi]

несколько минут, в основном потратил время на то чтобы тестить) "доверяй но проверяй"

p.s
а скролл для себя скрыл))) на всякий случай в фотошопе померил

Сообщение отредактировал bombi - Oct 1 2014, 14:39

[• kw.egorov]

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

Таблицы:
Свойство ячейки таблицы - это выравнивание по абсолютному центру всего содержимого. Задается как ..<td valign='middle' align='center'>{content}</td>..
Соответственно внутрь ячейки пихается либо блок с окрашиванием, либо еще одна таблица с одной ячейкой (все зависит от опыта верстальщика и его подготовки, а также желания заниматься задачей).

Те кому совсем лень брали Gimp или Paint, рисовали квадрат и пихали в таблицу, выравнивая по центру, если знали как это делается.

На этом задчу можно считать закрытой

[• MPA3b]

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

Исходный код

body div.container {
position: relative;
}

body div.container div.rectangle {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100px;
height: 100px;
}

Таблично сверстать не проблема — но это несемантично.
Есть ещё вариант с использованием display: table-cell; для ИЕ от 8;
Могу примеры показать на js fiddle.

Сообщение отредактировал MPA3b - Oct 4 2014, 11:32

--------------------

Делаю сайты.

[• kw.egorov]

Не стоит, просто хотел узнать насколько заинтересованы на форуме тематикой. Оказалось - не казалось, что количество стремится к нулю.

[• dima_mih]

[quote=kw.egorov,Oct 4 2014, 00:26]
[quote=MPA3b,Oct 3 2014, 23:20]
Не стоит, просто хотел узнать насколько заинтересованы на форуме тематикой. Оказалось - не казалось, что количество стремится к нулю.

[/quote]

тут к гадалке не ходи. форум-то неспециализированный. общая активность в тематике "сайтостроение" практически нулевая.

[• Daily]

А если мы не знаем ширину и высота квадрата? то как выровнять по вертикали и горизонтали?

[• MPA3b]

Не стоит, просто хотел узнать насколько заинтересованы на форуме тематикой. Оказалось - не казалось, что количество стремится к нулю.

ну так форум-то — местный )
проще ответ на вопрос найти где-нибудь в бружунете.
стэковерфлоу тут не переплюнуть.

Сообщение отредактировал MPA3b - Oct 4 2014, 11:31

--------------------

Делаю сайты.

[• MPA3b]

наверное так

HTML

<style>
body {
overflow: hidden;
margin: 0;
}

div {
background: #000;
height: 50px;
width: 50px;
position: relative;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
</style>

<div>
</div>

ай как просто, а я и не догадался бы )

--------------------

Делаю сайты.

[• bombi]

ай как просто, а я и не догадался бы )

Царь прям сарказма, какое самолюбие

[• kw.egorov]

проще ответ на вопрос найти где-нибудь в бружунете.
стэковерфлоу тут не переплюнуть

Нет цели найти само решение (они давно известны).
Нет цели переплёвывать Stackoverflow на форуме.
Было желание найти интересующихся версткой, но их практически нет.

[• MPA3b]

Царь прям сарказма, какое самолюбие

вообще-то я серьёзно, никакого сарказма.

--------------------

Делаю сайты.

[• bombi]

Автор, есть интересные задачки?)