Search the Community
Showing results for tags 'float'.
-
Доброго времени суток. Столкнулся с такой проблемой! https://jsfiddle.net/ysrg47Lh/, когда я делаю ширину левого и правого сайдбара в процентах то у меня все получается и блоки плавают как нужно, но стоит мне задать минимальную ширину левого и правого блока как правый блок смещается в низ под контент. В итоге я не могу сделать так что бы левый и правый сайдбар был фиксированной ширины а контент принимал размер в зависимости от экрана и при этом не скидывал правый сайдбар под себя.
-
Здравствуйте. Вопрос по следующей вёрстке: <!DOCTYPE html> <html lang="ru"> <head> <style> .left{ float:left; background:red; } .no_float { background:green; text-align:center; font-size:30px; } </style> <meta charset="utf-8" /> <title>Документ без названия</title> </head> <body> <div class="left"> float:leftrvrcrvrvr </div> <div class="no_float"> hidbibd </div> </body> </html> Почему текст в блоке с классом no_float не выравнивается по центру, хотя в css это прописывается?
-
Здравствуйте! Пожалуйста, помогите решить проблему. Никак не могу прижать (оранжевый) float элемент с классом .text, к нижней границе (желтого) родителя с классом .main Пример: http://codepen.io/Econavi/pen/bgBXLp
-
<!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". результата не дало -
Доброго времени суток, сразу перейду к делу. Хотелось бы сделать так, чтобы текст лежал под картинкой, желательно по середине. Пользовался algin=bottom, float = bottom. Текст все равно слева. HTML: <div class="point-one"> <img src="../main.img/one.png" class="one" align="bottom"> <span class="origanal" id="prem1"><a href="#" id="show_popup">IRON</a></span> </div> CSS: .one { max-width: 100%; height:auto; } prem1 { float: bottom; } Скриншот, как это дело все смотрится:
-
Здравствуйте, прошу помощи как начинающий и неопытный верстальщик. Проблема заключается в том, что я не могу спозиционировать элементы, как того требует дизайн макета. Подскажите как можно добиться необходимого результата, как на изображении.
-
Нужно расположить блоки, как на макете. Сделал блоки, присвоил им inline-block и 2 строка началась на уровне высокого блока, который должен занимать 2 строки. Что с этим делать?
-
Давно усвоено, казалось бы, флоат элемент вырван из потока. Каким образом margin-top элемента <nav> в потоке добавляет тот же margin-top элементу <div>, вырванному из потока? http://codepen.io/462960/pen/VaWwYQ
-
http://jsfiddle.net/ogb7kbLw/ <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title></title><STYLE>.button-master {border: 1px solid #000;padding: 2px; /* вопрос б *///float: left; /* вопрос в */} .button-slave {padding: 2px;background: #aaa;font-size: 13px;font-weight: bold;border: 1px dashed #fff;color: #fff;}.canvas {display: inline;} canvas {//position: absolute; /* вопрос г *///float: left;}</STYLE></head><body><HEADER></HEADER><SECTION><NAV></NAV><ARTICLE><span class="button-master"><span class="button-slave">Элемент</span></span><div class="canvas"><canvas id="icon01" width="16" height="16" style="border:1px solid red;"></canvas></div><div class="canvas"><canvas id="icon02" width="16" height="16" style="border:1px solid green;"></canvas></div><div class="canvas"><canvas id="icon03" width="16" height="16" style="border:1px solid blue;"></canvas></div></ARTICLE></SECTION><FOOTER></FOOTER></body></html>Несколько вопросов вызывает данный код. а. Почему элементы изначально позиционированы не ровно, здесь какой тип элементов canvas или span не ровный по высоте? На jsfiddle они ровные, что странно, проверьте всё-же в IE. Далее по порядку, каждый вопрос это закомментированный в коде стиль, применяется только отдельно, но не все сразу. б. Для .button-master padding два пикселя. Почему если его закомментировать .button-slave по высоте выходит за границы родительского элемента .button-master? в. Почему если раскомментировать float для button-master тогда элементы все ровняются, но по верхнему краю? г. Почему если раскомментировать position для canvas, эти элементы ровняются по центру, что мне и нужнее всего. Но при этом они создают коллапс, все позиционируются в одно место, один в другой. Какое решение здесь можно применить? UPD. Определил способ позиционировать canvas. Установить для canvas position: relative; и далее позиционировать по высоте top; относительно родительского div. Но всё-же интересуют все соображения по вопросам.
-
Уважаемые форумчане, скорее всего дико туплю но хотелось бы разобраться. после просмотра данного видео урока по созданию менюшек ( ) возник вопрос. На 15:55 минуте он задает ширину для li и после этого выпадающие пункты которые до этого были "float: left" почему то выстраиваются вертикально. Что за ....? по какому праву .....? для меня загадка.
-
http://www.cssdesk.com/pHc4m Нужно параграф разместить поверх баннера справа с помощью float (учебное задание). Объясните, пожалуйста, что не пропускает параграф вверх?
-
работаю над галереей, разрезинил div c изображениями добавив float:left все прекрасно но некоторые блоки с изображениями имеют разную высоту (ширина всегда одинаковая) и так получается что последующий блок зацепляется за самый высокий предыдущий блок, и выглядит не красиво((( Во вложении пример: взглянуть можно тут: http://wfi.lomasm.ru/русский.галерея если смотреть При разных разрешениях особенно заметно Требуется насильно держать плавающие блоки на одной строке: Как лучше это сделать? 1) javascript выставить всем блокам в одной строке высоту максимально высокого блока? 2) или как-то можно разрулить при помощи CSS, пока не въехал как.... Ищется самое простое и элегантное решение
-
После прочтения небезызвестной статьи на Хабре по поводу флоата: http://habrahabr.ru/post/142486/ Решил попрактиковаться, но не работает почему-то((Мой код иэ Брэкетса: http://clip2net.com/s/3oBGMRfПочему у меня не срабатывает "display: inline" для li ?Может потому что в статье речь идет о картинке, а у меня просто элементы списка? Подскажите!
-
как сделать чтобы флотунтые элементы не съезжали на новую строку
WarrenBuffett posted a question in HTML Coding
Подскажите пожалуйста как сделать чтобы флотунтые элементы не съезжали на новую строку при ширине окна браузера меньше 800px Ставил им inline и white-space: nowrap не помогло. http://codepen.io/sharov/pen/XbqRqd -
Здраствуйте у не могу сверстать один блок, нужно сделать бирку о скидках, у меня бок виден за рамками родителя, как быть? вот код: HTML - <div class="coll"> <div class="salesban">sales</div> <img src="img/sell3.png" alt="img"> <h3 class="sal">$30.00</h3> <div class="hov"> <h3>new STELLA MCCARTNEY</h3> <ul class="star"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> <h3><a href="#">add To Cart</a></h3> <ul class="add"> <li><a href="#"><span class="red"> + </span>add To Compare</a></li> <li><a href="#"><span class="red"> + </span>add To Wishlist</a></li> </ul> </div> </div> CSS /*Стиль блока родителя*/ .sale .coll { position: relative; width: 25%; margin-right: 0px; box-sizing: border-box;}/*Стиль блока которого поместить во ливый угол*/.salesban { position: absolute; background: #fe5252; -moz-transform: rotate(-36deg); -ms-transform: rotate(-36deg); -webkit-transform: rotate(-36deg); -o-transform: rotate(-36deg); transform: rotate(-36deg); top: -20px; left: -50px; width: 134px; text-align: center; color: white; z-index: 0; padding: 30px 0px 10px; }
-
Доброе время суток. Не получается заставить работать clearfix, центральный блок уходит вниз. Прошу вашей помощи html: css: И вот так это выглядит:
-
Привет, форумчане! Подскажите, как можно выровнять div по правому краю без использования flot и относительного либо абсолютного позиционирования. Имеется вот такой вот div.pagination, внутри которого лежит div.pages, что и нужно сдвинуть в правую сторону блока pagination: http://joxi.ru/gmvjVqJuM9XQma Для вложенного блока установил свойство 'display: inline-block'. Пробовал сдвинуть с помощью text-align - не помогло И margin'ы тоже не выручают. Что посоветуете? Заранее спасибо!
-
http://jsfiddle.net/3ac5c88a/ почему block1 вылез вверх? не пойму совсем
-
Здравствуйте, уважаемые форумчане. Такой вопрос: Если использовать float, то объект как бы вырывается из верстки, тоесть если <div id = "main"> <div id="left"></div> <div id="right"></div></div><style> #main{ background-color: #fff; } #left{ float: left; } #right{ float: right; }</style>то объект main будет нулевого размера. Правильно? А как сделать, что бы left и right не вырывались из main?
-
Помогите, не могу понять. Вот такой html: <body><div id="header">Header</div><div id="content"><div id = "cnt">Content asdfasdf </div><div id = "menudiv"><ul id="menu"><li><a href="">Home</a></li><li><a href="">Products</a></li><li><a href="">Clients</a></li><li><a href="">Contacts</a></li></ul></div></div></body> Вот такой css: #header {width: 800px;height: 150px;background: #ccc;margin: 0 auto 10px;border-radius: 5px;padding: 10px;}#content{position: relative;width: 800px;background: #ccc;height: 500px;margin: 0 auto;border-radius: 5px;padding: 10px;} #cnt{} #menudiv{left: -85px;top:5px;width: 150px;height: 300px;float: left;position: absolute;} #menu{list-style-type: none;}#menu li {background: #bbb;display: block;margin-bottom: 10px;border-radius: 5px;padding: 5px;cursor: pointer;}#menu li a{text-decoration: none;color: #fff;} #menu li:hover {background: #07D8FF;} Div "cnt" не обтекает . что я делаю не так? margin в 120px у него не хочу прописывать, хочу чтобы текст в нем обтекал дальше после того как закончится div "menudiv".Может кто посоветует что сделать. Заранее благодарен
-
Всем привет! Подскажите, пожалуйста, почему может не работать float или display:inline-block? Т.е. они как бы работают. Верхние и нижние границы между элементами схлопываются, но по горизонтали не выстраиваются.
-
Вряд ли за две недели можно изучить с нуля html, но я делаю сайт для себя и профессионально заниматься этим не собираюсь)), так что не сильно бейте. Собственно решел не шаманить на главной странице со всякими разворачивающимися блоками, а просто разместить их в стиле win8 - плитками разной величины. Вот что у меня сейчас выходит: http://jsfiddle.net/gp7GK/5/ Хотелось бы, чтобы профи проверили правильность моих действий)). 1. Пока не понял как правильно разместить текст внутри блоков, так чтобы его отступы не выталкивали "p" за границы "divа". И заставить текст вмещаться в границы родительского блока. 2. Если убрать блоки "clear" в концах секций, то получается какая-то фигня (по моему называется схлопывание), тоже разбираюсь с этим. Но если выставить 100% высоты для секции в которой сидят мелкие блоки, то вроде как все, как надо смотрится и аналогично если выставить блокам inline-block. 3. Что лучше использовать для цвета: rgb или через #..... ? 4. Правильно ли использовать размеры в "px", если мне нужны четкие размеры всего от шрифтов до границ блоков? Заранее спасибо)).
-
Доброго времени суток всякому сюда зашедшему. В общем сразу к проблеме. Делаю сайт на wordpress, нашёл подходящую тему, все настроил, но есть одно "но". Меню. На демке шаблона (http://demo.mythemeshop.com/s/?theme=Playbook) видно, что меню растянуто на всю ширину страницы. Я же хочу сделать меню по ширине внутреннего, белого блока. Собственно, вот кусок кода: .secondary-navigation {display: block;float:left;width:100%;background: url(images/bg1.jpg) 0 0 repeat;} Ширина белого блока - 1015px, соответственно width:1015px; Остается отцентровать меню, но тут появляется проблема. Когда я убираю флот, исчезает бэкграунд менюхи. http://lazurnaya-crimean.com Как быть, как поступать? Буду очень благодарен любому совету.
-
Есть сайт в разработке, и вот на этой странице наблюдается странный баг, больше не знаю как назвать - http://arteidos.ru/rubashka1 Левая колонка имеет свойство float:left, правая margin-left на ширину левой. Т.е. по идее, всё что находится в правой колонке должно выводиться без каких-либо проблем. Однако, как видно, мини фотки имеют неприлично большой отступ сверху. Отсуп этот берётся из-за левой колонки, а точнее из-за календаря, а ещё точнее из-за его контейнера с id="Calendar", там где он кончается, там и начинаются фотки в правой. При удалении потрохов этого контейнера картина не меняется. При этом верхний контент в правой колонке, идёт как положено. Короче, полный бред! Я перепробовал всё что можно, и до этого сто раз пользовался таким способом двухколоночного макета, и никаких подобных глюков не наблюдалось. Для наглядности контейнеру календаря выделил высоту 500px. Зарегистрировался на форуме специльно, в надежде, что кто-нибудь даст ответ.
-
Впервые взялся сегодня за Bootstrap 3 (до этого немного знал 2-ю версию). Столкнулся с такой проблемой codepen.io/anon/pen/Kzkfw?editors=110 Если закомментировать float в последнем блоке CSS — то блок контента и меню сайдбара выравниваются по верхнему краю. Но с float контент съезжает вниз. Помогите разобраться, из-за чего это происходит. И как это победить (желательно без откровенных костылей, типа подтягивания блока контента вверх). (Кроме своего CSS, к коду на CodePen подключен bootstrap 3, но я не думаю, что это их баг)
