LINUX.ORG.RU
решено Форум — Web-development  

[html5] опять сломали разметку?

 


0

1 
<!DOCTYPE HTML>
<head>
 <title>Homepage</title>
 <meta http-equiv="Content-Language" content="ru">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-32">
 <link type="text/css" rel="stylesheet" media="all" href="style.css">
</head>
<body>
 <div class = "container" id = "top">
  <div class = "object" id = "LU">
  &nbsp;
  </div>
  <div class = "object" id = "CU">
  &nbsp;
  </div>
  <div class = "object" id = "RU">
  &nbsp;
  </div>
 </div>
 <div class = "container" id = "middle">
  <div class = "object" id = "LC">
  &nbsp;
  </div>
  <div class = "object" id = "CC">
  &nbsp;
  </div>
  <div class = "object" id = "RC">
  &nbsp;
  </div>
 </div>
 <div class = "container" id = "bottom">
  <div class = "object" id = "LD">
  &nbsp;
  </div>
  <div class = "object" id = "CD">
  &nbsp;
  </div>
  <div class = "object" id = "RD">
  &nbsp;
  </div>
 </div>
</body>

html, body
{
 width   : 100%;
 height  : 100%;
 margin  : 0;
 padding : 0;
}

body
{
 background: -moz-linear-gradient(bottom, #000000 0%, #3F3F3F 100%);
}

div.container
{
 display          : block;
 position         : relative;
 text-align       : center;
 width            : 100%;
 height           : 210px;
 background-color : rgba(255, 255, 255, 0.1);
}

div.object
{
 display : block;
 position : relative;
 width   : 300px;
 height  : 210px;
 background-color : rgba(255, 0, 255, 0.1);
 border-width : 1px;
 border-color : black;
 border-style : solid;
}

Результат: http://img685.imageshack.us/img685/999/20032012215338.png Для Ъ: не идут в ряд, а по одному на «строку»-container, остальные накладываются сверху на следующие строки.

<offtopic>
может, сразу twitter bootstrap, м? :) там всё готово, лишнее можно выпилить, тыкая мышкой прям на сайте производителя.
</offtopic>

aol ★★★★★
()

Мне кажется, или ты пыташься таблицу дивами нарисовать? А от html5 тут только доктайп.

Если надо дивы в строку, читай про float и/или про display.

Kalashnikov ★★★
()

display: block;

Это лишнее, он и так блочный по умолчанию.

width: 100%;

Аналогично.

height: 210px;

Лишнее, если у детей указана нужная высота.

position: relative;

А это ещё зачем?? Ты точно понимаешь смысл этого свойства?

Apple-ch ★★
()

div.object { display : inline-block; .display : inline-block; vertical-align:top; position : relative; width : 300px; height : 210px; background-color : rgba(255, 0, 255, 0.1); border-width : 1px; border-color : black; border-style : solid; }

spiritkhl ★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development