Jump to content

Search the Community

Showing results for tags 'height'.

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

  • Development
    • HTML Coding
    • JavaScript
    • PHP
    • CMS
    • Database
    • Web Server
    • Web-site Development
    • Internet Marketing, SEO
  • Library
    • Tricks and solutions
    • Books
  • Commercial services
    • Freelance
    • Job
    • Goods and Services
  • Our Forum
    • Flame
    • Contests
    • Feedback and Ideas

Find results in...

Find results that contain...


Date Created

  • Start

    End

Last Updated

  • Start

    End

Filter by number of...

Joined

  • Start

    End

Group

Web site

Telegram

Signal

Viber

Skype

From

Interests

Found 19 results

  1. Grasss
    Имеется div блок (height:50px; width:400px;) При наполнении контентом, высота div'а должна автоматически увеличиваться. Нужен скрипт, который будет выполнять эту задачу.
  2. maxfloyd
    Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно) Код: https://jsfiddle.net/aemjkhp9/
  3. WhatIsHTML
    Необходимо сделать высоту блоков на скриншоте, одинаковой. Для задания одинаковой высоты у Semantic UI есть классы "equal height". Пример тут http://jsfiddle.net/ozk615p6/35/ "equal height" задается внешнему блоку, а дочерним элементам будет задана одинаковая высота. Проблема в том, что мне нужно выровнять по высоте не дочерние элементы, по крайней мере не первого уровня вложенности. Моя проблема тут http://jsfiddle.net/ozk615p6/34/ Помогите пожалуйста.
  4. anvar9991
    Не могу решить одну проблему. Как сделать когда браузер увеличивается или уменьшается размер(ширина и высота) изображения не менялся. Как бы он фиксированный. Пример http://mahno.com.ua/en/ (первый блок). У меня с шириной всё нормально, проблема с высотой. Мой пример с проблемой http://davronv4.businesscatalyst.com
  5. kattiperk
    Здравствуйте. Проблема в height: auto; для iOS устройств ниже 6 версии. В контейнере есть картинка, которая имеет свойства width: 100% и height: auto; Но iOS отказывается понимать и тянет на всю высоту, оставляя ширину в порядке. То есть картинку изрядно плющит. Нашла пару запросов, но советовали только height: auto !important; С высотой работает через медиа запрос для aspect ratio. Но интересно, может есть заклятье?
  6. kattiperk
    Здравствуйте. Может, кто-то сможет подсказать? Есть что-то вроде тултипа - всплывает при наведении напротив каждого пункта. Но считает только top. А хотелось бы его отцентрировать, но высота тултипа может быть разной. Код ниже. Сайт - http://top-matras.ru/seriya-premium/hardstyle-medium-s1000/, тултип в "Составе модели" function layers_box_open(o) { var _id = $(o).attr('data-layersLink-key'); if (_id) { var top = (($("[data-layersLink-key='"+_id+"']").offset().top)-$(".js-layers_wrap").offset().top); $('.layers_box_wrap', '.js-layers_key-' + _id).css({'visibility':'visible', 'top' : top + 'px'}); }}
  7. vladimirpodr
    Есть HTML код: <div class="figure"> <div class="text"> <p>Текст</p> </div> <div class="image"> <img width=568px src="images/cont.jpg"> </div> </div> Проблема в том что картинки подгружаються с разной высотой и нужно, чтобы блок "figure" имел высоту соответственно картинке, а на выходе получается 0. Также проблема назначить блоку "text" высоту блока "figure". Соответственно CSS код: .figure { margin-bottom: 15px; margin-left: -70px; padding: 10px; border-style: solid; border-width: 1px; border-color: rgb(102, 102, 102); width: 1204px; height: auto; } .figure div { margin:0; padding: 0; } .figure4 .image{ width: 48%; position: relative; float: right; } .figure4 .text{ width: 52%; position: relative; float: left; padding: 20px 25px 0 290px; }
  8. ekkl
    При клике на некоторых ссылках на странице должен отобразится плавающий блок, высота которого средством css анимации изменяется от нулевой до некоторой фиксированной высоты. В начале анимации, когда весь контент не помещается, он сильно пождат вверх, и только вконце стает на свое место. Это выглядит примерно так. Вот этот пример: http://jsbin.com/wekixa/1/edit?html,css,js,output Браузер: Фаерфокс, версия 41.0.1 Методом тыка установил, что если не писать $('#confirm a[role="cancel"]').focus();То все нормально. Как можно изменить поведение, чтобы содержимое блока не подскакиволо вверх. Перепробывал всевозможные способы например, top: 0 и тому подобные. Не помогло.
  9. Vitaliy2121
    Здравствуйте форумчане. Проблема вроде бы известная но я ни где не могу найти ее решение. Проблема такова, на странице мало текста. Меньше чем высота экрана, нужно растянуть страницу так что бы фон закрывал весь экран. Вот html код страницы: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width"><link href="http://vab.96.lt/style.css'>http://vab.96.lt/style.css" rel="stylesheet"><title>Новости</title></head><body><div class="osnova"><text style="font-size: 30px">06.10.15</text> <p class="l">Всем привет.<img src="http://vab.96.lt/news/img/hi.png" width="20" height="20"> Сегодня выбран окончательный дизайн для сайта. В дальнейшем основной целью станет наполнение сайта различным контентом. Оставайтесь с нами.</p><hr><a href="http://vab.96.lt">Главная</a></div></body></html> Вот код css: html{height: 100%;margin: 0px;}body{height: 100%;background: url(http://vab.96.lt/img/bg-2.png) ;font-size: 20px;margin: 0px;}@font-face{font-family: Cassandra;src: url(http://vab.96.lt/font/Cassandra.ttf);}test.logo{font-size: 350%;}p.l{text-align: left;margin: 0px auto; word-break: break-all;word-spacing: 3px;padding: 10px;}.osnova{word-wrap: break-word;font-family: Cassandra;margin: 0px auto;background: url(http://vab.96.lt/img/bg-3.png) ;width: 100%;min-width: 400px;max-width: 600px;border: 1px solid #848484;color: white;text-align: center;}a{font-size: 20px;color: #58FA58;text-decoration: none;}a:hover{font-size: 19px;text-decoration: none;color: #E6E6E6;}a:active{text-decoration: none;font-size: 19px;color: #E6E6E6;}a:visited{color: #81F781;text-decoration: none;}button.but{border: 1px solid #BDBDBD;font-family: Cassandra;border-radius: 10px;background: none;font-size:37px;color:#58FA58;width: 90%;height: 70px;margin-bottom: 0.4em;text-decoration: none;}button.but:hover{width: 87%;height: 70px;font-size:35px;box-shadow: 0px 0px 14px 1px #F7819F;}button.but:active{width: 86%;}Пробовал делать так: <html style="height:100%"> - не помогло; html{height:100%;} - не помогло; <html style="height:100vh"> - не помогло; html{height:100vh;} -не помогло; Для body тоже самое писал - не помогло; Писал и для html и body вместе - не помогло; min-height - хоть в процентах хоть в vh хоть в px не помогает. Пробовал position - не помогает. Есть еще идеи? P.S если хотите посмотреть оригинал сайта зайдите c телефона на http://vab.96.lt/news/news1.php. Я там ничего менять не буду пока не решу данную проблему. P.P.S может просто добавить больше тегов <br> и все?
  10. Sergo Skiller
    Решил поупражняться в верстке, сделал фиксированный верхний и левый бар, принялся за контент, но слой в который вложена аватарка имеет нулевую высоту, применение height, max-height, min-height с указанием значения в % не приводит ни к какому результату, только фиксированное значение "N px" регулирует значение высоты слоя. И самое интересное: если я вставляю текст, то слой появляется и его высота равна занимаемой текстом высоте. Вот как это выглядит без текста: http://storage8.static.itmages.ru/i/15/0106/h_1420526624_5424836_8e46b4d33d.png Вот как это по идеи должно выглядеть: http://storage8.static.itmages.ru/i/15/0106/h_1420528235_8284072_2c67e7a154.png Вот как это выглядит с текстом: http://storage6.static.itmages.ru/i/15/0106/h_1420528483_6607401_0d601a9bc7.png Ссылка на архив с файлами (если кто возьмет, мне не жалко): https://yadi.sk/d/_dwboiXmdoebL Подскажите, пожалуйста, почему слой <div id="content"> имеет нулевую высоту хотя контент в нем есть, и почему применение свойств высоты в процентах и auto не приводят ни к какому результату. Вот код: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <style> /* Fonts */ @font-face{ font-family: KremlinCTT; src: url(fonts/KREM.otf), url(fonts/KREM.ttf), url(fonts/KREM.woff); } /* End fonts */ body, html{ margin:0px; padding:0px; background: url(img/bg_top.gif) #d6d6d6 repeat 0 0 fixed; width: 100%; height: 100%; } a{ text-decoration: none; } /* Header */ #header{ height:50px; width:100%; background-image: url(img/head_bg.png); position: fixed; left: 0px; top: 0px; right: 0px; z-index: 100; } #top_menu{ width:80%; max-width: 1024px; min-width: 900px; margin-left: auto; margin-right: auto; } #logo{ background-image: url(img/logo.png); max-width:162px; height:50px; margin-top: 0px;" } #top_menu_element{ height: 50px; /*float: left;*/ float: right; color: #fff; font-size: 22px; font-family: sans-serif; padding-top: 10px; padding-left: 7px; padding-right: 7px; font-family: KremlinCTT; } .top_menu_element{ height: 50px; /*float: left;*/ float: right; color: #fff; font-size: 22px; font-family: sans-serif; padding-top: 10px; padding-left: 7px; padding-right: 7px; font-family: KremlinCTT; } #top_menu_element_hover{ height: 40px; /*float: left;*/ float: right; color: #fff; font-size: 22px; font-family: sans-serif; padding-top: 10px; padding-left: 7px; padding-right: 7px; font-family: KremlinCTT; background: #000; opacity: 0.35; filter: alpha(Opacity=35); border: 0px; border-radius: 10px; } /* End Header */ /* Content */ #container{ width:80%; max-width: 1024px /*900px*/; min-width: 900px; border: 0px solid #000; margin-left: auto; margin-right: auto; margin-top: 50px; } #content{ margin-left: 162px; min-width: 738px; background: #eaeaea; } #left_menu{ width: 152px; height: 100%; min-height: 100%; float: left; border-left: 10px groove rgba(0, 0, 0, 0.55); background:; position: fixed; top: 50px; bottom: 0px; background: rgba(0, 0, 0, 0.40); } #left_menu_elements{ height: 30px; padding-left: 10px; font-family: verdana; font-size: 14px; padding-top: 10px; color: white; } #left_menu_elements:hover{ height: 30px; padding-left: 10px; font-family: verdana; font-size: 14px; padding-top: 10px; color: white; background: rgba(0, 0, 0, 0.75); } #photo_and_info{ width: 225px; height: 360px; float: left; margin-top: 10px; margin-left: 10px; margin-right: 5px; background: rgba(0, 0, 0, 0.55); } #photo{ width: 225px; height: 225px; padding-left: 2px; padding-right: 2px; } #name{ padding-left: 10px; color:; font-size: 18px; z-index: 2; } #online{ width:15px; height: 15px; background: #0af110; border: 0px solid #0af110; border-radius: 50%; position: relative; bottom: ; top: 210px; left: 195px; } #avatar{ width: 205px; height: 205px; border: 6px solid #fff; border-radius: 5%; margin-left: 2px; margin-right: 2px; margin-top: 2px; } #info{ width: 225px; } #bg_profile{ height: 360px; background: url(img/1.jpg); } /* End content */ </style> </head> <body> <div id="header"> <div id="top_menu"> <div style="float: left;"><a href="#"><img onmouseover="this.src='img/logo_hover.png'" onmouseout="this.src='img/logo.png'" src="img/logo.png"></a></div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Выход</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Видео</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Сообества</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Люди</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Общий чат</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'">Игры</div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'"style="float: left; margin-left: 15px;"><img src="img/messages.png"> <small>1</small></div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'"style="float: left;"><img src="img/friends.png"> <small>1</small></div> <div class="top_menu_element" onmouseover="this.id='top_menu_element_hover'" onmouseout="this.id='top_menu_element'"style="float: left;"><img src="img/groups.png"> <small>2</small></div> <div class="top_menu_element" style="float: left;"><center>Рублей: 100</center></div> <div class="top_menu_element" style="float: left;"><center>ФБМ:100</center></div> </div></div> </div> <div id="container"> <div id="left_menu" > <a href="#"><div id="left_menu_elements">Моя Страница</div></a> <a href="#"><div id="left_menu_elements">Мои Фотографии</div></a> <a href="#"><div id="left_menu_elements">Мои Аудиозаписи</div></a> <a href="#"><div id="left_menu_elements">Мои Видеозаписи</div></a> <a href="#"><div id="left_menu_elements">Мои Блог</div></a> <a href="#"><div id="left_menu_elements">Мои Новости</div></a> <a href="#"><div id="left_menu_elements">Мои Закладки</div></a> <a href="#"><div id="left_menu_elements">Мои Гости</div></a> <a href="#"><div id="left_menu_elements">Мои Документы</div></a> <a href="#"><div id="left_menu_elements">Мои Настройки</div></a> <a href="#"><div id="left_menu_elements">Реклама</div></a> <a href="#"><div id="left_menu_elements">Приложения</div></a> </div> <div id="content"> <div id="photo_and_info"> <div id="photo"><!--div id="online"></div--><img src="img/no_avatar.png" id="avatar"></div> <div id="info"> <div id="name">Имя Фамилия</div> </div> </div> </div> </div> </body></html>
  11. parzhitsky
    Сверстал себе обычную, ничем не примечательную страничку. В ней есть таблица. Для этой таблицы выставлено CSS-свойство: height: 100%;То есть, высота таблицы выставлена "на полную мощность" - на всю высоту документа. Вся эта благодать работает ровно до того момента, как я добавляю в начало документа тег: <!DOCTYPE HTML>который просто-напросто обрезает мне высоту таблицы до высоты содержимого. И теперь, чтобы изменить высоту таблицы, я должен объявлять её абсолютными величинами (в пикселах, дюймах, метрах или километрах – как угодно, но уже не в процентах). Объясните мне, пожалуйста, что происходит?
  12. manas_anarov
    Изображение растянулось. В браузере который стоит в Debian 7.5 KDE, толи Konqueror, толи Сonqueror, в одном из них. <img src="http://www.site.ru/market/3/x3.jpg" align="top" alt="моя фотография" height=20% width= 20% >В других браузерах работает по другому, там получилось ровно, как мне нужно.
  13. maxakagaret
    Приветствую профессионалов и новичков html/css Столкнулся со старой проблемой - как растянуть див по высоте родителя. Не кидайте в меня тапком и не отсылайте в гугл, ибо моя проблема несколько отличается от привычной. В верстке я использовал bootstrap, а конкретнее колоночную верстку (col-lg, col-md, col-sm и так далее). Выглядит это так: Как можно заметить, левая колонка не дотягивает до низу. Точнее не дотягивает полупрозрачный коричневый фон. И все бы ничего, можно было бы использовать старый добрый "margin-bottom:-6000px; padding-bottom:6000px;", но при разрешении экрана 320/480 (читай смартфон) колонки встают друг за другом по вертикали, вот так: И полупрозрачный фон коричневой колонки накладывается на полупрозрачнвй фон белой колонки, в результате чего фон последней становятся грязно-серым. Есть ли решение для данного случая - то есть, чтобы блок тянулся по вертикали до нижнего края родителя или до следующего блока.
  14. chubrik
    Помогите, пожалуйста, сверстать без JS следующую конструкцию: Всё, что я перепробовал, давало различные проблемы: выталкивание зелёного блока за пределы таблицы, растягивание цветных блоков на всю высоту экрана или скучивание в центре ячейки в одном из браузеров. UPD. Вот пример, как всё должно быть (двигаем границу окошка и смотрим на растягивание красного блока) В примере использован JavaScript, а я ищу возможность обойтись без него.
  15. mogdalov
    Помогите разобраться! Есть 4 блока. Первый, второй и четвертый фиксирован по высоте (height задан в px), а третий блок должен быть резиновым, но при минимальном количестве информации он должен растягиваться так, чтобы футер был самой крайней точкой, как на скриншоте, только без полосы прокрутки. Что не пробовал, никак не могу реализовать. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>123</title> <meta name="robots" content="index, follow"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="header"> <div class="logo"><a href="http://flexotex.by"><img src="pic/logo.png" alt="Flexotex"></a></div> </div> <div id="navi"> </div> <div id="maket"> <p>Ну что расскажешь?</p> </div> <div id="footer"> </div> </body> </html> body, html { margin:0px; padding:0px; height: 100%; background:#FDFDFD; } #header { width:900px; height:64px; margin:0 auto; box-shadow: 0 0 10px rgba(0,0,0,0.5); /*Параметры тени*/ background:#FDD800; } #navi { width:900px; height:30px; margin:0 auto; margin-top:20px; box-shadow: 0 0 10px rgba(0,0,0,0.5); /*Параметры тени*/ background:#FFFFFF; } #maket { width:900px; margin:0 auto; min-height:80%; /*border: solid 3px black;*/ box-shadow: 0 0 10px rgba(0,0,0,0.5); /*Параметры тени*/ background:#FFFFFF; /*padding: 10px;*/ margin-top:20px; } #footer { width:900px; height:50px; margin:0 auto; margin-top:20px; box-shadow: 0 0 10px rgba(0,0,0,0.5); /*Параметры тени*/ background:#FDD800; } .logo { margin-top:10px; margin-left:10px; float:left; }
  16. The Norb
    Здравствуйте, уважаемые форумчане! У меня возникла небольшая проблема при вёрстке сайта. У меня правый сайдбар получился в данный момент больше (по высоте) чем страница с контентом, а это не красиво. Как сделать так, чтобы фон страницы с контентом тянулся до футера? (и сайдбара в противоположном случае) Прикрепляю скриншот чтобы всё было предельно ясно и ссылку на сайт. (прячу под спойлер, т.к. скриншот большой.) Спасибо за уделённое время! P.s. я его ещё конечно не закончил и многое ещё предстоит поправить, но всё же если есть какие-то грубые ошибки - буду признателен если вы мне на них укажите. (валидатором проверял, вроде нормально: http://validator.w3....=Inline&group=0) P.p.s. что вы думаете на счёт такого дизайна? (я конечно понимаю что дизайна здесь кот наплакал, но что могу, стараюсь. А вообще просто интересно )
  17. istepan
    Добрый день. Нужно растянуть div по высоте, который находится внутри button. Не получается сделать это через проценты. Остается только через em. Но мне нужны именно проценты, есть ли еще способ. Вот код: http://jsfiddle.net/mufYx/
  18. nastyamn
    Проблема с кроссбраузерностью мультиселекта. Есть такой селект: <select class="b-task-status-execution" name="ts_status" multiple=""> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> .b-task-status-execution{ border:1px solid #abb1c2; font:normal 12px/16px Tahoma; width:150px; height:100px; } .b-task-status-execution option{ line-height:16px; } http://jsfiddle.net/nastyamn/kQ7ZC/1/ Нужно сделать чтобы не появлялся скролл,т.е. высота селекта была такой чтобы все пункты вмещались без прокрутки. Если прописывать высоту конкретную, то в ff нормально, в Opera и Chrome при такой высоте скролл появляется. Проверяла на другом компе при заданной высоте скролл в ff появляется. Можно ли как-то решить эту проблему? помогите плиз!)
  19. santacruz
    Здравствуйте! Хочу вертикально выравнить таблицу (это может быть что то другое). Хочу это сделать таким образом. Сперва смещаю div на 50% вниз от body, затем поднимаю div на -50% от контента вверх и всё должно встать по центру и соответственно тянуться. По факту div дочка c контентом-таблицей берет -50% от body, а не от содержимого дива родителя. Можно конечно забить данные в пикселях, но очень хочется понять как оно в процентах. Пунктирные рамки добавил для наглядности. Заранее спасибо! <head> <style> body { width:100%; height:100%; margin:0px; padding:0px; } .sample td { margin:0px; padding:0px; height:50px; width:50px; background:black; color:white; </style> </head> <body> <div style="position:relative;height:100%;top:50%;border:red 2px dotted;"> <div style="position:relative;top:-50%;border:blue 2px dotted;"> <table> <tr class="sample"> <td>1.1</td> <td>1.2</td> </tr> <tr class="sample"> <td>2.1</td> <td>2.2</td> </tr> <tr class="sample"> <td>3.1</td> <td>3.2</td> </tr> <tr class="sample"> <td>4.1</td> <td>4.2</td> </tr> <tr class="sample"> <td>5.1</td> <td>5.2</td> </tr> </table> </div> </div> </body>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept