Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > изменяя размер браузера


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

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

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


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

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

Автор: mishaSL 26.1.2007, 14:24
Цитата(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
Код


<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
Пишешь вконце кода после </table> и перед </body>
Код

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


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

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

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

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

Автор: mishaSL 29.1.2007, 11:13
Главное чтобы везде работало smile 

Автор: dm9 5.2.2007, 20:58
mielnir, посмотри на стиль body{} в примере. На будущее. Иногда помогает. smile
http://dm9.ru/vingrad/examples/html/divmakeup2/

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)