VPF::изменяя размер браузера - Форум программистов

mielnir

Дата 26.1.2007, 10:50 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 45
Регистрация: 28.6.2006

Репутация: нет
Всего: нет

Здравствуйте. Проблема в следующем. На сайте вдоль правого края идет графика. Это я сделал с помощью position: absolute; right: *** px; т.о. при уменьшении размера браузера эта графика наползает на контент, расположенный посередине. Кто-нибудь знает как можно побороть это? Т.е. я хочу, чтобы при изменении размера браузера появлялась горизонтальная полоса прокрутки.

mishaSL

Дата 26.1.2007, 13:05 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54

Есть два варианта:
Первый:
на внеший блок скажем на div (<div id="main">) в котором все остальное пишем в css

Код


div#main {
min-width: 960px; //width: 960px;
}

Второй:
Вставляешь распорку (однопиксельную прозрачную картинку шириной к примеру 960px) где-нибудь внизу.

--------------------

Лучший способ научиться программированию - это посмотреть как это делают другие...

mielnir

Дата 26.1.2007, 14:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 45
Регистрация: 28.6.2006

Репутация: нет
Всего: нет

mishaSL, min-width не помогает, а распорка работает только в IE.
Черт знает что, уже мозг не работает ((

mishaSL

Дата 26.1.2007, 14:24 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54

Цитата(mielnir @ 26.1.2007, 14:06

)

а распорка работает только в IE

Это еще как?

Цитата(mielnir @ 26.1.2007, 14:06

)

mishaSL, min-width не помогает

В смысле не помагает.

Код в студию html и css smile

--------------------

Лучший способ научиться программированию - это посмотреть как это делают другие...

mielnir

Дата 26.1.2007, 14:31 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 45
Регистрация: 28.6.2006

Репутация: нет
Всего: нет

Код



<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="style/style.css" type="text/css" />
    <link rel="SHORTCUT ICON" href="image/icon.ico">

</head>
<body topmargin="0" leftmargin="0">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td rowspan="2" width="250" valign="top">
      <div style="position: fixed; top: 0px; left: 0px;">
    <div style="position: absolute; top: 0px; left: 6px;">
        <img src="image/line_vert1.jpg" border="0" width="4" height="662" />
   </div>
   <div style="position: absolute; left: 112px; top: 562px;">
        <img src="image/line_vert2.jpg" border="0" width="6" height="100" />
    </div>
   <div style="position: absolute; top: 662px; left: 0px;">
        <img src="image/prpr.jpg" border="0" />
   </div>
   <div style="position: absolute; top: 300px; left:33px;">
        <a href=#><img src="image/link_main.jpg" border="0"></a><BR /><BR />
        <a href=#><img src="image/link_news.jpg" border="0"></a><BR /><BR />
        <a href=#><img src="image/link_public.jpg" border="0"></a><BR /><BR />
        <a href=#><img src="image/link_fund.jpg" border="0"></a><BR /><BR />
        <a href=#><img src="image/link_fmomsk.jpg" border="0"></a><BR /><BR />
        <a href=#><img src="image/link_staff.jpg" border="0"></a><BR /><BR />
        <a href=#><img src="image/link_gb.jpg" border="0"></a><BR />
   </div>
   </div>
   <img src="image/px.gif" width="250" height="1" border="1" />
    </td>
    <td colspan="2" valign="top"><center><img src="image/shapka2.jpg" border="0" /></center><BR /><BR /><BR /></td>
    <td rowspan="2" valign="top" width="250">
    <div style="min-width: 250px">
        <img src="image/book.jpg" border="0" style="position: absolute; top: 300px; right: 0px; margin: 0px;" />
        <img src="image/line_vert6.jpg" border="0" width="3" height="300" style="position: absolute; top: 0px; right: 4px; margin: 0px; "/>
        <img src="image/line_vert5.jpg" border="0" width="3" height="300" style="position: absolute; top: 0px; right: 63px; margin: 0px;" />
        <img src="image/line_vert4.jpg" border="0" width="3" height="300" style="position: absolute; top: 0px; right: 110px; margin: 0px;" />
        <img src="image/line_vert3.jpg" border="0" width="3" height="300" style="position: absolute; top: 0px; right: 141px; margin: 0px;" />
        <img src="image/px.gif" width="250" height="1" border="1" />
    </div>
    </td>
</tr>
<tr>
   <td valign="top">

    <p>content</p>


  </td>

<tr>
    <td colspan="3" valign="top"><center><img src="image/bottom.gif" border="0"></center></td>
</tr>
</table>

</body>
</html>

Код


hmtl, body {
    background-color: #FEE3C6;
    scrollbar-3dlight-color: #F0F8FF;
    scrollbar-arrow-color: #000066;
    scrollbar-base-color: #F0F8FF;
    scrollbar-darkshadow-color: #000066;
    padding-bottom: 0px;
    padding-right: 0px;
}
.leftbar {
    position: absolute;
    top: 300px;
    left:33px;
}
.rightbar {
    position: absolute;
    top: 300px;
    right: 0px;
}
.text {
    position: absolute;
    top: 260px;
    left: 200px;
    right: 250px;
}
p {
    color: #000000;
    font-size: 8pt;
    font-family: "lucida grande",verdana, sans-serif;;
    padding-left: 2em;
    text-indent: 15px;
    padding-bottom: 1em;
}
.bottom {
    position: absolute;
    bottom: 0px;
    margin-top: 100px;
}

html и css у меня переплетены, что-то лишнее, но пока ничего не редактировал => as is

mishaSL

Дата 26.1.2007, 15:44 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54

Пишешь вконце кода после </table> и перед </body>

Код


<img src="image/px.gif" width="960" height="1" border="1" />

И все работает, только что проверил.

--------------------

Лучший способ научиться программированию - это посмотреть как это делают другие...

mielnir

Дата 26.1.2007, 16:46 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 45
Регистрация: 28.6.2006

Репутация: нет
Всего: нет

mishaSL, не-а... ))) Все равно в FF и Опере картинка( стр 40-47 ) Заезжает на контент ))))

mishaSL

Дата 28.1.2007, 15:46 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54

mielnir, сделай тогда ширину картинки больше. Просто мне сложно посмотреть какая картинка куда заезжает, т.к. у меня эти картинки соответственно не грузятся. smile

--------------------

Лучший способ научиться программированию - это посмотреть как это делают другие...

mielnir

Дата 28.1.2007, 18:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 45
Регистрация: 28.6.2006

Репутация: нет
Всего: нет

mishaSL, да нет, я, кажется, догадываюсь в чем дело. Распорка не поможет в принципе. Те пресловутые картинки( 40-47 ) позиционированы по правому краю => когда я сужаю браузер, они двигаются вместе с ним( чтобы координаты оставались прежними ). В общем, пришлось загнать их в таблицу, сделать позиционирование относительным и на всякий случай воткнуть распорки ))))

mishaSL

Дата 29.1.2007, 11:13 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54

Главное чтобы везде работало smile

--------------------

Лучший способ научиться программированию - это посмотреть как это делают другие...

dm9

Дата 5.2.2007, 20:58 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

mielnir, посмотри на стиль body{} в примере. На будущее. Иногда помогает. smile

http://dm9.ru/vingrad/examples/html/divmakeup2/

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »