korg
Newbie-
Posts
2 -
Joined
-
Last visited
korg's Achievements
Explorer (1/14)
0
Reputation
-
Самое элементарное - это выравнивание текста по центру, при вставке на сайт пришлось задавать каждому элементу отдельно, а при просмотре html файла у себя просто через браузер, такого не было, тоже самое с падингами и марджинами, при вставке на сайт всё смещалось,прошлось по месту двигать... так же фоны ячеек таблиц.... короче, я всё исправил, но хотелось бы получить умный совет, как нужно делать (верстать) в таких случаях, что учитывать и т.д.
-
Добрый вечер, говорю сразу - я новичок. Короче есть сайт, на страницу http://flagshtoki.com/flagshtoki-winder-2.htm нужно вставить готовую вёрстку. Проблема: нарушение стилей вёрстки при вставке на сайт... Помогите пожалуйста!!! <!doctype html> <html> <head> <meta charset="utf-8"> <title>Документ без названия</title> <link href="style.css" rel="stylesheet" type="text/css"> <link href="light.css" rel="stylesheet" type="text/css"> <link href="boxed-light.css" rel="stylesheet" type="text/css"> <link href="glass-blue.css" rel="stylesheet" type="text/css"> </head> <body> <div class="page" style="background:#FFF; width:920px; height:auto; margin-top:100px;"> <style> @charset "utf-8"; /* CSS Document */ .winder_box{ width:828px; height:380px; margin:0 auto; margin-top:60px; padding:10px 0 10px 0; border:#009cff 5px solid; } .winder_box img{ margin:0 35px; padding:0; position:relative; top:-70px; height:446px; width:auto; float:left; } .winder_text{ margin:0 auto; padding:0; width:260px; height:130px; text-align:center; } .winder_text span{ margin:0; padding:6px 100px; background:#1f3a4f; font-size:14px; color:#FFF; } .winder_text{ font-size:12px; } .info_block{ width:900px; height:auto; margin:0 auto; background:#505050; color:#FFF; text-align:center; font-size:16; pxpadding:0; } .winder_table{ width:900px; height:auto; margin:0 auto; padding:0; } .winder_table_img{ width:auto; height:200px; margin:0; padding:0 0 0 160px; border:none; border-bottom:#d9491a 12px solid; } .winder_table_img img{ display:inline; margin-left:0; width:180px; } .winder_table table{ margin:0 auto; padding:0; color:#FFF; width:900px; height:auto; text-align:center; font-size:12px; font-weight:800; border:none; } .winder_table table tr.first{ background:#009dff; color:#1f3b4f; font-size:14px; } .winder_table table tr.first td:first-child{ background:#fff; } .winder_table table tr.second{ background:#0e3070; color:1f3b4f; } .winder_table table tr.second td:first-child{ background:#fff; color:#1f3b4f; } .winder_table table tr.third{ background:#1f3b4f; color:#fff; } .winder_table table tr.third td:first-child{ background:#fff; color:#009dff; } .info_block2{ margin:30px auto; padding:0; width:650px; height:80px; } .info_block2 p{ font-size:16px; background:#1f3b4f; border-radius:40px; padding:30px 10px; float:left; margin:0 20px; color:#FFF; display:block; } .info_block2 p:hover{ background:#009dff; color:#1f3b4f; } .info_block2 img{ height:80px; margin:0; padding:0; float:left; } .winder_table2{ width:900px; height:auto; margin:0 auto; padding:0; margin-top:30px; } .winder_table2 table{ margin:0 auto; padding:0; color:#1f3b4f; width:900px; height:auto; text-align:center; font-size:12px; position:relative; top:0; font-weight:800; border:none; background:#e0e0e0; } .winder_table2 table img{ width:100px; height:auto; } .winder_table2 table tr{ border:#FFF 2px solid; } .winder_table2 table tr:first-child{ background:#009DFF; } .winder_table2 table tr.price{ background:#1f3b4f; color:#fff; } .winder_table2 table td{ width:128px; } .save_button{ margin:10px auto; padding:0; width:800px; height:80px; position:relative; } .save_button ul{ margin:0; padding:0; width:100%; height:80px; } .save_button li{ list-style:none; width:auto; margin:10px; float:left; } .save_button li a{ font-size:16px; background:#1f3b4f; border-radius:30px; padding:20px 20px; margin:0 auto; color:#FFF; display:block; text-align:center; } .save_button li a:hover{ background:#009dff; color:#1f3b4f; } </style> <div class="clear"></div> <div class="bottom"></div> <div class="winder_box"> <img src="http://flagshtoki.com/wp-content/uploads/2012/10/3.png" alt=""> <img src="http://flagshtoki.com/wp-content/uploads/2012/10/4.png" alt=""> <img src="http://flagshtoki.com/wp-content/uploads/2012/10/6.png" alt=""> <img src="http://flagshtoki.com/wp-content/uploads/2012/10/7.png" alt=""> </div> <div class="winder_text"> <span>WINDER</span> <p>Это универсальные, переносные<br>флагштоки. Применяются в каждом<br>месте и в любое время</p> </div> <div class="winder_table"> <div class="winder_table_img"> <img src="http://flagshtoki.com/wp-content/uploads/2012/10/alu.png" alt=""> <img src="http://flagshtoki.com/wp-content/uploads/2012/10/feather.png" alt=""> <img src="http://flagshtoki.com/wp-content/uploads/2012/10/bat.png" alt=""> <img src="http://flagshtoki.com/wp-content/uploads/2012/10/wing.png" alt=""><!—-> </div> <table> <tr class="first"> <td></td><td colspan="3">WINDER-ALU</td><td colspan="3">WINDER- FEATHER</td><td colspan="3">WINDER-BAT</td><td colspan="3">WINDER-WING</td> </tr> <tr class="second"> <td>Версия флагштока</td><td>2,0м</td><td>3,1м</td><td>4,2м</td><td>2,0м</td><td>3,1м</td><td>4,2м</td><td>2,0м</td><td>3,1м</td><td>4,2м</td><td>1,75м</td><td>2,8м</td><td>3,9м</td> </tr> <tr class="second"> <td>Количество элементов</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td><td>3</td><td>4</td><td>5</td> </tr> <tr class="third"> <td style="color:#009dff; background:#ffffff">Цена флагштока</td><td>1 113,60</td><td>1 392,00</td><td>1 809,60</td><td>1 113,60</td><td>1 392,00</td><td>1 809,60</td><td>1 113,60</td><td>1 392,00</td><td>1 809,60</td><td>1 113,60</td><td>1 392,00</td><td>1 809,60</td> </tr> <tr class="third"> <td>Цена флага</td><td colspan="3">индивидуальный расчёт</td><td colspan="3">индивидуальный расчёт</td><td colspan="3">индивидуальный расчёт</td><td colspan="3">индивидуальный расчёт</td> </tr> </table> </div> <div class="info_block2"> <img src="http://flagshtoki.com/wp-content/uploads/2012/10/10.png" alt=""> <p>МНОГО ФОРМАТОВ НА ИНДИВИДУАЛЬНЫЙ ЗАКАЗ</p> <img src="http://flagshtoki.com/wp-content/uploads/2012/10/9.png" alt=""> </div> <div class="winder_table2"> <table> <tr> <td colspan="8">ВАРИАНТЫ ОСНОВАНИЯ</td> </tr> <tr> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/12.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/11.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/14.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/15.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/16.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/17.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/18.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/19.png" alt=""></td> </tr> <tr class="price"> <td>2 506 руб.</td> <td>7 656 руб.</td> <td>1 392 руб.</td> <td>1 671 руб.</td> <td>2 784 руб.</td> <td>1 671 руб.</td> <td>2 645 руб.</td> <td>3 341 руб.</td> </tr> <tr> <td>3х квадратное<br>основание из полимербетона<br>вес: 29кг</td> <td>3х круглое<br>основание из полимербетона<br>вес: 37кг</td> <td>квадратное<br>основание из полимербетона<br>30х30х6см<br>вес: 6кг</td> <td>квадратное<br>основание из полимербетона<br>37х37х6см<br>вес: 9кг</td> <td>квадратное<br>основание из полимербетона<br>41х41х8см<br>вес: 14кг</td> <td>круглое<br>основание из полимербетона<br>?39х6см<br>вес: 8кг</td> <td>круглое<br>основание из полимербетона<br>?46х8см<br>вес: 13кг</td> <td>круглое<br>основание из полимербетона<br>?49х9см<br>вес: 16кг</td> </tr> </table> <table> <tr> <td colspan="7">ВАРИАНТЫ ОСНОВАНИЯ</td> </tr> <tr> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/13.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/20.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/21.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/22.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/23.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/24.png" alt=""></td> <td><img src="http://flagshtoki.com/wp-content/uploads/2012/10/25.png" alt=""></td> </tr> <tr class="price"> <td>5 847 руб.</td> <td>1 253 руб.</td> <td>836 руб.</td> <td>1 392 руб.</td> <td>670 руб.</td> <td>4 176 руб.</td> <td>2 367 руб.</td> </tr> <tr> <td>основание из полимербетона с плечами<br>высота: 15см<br>диапазон: 140см<br>вес: 10кг</td> <td>ротатор<br>длина: 30см<br>вес: 0,4кг</td> <td>стержень вбиваемый вращающийся<br>длина: 60см<br>вес:0,75кг</td> <td>стальное вкручивающееся основание<br>вес: 1,5кг</td> <td>наездное основание<br>вес: 1,5кг</td> <td>тяжелый чемодан с вращающейся гильзой<br>вес: 14,5кг</td> <td>стальное круглое основание<br>вес: 6кг</td> </tr> </table> </div> <div class="save_button"> <ul> <li><a href="">ПОСМОТРЕТЬ И СКАЧАТЬ ПРАЙС В PDF</a></li> <li><a href="">ИНСТРУКЦИЯ МОНТАЖА</a></li> <li><a href="">ФОТОГАЛЕРЕЯ</a></li> </ul> </div> <div class="info_block"> <p>ООО «ВЕРТЕК»<br> ТЕЛ.+7(495)720-47-15 (Центральный офис многоканальный)<br> SKYPE: FLAG_SHTOKI<br> WWW.FLAGSHTOKI.COM<br> mailto:info@flagshtoki.com</p> </div> </div> </body> </html>