VPF::Верстка разъехалась, и тянуться не хочет

Verstmaster

Дата 1.5.2008, 09:43 (ссылка)

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

Загрузка ...

Новичок

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

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

Добрый день всем

Есть такой код:

Код


<?
include_once "config_local.php";
include_once "config.php"; 
include($base_engine."sitecommon.inc");

?>

<html>
<head>
    <title>Untitled</title>
<style>
td{font-family:Tahoma;font-size:11px;color:#676767;}
a{color:#003663;text-decoration:none;}
.header{font-weight:bold;color:#003663;font-size:10px;}
.cap{font-weight:bold;color:#2558A1;}
.menu{text-decoration:none;color:#000000;}
.style1 {color: #185D96}
</style>
</head>

<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
<tr>
    
    <td colspan="5">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td background="img/back.gif" repeat-x width="100%" colspan="4"><img src="images/name.jpg"></td>
        </tr>
        <tr> 
            <form action="">
            <td width="112" height="41" background="images/bgsearch.gif" valign="top" style="padding-top:12px;padding-left:82px;"><input type="text" style="width:110;height:20"></td>
            <td><input type="image" src="images/enter.jpg"  border="0" align="left" ></td>
          </form>
            <td  background="img/m05.gif"  repeat-x><img src="images/m00.jpg" border="0" align="left" ><a href="index.html"><img src="images/m01.jpg" border="0"></a><a href=""><img src="images/m02.jpg" border="0"></a><a href=""><img src="images/m03.jpg" border="0"></a><a href=""><img src="images/m04.jpg" border="0"></a><a href=""><img src="images/m05.jpg" border="0"></a></td>
        </tr>
    </table>
    
        

<tr>
    <td valign="left" height="100%">
    <table cellpadding="0" cellspacing="0" border="0" height="100%">
        <tr>
            <td><img src="images/capnews.gif"></td>
        </tr>
        <tr>
            <td width="193" height="100%" background="images/bgleft.gif" valign="top" style="padding-top:15px;">
            <div style="padding-left:23px;padding-right:10px;">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td colspan="2" class="header">News Header</td>
                </tr>
                <tr>
                    <td valign="top" style="padding-top:2px;"><img src="images/y.gif" align="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                </tr>
                <tr>
                    <td><a href=""><img src="images/more.gif" border="0" vspace="5"></a></td>    
                </tr>
                <tr><td height="10"></td></tr>
                <tr>
                    <td colspan="2" class="header">News Header</td>
                </tr>
                <tr>
                    <td valign="top" style="padding-top:2px;"><img src="images/y.gif" align="left">Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</td>
                </tr>
                <tr>
                    <td><a href=""><img src="images/more.gif" border="0" vspace="5"></a></td>    
                </tr>
                <tr><td height="10"></td></tr>
                <tr>
                    <td colspan="2" class="header">News Header</td>
                </tr>
                <tr>
                    <td valign="top" style="padding-top:2px;"><img src="images/y.gif" align="left">Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci.</td>
                </tr>
                <tr>
                    <td><a href=""><img src="images/more.gif" border="0" vspace="5"></a></td>    
                </tr>
                <tr><td height="10"></td></tr>
                <? include $base_engine."sitemnu.inc";?> 
            </table>
            </div>
            </td>
        </tr>
    </table>
    </td>
    <td valign="top" width="196" height="100%" background="images/bgplan.gif">
    <table cellpadding="0" cellspacing="0" border="0" height="100%">
        <tr align="left">
            <td><img src="images/cap02.gif" ></td>
        </tr>
        <tr>
            <td><img src="images/plan01.jpg" usemap="#pl01" border="0"></td>
            <map name="pl01">
                <area shape="rect" coords="31,121,112,145" href="">
            </map>
        </tr>
        <tr>
            <td><img src="images/plan02.jpg" usemap="#pl02" border="0"></td>
            <map name="pl02">
                <area shape="rect" coords="31,121,112,145" href="">
            </map>
        </tr>
        <tr>
            <td><img src="images/plan03.jpg" usemap="#pl03" border="0"></td>
            <map name="pl03">
                <area shape="rect" coords="31,121,112,145" href="">
            </map>
        </tr>
        <tr>
            <td height="100%"></td>
        </tr>
    </table>
    </td>
    <td valign="top" height="100%" background="images/bgr.gif">
    <table cellpadding="0" cellspacing="0" border="0" height="100%">
        <tr>
            <td width="2%" background="img/backgreen.gif" repeat-x><img src="images/cap03.gif"></td>
        </tr>
        
        
        <tr>
            <td width="391" height="100%" valign="top">
            <? include $base_engine."sitemain.inc" ;?>            
            </td>
        </tr>
    </table>
    </td>
</tr>
<tr>
    <td colspan="3" width="780" height="36" background="images/bgmenu.gif" align="center" class="menu"><a href="" class="menu">Home</a> &nbsp;&nbsp;::&nbsp;&nbsp; <a href="" class="menu">Web Hosting</a> &nbsp;&nbsp;::&nbsp;&nbsp; <a href="" class="menu">Support</a> &nbsp;&nbsp;::&nbsp;&nbsp; <a href="" class="menu">About Us</a> &nbsp;&nbsp;::&nbsp;&nbsp; <a href="" class="menu">Help</a> &nbsp;&nbsp;::&nbsp;&nbsp; <a href="" class="menu">Contact Us</a></td>
</tr>
<tr>
    <td colspan="3" width="780" height="57" background="images/footer.gif" align="center">Copyright © 2002. <font color="#003663">Natural Hosting Inc.</font><br><a href="">Privacy Policy</a>   ::  <a href="">Terms Of Use</a> </td>
</tr>
</table>
</body>
</html>

Пока делал чисто в html было норм, в опере отбражалось на весь экран как и надо, потом программер внес изменения связанные с внедрением CMS и вся резиновость верстки ушла, код приведен выше, а вопрос в следующем, как вернуть резиновость верстки и как убрать отступы от картинки m00.jpg справа и слева?
В архиве файл html со всеми необходимыми картинками. Помогите плиз советом кто знает, срочно надо.

Присоединённый файл ( Кол-во скачиваний: 4 )

html.rar 204,03 Kb

demous

Дата 3.5.2008, 08:46 (ссылка)

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

Загрузка ...

Новичок

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

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

Нарезка вообще у тебя не правильно сделана.

1. лучше делать вложенные таблицы, а не colspan
2. background нужно заменить на style="background-image: url(путь до картинки/картинка.jpg); background-repeat: no-repeat (repeat-x, repeat-y);"
3. Лучше прописывать все в таблицу стилей (!удобней)
4. width="100%" поставить для всех таблиц
5. для каждой ячейки выставлять ширину либо в %, либо цифрой 100 (= 100px)
6. если используешь style (width, height) то величина ставиться в px или %
7. шаблоны, если используешь, лучше резать заново. (почти к любому шаблону прикрепляется psd файл). Если нету, то просто нарезку из имеющихся картинок заново сделать (нарезка шаблонов корявая и при небольшой потребности в изменениях получается не то что надо)

8. http://www.validator.w3.org - проверка на ошибки, полезно иногда заглядывать и туда

Добавлено через 7 минут и 49 секунд
Кстати в IE у тебя верстка не правильно отображается.
Опираться только на один браузер не надо.
Сужествует как минимум 3-4 браузера, в которых нужно проверять верстку (MS IE 6, MS IE 7, OPERA, FIREFOX MOZILLA). А по мимо этих существует еще с десяток популярных браузеров (AOL, LYNX, KONQUEROR, SAFARI, MOZILLA, NETSCAPE, ...)

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