VPF::Высота странички из-за слоёв...

dm9

Дата 6.9.2007, 16:29 (ссылка)

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

Загрузка ...

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

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

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

Цитата(kaa @ 6.9.2007, 16:57

)

А фон в моём случае должен быть строго на мести и смещаться содержимое с фоном должны одинакого:(

Фраза непонятна. Из текста получается, что простые два дива (один под другим) спасут мир. Поясни.

kizune

Дата 6.9.2007, 17:07 (ссылка)

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

Загрузка ...

Опытный

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

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

я так понимаю смущает кусок таблицы,на который наезжает таблица с внутренними вакансиями?

Код


<td id="left-space-column" width="5%"><div style="width:50px;"></div></td>
        <!--START CONTENT CELL-->
        <td id="content-column" style="width:90%; height:90%; padding:0; margin:0; background-image:url('<?php print base_path();?>themes/my_theme/images/t2_bg.jpg'); background-repeat:repeat-x; background-color:#ffffff;">
        <!--START-->
            <table id="notice-footer-top-contetn-table" style="table-layout:fixed; margin:0; padding:0; width:100%; z-index:0;"> 
                <tr>
                    <td height="280px" width="245px" rowspan="2"> 
                    </td> 
                    <td height="65"  width="450">
                        &nbsp;
                    </td>
                    <td rowspan="2" width="220px">
                        <div style="width:220px; height:1px;"></div>
                    </td>
                </tr>
                <tr>
                    <td style="margin-top:5px; text-align:left;">
                        <table id="info-background-table" width="450px">
                            <tr>
                                <td>
                                    <img src="<?php print base_path();?>themes/my_theme/images/info_bg.jpg" width="100%" height="260px" style="margin:0; padding:0;"/>
                                    <img src="<?php print base_path();?>themes/my_theme/images/info_downbg.jpg" width="100%" style="margin-top:-1%; padding:0;"/>
                                </td>
                            </tr>
                        </table>
                        <table style="position:relative;margin-top:-175px; height:10%; width:436px; margin-left:1%; border-collapse:collapse; table-layout:fixed;">
                            <tr>
                                <td style="width:80%; height:55px; padding:0; margin:0; text-align:center; vertical-align:middle;">
                                    <div style="display:table-cell; overflow:hidden; width:100%; height:100%; vertical-align:middle; padding-left:15px;">
                                        Notice
                                    </div>
                                </td>
                                <td style="text-align:center; vertical-align:top; text-align:right; margin:-2; padding:0;">
                                    <img src="<?php print base_path();?>themes/my_theme/images/info.jpg" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="width:100%; height:1px; margin:0; padding:0; text-align:center; vertical-align:middle; font-size:3px;">
                                    <img src="<?php print base_path();?>themes/my_theme/images/line.gif" style="height:1px; width:90%;"/>
                                </td>
                            </tr>
                            <tr>
                                <td style="height:58px; margin:0; padding:0; width:80%; text-align:center; vertical-align:middle;" colspan="2">
                                    <div style="display:table-cell; overflow:hidden; width:100%; height:100%; vertical-align:middle; padding-left:15px;">
                                      Text 
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>    
            <!--END-->
            <!--BEGIN-->
            <table id="top-contetn-table"style="position:relative; top:-490px; margin:0; padding:0; height:100%; width:100%;">
                <tr>
                    <td style="vertical-align:top; text-align:center; padding-top:15; min-width:220px; width:220px; height:200px;">
                        <?php if($logo) print "<img src='$logo'>"?>
                        <div style="height:1px; width:220px;"></div>
                    </td>
                    <td style="width:620px; background-image:none; background-color:transparent; vertical-align:top;  ">
                        <div style="top:0; left:0; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php print base_path();?>themes/my_theme/images/photo.png');  height:200px">
                            <img src="<?php print base_path();?>themes/my_theme/images/photo.png" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" height="200"/>
                        </div>
                    </td>
                    <td>
                        Здесь будет поиск
                    </td>
                </tr>
                <tr>
                    <!--RIGHT CONTENT-->
                    <td rowspan="2" style="  width:220px; vertical-align:top; padding-left:15px;"> 
                        <?php print $sidebar_left?>
                        <?php print $sidebar_right?>
                        
                        
                    <!--END RIGHT CONTENT-->
                    </td>
                    <td style="  width:220px; height:150px; vertical-align:top">
                    </td>
                    <td style="  width:220px; vertical-align:top; padding-right:15px;" rowspan="2">
                        <!--LEFT CONTENT 1-->
                        <!-- ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd-->
                                
                        <!-- ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd-->
                    <!--END LEFT CONTENT-->
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align:top; padding-left:15px; padding-right:15px; text-align:center;">
                        <!--CONTENT-->
                        <?php print $content?>
                        <div id="vac-div" style="display:block; position:relative; width:450px; min-width:450px; margin:auto;">
                            <div style="height:1px; min-height:1px; width:100%; min-width:100%px; margin-top:15px;"></div>
                            <table id="vac_table" style="width:100%; min-height:200px; height:200px; text-align:center; margin:auto; background-image:url('<?php print base_path();?>themes/my_theme/images/info_bg.jpg'); background-repeat:repeat-x; text-align:center;" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td rowspan="2" style="vertical-align:top; text-align:left; padding:0; margin:0;">
                                        <div style="height:1px; max-height:1px; width:300px;"></div>
                                        <div style="width:100%; margin-top:5px; margin-left:10px; padding:0;"><h2>Внутренние вакансии</h2></div>
                                        <div style="width:100%; margin-top:10px; margin-left:7px; padding:0;">Здесь буит контент внутренних вакансий</div>
                                    </td>
                                    <td style="text-align:right; vertical-align:top; padding-top:5px; padding-right:5px; width:80px;">
                                        <img src="<?php print base_path();?>themes/my_theme/images/vac.gif" />
                                    </td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:bottom;">
                                        <div style="height:15px; min-height:15px;"></div>
                                        
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"><div style="height:15px; min-height:15px;"></div></td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <img src="<?php print base_path();?>themes/my_theme/images/info_downbg.jpg" width="100%" height="55px"/>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--END CONTENT-->
                    </td>
                </tr>
                <tr>
                    <td style="border-style:dotted">Тут буит пусто
                    </td>
                    <td style="border-style:dotted">Тута буут баннеры</td>
                    <td style="border-style:dotted">место под дугу</td>
                </tr>
            </table>
            <!--END-->
        </td>

таблица которая содержит Notice,ей надо присвоить вместо top:-175px; margin-top:-175px;

если не эта ошибка,то попробуй поэкспериментировать с margin-top,вместо просто top

Это сообщение отредактировал(а) kizune - 6.9.2007, 17:24

kaa

Дата 7.9.2007, 09:49 (ссылка)

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

Загрузка ...

Опытный

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

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

kizune,
Нет, с notice всё впорядке. Я специально зделал чтобы они наезжали - это как бы слои. Таблицы я фиксирую чтобы при самом экстермальном сужении окна верстка никуда не ехала и была прибита как гвоздями. Я щас попробую еще упростить. так как notice не критично здесь.

Код


<td id="left-space-column" width="5%"><div style="width:50px;"></div></td>
        <!--START CONTENT CELL-->
        <td id="content-column" style="width:90%; height:90%; padding:0; margin:0; background-image:url('<?php print base_path();?>themes/my_theme/images/t2_bg.jpg'); background-repeat:repeat-x; background-color:#ffffff;">
        <!--START-->
            <table id="notice-footer-top-contetn-table" style="table-layout:fixed; margin:0; padding:0; width:100%; z-index:0;"> 
                <tr>
                    <td height="280px" width="245px" rowspan="2"> 
                    </td> 
                    <td height="65"  width="450">
                        &nbsp;
                    </td>
                    <td rowspan="2" width="220px">
                        <div style="width:220px; height:1px;"></div>
                    </td>
                </tr>
                <tr>
                    <td style="margin-top:5px; text-align:left;">
                        <table id="info-background-table" width="450px">
                            <tr>
                                <td>
                                    <img src="<?php print base_path();?>themes/my_theme/images/info_bg.jpg" width="100%" height="260px" style="margin:0; padding:0;"/>
                                    <img src="<?php print base_path();?>themes/my_theme/images/info_downbg.jpg" width="100%" style="margin-top:-1%; padding:0;"/>
                                </td>
                            </tr>
                        </table>
                     </td>
                </tr>
            </table>    
            <!--END-->
            <!--BEGIN-->
            <table id="top-contetn-table"style="position:relative; top:-490px; margin:0; padding:0; height:100%; width:100%;">
                <tr>
                    <td style="vertical-align:top; text-align:center; padding-top:15; min-width:220px; width:220px; height:200px;">
                        <?php if($logo) print "<img src='$logo'>"?>
                        <div style="height:1px; width:220px;"></div>
                    </td>
                    <td style="width:620px; background-image:none; background-color:transparent; vertical-align:top;  ">
                        <div style="top:0; left:0; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php print base_path();?>themes/my_theme/images/photo.png');  height:200px">
                            <img src="<?php print base_path();?>themes/my_theme/images/photo.png" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" height="200"/>
                        </div>
                    </td>
                    <td>
                        Здесь будет поиск
                    </td>
                </tr>
                <tr>
                    <!--RIGHT CONTENT-->
                    <td rowspan="2" style="  width:220px; vertical-align:top; padding-left:15px;"> 
                        <?php print $sidebar_left?>
                        <?php print $sidebar_right?>
                        
                        
                    <!--END RIGHT CONTENT-->
                    </td>
                    <td style="  width:220px; height:150px; vertical-align:top">
                    </td>
                    <td style="  width:220px; vertical-align:top; padding-right:15px;" rowspan="2">
                        <!--LEFT CONTENT 1-->
                        <!-- ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd-->
                                
                        <!-- ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd-->
                    <!--END LEFT CONTENT-->
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align:top; padding-left:15px; padding-right:15px; text-align:center;">
                        <!--CONTENT-->
                        <?php print $content?>
                        <div id="vac-div" style="display:block; position:relative; width:450px; min-width:450px; margin:auto;">
                            <div style="height:1px; min-height:1px; width:100%; min-width:100%px; margin-top:15px;"></div>
                            <table id="vac_table" style="width:100%; min-height:200px; height:200px; text-align:center; margin:auto; background-image:url('<?php print base_path();?>themes/my_theme/images/info_bg.jpg'); background-repeat:repeat-x; text-align:center;" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td rowspan="2" style="vertical-align:top; text-align:left; padding:0; margin:0;">
                                        <div style="height:1px; max-height:1px; width:300px;"></div>
                                        <div style="width:100%; margin-top:5px; margin-left:10px; padding:0;"><h2>Внутренние вакансии</h2></div>
                                        <div style="width:100%; margin-top:10px; margin-left:7px; padding:0;">Здесь буит контент внутренних вакансий</div>
                                    </td>
                                    <td style="text-align:right; vertical-align:top; padding-top:5px; padding-right:5px; width:80px;">
                                        <img src="<?php print base_path();?>themes/my_theme/images/vac.gif" />
                                    </td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:bottom;">
                                        <div style="height:15px; min-height:15px;"></div>
                                        
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"><div style="height:15px; min-height:15px;"></div></td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <img src="<?php print base_path();?>themes/my_theme/images/info_downbg.jpg" width="100%" height="55px"/>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--END CONTENT-->
                    </td>
                </tr>
                <tr>
                    <td style="border-style:dotted">Тут буит пусто
                    </td>
                    <td style="border-style:dotted">Тута буут баннеры</td>
                    <td style="border-style:dotted">место под дугу</td>
                </tr>
            </table>
            <!--END-->
        </td>

Основная проблема в том, что когда я задираю таблицу с id="top-contetn-table" внизу ячейки, содержащей всё это добро, у меня остаётся пустое мсто равное по высоте её первоначальному размеру.

В последствии, когда движок выкидывает туда контент, это пустота не изменяет размеров. весь вопрос в том как эту пустоту побороть :( Ибо накладывать таблицы всёравно придётся - без слоёв я верстку под движок не сделаю, ибо фон собирается как аппликация, да еще поверх него накладвается кусок каонтента Notice + изменять размеры он должен строго пропорционально с таблицей id="top-contetn-table" в котрой выводится весь остальной контент и картинки по верх фона.

ЗЫ: что-то многа букав... smile

kizune

Дата 7.9.2007, 10:00 (ссылка)

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

Загрузка ...

Опытный

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

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

попробуй для этой таблицы задать такой стиль:

Код


 <table id="top-contetn-table" style="position:relative;margin-top:-490px; padding:0; height:100%; width:100%;">

kaa

Дата 7.9.2007, 16:06 (ссылка)

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

Загрузка ...

Опытный

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

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

kizune,
Всё, уже ничего не попробую - пришол умный человек и сверстал всё по правильному... Наконецто... smile

А моё всё затерли. Если найду черновик попробую обязательно, хотя бы из спортивного интереса!

Всем спасибо! smile

verstalishik

Дата 11.9.2007, 12:18 (ссылка)

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

Загрузка ...

Шустрый

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

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

у меня проблема, есть страничка слишком много текста и он не помещается на страничку. как это исправить.как сжать текст или растянуть страницу. это очень срочною помогите

kizune

Дата 11.9.2007, 12:38 (ссылка)

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

Загрузка ...

Опытный

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

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

имеешь ввиду не влезает в высоту и выезжает за пределы background?

verstalishik

Дата 11.9.2007, 15:40 (ссылка)

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

Загрузка ...

Шустрый

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

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

Цитата(kizune @ 11.9.2007, 12:38

)

имеешь ввиду не влезает в высоту и выезжает за пределы background?

проблема решена черз таблицу и center smile

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