Jump to content
  • 0

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

Marina-Midas

Asked by Marina-Midas,

 Share

Question

Marina-Midas Explorer

Marina-Midas

Posted
Posted (edited)

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

 

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 by klierik
Перенёс код в спойлер. Устное предупреждение, в следующий раз за такую простынь выпишу предупреждение!
Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
abrahadabra Explorer

abrahadabra

Posted
Posted

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

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

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

 

… а вы мужчины

не все.

 

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

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

 

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

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

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

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

 

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

 

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

Link to comment
Share on other sites
  • 0
Marina-Midas Explorer

Marina-Midas

Posted
  • Author
Posted

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

 

 

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

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

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

 

… а вы мужчины

не все.

 

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

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

 

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

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

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

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

 

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

 

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

 

 

 

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

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

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

 

… а вы мужчины

не все.

 

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

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

 

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

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

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

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

 

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

 

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

 

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

Link to comment
Share on other sites
  • 0
Int Explorer

Int

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
Marina-Midas Explorer

Marina-Midas

Posted
  • Author
Posted

Всем привет. Да никакая я не секретарша))). И тем более не завлекаю ни в какие сети. А по поводу кода 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"

 

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept