Вёрстка - как реализовать... - Веб-строительство - Сайтостроение

293

Brand from Amber

3 августа 2009, 17:37

843

...выравнивание по центру ячейки таблицы, блок из нескольких DIV-ов с float:left?


<html>

<head>



<title>Example</title>



<style type="text/css">



  div

  {

    height: 40px;

    width: 40px;

    margin-right: 10px;

    margin-top: 10px;  

    border: solid 1 red;

    float:left

  }



  </style>



</head>



<body>

<table style="height: 200px; width: 20%; border: solid 1 blue">

  <tr>

    <td>

      <div>&nbsp;</div>

      <div>&nbsp;</div>

      <div>&nbsp;</div>

      <div>&nbsp;</div>

      <div>&nbsp;</div>

      <div>&nbsp;</div>

    </td>

  </tr>

</table>



</body>

</html>

Лучший способ понять что-то самому - объяснить это другому.

[Удален]

3 августа 2009, 17:59

#1

Вроде как так можно, но там придется подстраивать проценты.

<html>
<head>

<title>Example</title>

<style type="text/css">

div
{
position:relative;
left:12%;
height: 40px;
width: 40px;
margin-right: 10px;
margin-top: 10px;
border: solid 1 red;
float:left
}

</style>

</head>

<body>
<table style="height: 200px; width: 20%; border: solid 1 blue">
<tr>
<td>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</td>
</tr>
</table>

</body>
</html>

130

=DEREK=

3 августа 2009, 19:26

#2

У меня способ отлично работает. рекомендую. если что не разберетесь - пишите в ЛС, постараюсь помочь.

Показываю фокусы с Drupal (/ru/forum/526565)

23

kapyceJlb

3 августа 2009, 20:52

#3

<html>

  div

  {

    height: 40px;

    width: 40px;

  margin:5px;  

    border: solid 1 red;

    float:left;

  }

  </style>



</head>



<body>

<table style="height: 200px; width: 20%; border: solid 1 blue">

  <tr>

 <td width="25%"></td>

    <td width="50%">

      <div>&nbsp;</div>

      <div>&nbsp;</div>

      <div>&nbsp;</div>

      <div>&nbsp;</div>

      <div>&nbsp;</div>

      <div>&nbsp;</div>

    </td>

 <td width="25%"></td>

  </tr>

</table>



</body>

</html>

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

html/css/jQuery верстка http://tony-art.ru/ (http://tony-art.ru/) icq: 295-249

47

Avenger

4 августа 2009, 05:56

#4

если это меню, то вместо дивов лучше будет использовать списки (<ul><li></li></ul>). а центрируйте с помощью css свойст display:inline и display:inline-block для IE, display:table и display:table-cell для остальных браузеров.

kapyceJlb, а если пунктов меню (допустим, что это будет меню) окажется больше чем на 50% экрана - ваша верстка поползет.

С уважением, Андрей Головнев (http://golovnev.by/)

[Удален]

4 августа 2009, 08:44

#5

http://www.artlebedev.ru/tools/technogrette/html/align-center/

23

kapyceJlb

4 августа 2009, 10:29

#6

Avenger:

kapyceJlb, а если пунктов меню (допустим, что это будет меню) окажется больше чем на 50% экрана - ваша верстка поползет.

1)50% не экрана, а таблицы;)

2)ширина у дивов,задана думаю не спроста

3)я бы так никогда не реализовывал,но задача стояла по конкретному примеру) может там баннеры мелкие такие будут, тогда может и имеет смысл таблица)))

прекрасно тянется квадратами

Планирую запустить два инфосайта CMS для потрала с Упал доход

293

Brand from Amber

4 августа 2009, 11:42

#7

kapyceJlb:
прекрасно тянется квадратами

Понимаете, что в моём, что в Вашем варианте блоки позиционируются по левому краю ячейки, и это означает, что возможен дисбаланс равный "ширине блока - 1px"... т.е. есть возможность того, что в Вашем случае отступ (в центральном столбце) справа будет равен 0, а слева - 39px (а теперь представьте, что ширина блока не 40, а 400 px). ...ну, а боковые столбцы вообще ни какой погоды не делают - что они есть, что их нет.

kapyceJlb:
2)ширина у дивов,задана думаю не спроста
3)я бы так никогда не реализовывал

http://adverti.ru/ - видите другие варианты реализации каталога?

47

Avenger

4 августа 2009, 11:55

#8

kapyceJlb, вы правы. бегло просмотрел код, не заметив нюансов.

эта тема так и подбивает начать очередной холивар о табличной и блочной верстке ))

Open AI тестирует память для ChatGPT

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта

Вёрстка - как реализовать...