Помогите сверстать

Статус
В этой теме нельзя размещать новые ответы.

rafic

Местный житель
Регистрация
14 Май 2008
Сообщения
477
Реакции
24
Нужно в центре страницы разместить блок с новостями. Это как бы первый вопрос - каким способом разместить в центре страницы блок так, что бы он был по центру в большинстве браузеров. Пробывал такой способ:
PHP:
<div class="block-login">
         Content
</div>
PHP:
.block-login{
	width: 300px; 
	height:200px; 
	position: absolute; 
	left: 50%; top:50%; 
	margin-lef;t: -150px; 
	margin-top:-100px;
}
Но таким способом в Chrome и ИЕ 8 не работает. Блок в верхнем левом углу.
И второй вопрос - как лучше сверстать сам блок? Тоже нужно чтобы он был максимально оптимизирован для отображения в разных браузерах. Я сначала сделал в таблицах:
PHP:
<table class="onetable" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td><div class="onetable-top-l"></div></td>
      <td><div class="onetable-top-c"></div></td>
      <td><div class="onetable-top-r"></div></td>
    </tr>
    <tr>
      <td><div class="onetable-center-l"></div></td>
      <td class="onetable-center-c">
Content
	  </td>
      <td><div class="onetable-center-r"></div></td>
    </tr>
    <tr>
      <td><div class="onetable-bottom-l"></div></td>
      <td><div class="onetable-bottom-c"></div></td>
      <td><div class="onetable-bottom-r"></div></td>
    </tr>
  </tbody>
</table>
PHP:
.onetable{width: 800px; border:0px;position: relative;}
.onetable-top-l{height: 20px; width: 20px; background:url(images/admin/table-top-left.jpg); background-repeat: no-prepeat;}
.onetable-top-c{height: 20px; width:100%; background:url(images/admin/table-top-center.jpg); background-repeat: prepeat-x;}
.onetable-top-r{height: 20px; width: 20px; background:url(images/admin/table-top-right.jpg); background-repeat: no-prepeat;}
.onetable-center-l{height: 100%; width: 20px; background:url(images/admin/table-center-left.jpg); background-repeat: no-prepeat;}
.onetable-center-c{height: 100%; width: 100%; background:#fff; vertical-align: top;}
.onetable-center-r{height: 100%; width: 20px; background:url(images/admin/table-center-right.jpg); background-repeat: no-prepeat;}
.onetable-bottom-l{height: 20px; width: 20px; background:url(images/admin/table-bottom-left.jpg); background-repeat: no-prepeat;}
.onetable-bottom-c{height: 20px; width:100%; background:url(images/admin/table-bottom-center.jpg); background-repeat: repeat-x;}
.onetable-bottom-r{height: 20px; width: 20px; background:url(images/admin/table-bottom-right.jpg); background-repeat: no-prepeat;}
Но в Opere нет левого края, а в Chrome нет правого и левого краев. В ИЕ 8 нормально все, что творится в ИЕ 7 не смотрел, но думаю что тоже нормально. ИЕ 6 не интересует.
Поправьте меня в чем я не прав, укажите на ошибки, подскажите как лучше?
Вот макет самого блока:
 

Вложения

  • Макет.jpg
    Макет.jpg
    41,5 KB · Просмотры: 11
По всей видимости заменить lef;t на center

.block-login{
width: 300px;
height:200px;
position: absolute;
left: 50%; top:50%;
margin-center: -150px;
margin-top:-100px;
}

Оно?
 
Не совсем, но я нашел решение к первому вопросу.
Остался теперь второй вопрос - как лучше сверстать сам блок?
 
Во второму вопросу - такое можно сделать на Java Script.
 
Хм а что именно? Можно по-подробнее? Приводите примеры, так как JavaScript`ом я не владею. И мне кажется, что это только усложнить задачу. Там можно сверстать дивами или таблицей, например как я сделал, но вот почему не отображает поля в браузерах Opera и Chrome я не могу понять. По этому прошу помощи...
 
Ответ на первый мой вопрос я уже нашел. Все работает нормально. Меня интересует как сверстать самц рамку так, чтобы она нормально отображалась в браузерах. Проблемы с отображением которые есть сейчас смотрите на пост выше.
 
Неужели не кто не может помочь?
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху