-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Silver Raven
-
-
Народ, выручайте!
Получил курсовую работу на создание web-сайта абстрактного сервисного центра (кое как, с ней справился. хотя весь мой опыт - несколько сайтов-визиток, созданных много лет назад.). Не использовал какие-либо CMS, просто взял понравившийся шаблон на html, да перепилил его в Дримвивере.Поскольку тащил код отовсюду, вылезли косяки верстки (хотя, в том же Дримвивере, все было ок):
Скриншот:
Код страницы:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Гарантийный ремонт</title> <script src="resources/scripts/jquery.min.js" type="text/javascript"></script> <script src="resources/scripts/sez.service.center.js" type="text/javascript"></script> <link rel="stylesheet" href="resources/styles/main.css" type="text/css" /> </head> <body> <div id="header"> <div class="inner cf"> <div id="navigation" class="login-signup"> <ul> <li><a href="login_signup.html">ВХОД | РЕГИСТРАЦИЯ</a></li> </ul> </div> <div id="navigation"> <ul> <li><a href="index.html">О НАС</a></li> <li class="current-menu-item"><a href="warranty_service.html">ГАРАНТИЙНЫЙ РЕМОНТ</a></li> <li> <a href="#">ПЛАТНЫЕ УСЛУГИ</a> <ul> <li><a href="paid_service_pc.html">» Ремонт компьютеров<br/> и ноутбуков</a></li> <li><a href="paid_service_gadgets.html">» Ремонт планшетов<br/> и телефонов</a></li> </ul> </li> <li><a href="gallery.html">ГАЛЕРЕЯ</a></li> <li><a href="contacts.html">КОНТАКТЫ</a></li> </ul> </div> </div> </div> <hr /> <div id="content" class="home"> <div class="inner"> <div id="logo" class="content logo"> <h1> <img src="resources/images/logo.jpg" width="1000" height="180" alt="Сервисный центр SEZ" /></h1> </div> <h2></h2> <div class="section about"> <h3>Мы обслуживаем технику всех ведущих производителей</h3> <center><img src="resources/images/services/warranty_service.jpg" width="565" height="316" alt=""/></center> </div> <div class="brands_patent text-center" id="pdopage"> <div class="pagination" style="display: flex;"> <ul class="pagination" style="display: flex;"></ul> </div> <div class="brands brand_hp"> <a href="https://hp.com"> <img class="img-responsive" title="Ремонт устройств HP" alt="hp" src="resources/images/icons/partner_hp.jpg"> <span class="linktomodel">HP</span> </a> </div> <div class="brands brand_sony"> <a href="https://sony.com"> <img class="img-responsive" title="Ремонт устройств Sony" alt="sony" src="resources/images/icons/partner_sony.jpg"> <span class="linktomodel">SONY</span> </a> </div> <div class="brands brand_asus"> <a href="https://asus.com"> <img class="img-responsive" title="Ремонт устройств Asus" alt="asus" src="resources/images/icons/partner_asus.jpg"> <span class="linktomodel">ASUS</span> </a> </div> <div class="brands brand_lenovo"> <a href="https://lenovo.com"> <img class="img-responsive" title="Ремонт устройств Lenovo" alt="lenovo" src="resources/images/icons/partner_lenovo.jpg"> <span class="linktomodel">LENOVO</span> </a> </div> <div class="brands brand_dell"> <a href="https://dell.com"> <img class="img-responsive" title="Ремонт устройств Dell" alt="dell" src="resources/images/icons/partner_dell.jpg"> <span class="linktomodel">DELL</span> </a> </div> <div class="brands brand_msi" style="border-bottom: none;"> <a href="https://msi.com"> <img class="img-responsive" title="Ремонт устройств MSI" alt="msi" src="resources/images/icons/partner_msi.jpg"> <span class="linktomodel">MSI</span> </a> </div> <div class="brands brand_samsung" style="border-bottom: none;"> <a href="https://samsung.com"> <img class="img-responsive" title="Ремонт устройств Samsung" alt="samsung" src="resources/images/icons/partner_samsung.jpg"> <span class="linktomodel">SAMSUNG</span> </a> </div> <div class="brands brand_toshiba" style="border-bottom: none;"> <a href="https://toshiba.com"> <img class="img-responsive" title="Ремонт устройств Toshiba" alt="toshiba" src="resources/images/icons/partner_toshiba.jpg"> <span class="linktomodel">TOSHIBA</span> </a> </div> <div class="brands brand_acer" style="border-bottom: none;"> <a href="https://acer.com"> <img class="img-responsive" title="Ремонт устройств Acer" alt="acer" src="resources/images/icons/partner_acer.jpg"> <span class="linktomodel">ACER</span> </a> </div> <div class="brands brand_canon" style="border-bottom: none;"> <a href="https://canon.com"> <img class="img-responsive" title="Ремонт устройств Canon" alt="canon" src="resources/images/icons/partner_canon.jpg"> <span class="linktomodel">CANON</span> </a> </div> </div> <h2></h2> <div class="section about"> <h3>Если производителя вашего устройства нет в списке, вы всегда можете воспользоваться нашими платными услугами</h3> <br /><p><a href="paid_service_pc.html" class="ui-button big">Здесь</a></p> </div> </div> </div> <hr /> <div id="footer"> <div class="inner"> <p> <span>© 2018 by <a href="index.html">Сервисный центр SEZ</a>.</span> </p> </div> </div> </body> </html>
CSS (все, что добавлял я отделено комментом Silver Raven CSS Styles):
@import url("reset.css"); @import url("form.css"); body { background: #444; font: 13px/22px Helvetica, Arial, sans-serif; } /* #header ==========================================================*/ #header { padding: 19px 0 0; } #navigation {} #navigation > ul > li { padding-bottom: 17px; } #navigation > ul > li > a { font-size: 14px; padding: 6px 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #navigation li ul { margin-top: -2px; padding: 7px 0; white-space: nowrap; z-index: 1111; -webkit-border-radius: 5px; -webkit-border-top-left-radius: 0; -moz-border-radius: 5px; -moz-border-radius-topleft: 0; border-radius: 5px; border-top-left-radius: 0; } #navigation li ul a { color: #c1e4f6; line-height: 18px; padding: 0 15px 0 9px; } #navigation ul ul, #navigation > ul > li:hover > a { background: #62a6c9; } #navigation > ul > li.current-menu-item { background: url("../images/navigation/navigation_cursor.png"); } /* #content ==========================================================*/ #content { padding: 50px 0; } /* .home ==========================================================*/ .home {} .home h2 {} .home h2 span { padding: 0 30px; top: -9px; } .home .section { padding: 35px 0 50px; } .home .logo { padding: 71px 0 90px; } .home .about {} .home .about h3 { font-size: 48px; line-height: 50px; } .home .works-list { margin: -20px 0 0 -20px; } .home .works-list li { margin: 20px 0 0 20px; } .home .more { margin: -20px 0 0 -20px; } .home .more .text { margin: 20px 0 0 20px; width: 300px; } .home .blog {} .home .blog .text p { font-size: 12px; line-height: 18px; } .home .blog .latest-posts { margin: -20px 0 0 -20px; width: 720px; } .home .blog .post { margin: 20px 0 0 20px; width: 220px; } .home .blog .post h3 { line-height: 20px; margin-bottom: 15px; } .home .blog .tweet { background-image: url("../images/icons/twetter.png"); background-position: 0 3px; margin-left: 20px; padding-left: 35px; width: 185px; } .home .tweet .follow { margin-top: 10px; } /* .columns ==========================================================*/ .columns {} .columns .main { margin-left: 80px; width: 720px; } .portfolio .back-to-top { margin-top: 50px; padding-left: 180px; } #content .back-to-top span { background: #fff url("../images/gallery/back.png") 14px 1px no-repeat; padding: 3px 20px 3px 40px; top: -9px; } .portfolio .message { padding-top: 45px; } .columns .sidebar { width: 140px; } .columns #logo { margin-bottom: 55px; } .sidebar .tags-list { font-size: 16px; } /* @ ==========================================================*/ .thumb { background-image: url("../images/gallery/gallery_thumb_shadow.png"); padding-bottom: 8px; width: 220px; } .thumb .thumb-inner { height: 145px; } .tags-list {} .tags-list li + li { margin-top: 3px; } .tags-list li {} .tags-list a { padding: 3px 0; } .tags-list .posts { right: 0; top: 7px; } .badge { background: #ddd; display: inline-block; line-height: 15px; padding: 0 5px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .works-list .work + .work { margin-top: 50px; } .work {} .work .description { width: 220px; } .work .gallery { background: url("../images/gallery/gallery_shadow.png"); padding-bottom: 8px; width: 480px; } .work .gallery .photos { height: 340px; width: 460px; } .work .gallery .nivo-controlNav { padding: 1px 2px 8px 9px; right: 0; top: 0; z-index: 1112; } .work .gallery .nivo-controlNav .nivo-control { background: url("../images/gallery/pages.png"); height: 7px; text-indent: -9999px; width: 7px; } .work .gallery .nivo-controlNav .nivo-control + .nivo-control { margin-left: 3px; } .work .gallery .nivo-controlNav .nivo-control.active { background-position: -7px 0; } .message { padding: 2px 0; } .message h2 { font-size: 36px; line-height: 40px; } .text {} .text h2.with-icon, .text h3.with-icon { padding-left: 40px; } #content h2.with-icon, #content h3.with-icon { background-position: 0 3px; } .text .checkmark { background-image: url("../images/icons/check_mark.png"); } .text h2, .text h3, .text ul, .text p { margin-bottom: 10px; } .text ul {} .text ul li + li { margin-top: 7px; } .text ul li { background: url("../images/icons/check_mark_small.png") 0 1px no-repeat; padding-left: 25px; } .text .meta { color: #cbcbcb; } .posts .post + .post { margin-top: 50px; } .post {} .post .meta {} .post .meta li + li { margin-left: 20px; } .post-header { margin-bottom: 40px; } .post-header h2 { margin-bottom: 10px; } .post-body {} .post-body .thumb { margin: 0 22px 22px 0; } .post-body .excerpt { line-height: 30px; } .post-footer { margin-top: 15px; } .post-footer .meta { padding-right: 15px; top: -10px; } .posts + .pagination { margin-top: 60px; } .pagination {} .pagination .page { top: -11px; } .pagination .next { padding-left: 15px; } .pagination .next a { background: url("../images/posts/next.png") 100% 1px no-repeat; padding-right: 30px; } .pagination .next a:hover { background-position: 100% -17px; } .pagination .prev { padding-right: 15px; } .pagination .prev a { background: url("../images/posts/prev.png") 0 1px no-repeat; padding-left: 30px; } .pagination .prev a:hover { background-position: 0 -17px; } /* #footer ==========================================================*/ #footer { padding: 20px 0; } #footer span + span { margin-left: 8px; } /* ~ ==========================================================*/ body, #content .tags-list a, #content .pagination a:hover, #navigation > ul > li > a { color: #888; } .home .blog { color: #999; } .message h2, .home .about h3 { color: #333; } .post-header h2, #content .post-header h2 a, .text h2, #content .text h2 a, .text h3, #content .text h3 a { color: #444; } #content a, #content .post-header h2 a:hover, #content .tags-list a:hover, #content .tags-list .current-menu-item a, #content .text a:hover { color: #61a5c9; } #footer a, #content .badge, #navigation li li a:hover, #navigation > ul > li:hover > a { color: #fff; } .tags-list .current-menu-item .posts, a:hover .badge, .badge:hover { background: #62a6c9; } #content, .pagination .page, .home h2 span, .back-to-top span, .post-footer .meta, .work .gallery .nivo-controlNav { background: #fff; } .thumb, .home .tweet, .text h2.with-icon, .text h3.with-icon, .work .gallery, #navigation > ul > li.current-menu-item { background-position: 50% 100%; background-repeat: no-repeat; } .home h2, .pagination, .back-to-top { border-top: 1px dashed #ddd; } .thumb .thumb-inner, .work .gallery-inner { border: 1px solid #dadada; padding: 9px; } .tags-list a, .home .tweet .follow, #navigation li:hover ul, #navigation li ul a, .back-to-top, .back-to-top a, .pagination a, .work .gallery .nivo-controlNav .nivo-control { display: block; } hr, #navigation li ul { display: none; } .work .gallery, #navigation, #navigation > ul > li, .columns .sidebar, .columns .main, .home .works-list li, .home .more .text, .home .blog .latest-posts, .home .blog .tweet, .message h2, .post-body .thumb, .post-footer .meta, .post .meta li, .pagination .prev, .home .blog .latest-posts .post, .work .gallery .nivo-controlNav .nivo-control { float: left; } .pagination .next, .work .description, .message .ui-button, .post-footer .back-to-top a, #header .search { float: right; } /* Add by Silver Raven */ #header .login-signup { float: right;} .home .blog .post h3, .post-body .excerpt { font-size: 18px; } .text h2, .text h3, .home .about p { font-size: 24px; line-height: 36px; } .post-header h2, .home .about h3 { font-size: 48px; line-height: 50px; } .badge, .home .blog .meta, .home .tweet .follow, #navigation li ul a { font-size: 11px; } .text h2, .text h3, .message h2, .badge, .post-header h2, .home .more .continue, .home .about h3, #navigation > ul > li > a { font-weight: bold; } .home .works-list, .home .more, .work .gallery .photos, .home .blog, .message, .work .gallery .nivo-controlNav { overflow: hidden; } #navigation li ul, .tags-list .posts, .nivo-controlNav, .post-footer .meta, .tags-list li { position: absolute; } .tags-list li, .home h2 span, .post-footer, .pagination .page, #content .back-to-top span, .work .gallery .photos, #navigation > ul > li { position: relative; } #footer, .home h2, .home .logo, .home .about { text-align: center; } #content .badge:hover, #content .tags-list a:hover, #content .text h2 a:hover, #content .text h3 a:hover, #content .post-header h2 a:hover, #content .pagination a:hover, #content a.back-to-top:hover, #content .back-to-top a:hover { text-decoration: none; } #footer a:hover, #content a:hover { text-decoration: underline; } .home h2, #content .pagination .page, #content .pagination a, #content .back-to-top, #content .back-to-top a { color: #bbb; font-size: 9px; text-transform: uppercase; } #header > .inner, #content > .inner, #footer > .inner { margin: 0 auto; width: 940px; } .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } /* ========== Silver Raven CSS Styles ========== */ /* Стили для warranty_service.html */ .brands_patent { text-align:center; } .brands_patent .brands { border:1px solid #ebebeb; width:20%; display:block; float:left; margin-bottom:-1px; margin-left:-1px; } .brands_patent .brands:hover { border:1px solid #1ab9ef; position:relative; } .brands_patent .brands:nth-child(5n+1) { border-left:none; } .brands_patent .brands:nth-child(5n-5) { border-right:none; } .brands_patent .brands:nth-child(-n+5) { border-top:none; } .linktomodel { display:block; margin-top:5px; margin-bottom:10px; color:#999; } .brands_patent .brands img { display:inline-block; margin-bottom:10px; margin-top:10px; } .price-table .paid_service { padding-left:5px; padding-right:5px; } /* Увеличение/закрытие изображения по клику для gallery.html */ /* Картинка на странице */ .minimized { width: 200px; height: 145px; cursor: pointer; border: 1px solid #FFF; } .minimized:hover { border: 1px solid gray; } /* Увеличенная картинка */ #magnify { display: none; position: fixed; max-width: 1000px; height: auto; z-index: 9999; } #magnify img { width: 100%; } /* Затемняющий фон */ #overlay { display: none; background: #000; position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.5; z-index: 9990; } /* Кнопка закрытия */ #close-popup { width: 30px; height: 30px; background: #FFFFFF; border: 1px solid #AFAFAF; border-radius: 15px; cursor: pointer; position: absolute; top: 15px; right: 15px; } #close-popup i { width: 30px; height: 30px; background: url(../images/gallery/gallery_close_image.png) no-repeat center center; background-size: 16px 16px; display: block; } /* Лого-описание работы платных услуг для paid_service_*.html */ .paid-service-logo { padding: 0px 0 50px; } /* Заголовок таблицы-прейскуранта для paid_service_*.html */ .table-header { font-size: 24px; color: #1ab9ef; } /* Таблица-прейскурант для paid_service_*.html */ /* Текст в столбцах */ .tftable { font-size: 12px; color: #333333; width: 100%; border-width: 0px; border-color: #FFFFFF; border-collapse: collapse; text-align: center; } /* Текст в заголовках столбцов */ .tftable th { font-size: 24px; background-color: #444444; color: #FFFFFF; border-width: 5px; padding: 15px; border-style: solid; border-color: #FFFFFF; text-align: center; } /* Фон столбцов */ .tftable tr { background-color: #E5E5E5; } /* Столбцы */ .tftable td { font-size: 14px; border-width: 5px; padding: 15px; border-style: solid; border-color: #FFFFFF; } /* Фон столбцов при наведении мыши (только кнопка заказа. остальное управляется кодом иконки-чекбокса!) */ .tftable tr:hover { background-color: #62A6C9; } /* Кнопка заказа для столбцов таблицы */ .table-button { font-size: 24px; padding: 10px 20px; color: #000000; background-color: transparent; border: 0px; } /* Иконка-чекбокс услуги в таблице-прейскуранте */ .check-price { background: url(../images/icons/check_mark_price.png); width: 24px; height: 24px; background-size: cover; display: inline-block; margin-right: 20px; vertical-align: middle; background-position: 0 0; } /* Иконка-чекбокс услуги при наведении мыши */ .tableprice table tr:hover .check-price { background-position: 24px 0; } .tableprice table tr:hover td { background: #EAF5F9; } .tableprice table tr:not(:first-of-type):hover td:last-of-type { background: transparent; } /* Дополнительный текст под таблицей прейскурантом для paid_service_*.html */ .paid-service-additional-descr { font-size: 15px; color: #000000; } /* Всплывающее окно */ .main { background: #aaa url(../images/bg.jpg) no-repeat; width: 800px; height: 600px; margin: 50px auto; } .panel { background-color: #444; height: 34px; padding: 10px; } .panel a#login_pop, .panel a#join_pop { border: 2px solid #aaa; color: #FFFFFF; display: block; float: right; margin-right: 10px; padding: 5px 10px; text-decoration: none; text-shadow: 1px 1px #000; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } a#login_pop:hover, a#join_pop:hover { border-color: #EEEEEE; } .overlay { background-color: rgba(0, 0, 0, 0.0); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 999; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .overlay:target { visibility: visible; opacity: 1; } .popup { background-color: #E5E5E5; display: inline-block; right: 10%; opacity: 0; padding: 8px; position: fixed; text-align: center; color: #62A6C9; top: 40%; visibility: hidden; z-index: 999; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -webkit-transition: opacity .5s, top .5s; -moz-transition: opacity .5s, top .5s; -ms-transition: opacity .5s, top .5s; -o-transition: opacity .5s, top .5s; transition: opacity .5s, top .5s; } .overlay:target+.popup { top: 50%; opacity: 1; visibility: visible; } .close { background-color: rgba(98, 166, 201, 0.8); height: 30px; line-height: 30px; position: absolute; right: 0; text-align: center; text-decoration: none; top: -15px; width: 30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; } .close:before { color: rgba(255, 255, 255, 0.9); content: "X"; font-size: 24px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); } .close:hover { background-color: rgba(124, 213, 255, 0.8); }
Кривая верстка страницы
in HTML Coding
Posted
То, что нужно, спасибо.
А можно теперь, как-нибудь втиснуть нижние два бренда на поле выше, не меняя размера блоков?