Search the Community
Showing results for tags 'css'.
-
В примере выше мне не совсем понятно, почему при указании margin-top блоку №2, блок №1 также опускается в низ. Как я понимал ситуацию: блоки 1 и 2 смежные, между ними нет связи родитель > дочерний, следовательно марджин не должен был выпадать. Body {padding-top 1px} исправляет ситуацию, но меня интересует именно причина возникновения проблемы с блоком №1 Просьба объяснить на "пальцах"
-
Здравствуйте, я решил сделать сайт по шаблону от wix.com, я только учусь, вот не могу понять как сделать так что бы блок с картинкой заливался желтым с opacity 0.6 где-то и в то же время что бы эта картинка была ссылкой на саму себя но в окне галереи от fancybox. У меня заливка желтым уже стоит через hover, но картинка не работает как ссылка, если я убираю hover то ссылка становится активной и галлерея работает как задумано. Вот ссылка на шаблон сайта: http://ru.wix.com/website-template/view/html/1642?originUrl=http%3A%2F%2Fru.wix.com%2Fwebsite%2 Ftemplates%2Fhtml%2Fall%2F2&bookName=&galleryDocIn dex=7&category=all Вкладка "О нас", внизу есть фото команды, они при наведении на них мышкой заливаются желтым, а блок с текстом нет, у меня это работает, но не работает ссылка в картинке на галерею как в оригинальном шаблоне. Вот код HTML: <tr> <td id ="td1"> <div id="line1block7"> <div class="im"> <a class="gallery" rel="group" href="images/com_1big.jpg" width="240px" height="198px"> <imgsrc="images/com_1.jpg" width="240px" height="198px"> </a></div> <span class="emp1">Юлия Соколова</span><span class="empinfo1"><p class="text1">Руководитель студии<br><br>Это текст. Кликните дважды, чтобы отредактировать его. Расскажите посетителям сайта о себе, своих услугах и преимуществах.</p></span> </td> </div> Код CSS: .im{ width: 240px; height: 198px; margin-bottom: 5px; border: none; position: relative; } .im:hover{ transition:all .5s; background: yellow; content: " "; opacity: 0; position: absolute; top:0; bottom: 0; left: 0; right: 0; } div:hover .im:after{ opacity: .6; } .emp1, .empinfo1{ padding-left: 10px; } .emp1{ font-family: play, sans-serif; margin-top: 5px; padding-top: 15px; background-color: #CFCFCF; display: block; position: absolute; width: 230.2px; height: 29px; color: #FFFFFF; font-size: 19px; } Помогите пожалуйста разобраться с проблемой, а то я две недели над этим сидеть буду если не больше наверное, я уже в тупике, не знаю что дальше делать, или переписывать этот код и как-то изменять его частично.
-
Мне нужна помощь, как создать иерархуию изображений, чтобы одно накладывалось на другое ( у меня получается обычно наоборот, так же в коде я менял позиции ). Так же еще один вопорос, как на это изображение налепить текст, который был бы кликабелен?
-
https://incub10.github.io/scheme/ Как сделать по другому? Просто position перекрывает паддинг нижний(
-
Подскажите, как можно, научиться быстро верстать?
-
В данном коде неправильно отображается текст, который я пытаюсь перенести в левый нижний угол. Помогите исправить ошибку!!! Заранее спасибо! <html> <head> <title>ИС-41521</title> <style> <style type="text/css"> h3 {display: inline; background: black; /* Цвет фона под заголовком */ color: green; /* Цвет текста */ padding: 2px; /* Поля вокруг текста */ font-size: 12px; } #container { width: 500px; /* Ширина макета */ margin: 0 auto; /* Выравниваем по центру */ background: #FCE600; /* Цвет колонок */ } body { font: 11pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */ margin: 0; /* Отступы на странице */ } #sidebar { /* ПРаваЯ колонка */ float: right; /* Обтекание справа */ border: 0px solid #333; /* Параметры рамки вокруг */ width: 40%; /* Ширина колонки */ padding: 5px; /* Поля вокруг текста */ margin: 10px 10px 20px 5px; /* Значения отступов */ color: #ffffff; } h1 { font-size: 36px; /* Размер шрифта */ margin: 0; /* Убираем отступы */ color: #fc6; /* Цвет текста */ } #header { /* Верхний блок */ background: #0080c0; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ position: relative; top: -10px; } </style> </head> <body bgcolor="#001646"> <div id="header"><h1>ИС-41521</h1></div> <div id="sidebar"> <p>В США первые колледжи возникли в XVII веке (по образцу английских) как высшие учебные заведения, готовившие священнослужителей и государственных служащих. На основе наиболее крупных колледжей путём присоединения к ним медицинских, юридических, богословских школ (или факультетов) в первой половине XIX века были созданы первые университеты. В настоящее время в США «колледж» и «университет» являются взаимозаменяемыми понятиями. Оба термина означают высшее учебное заведение в котором можно получить диплом бакалавра или магистра, хотя обычно колледжи меньше по размеру[5]. В США также существуют двухгодичные колледжи, которые после обучения выдают степень кандидата в бакалавры (англ. Associate degree), сравнимую со средним профессиональным образованием в странах СНГ.</p> Это: <ul> <p><li>общественные колледжи (англ. community college);</p> <p><li>начальные колледжи (англ. junior college);</p> <p><li>технические колледжи (англ. technical college);</p> <p><li>городские колледжи (англ. city college).</p> </ul> </div> <font face='Arial'> <table border="0" width='570' align="left"> <tr> <td><img src='new 1/Без имени-1.jpg' width=200px height=200px alt="*"></img></td> <td> <table border='5'> <tr><td height='30' width='200' bgcolor='#ffffff'><center><button type="button" onclick="window.open('Реклама туров.html')">Главная</button></center></td></tr> <tr><td height='30' width='200' bgcolor='#ffffff'><center><button type="button" onclick="window.open('Реклама туров.html')">Новости</button></center></td></tr> <tr><td height='30' width='200' bgcolor='#ffffff'><center><button type="button" onclick="window.open('Реклама туров.html')">О группе</button></center></td></tr> <tr><td height='30' width='200' bgcolor='#ffffff'><center><button type="button" onclick="window.open('Реклама туров.html')">Здание</button></center></td></tr> <tr><td height='30' width='200' bgcolor='#ffffff'><center><button type="button" onclick="window.open('Реклама туров.html')">Контакты</button></center></td></tr> </table> </td> <td align="justify" bgcolor="#001646"><font color="#ffffff">Я устал...Но вроде бы и в силах. Для построения идеальной таблицы, я вырвал кусок кода и начал с ним химичить. В итоге я понял кое-какие фичи с таблицами и что с ними можно делать.</font></td> </tr> </table> <div><h3>Каплан Владислав(с), 2017</h3></div> <!-- вот здесь и ошибка как-раз! --> </font> </body> </html>
-
Как сделать кнопку и cсылка по центру? Пока оцентрировал с помощью position
-
tre.zzz.com.ua/smart Оцените пожалуйста версточку Спасибо!
-
Можете объяснить про свойство фон? Мне фон не доконца понятен, он при высоте не используется или при паддинге тоже?
-
Сверстаю сайт по вашему макету недорого. Ответственно и с учетом всех инструкций и пожеланий. Помимо статичной верстки, умею работать с медиа запросами, придавать "резиновость" страницам. Необходимый базовый уровень JS, работа в системах контроля версий прилагаются. Пример статики: http://waxom.comuf.com/waxom.html
-
Ищу работу в коллективе на уделенной основе либо приму какие либо заказа. вот некоторые примеры работ. есть еще. мой скайп lazenyuk92@mail.ru Верстка: https://yadi.sk/d/wDXdRRUGzow5N https://yadi.sk/d/FBc-fC0Azxf68 - лэндинг. PHP mySQL: https://yadi.sk/d/qex6Q-vSzmEDG нужно устанавливать на сервер чтобы все работало база внутри. AJAX: https://yadi.sk/d/6ywnkSk8zmDnz - пример загрузки картинок на сервер с превью. нужно просто скопировать на сервер. Запись ведется в файл. все работы в архиве winrar скачать и распаковать.
-
Делюсь (без хайда) отличным видео-курсом (переведен на РУССКИЙ) для новичков от Бреда Хасси с забугорного Udemi. Все грамотно объяснено, без лишней воды. Курс разбит на блоки. В процессе обучаемый идет от меньшего к большему, и в результате верстает полноценный сайт собственными руками. СКАЧАТЬ пасс к архиву: htmlforum.io пысы: перешел по ссылке, скачал курс? не забудь оценить мой труд
-
Привет! Я начинающий верстальщик,который стремиться в будущем стать Front-end разработчиком и создавать интерактивные и динамичные сайты. Сейчас я получаю опыт в верстке landing page и одностраничных сайтов на HTML5 и CSS3. У меня есть опыт и небольшое портфолио (отправлю ссылки по требованию). От меня вы получите аккуратный валидный код,подключение форм обратной связи(если имеются) ,адаптивность сайта (по макету или вашему пожеланию), установка сайта на ваш хостинг и консультацию в сфере верстки. Мои навыки и умения: Html/HTML5-верстка сайтов и интерфейсов на основе макетов PSD; CSS; Базовые знания PHP и JavaScript. Элементарные знания в AJAX, jquery, OpenServer, Wordpress, bootstrap, юзабилити, настройка контекстной рекламной кампании в поисковых системах. С меня -быстрота обратной связи,исполнительность и кроссбраузерность ,с вас-PSD макет и реалистичный взгляд. Цена устанавливается от сложности работы. 1)https://www.facebook.com/tatiana.kondratyeva.125 2)Tatiana89252514982@yandex.ru
-
Здравствуйте! Задали по учёбе тест, выполнил все задания кроме этого. Задание 8: Для вашего сайта вы решили использовать декоративный шрифт “Lobster”. Напишите правило CSS, которое позволит вам использовать шрифт, даже если он не установлен на компьютере пользователя сайта. Примените этот шрифт ко всем заголовкам второго уровня сайта и установите их размер равный 20 пикселям. Предоставляя путь к файлу шрифта, укажите fonts/lobster.ttf Заранее спасибо!
-
Всем доброго времени суток, пожалуйста посмотрите и оцените мою первую верстку, хотелось бы услышать что правильно что нет, что можно было бы по другому сделать, критикуйте не стесняйтесь(желательно обоснованно)))). ссылка на сайт: http://foinni-ru.1gb.ru/ макет сайта прилагаю: Заранее благодарю всех добрых людей которые согласятся помочь!
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700|Raleway:200" rel="stylesheet"> <title>Content</title> </head> <body> <div id="all"> <div id="up"> <p>Компания «Турбомикрон» всегда совершенствует свой сервис по работе и обслуживанию своих новых так и постоянный клиентов. Мы налаживание связи со всеми товаро-транспортными компаниями, для того чтобы наша работа с клиентами была максимально продуктивна.Поэтому наши турбины мы можем отправлять по всей территории Украины, а также в ближайшие страны СНГ.</p> <img src="jpg/up.jpg" alt="Турбомикрон"> </div> </div> </body> </html> body { background: #eee; } #all { margin: 100px 20% 0 ; } #up { border: 1px solid #d1ea9b; background-color: #fff; text-align: center; padding: 10px; min-height: 100%; } #up>img { width: 40%; float: right; } #up>p { width: 58%; float: left; font-family: 'Open Sans', sans-serif; font-size: 1.25vw; overflow: hidden; } нужно, чтобы блок подстраивал высоту под содержимое. пробовал добавить пустой див со свойством "clear: both". результата не дало -
Я начинающий верстальщик. Верстав макет я столкнулся с следующей проблемой : сверху появляется отступ. Вот HTML : <!Doctype HTML> <html> <head> <title>Какой-то сайт</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="CSS\first.css"> </head> <body> <div class="header"> <div class="head1"> <h1 class="FirstLogo">The first page</H1> </div> <div class="meny"> <ul> <li><a href=''>Главная</a></li> <li><a href='Page/About.html'>О нас</a></li> <li><a href=''>Контакты</a></li> </ul> </div> </div> <hr> <div class="content"> <img class="photo" src="Image/3.png" height=500px; width=500px;> <h2 align="left">Видео</h2> <p >Видео предоставляет прекрасную возможность подтвердить свою точку зрения. Чтобы вставить код внедрения для видео, которое вы хотите добавить, нажмите "Видео в сети".Вы также можете ввести ключевое слово, чтобы найти в Интернете видео, которое лучше всего подходит для вашего документа.</p> <p class="mobile_n">Коллекции на вкладке "Вставка" содержат элементы, которые определяют общий вид документа. Эти коллекции служат для вставки в документ таблиц, колонтитулов, списков, титульных страниц и других стандартных блоков. При создании рисунков, диаграмм или схем они согласовываются с видом текущего документа. Формат выделенного текста можно легко изменить, выбрав нужный вид из коллекции экспресс-стилей на вкладке "Главная". Текст можно также отформатировать с помощью других элементов управления на вкладке "Главная".</p> <h2>Документ</h2> <p>Чтобы придать документу профессиональный вид, воспользуйтесь доступными в Word макетами верхних и нижних колонтитулов, титульной страницы и текстовых полей, которые дополняют друг друга. Например, вы можете добавить подходящую титульную страницу, верхний колонтитул и боковое примечание. Откройте вкладку "Вставка" и выберите нужные элементы из различных коллекций.</p> <h2>Темы</h2> <p>Темы и стили также помогают придать документу единообразный вид. Если на вкладке "Конструктор" выбрать другую тему, то изображения, диаграммы и графические элементы SmartArt изменятся соответствующим образом. При применении стилей заголовки изменяются в соответствии с новой темой.</p> </div> </body> </html> Вот CSS : /* другие медиа запросы */ @media (min-width:1200px){ body{ margin:0px; padding:0px; } .header{ margin-bottom:30px; display:inline; } hr{ DISplay:none; } .head1{ top:0px; width:20%-10PX; height:auto; margin-left:0px; float:left; } .head1>.FirstLogo{ color:silver; font-family: 'Indie Flower', cursive; font-size:2.4em ; text-align:center; padding:3px 50px; } .meny{ top:0px; margin-top:0px; margin-right:0px; height:auto; width:40%; float:right; } .meny li{ font-size:1.5em; color:silver; display:inline; margin-left:5% !important; padding:2px 5px; border:5px inset red; background-color: #8B0000; text-shadow: 1px 1px 2px black, 0 0 1em red; } text-decoration:none; color: inherit; } .content{ margin-top:30%; font-size:0.8em; width:80%; color:silver; margin-top:50px; margin-left:10%; font-family: 'Indie Flower', cursive; font-family: 'Lobster', cursive; } p{ text-indent: 1.5em; font-family: 'Indie Flower', cursive; font-family: 'Lobster', cursive; } h2{ font-size:4em; margin-bottom:5%; margin-top:10%; } .photo{ margin-right:25%; margin-left:25%; height:50%; width:50%; } .mobile_n{ display:list-item; margin-left:10%;} } Помогите решить проблему. Заранее Спасибо!
-
Я новичок хочу услышать критику по вёрстке, на сколько они близки к реальным сайтам, дизайн не мой использовались PSD макеты первая работа вторая работа третья работа
-
Страница не корректно отображается в некоторых мобильных браузерах (UC Browser), После скролла вниз весь контент, что находится ниже окна браузера, прячется за белым фоном. Из-за чего такое может быть? . . CSS . HTML https://jsfiddle.net/8mfgncc6/
-
Как сделать социальные сети под картинкой? Больше на картинке будет понятней! И, чтоб они были на правой стороне как на картинке? код вот!
-
Сгодится? Тыц. Образец.
-
Возникла необходимость сделать слайдер с множественным фоном, в котором по нажатию на кнопку один из фонов меняется. И всё замечательно работало, пока я не решил его проверить в IE11. В Chrome и FireFox всё работает. А в ИЕ фон слайдера либо реагирует на некоторые из кнопок, либо не реагирует на них вообще. В чём же может быть проблема? Код UPD. Забавная штука: если названия изображений, расположенных в списке фонов первыми, различаются между собой, то начинает изменяться и изображение, следующее ниже (которое мне и необходимо менять по нажатию кнопки). Это как-нибудь можно обойти?
-
Всем привет, подскажите как выполнить такой маневр, я хотел было взять звездочку в span и через него придать ей красный цвет, но он отображается в поле как текст!
-
Помогите мне, как понять верстку? Т.е. я знаю основы, но не умею верстать, просто не получается и бросаю дело(
-
Доброго времени суток. Есть шапка, ее стили: position:fixed; top:0; width:100%; margin:10px 0px; height:60px; есть кнопка в этой шапке, по нажатию которой нужно плавно снизу вывести меню с такими же стилями (главное что бы width:100%; и height:60px;) обработчик нажатия кнопки я сам повесил (toggleClass) Изначально меню должно быть например (opacity:0;bottom:0;z-index:-1;) по нажатию добавиться стиль в котором будет (bottom:-60px;opacity:1;), плавности добавит transition Но у меня пока толкового ничего не выходит, может кто подскажет как правильно сделать?
