Элементарный вопрос по вёрстке.

sadman · Сообщение **sadman** » Вт дек 11, 2007 01:35

Итак. Есть страница. На всю страницу натянута таблица (table). По краям два больших блока (<TR>) во всю высоту таблицы.
При разрешении в 1280х1024 - таблица на странице во всю величину. При разрешении в 1024х768, необходимо центрировать таблицу по центру, так что-бы эти боковые блоки оставались ЗА границами экрана, и так-же что-б не было горизонтального скролла.
Скролл убрал так:

Код: Выделить всё

overflow-x: hidden;

однако, в опере он продолжает появляцо.
А вот как сделать то что я написал выше, по поводу центрирования таблицы - хз. пробовал <table width="100%"...> не помогает.

зы необходимо что-б получилось что-то типо как тут - http://advengro.com/ ( посмотрите как будет при 1280х1024 и при 1024х768 )

заранее спасибо!

L€X · Сообщение **L€X** » Вт дек 11, 2007 12:45

чёт на http://advengro.com/

такого не увидел

sadman · Сообщение **sadman** » Вт дек 11, 2007 13:58

плохо посмотрел. левый и правый вертикальный блок, при изменении разрешения на 1024 становятся вне зоны видимости.

L€X · Сообщение **L€X** » Вт дек 11, 2007 15:13

так это фоновое изображение

и в таблице width задан жестко 992 , вот тебе он и при меньшем разрешении выходит за экран

sadman · Сообщение **sadman** » Ср дек 12, 2007 02:00

аа.. т.е. всё благодаря тому что там таблица в таблице?

[off]добавлено спустя 10 часов 23 минуты:[/off]

так ладно. перейдём к более конкретному вопросу.
есть хтмл:

Код: Выделить всё

<html>
<head>
	<link href="style2.css" rel="stylesheet" style="text/css">		
</head>

<body>
<table width="100%" height="900" border="1" class="main" align="center">
	<tr>
		<td bgcolor="#000000">  </td>
		<td width="1020"> BB </td>
		<td bgcolor=red>  </td>
	</tr> 
</table>	
		
</body>
</html>

+css:

Код: Выделить всё

table.main {
	border-collapse: collapse;
	width: 1280px;
	height: 900px;
}

html, body {
	margin:0px;
	padding:0px;
	overflow-x: hidden;
}

Вопрос: почему при 1024х768 таблица не центрируется. т.е. блок с черной заливкой видно, центральный - видно только кусок, красный - нету?

Weekers

sadman,
Да всунь ты эту таблицу в <center> и всё.

ZorroGFS

sadman,
так width: 1280px; в цсс перекрывает width="100%"
если ты хочешь 100% но не более 1280 пикселей то так и пиши

Код: Выделить всё

width: 100%;
max-width: 1280px;
width: expression((document.body.clientWidth>1280)?"1280px":"100%");

и лучше сразу определиться либо ты пишешь атрибуты в хтмл тегах, либо пишешь всё в цсс, а то из-за смешивания такая ерунда и выходит

sadman · Сообщение **sadman** » Ср дек 12, 2007 11:33

ооо! Спасибо, товарищи, сейчас попробую!

[off]добавлено спустя 17 минут:[/off]

Такс. ну так уже куда лучше! )))
А вот если имеется такой код:

Код: Выделить всё

<table border="1" class="main" align="center">
   <tr>
      <td bgcolor="#000000"> <img src="bla.png" width="20"> </td>
      <td width="1020"> BB </td>
      <td bgcolor=red> <img src="bla2.png" width="20"> </td>
   </tr>
</table>

реально как-то заставить эти блоки заставить "прятаться" так-же, как они прячутся БЕЗ картинок?

ZorroGFS

sadman,
как вариант положить картинки в бэкграунд боковых ячеек.

sadman · Сообщение **sadman** » Ср дек 12, 2007 11:55

этот вариант, по ряду причин, исключается.
еще вариантты?

sota · Сообщение **sota** » Вт янв 15, 2008 16:59

Код: Выделить всё

<head>
<style type="text/css">
body {
 text-align: center; /* Выравниваем содержимое веб-страницы по центру */
}

#centerLayer {
 width: 400px; /* Ширина слоя в пикселах */
 margin-left: auto; /* Отступ слева */
 margin-right: auto; /* Отступ справа */
 background: #fc0; /* Цвет фона */
 padding: 10px; /* Поля вокруг текста */
 text-align: left; /* Выравнивание содержимого слоя по левому краю */
}
</style>
</head>
<body>

<div id="centerLayer">Текст</div>

</body>

пора уже забыть про таблицы и верстать слоями

Kart_01

sota писал(а):
пора уже забыть про таблицы и верстать слоями

Почему?

Weekers

Kart_01,
Типа модно.

Kart_01

Weekers писал(а):Kart_01,
Типа модно.

[off]ага, и писать в подвале: посмотри мой сурс ))[/off]

sota · Сообщение **sota** » Ср янв 16, 2008 14:31

типа web 2.0

Weekers

Web 2.0 - это миф.

sota · Сообщение **sota** » Ср янв 16, 2008 15:57

еще есть такой прикольный сайт http://www.csszengarden.com/

и вот к примеру его версии:
http://www.csszengarden.com/?cssfile=/2 ... css&page=0
http://www.csszengarden.com/?cssfile=/2 ... css&page=0

причем html не меняется
код странички везде одинаковый
меняется только сss
вот что можно творить на дивах

Weekers

sota,
Круто, ничего не скажешь.

Kart_01

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

sota · Сообщение **sota** » Ср янв 16, 2008 17:22

Kart_01 писал(а):+ есть некоторые вещи, которые сложно реализовать

а кому сейчас легко?