iiwanc
-
Posts
11 -
Joined
-
Last visited
iiwanc's Achievements
Explorer (1/14)
0
Reputation
-
спасибо
-
Здравствуйте! Простите, если не сюда пишу. Пишу подвал сайта. В нем должно быть 3 столбца. Первый столбец с копирайтом относительно просто спозиционировал, остальные два не могу никак выровнять. Второй столбец должен быть по центру. Текст в нем по левому краю выравнивать. Здесь начинаются проблемы. Столбцы оформляю в div. Вот код https://jsfiddle.net/xca2j35g/ Помогите, пожалуйста. Буду благодарен советам!
-
спасибо
-
Здравствуйте! Простите, если не сюда пишу. Что-то намудрил в стилях и при попытке изменения цвета вертикальной линии, цвет не меняется. Подскажите, пожалуйста, как корректно изменить цвет вертикальной линии. Код и результат можно посмотреть здесь https://jsfiddle.net/sn2uo9k4/ Буду благодарен советам!
-
спасибо за советы. убрал position: absolute; в стиле блока навыков и теперь работает, как надо. не ручаюсь за правильность решения :) а как сделать так, чтобы текст в ячейках блока навыков всегда масштабировался в них? Дело в том, что, при уменьшении окна браузера, уменьшается размер ячеек, но текст не помещается в них и отображается за границами ячеек. Пытаюсь адаптировать под мобильные. Код https://jsfiddle.net/d9z1kgLm/
-
Здравствуйте! С недавних пор изучаю HTML. Раньше писал простой код, но сейчас решил вносить новые веяния. Пишу лендинг для себя. Шапка сайта закреплена, и при прокрутки страницы, всегда видна. Написал блок навыков: <div class="blok-navik"> <div> <h3>HTML и CSS</h3> <p>Использую этот язык</p> </div> <div> <h3>Непрерывность работы IT-инфраструктуры</h3> <p>Непрерывность работы и доступности IT-инфраструктуры: IP-видеонаблюдение, сетевое оборудование, антивирусный контроль</p> </div> <div> <h3>Модульный ремонт</h3> <p>Диагностика неисправностей компьютеров и локальной сети, прокладка ЛВС, обслуживание офисной АТС и ее инфраструктуры</p> </div> <div> <h3>Модернизация</h3> <p>Подготовка предложений по модернизации, приобретению сетевого и офисного оборудования. В ходе модернизаций мною переработана структура локальной сети</p> </div> <div> <h3>Педагогика</h3> <p>Преподавание компьютерной грамотности и ведение документации по курсам. Разработка учебных материалов. Составление ТКУ и конспекта урока</p> </div> <div> <h3>Психология и культурология</h3> <p>Изучаю психологию взаимодействия индивидуумов в социуме. Культурология позволяет выстроить более продуктивное взаимодействие с обучающимся</p> </div> </div> CSS: .blok-navik { /* Блок навыков */ padding: 0 8% 0 8%; /* Поля */ text-align: center; font-family: 'Montserrat', sans-serif; font-size: 18px; display: flex; flex-wrap: wrap; align-content: center; background: #fff1f1; position: absolute; } .blok-navik div { width: 30%; height:200px; color: #000; /* Цвет текста */ padding: 2px; /* Поля вокруг текста */ transition: 0.5s linear; /* Время изменения */ border-bottom: 4px solid #ff3333; margin: 15px; background: #fff; box-shadow: 0 0 7px #a0a0a0; } .blok-navik div:hover { color: #fff; /* Цвет текста */ background: #ff3333; /* Цвет фона */ } Почему-то если докрутить страницу до блока навыков, этот блок навыков оказывается сверху шапки. Как этот блок поместить слоем ниже, под шапкой? Буду благодарен советам. Если нужна дополнительная информация или код, то сообщу. Сайт пока только на компьютере, на OpenServere крутится. header.php: <body> <div class="navbar"> <a href="index.php"><img src="https://www.cyberforum.ru/images/logo2.png"></a> <a class="punkt" href="o_saite.php">O сайте</a> <a class="punkt" href="forma-svjazi.php">Контакты</a> <a class="punkt" href="new2.php">Статьи</a> <a class="punkt" href="index.php">Главная</a> <a class="menu-triger" href="#"></a> <div class="menu-popup"> <a class="menu-close" href="#"></a> <ul class="mob"> <li><a href="#news">Новости</a></li> <li><a href="forma-svjazi.php">Контакты</a></li> <li><a href="o_saite.php">O сайте</a></li> <li><a href="#">Прайс-лист</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Гарантии</a></li> <li><a href="#">Контакты</a></li> </ul> </div> <script src="js/jquery.min.js"></script> <script src="js/mobile.js"></script> </div> <div class="main"> </div> </body> style-header.css: .navbar img { float: left; display: block; text-align: center; padding: 1% 0 1% 10%; text-decoration: none; } /* The navigation bar */ .navbar { overflow: visible;/* Отвечает за отображение мобильного меню в полный размер */ background-color: rgba(6, 22, 52, 0.9); position: fixed; /* Set the navbar to fixed position */ top: 0; /* Position the navbar at the top of the page */ width: 100%; /* Full width */ font-family: 'Montserrat', sans-serif; } /* Links inside the navbar */ .punkt { float: right; display: block; color: #ffffff; text-align: center; padding: 14px 16px; text-decoration: none; top: 50%; left: 50%; transform: translate(-70%, 20%); } /* Change background on mouse-over */ .punkt:hover { color: #ff3333; } /* Main content */ .main { margin-top: 70px; /* Add a top margin to avoid content overlay */ } @media (min-width: 767px) { .mob { display: none; } } @media (max-width: 767px) { .punkt { display: none; } .menu-triger { background: url(../images/menu.png) 0 0 repeat; display: block; width: 25px; height: 17px; position: absolute; right: 15px; top: 40%; } .menu-close { background: url(../images/close.png) 0 0 repeat; display: block; width: 28px; height: 28px; position: absolute; right: 20px; top: 20px; z-index: 100; } .menu-popup { background: #061634; display: none; position: absolute; right: -110%; top: 0; width: 250px; box-sizing: border-box; padding: 30px; z-index: 9999; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .menu-popup ul { margin: 0; padding: 0; } .menu-popup li { list-style: none; margin: 10px 0; padding: 0; } .menu-popup li a { font-size: 18px; font-family: 'Montserrat', sans-serif; color: rgb(255, 255, 255); line-height: 1.4; text-decoration: none; } .body_pointer * { cursor: pointer; } }
-
Здравствуйте!Простите, если не сюда пишу.Уже несколько дней не могу найти свою ошибку.Прошу помощи.Пишу сайт.Вверху страницы горизонтальное меню - фиксированное.Под горизонтальным меню вставляю видео с текстом. Видео затеняется с помощью overlay.Все вставляется, но под видео большой отступ, заполненный тенью от видео.Как убрать большой отступ?На скрине выделена область, которую необходимо убрать.Сильно не пинайте, пожалуйста, только начинаю изучать это дело.Сайт запускаю на OpenServer. В веб еще не выкладывал. Index <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Мой сайт</title> <link rel="stylesheet" type="text/css" href="style/style.css"> <link rel="stylesheet" type="text/css" href="style/style-video.css"> <link href="https://fonts.googleapis.com/css?family=Merriweather|PT+Sans+Caption:400,700&display=swap" rel="stylesheet"> <link rel="shortcut icon" type="image/x-icon" href="favicon/favicon.ico"> </head> <body> <div class="fullscreen-bg"> <div class="overlay"> <h1>Простой пример<br>фонового видео на сайте</h1> </div> <video loop="" muted="" autoplay="" poster="video/fotopromo.png" class="fullscreen-bg__video"> <source src="video/videopromo.mp4" type="video/mp4"> </video> </div> <?php include('header.php'); ?> <div class="layout"> <?php include('nav.php'); ?> <div class="content"> <h1>Название страницы</h1> <p>Бла-бла.</p> </div> </div> <?php include('footer.php'); ?> </body> </html> Style-video .fullscreen-bg { overflow: hidden; z-index: -100; position: relative; height: 100%; width: 100%; padding-top: 45%; } .fullscreen-bg__video { position: absolute; top: 0; left: 0; width: 100%; } .overlay { background: rgba(0,0,0,0.6); position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 4; } .overlay h1 { text-align:center; color:#fff; font-size: 70px; margin-top:17%; } @media (max-width: 767px) { .fullscreen-bg { background: url('../video/fotopromo.png') center center / cover no-repeat; } .fullscreen-bg__video { display: none; } .overlay h1 { font-size: 40px; } } Понимаю, что строка 7 в коде style-video отвечает за это, но не знаю как правильно ее прописать.Сейчас там прописано: padding-top:45%;При уменьшении процента, на моем экране хорошо отображается.Но что будет на других экранах?При уменьшении окна браузера, тень опять появляется.
-
Благодарю за советы. Все таки использовал php. Не так сложно оказалось. Ниже код, который у меня получился. Может кому полезно будет. Это файл index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="header">Заголовок сайта</div> <div class="layout"> <?php include('nav.php'); ?> <div class="content"> <h1>Название страницы</h1> <p>Бла-бла.</p> </div> </div> <?php include('footer.php'); ?> </body> </html> Подключение шапки и других элементов происходит с помощью: <?php include('nav.php'); ?> Где в include('nav.php'); указывается подключаемый файл. В отдельных файлах находится код шапки, футера и меню
-
Здравствуйте! Простите, если не сюда пишу. Только начинаю изучать HTML и CSS. Сверстал страницу, на которой присутствуют шапка, футер, меню. Страница трехколоночная. Сайт планирую делать многостраничным. Теперь задался вопросом: Как разместить основные блоки сайта на всех страницах? Имею в виду: футер, шапку, боковые колонки. Не размещать же их на каждой странице. Имею в виду, если кликнуть на ссылку в меню, то открывается новая страница без меню, футера и т.д. Как сделать, чтобы эти основные блоки отображались во всех страницах. Буду рад советам! По форуму искал и читал, но не смог применить некоторые наброски к своему сайту. Так понимаю, необходимо какие-то скрипты подключить? Сайт на PHP не хотелось бы писать. Еще не дорос до него Прикрепляю файлы, что сделано. index.html style.css
-
Здравствуйте! Хотелось бы сразу предупредить, что я плохо понимаю в HTML. Уж сильно не пинайте В общем, дело такое: создаю рассылку для блога. Хотелось бы чтобы в письме был определенный фон. С этим вроде бы разобрался. Но сами записи отображаются по 5 столбцов по горизонтали. А хотелось бы, чтобы каждая запись следовала после предыдущей. На-пример, сперва идет запись №1, потом когда прокручиваешь страничку идет запись №2 и т.д. Не могли бы подсказать, что нужно исправить? Ниже сам код и скрины. <center> <table border="3" cellpadding="10" cellspacing="3" style="width: 600px;"> <tbody> <tr> <td align="center" bgcolor="#CC3333" valign="top"> <br /> <img border="0" height="100" src="http://l-userpic.livejournal.com/112489287/32249472" style="color: white; border: 0;" width="100" /></td> <td bgcolor="#FFCC99"> <br /> <span style="color: #cc3333; font-size: small;"><strong> Здравствуйте, {{Name}} ! </strong></span> <p>Judge24 Veritas - рассылка, благодаря которой можно узнать последние новости мира политики и путешествий. Участвуйте в жизни блога, делитесь впечатлениями и он ответит Вам взаимностью.</p> <p>Последние новости с блога. Спасибо за подписку. Вы получаете рассылку, потому что оставили адрес {{Email}} в блоге judge24.livejournal.com</p> <p>Если письмо показывается неправильно, Вы можете посмотреть <a href="{{WebLetterUrl}}">веб-версию письма</a></p> <table align="left" cellpadding="5" cellspacing="5"> <tbody> <tr> <td align="center" colspan="2" rowspan="3">{{RssFeedEntries}}</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </center>
-
Здравствуйте! Сразу скажу, что плохо в этом соображаю Дело в том, что мне нужно на одной странице по левому краю выровнять 2 изображения. Одно ниже другого. А с правой стороны текст. Ниже код с одной картинкой. Не пойму как сделать с новой строки новое изображение и текст. Помогите пожалуйста. Уже два дня маюсь. <tr> <td width="270" align="left" valign="top"> <img src="http://read.ru/images/delivery_place/861.jpg" style="float:left;margin:10px;"> <b>Адрес:</b> ул. Ленинского Комсомола, д. 35, офис 77<br><br> <b>Телефон:</b> 244-554, 357-219<br><br> <b>Время работы:</b> пн. - пт. с 8:00 до 17:00, сб., вс. - выходной <br><br> Пункт самовывоза расположен в пункте выдачи «Урал-Пресс» </td> </tr>