Поиск по сайту

Результаты поиска по тегам 'div'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • Основной форум
    • Для начинающих
    • Проблемы верстки
    • Обсуждение работ
    • Работа форума
    • Флейм
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Веб-программирование
    • Javascript
    • Серверные технологии
    • СУБД
    • CMS
  • Работа: спрос, предложение, вакансии
    • Фриланс
    • Коммерческие услуги
    • Ищу работу
    • Предлагаю работу

Календари

  • События в Украине
  • События в России
  • События форума
  • События партнёров
  • Все события

Блоги

  • CMS (Системы управления контентом)
  • Руководство верстальщика
  • Блог htmlforum.io

Группы меток

  • Разработчики
  • Front-end
  • Back-end
  • Обучение
  • Ищу работу
  • Предлагаю работу

Искать результаты в...

Искать результаты, содержащие...


Дата создания

  • Начать

    Конец


Последнее обновление

  • Начать

    Конец


Фильтр по количеству...

Зарегистрирован

  • Начать

    Конец


Группа


Web site


ICQ


Jabber


Skype


Откуда


Интересы

Найдено 13 результатов

  1. Здравствуйте! Есть небольшая проблема: имеется блок, в который вставляем строчные гиперссылки с изображениями внутри. Обнаружил, что в данном блоке появляется странный отступ снизу (зеленного цвета), от которого я не могу избавиться. Так как я новичок, то прошу помощи. Визуально проблему можно посмотреть здесь: https://jsfiddle.net. Проблема плевая, но я застрял . Заранее благодарю!
  2. leShik

    Помогите чайнику!!!

    Попросили добавить текста немного на сайт. Добавил блок со списком, отображение вот такое Какие стили отвечают за такое отображение? Его стили на данном этапе)) div style="position: relative; clear: both;" "position: absolute; clear: both; z-index: 1000;" - отображает вот так почему "type" для ul не отрисовывает маркеры? Вроде на дримвивере написан, хотя хз))
  3. мурамаса

    Сьезжает верстка в firefox

    Добрый день, сверстал страницу с блоком новостей которые идут под меню колонкой, по одному блоку в ширину контейнера. В хроме все нормально и в файрфокс на моем ноутбуке с разрешением 1366х768 тоже, но с другого компа верстка сьезжает именно в firefox. Немного полазил в браузере и блок становится на место если убрать overflow: hidden, но тогда текст соотвественно вылезает за пределы блока. Скинул весь css на всякий случай. body { margin: 0; padding: 0; background: url(/img/casfon.jpg); } .frame { width: 1200px; background-color: white; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } .box { width: 1100px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } header { background: url(/img/casino.jpg) no-repeat center; height: 300px; } /* БЛОК НОВОСТЕЙ ГЛАВНОЙ СТРАНИЦЫ*/ .news { margin-left: 100px; margin-bottom: 100px; } .news-block { width: 800px; padding: 10px; margin: 0 0 40px 0; height: 310px; overflow: hidden; text-overflow: clip; font-size: 15px; text-align: justify; line-height: 1.3; } .news-block h2 { font-size: 22px; } .news-block h2 a { text-decoration: none; } .news-image { float: left; width: 300px; height: 280px; padding: 10px; } /* СТИЛИ ЦЕНТРАЛЬНОГО МЕНЮ */ .menu { float: left; border-bottom: solid red 2px; width: 100%; margin-bottom: 50px; } .menu li { list-style-type: none; font-size: 25px; float: left; margin: 0px 0 auto 50px; padding: 20px; } .menu li a { text-decoration: none; } .menu li:hover { background-color: red; } /* СТАТЬЯ КОНТЕНТ ОСНОВНОЙ */ .title { text-align: center; font-size: 25px; } .content { font-size: 18px; text-align: justify; float: left; margin: 30px auto 50px auto; } .content p { overflow: hidden; } .image { width: 330px; height: 300px; margin: 0 auto 20px 20px; clear: both; } .icon { width: 25px; height: 25px; float: left; margin-right: 25px; } /* СТИЛИ ДЛЯ ФОРАМТИРОВАНИЯ ТЕКСТА */ .red { color: red; } /* ПОДВАЛ */ footer { font-size: 13px; text-align: center; padding-top: 40px; display: block; height: 30px; margin-top: -60px; clear: both; border-top: 2px solid red; }
  4. Доброго времени суток. Возникла такая проблема, нужно сверстать страницу согласно макету, используя только flex и grid Сразу появилась идея разбить страницу на три divа, первый это блок с породами кота, второй это блок с фотками и третий блок с рейтингом. <body> <header>Бабуленькины котятки</header> <div class="global"> <div class="menu"> <a class="submenu" href="#" id="abis">Абиссинская</a> <a class="submenu" href="#" rel="brit"">Британская</a> <a class="submenu" href="#" rel="rus">Русская голубая</a> <a class="submenu" href="#" rel="siam">Сиамская</a> </div> <div class="cats"> <img src="http://murkote.com/wp-content/uploads/2014/03/abissinskaya-koshka-foto.jpg" alt="" class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/australian-mist-5.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2015/05/American-Bobtail-Cat.jpg" alt="" class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/american-curl-7.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2015/06/Anatolijskya-koshka-2.jpg" alt="" class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/arabian-mau-1.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2014/03/leopardovaya-bengalskaya-koshka.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2015/06/Brazilian-Shorthair-cat-2.jpg" alt="" class="cat"> </div> <div class="rating"></div> </div> <footer>Подвал</footer> <style> a { color: #000 !important; text-decoration: none; } body { background-color: gainsboro; display: flex; flex-direction: column; } header { text-align: center; font-size: 40px; font-style: bold; } img { width: 250px; height: 200px; } .global { display: -webkit-flex; display: flex; justify-content: space-around; } footer { color: wheat; background: black; } div.menu { display: flex; width: 250px; flex-wrap: wrap; background: gray; align-content: flex-start; } .submenu { display:flex; justify-content: center; align-items: center; width: 100%; height: 50px; font-size: 25px; border-bottom: white 1px solid; } .cats { display: flex; flex-wrap: wrap; width: 800px; height: 900px; justify-content: space-around; } .cats img:nth-child(2){ width: 500px; } .cats img:nth-child(6) { width: 500px; } .cats img:nth-child(8) { width: 750px; } .rating { width: 250px; background: olive; } </style> Но возникла проблема, надо сделать так, чтобы при выборе категории, кошки данной породы меняли прозрачность. Так как у меня фото и породы в разных блоках, я не понимаю как это сделать. Был вариант не добавлять категории в отдельный блок, но тогда как разметить страницу? Прошу помощи, или хотя бы небольшой подсказки
  5. мурамаса

    проблема со стилями css

    Добрый день, не знаю по теме ли вопрос с PHP include, но может кто нибудь знает и поможет. Сайты разрабатываю на локальном сервере. Суть в том что когда я применяю функции php include, почему то стили не работают, но не всегда, потому что до этого я делал тоже самое с другим файлом и все работало нормально. Я просто понять не могу в чем вообще может быть проблема, браузер обновлял crtl+f5, чистил кэш. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="/css/vsestyle.css"> </head> <body> <header> <div class="box"> </div> </header> <section> <div class="box"> <?php include"blocks/left-side-bar.php" ?> <?php include"blocks/right-side-bar.php" ?> </div> </section> <div class="box"> </div> </section> <section> <div class="box"> </div> </section> <section> <div class="box"> </div> </section> </body> </html> body { padding: 0; margin:0; } header { background: url(/img/vseback.png); height: 300px; } // СТИЛИ ЛЕВОГО БОКОВОГО МЕНЮ И БЛОКА .menu { float: left; } .menu li { list-style-type: none; padding: 10px; } .menu li a { text-decoration: none; } .left-side-bar { float: left; } // СТИЛИ ПРАВОГО БОКОВОГО БЛОКА .right-side-bar { float: right; font-size: 30px; } Так вот все стили применяются корректно, кроме последнего .right-side-bar. В том числе к include"blocks/left-side-bar.php" стили применились нормально, помогите) Кроме того, класс "menu", вложен в left-side-bar.php и на нем все стили отображаются нормально.
  6. Добрый день, при вертске столкнулся с такой проблемой, на первом скриншоте я старался с позиционировать элементы, что бы текст шел как бы лесенкой а между ними фото. http://joxi.ru/D2Pz9gOTp65Z7r Но после того как я добавляю вторую картинку элемент с текстом почему то присасывается к верхней части, хотя до этого я задал ему clear: left; что бы он расположился под первой картинкой. После добавления картинки, получается вот так http://joxi.ru/nAyvGpPtYbzRdr Помогите решить проблему, правильно ли вообще я позиционирую элементы на странице? или же можно решить туже задачу проще? Html этой секции <div class="box"> <div class="company"> <p>Наша компания на протяжении многих лет занимается производством крема из экологически чистых материалов. Мы предосталвяем широкий ассортимент кремов для разных целей. Именно нас на протяжении многих лет выбирают покупатели, потому что хотят получать результат, а не просто выкидывать деньги на ветер.</p> </div> <div class="company"> <p>В наших кремах испольщуются только природные и экогологически чистые материалы, включая фрукты вроде кокоса или сладких личи. Использование подобных материалов помогает поддерживать кожу в здоровом виде и не допускать ее высыхания, в том числе это благоприятно сказывается на лечении разных кожаных болезней и дерматологии.</p> </div> <img src="/images/crem.png" alt="Крем фото" class="photo"> <div class="company"> Эмульсионные кремы бывают двух типов – масло-вода и вода-масло. В первом случае эмульсия имеет жидкую консистенцию и используется для изготовления дневных увлажняющих кремов. Благодаря высокому содержанию воды (до 70 процентов) они восполняют потерю влаги, легко наносятся, быстро впитываются, не оставляя жирного блеска на коже. </div> <img src="/images/crem1.png" alt="эмульсия" class="photo"> </div> </section> css этой секции .company { width: 450px; text-align: justify; float: left; font-size: 20px; } .company:nth-child(2) { width: 450px; text-align: justify; float: right; margin-top: 250px; } .company:last-child { float:left; width: 450px; clear: left; } .photo { float: left; width: 400px; height: 400px; } .photo:last-child { float: right; }
  7. Здравствуйте. Недавно начал изучать HTML и CSS. Хочу сделать рядом 2 блока div которые при наведении на любой из них увеличивались в ширине и изменяли ширину соседнего. А получается что при наведении на блок А он увеличивается и уменьшает ширину блока Б. А при наведении на блок Б он просто увеличивается и перекрывает блок А https://jsfiddle.net/ob4jyz0p/1/ Для наглядности: Курсор не в области этих блоков: |________А_50%________| |________Б_50%________| Курсор наведен на блок А: |____________А_80%____________| |____Б_20%____| Курсор наведен на блок Б: (Перекрывает Блок А) |____А_50%____|____________Б_80%____________|
  8. Не знаю как сделать что бы левая колонка была до самого низа независимо от наполнения на основной странице
  9. Верстаю для тренировки и пытаюсь сделать адаптивную версию, при просмотре с мобильных один блок наезжает на другой. Думала, что колонки в bootstrap автоматически сдвигаются одна за одной в мобильных версиях. перепробовала уже много чего и не могу понять в чем все-таки проблема. вот код: https://jsfiddle.net/6jgoewz5/ http://piccy.info/view3/12360772/8e3e730ee144105131409f09bbe3231f/ как можно исправить?
  10. Я начинающий! Вот код со страницы, нужно зафиксировать текст под картинкой, заранее благодарен! Только, чтобы текст был слева и прямо под картинкой!:) <!DOCTYPE html> <html> <head> <title>Clan Againsts</title> <meta charset="utf-8"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <style type="text/css"> html, body {width:100%;height:100%;overflow:hidden;margin:0px;padding:0px;font-family:'Open Sans',sans-serif;font-size:16px} body {background:url('img/frame-018079.jpg') center no-repeat #000000} .content {width:100%;text-align:center;position:fixed;bottom:10%;left:0px;} .content a {display:inline-block;text-decoration:none} .content a, .content a:hover {color:rgba(255,255,255,0.3);} .content a:hover {color:rgba(255,255,255,0.5);} @media only screen and (max-width: 667px), screen and (max-height: 375px) { .content {position:static;} .content a {display:block;width:100%;height:100%;position:fixed;top:0px;left:0px;font-size:0px;opacity:0;} body {background-size:cover} } </style> <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/861027C3-B692-4F42-A5B2-9B3746DA309D/main.js" charset="UTF-8"></script></head> <body> <div class="content"> frame-018079 </div> </body> </html>
  11. Привет всем, делал менюшку на сайте и столкнулся с одной проблемой Есть тег div, в нем ul и 5 li в строчку с помощью inline-block li должны быть равными по ширине и при том менять её в зависимости от ширины экрана на ум пришла только эта идея: Поскольку div = 100% для li я поставил 20% и, как я понимаю, li должны вплотную занять всю ширину div и при том быть не статичными тк % но не получается и последняя пятая переходит на новую строчку, когда ставлю 19% то всё влазит, но справа остаётся место и получается не красиво в чем дело? Никаких отступов нет, padding 0, что еще занимает место? Или способ не правильный? так же думал, что это из за пробелов между блоками,пробовал добавить float: left при этом пробелы между блоками убирались, но при 20% всё равно не влазиют сейчас стоит на 19.453% и ,в принципе, все, на вид, вплотную, но это же совсем извращение как мне кажется и мне всё же интересно почему мой первый вариант не работает
  12. Добрый день, столкнулся с такой проблемой. Верстая страницу заключал изображения в тег <div> с определенным класом и в css, задаю им позицию какую хочу видеть у себя в браузере. например .content-bar2 { float: right; position: absolute; top: 300px; right: 50px; } Так вот когда я несколько элементов так размещаю, один над одним, то у меня в браузере все отоброжается нормально. Но открыв с другого компьтера, получилос так что одно изображение наезжает на другое, что это и с чем связано и как это вылечить. И если не сложно обьясните пожалуйста особенности position: absolute. Как я понимаю float и absolute вместе не работают ? Как я понимаю float и absolute вместе не работают ? При том еще есть проблема, когда я уменьшаю окно браузера, контент как бы сжимается в непонятную хурму, друг на друга, как это исправить ?
  13. <div class="center-menu"> <div class="center-bar-one"> <h1> Новости </h1> <p>Сегодня 21 января было совершено нападение на одного из наших брокеров, прямо у дверей московской фондовой биржи. Нападающий выскочивший из за угла был одет в черный костюм с красным галстуком и в маске напала на олега олежина после чего скрылся и его след простыл. Олежин был немедленно госпитолизирован, мвд по московской области ведет расследование.</p> </div> </div> Вот хтмл код этого элемента .center-bar-one { float: left; width: 150px; height: 200px; font-size: 11px; color: blue; } Когда я прописываю размер шрифта и в коде присутствует тег <p>, то размер шрифта не меняется. Если прописать например цвет, то никаких проблем нет. Когда убираю тег <p> то шрифт меняется. В чем дело? помогите