| |
|
|
| | Требуется задать ширину страницы в 1024 точки и отцентрировать страницу таким образом, чтобы при любом разрешении монитора, равным или большим 1024, она была бы в середине экрана. Но как я ни манипулирую с html и body в стилях css, сделать этого не удается...
Для теста задаю таблицу шириной в 1024 точки, но она то влево, то с прокруткой! | |
| |
|
|
| |
|
|
| |
для: Владимир55
(12.05.2011 в 13:41)
| | | Обычно для этого выделяют div-тэг шириной 1024px, в который помещают текст или оформление, который и центрируют, например, при помощи CSS-свойства margin
{
width: 1024px;
marign: 0px auto;
}
|
| |
| |
|
|
| |
 31.4 Кб |
|
| |
для: cheops
(12.05.2011 в 13:54)
| | | Примерно так я и пытался, однако не получается.
Тестовая страница такая:
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Настройка</title>
<link href="finstyl.css" rel="stylesheet" type="text/css">
</head>
<body>
<p align="left">Левый край</p>
<p align="right">Правый край</p>
<div align="center">
<table border="1" width="1024" id="table1" style="border-collapse: collapse">
<tr>
<td>
<p align="center">Таблица 1024</td>
</tr>
</table>
</div>
</body>
</html>
|
А в finstyl.css пытаюсь что-то прописать:
@charset "windows-1251";
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
|
Что получается, можно увидеть в скриншоте - при разрешении монитора 1024 правая часть не помещается и возникает горизонтальная прокрутка. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(12.05.2011 в 14:17)
| | | Можно начать отталкиваться от следующей разметки
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Настройка</title>
<link href="finstyl.css" rel="stylesheet" type="text/css">
</head>
<body>
<p align="left">Левый край</p>
<p align="right">Правый край</p>
<div style='width: 1024px; margin: 0px auto;'>
<table border="1" width="1024" id="table1" style="border-collapse: collapse">
<tr>
<td>
<p align="center">Таблица 1024</td>
</tr>
</table>
</div>
</body>
</html>
|
Содержимое style, конечно, лучше переместить в CSS-файл. | |
| |
|
|
| |
29.1 Кб |
|
| |
для: cheops
(12.05.2011 в 14:27)
| | | Однако это не повлияло на срезультат (см. скриншот) - прокрутка осталась.
Осмелюсь предположить, что необходимо что-то прописать в CSS-файле в качестве стилей html или body. Какой-нибудь отступ по умолчанию убрать, что ли... | |
| |
|
|
| |
|
|
| |
для: Владимир55
(12.05.2011 в 14:42)
| | | А ну это, конечно, если у вас расширение монитора 1024, часть пространства уходит на границы браузера, часть на границы вертикального ползунка. Если требуется подогнать расширение под 1024 без горизонтальной прокрутки - нужно брать меньшую величину, скажем 1000px или даже 980px. | |
| |
|
|
| |
|
|
| |
для: cheops
(12.05.2011 в 14:51)
| | | 1. Разве в стилях нет возможности установить нулевые отступы по умолчанию?
2. И все же, здесь проблема связана с таблицей. Взгляните еще раз на скриншот - слова "Правый край" помещаются в экране, а вылезает только таблица и порождает прокрутку именно она. Если таблицу убрать, то и прокрутка исчезает. .
Разве нельзя задать что-то в стилях таким образом, чтобы таблица шириной 1024 точно вписалась в экран 1024 (при отсутствии вертикальной прокрутки)? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(12.05.2011 в 15:07)
| | | 1. Есть, только отступы от границы браузера. За пределами браузера стили не властны, как только появляется вертикальная полоса прокрутки, она начинает занимать место и может вызывать горизонтальную полосу прокрутки.
2. Следует еще учитывать, что у вас в таблице используется border='1', т.е. плюс еще 2px на рамки, итого получается 1024 + 2 = 1026 пикселей. | |
| |
|
|
| |
|
|
| |
для: cheops
(12.05.2011 в 15:20)
| | | Теперь я понял, над чем тут бился - графика чуть не влезала и я форматирующую таблицу слегка расширил. На макете это никак не сказалось, а на реальном сайте, когда стал наращиваться контент, возникла полоса прокрутки справа. И уже от этого возникла горизонтальная прокрутка!
Спасибо! | |
| |
|
|
