Помогите доработать "сайт")))

Marina-Midas · January 12, 2016

Ребята, всем доброго времени суток. Вот только недавно начала интересоваться темой сайта строения, получается ну скажем очень и очень нехорошо))). Не знаю как сделать так чтобы, когда увеличиваешь масштаб или уменьшаешь не съезжали буквы и вообще "сайт" оставался одной и той же формы и конструкции.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Оптика</title><link href="style.css" style="text/css" rel="stylesheet"></head><body><!--SinOptic.kz--><table id="table_global" width="795"><tr><td id="td_header">SinOptic</td><td id="td_header2">Интернет Магазин Оптики и Контактных Линз<p >Тел:</p></td></tr></table><!--SinOptic.kz--><!-- MENU TOP --><div id="table"><table id="table_table"><tr><th id="padding"><a href="#"  target="_blank">Главная</a></th><th><a href="#"  target="_blank">Доставка</a></th><th><a href="#"  target="_blank">Статьи</a></th><th><a href="#"  target="_blank">Контакты</a></th><th><a href="#"  target="_blank">Изготовление очков</a></th><th><a href="#"  target="_blank">Аксессуары</th></a></tr><div id="sales"><h1 id="line"><p id="red">%</p><span id="blue">НА ВСЕ ТОВАРЫ ИНТЕРНЕТ</span> <p id="red">МАГАЗИНА</p></h1></div></table></div><!-- MENU TOP END --><!-- MENU LEFT --><div id="menu6"> <ul> <li><a href="#1">Оправы</a></li> <li><a href="#2">Линзы очковые</a></li> <li><a href="#3">Солнцезащита</a></li> <li><a href="#4">Спортивные очки</a></li> <li><ahref="#5">Контактные линзы</a></li> </ul> </div><!-- MENU LEFT END --><!-- TEXT --><table width="100%" cellpadding="0" cellspacing="0" border="0" class="catalog">            <tr>          <td><table width="30%" cellpadding="0" cellspacing="0" border="0" class="items"><tr><td colspan="2" class="house_name">Диоптрия </td></tr><tr><td><a href="#" class="structure"><img border="0" src="images/Screenshot_2.png" alt="Диоптрия." width="200" height="157"></a><table width="100%" cellpadding="0" cellspacing="0" border="0" class="tparam"><tr><td width="52%">Диоптрия</td><td width="48%">7</td></tr><tr><td width="52%">Диоптрия:</td><td width="48%">0</td></tr><tr><td width="52%">Диоптрия:</td><td width="48%">1</td></tr><tr><td width="52%"> Диоптрия:</td><td width="48%">1</td></tr><tr><td width="52%">Диоптрия:</td><td width="48%">3,9 x 4,1</td></tr><tr><td width="52%"> Диоптрия:</td><td width="48%">Диоптрия</td></tr><tr><td width="52%"> Диоптрия:</td><td width="48%"> Диоптрия</td></tr></table></td></tr></table> </td>          <td><table width="30%" cellpadding="0" cellspacing="0" border="0" class="items"><tr><td colspan="2" class="house_name">Диоптрия</td></tr><tr><td><a href="Диоптрия" class="structure"><img border="0" src="images/menu6.gif" alt="Диоптрия" width="200" height="157"></a><table width="100%" cellpadding="0" cellspacing="0" border="0" class="tparam"><tr><td width="52%">Диоптрия</td><td width="48%">31,7</td></tr><tr><td width="52%">Диоптрия</td><td width="48%">0</td></tr><tr><td width="52%">Диоптрия</td><td width="48%">1</td></tr><tr><td width="52%"> Диоптрия</td><td width="48%">1</td></tr><tr><td width="52%">Диоптрия:</td><td width="48%">6,4 x 7,9</td></tr><tr><td width="52%">Диоптрия</td><td width="48%"></td></tr><tr><td width="52%"> Диоптрия</td><td width="48%">Диоптрия.</td></tr><tr><td width="52%"> Диоптрия:</td><td width="48%"> Диоптрия</td></tr></table></td></tr></table> </td>          <td><table width="30%" cellpadding="0" cellspacing="0" border="0" class="items"><tr><td colspan="2" class="house_name">Диоптрия</td></tr><tr><td><a href="file:///E:/%D0%BF%D0%B0%D0%BF%D0%BA%D0%B0%20%D1%81%D0%B0%D0%B9%D1%82%D0%B0%202/%D0%A2%D1%80%D0%B5%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%BE%D1%87%D0%BD%D1%8B%D0%B9/big_img.html" target="_blank"><img border="0" src="images/background.jpg" alt="Диоптрия" width="200" height="157"></a><table width="100%" cellpadding="0" cellspacing="0" border="0" class="tparam"><tr><td width="52%">Диоптрия</td><td width="48%">53,4</td></tr><tr><td width="52%">Диоптрия:</td><td width="48%">3</td></tr><tr><td width="52%">Диоптрия:</td><td width="48%">8</td></tr><tr><td width="52%"> Диоптрия:</td><td width="48%">2</td></tr><tr><td width="52%">Диоптрия:</td><td width="48%">6 x 6,6</td></tr><tr><td width="52%"> Диоптрия:</td><td width="48%">Диоптрия</td></tr><tr><td width="52%"> Диоптрия:</td><td width="48%">Диоптрия</td></tr></table></td></tr></table> </td></tr></table><div id="footer"><table id="table_footer"><tr><th><a href="file:///E:/%D0%BF%D0%B0%D0%BF%D0%BA%D0%B0%20%D1%81%D0%B0%D0%B9%D1%82%D0%B0%202/index.html"  target="_blank">Главная</a></th><th><a href="#"  target="_blank">Доставка</a></th><th><a href="#"  target="_blank">Контакты</a></th><th><a href="file:///E:/%D0%BF%D0%B0%D0%BF%D0%BA%D0%B0%20%D1%81%D0%B0%D0%B9%D1%82%D0%B0%202/index.html#top">Наверх</a></th><tr><th colspan="4"><font size="3" color="black">SinOptic.kz © 2016</font></th></tr></table></div></div>    </body></html>

CSS:

body{    margin:0;    padding:0;    background-image: url(images/background.jpg);    background-repeat: no-repeat;    }    #GLOBAL_DIV{width:auto;height:auto;}    /* SinOptic.kz */    #header_global{background-color:#FFFFFF;}    #table_global{border-collapse: collapse;border-spacing: 0px;background-color: #192429;margin: 10px 0px 0px;opacity: 0.7;color: #FFF;width: 100%;}#td_header{font-family: Verdana,Tahoma,sans-serif;font-size: 50px;color: #B3D2E4;font-weight: 900;}#td_header2{font-family: Verdana,Tahoma,sans-serif;font-weight: 700;line-height: 20%;opacity: 0.7;}/* MENU TOP */        #table a {     -moz-transition: all 0.1s ease-in-out;     -o-transition: all 0.1s ease-in-out;     -webkit-transition: all 0.1s ease-in-out;     color:white;     display:block;     text-decoration:none;     }         #table a:hover {     -webkit-transform: translate(8px,0);     -moz-transform: translate(8px,0);     -o-transform: translate(8px,0);     color: #1FA2E1;     }    #table_table{    background-color: #192429;    margin: 10px 0px 0px;    opacity: 0.7;    color: #FFF;    width: 100%;    }            tr, th {    padding: 0px;    }    #padding{    padding: 0 0 0 0px;    }    /* MENU TOP END */        /* MENU LEFT */    #menu6 ul { list-style: none; margin: 0; padding: 0; opacity: 0.8; }    #menu6 img {    border: none; }    #menu6 { width: 200px; margin: 5px 0 0 0; }    #menu6 li a {    height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;    margin: 0; font-size: 10pt; font-weight: bold; background: #FFFFFF; height:    24px; text-decoration: none; }    #menu6 li a:link,    #menu6 li a:visited {    color: #FFFFFF; display: block; background:    url(images/menu6.gif);    padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6    li a:active { color: #00A4E4; background:    url(images/menu6.gif)    0 -32px; padding: 8px 0 0 10px; }        /* MENU LEFT END */        /* SALES */        #sales{    position:absolute;    top:111px;    height:150px;    padding: 1px 5px;    color: #000000;    margin:0 200px;    width:560px;    font-size:14px;    text-align:center;    }        #line{    line-height:0%;    }        #red{    color:#A51717;    }        #blue{    color:#00A4E4;    }        /* SALES END */        /* TEXT */        #wraptext{    margin:10px;    font-family:Arial san-serif;    font-size:20px;        }        /* TEXT END */        /* FOOTTER */        #table_footer {    background-image: url(images/Screenshot_2.png);        background-size:100%;    background-repeat:no-repeat;    color: #FFF;    width: 100%;    height:100px;    font-size:19px;    }        #footer a {     -moz-transition: all 0.1s ease-in-out;     -o-transition: all 0.1s ease-in-out;     -webkit-transition: all 0.1s ease-in-out;     color:;     display:block;     text-decoration:none;     }         #footer a:hover {     -webkit-transform: translate(8px,0);     -moz-transform: translate(8px,0);     -o-transform: translate(8px,0);     color: #1FA2E1;     }    /* FOOTTER END */        .catalog{    border:1px solid black;    }        #back{        border:1px solid black;    opacity:0.7;    }        #center{        margin:50px 0 0 0px;        }

Ребята, прошу Вас не судите сторого и не обижайте меня плохими комментариями. Я ведь девочка, а вы мужчины, поэтому будьте так любезны помогите))) Заранее благодарна!

Edited January 13, 2016 by klierik
Перенёс код в спойлер. Устное предупреждение, в следующий раз за такую простынь выпишу предупреждение!

abrahadabra · January 12, 2016

Я ведь девочка…

точно-точно? Это как на дорогах на маленьких красных машинках такие с туфелькой на заднем стекле?

Не делайте на это упор. Здесь вы веб-разработчик в первую очередь, а девочка уже … скажем так, не в первую очередь.

… а вы мужчины

не все.

… поэтому будьте так любезны помогите)))

вот именно поэтому? То есть, кто не мужчина, от тех помощь не примете?

И всё же попробуем помочь.

Выкладывать простыни кода сюда не надо — неудобно читать. Лучше выкладывайте на хостинг и давайте ссылку. Если хостинга нет, хотя бы на jsfiddle. Например так: https://jsfiddle.net/qqgp9sjk/

Вот теперь можно ваш сайт анализировать.

Надпись в шапке наползает сама на себя. Это из-за line-height: 20%;

% на все товары вылазит направо. Так абсолютно спозиционирован и не обучен на месте сидеть.

И, кстати, табличная вёрстка вроде как считается моветоном. Имеет смысл сделать попроще. Описать структуру, и только тогда расставить элементы по местам.

rus · January 12, 2016

Marina-Midas, а фотка симпатичной девушки - это видимо что бы уж наверняка помогли?

Marina-Midas · January 13, 2016

Marina-Midas, а фотка симпатичной девушки - это видимо что бы уж наверняка помогли? Добрый день))) Заходите в мой мир, будем дружить marina-midas@mail.ru)))

Я ведь девочка…
точно-точно? Это как на дорогах на маленьких красных машинках такие с туфелькой на заднем стекле?
Не делайте на это упор. Здесь вы веб-разработчик в первую очередь, а девочка уже … скажем так, не в первую очередь.

… а вы мужчины
не все.

… поэтому будьте так любезны помогите)))
вот именно поэтому? То есть, кто не мужчина, от тех помощь не примете?

И всё же попробуем помочь.
Выкладывать простыни кода сюда не надо — неудобно читать. Лучше выкладывайте на хостинг и давайте ссылку. Если хостинга нет, хотя бы на jsfiddle. Например так: https://jsfiddle.net/qqgp9sjk/
Вот теперь можно ваш сайт анализировать.
Надпись в шапке наползает сама на себя. Это из-за line-height: 20%;

% на все товары вылазит направо. Так абсолютно спозиционирован и не обучен на месте сидеть.

И, кстати, табличная вёрстка вроде как считается моветоном. Имеет смысл сделать попроще. Описать структуру, и только тогда расставить элементы по местам.

А можно с Вами поближе познакомиться, marina-midas@mail.ru - это мой мир, заходите будем дружить, или напишите свой и-майл, я Вас найду)))

Vlad02 · January 13, 2016

rus конфеты и цветы не забудь :rofl:

Int · January 13, 2016

Это бот что ли? Или сюда уже вместо сайта знакомств ходят?

Приведённый код навевает мысли, что автор писал его году в 2003-м. Чем разбираться, я бы посоветовал переписать с нуля. Зачем учиться по учебникам пятнадцатилетней давности? Какой в этом смысл?

rus · January 13, 2016

я Вас найду)))

и уничтожу... :rofl:

все зашли на мой мир на маил ру и посмотрели?

abrahadabra · January 13, 2016

все зашли на мой мир на маил ру и посмотрели?

по крайней мере попытались. Но там ничего не понятно. Что это? Что там вообще?

rus · January 13, 2016

по крайней мере попытались. Но там ничего не понятно. Что это? Что там вообще?

соцсеть, при чем одна из первых!

abrahadabra · January 13, 2016

так это что, такой способ завлечения в соцесети!?

rus · January 13, 2016

так это что, такой способ завлечения в соцесети!?

да фиг его/ее знает... все может быть )

abrahadabra · January 13, 2016

кстати, на почту что-то нет ответа пока.
Пропала деффачка

ShumNo · January 13, 2016

Да просто секретарше поручились обновить сайт вон она скопировала и давит на то что она женщина и мол сделайте бесплатно.

Marina-Midas · January 14, 2016

Всем привет. Да никакая я не секретарша))). И тем более не завлекаю ни в какие сети. А по поводу кода 2003 года, Вы правы, плохо я ещё разбираюсь в этом всём, но пока как могу))) Вы мне скажите лучше пожалуйста вот такую вещь, как сделать, чтобы всё содержимое было по центру фонового изображения, вне зависимости от масштаба как вот тут:

http://www.rodenstock.com/ru/ru/house-of-better-vision/%D0%B7%D0%B0%D1%87%D0%B5%D0%BC-%D0%BD%D1%83%D0%B6%D0%BD%D1%8B-%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%BD%D1%8B%D0%B5-%D0%BE%D1%87%D0%BA%D0%B8.html?print=true"

Заранее спасибо)))

klierik · January 15, 2016

Эластичные шаблоны + https://toster.ru/q/36853

Sign In

Помогите доработать "сайт")))

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information