| |
|
|
| | Подскажите, пожалуйста.
Есть страница, которая состоит из :
-шапки (имеет параметр float:right и width: 800px}
-блока кнопок (горизонтального под шапкой)
-содержимого (одно изображение, размером width:1000 height:500, позиционировано как и шапка
position: relative float:right)
Задумано, чтобы шапка при уменьшении размеров окна оставалась"прилипшей" к правому краю.
На всех страницах нет проблем, кроме как с этой из-за большого изображения на ней.
При уменьшении размеров окна (меньше 1000px) появляются полосы прокрутки. И при прокручивании
назад видно, что шапка сдвинулась влево, как и задумывалось, но справа от шапки появляется пустое
место.
Как избежать появления пустого места справа от шапки?
p.s Html и Css код страницы
/*css*/
.shapka {background-image : url(img/shap5right.gif); width:814;height : 250;
background-repeat : no-repeat; float:right;border:0 solid black;margin-top: -30px;}
.tabl {float:right; }
.bigimage {position:relative;float:right; background-image : url(img2/image.jpg); height : 598; width:1000;
background-repeat : no-repeat;margin-bottom:-20px }
/*html*/
<body>
<div class='shapka'> </div>
<table class='tabl' border='1' width='814px' height='15' >
<TR border='1' align='center'><td border='1' width='200px'> Первая ссылка</td>
<td border='1' width='390px'> Вторая ссылка</td>
<td border='1' width='200px'>Третья</td> </TR>
</table>
<div class='clear'> </div>
<div class='bigimage'> </div>
</body>
|
| |
| |
|
|
| |
|
|
| |
для: Newbie256
(23.01.2009 в 20:45)
| | | У тела документа (тега <BODY>) во всех браузерах имеется предустановленное НЕНУЛЕВОЕ значение отступов (паддингов и маргинов). Именно этот отступ у вас и появляется справа от шапки.
Необходимо в стилях прописать:
body {margin: 0; padding: 0}
|
Когда это пропишете, исчезнет необходимость "задирать" шапку на 30 пикселей вверх (т.е. правило стиля margin-top: -30px будет не нужно).
Кроме того, отмечу:
1. width:814;height : 250; - это неграмотно. Необходимо прописывать единицу измерения. В данном случае будет правильно так:
width: 814px; height : 250px;
|
Аналогично измените запись и для класса .bigimage
2. border:0 solid black; - это вовсе смешно. Зачем указывать цвет и стиль для бордера нулевой толщины? Грамотной будет запись
3. Пустые дивы вполне допускаются. Но не рекомендуются. Поэтому лучше будет, если добавите неразрывный пробел (или  ), т.е. напишете так:
<div class="shapka"> </div>
|
| |
| |
|
|
| |
|
|
| |
для: PAT
(23.01.2009 в 22:39)
| | | Вы меня неправильно поняли
Появляется не маленький пробел, а пробел размером с свободное место справа от полосы прокрутки
В общем, чем больше горизонтальная полоса прокрутки, т.е. чем больше уменьшить окно, тем больше и будет пустота справа от шапки. | |
| |
|
|
| |
|
|
| |
для: Newbie256
(23.01.2009 в 23:18)
| | |
<html>
<head>
<style>
body {margin: 0; padding: 0}
.shapka {position: relative; width: 814px; height: 250px; background-color: gray; float: right}
.tabl {float: right}
.picture {width: 1000px; height: 500px; background-color: red}
</style>
<script>
onscroll = onresize = function () {document.getElementById ('shapka').style.left = document.body.scrollLeft}
</script>
</head>
<body>
<div class="shapka" id="shapka"> </div>
<table class='tabl' border='1' width='814' height='15' >
<TR border='1' align='center'><td border='1' width='200'> Первая ссылка</td>
<td border='1' width='390'> Вторая ссылка</td>
<td border='1' width='200'>Третья</td> </TR>
</table>
<img class="picture">
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: PAT
(24.01.2009 в 00:41)
| | | Частично решил проблему,( с помощью javascript.)
добавил div класса main :
.main {min-width:1000px}
и завернул всё в него.
Всё стало работать корректно (пустота справа от шапки при уменьшении размера окна не появляется).
Но это исправило дело только для всех обозревателей кроме IE.
Тут вышел из ситуации используя експрешн так:
<style type="text/css">
.main {
width:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto");
}
</style>
<comment>
<style type="text/css">
/* Для всех других кроме IE */
.main {min-width:1000px}
</style>
|
Но как видите использован javascript.
Подскажите пожалуйста, есть ли в данном случае какая-либо альтернатива яваскрипту, уж очень не хочется лишний раз его использовать ещё и по причине того, что в броузере появляется сообщение: " Броузер в целях безопасности заблокировал activex, разрешаете ли вы выполнение..."
Помогите пожалуйста | |
| |
|
|
